Ускорение вашего сайта – непростая задача. В этой статье я расскажу про бесплатный инструмент Google PageSpeed Insights, который проводит типовой анализ сайта – этого бывает вполне достаточно. Но если вы хотите качественно улучшить работу сайта, то я рекомендую инструмент Аудит сайта – он изучит ваш сайт на важные технические ошибки и составит инструкцию по их исправлению. Бывает трудно определить, что заставляет ваш сайт работать медленнее.
Ускорение вашего сайта – непростая задача. Бывает трудно определить, что заставляет ваш сайт работать медленнее. Вашей проблемой может быть что угодно – от замусоренного и плохо написанного кода, до изображений или каких-то других больших элементов страницы. И вам нужно быстро диагностировать и устранить эти проблемы. Поисковики отдают предпочтение сайтам, которые загружаются быстро. Чем быстрее загружается сайт, тем ниже показатель отказов. Если ваш сайт быстрый, у вас больше шансов увеличить трафик в Google, по сравнению с медленными сайтами.
Google PageSpeed Insights (проверка скорости сайта гугл) – отличный инструмент, который анализирует веб-страницу и предлагает решения, позволяющие ускорить ее загрузку. Он очень полезен на начальной стадии, когда разработали сайт и нужно провести аудит быстродействия, подготовить чек-лист для оптимизатора. Мы рассмотрим, как использовать и работать с рекомендациями по скоросит загрузки сайта Google Page Speed.
Интерфейс Google PageSpeed Insights
Чтобы начать работу, откройте инструмент PageSpeed Insights и введите URL вашего сайта в соответствующее поле, затем нажмите “Анализировать”:
Появится строка выполнения, Google-бот посетит ваш сайт на мобильном и десктопном устройствах, проведет несколько основных тестов и выдаст отчет. Он расскажет, что нужно знать о вашем сайте и что может мешать его быстродействию.
Вот как выглядит мой отчет:
Вам будет показана общая оценка вашего сайта (оценка из 100), как для десктопного, так и для мобильного сайта, отдельно по скорости загрузки страницы (быстрая, средняя, медленная) и качеству оптимизации сайта:
- Low (красный) – свидетельствует о медленной загрузке страницы.
- Medium (оранжевый) – страница испытывает некоторые проблемы с быстрой загрузкой, но не критические.
- High (зеленый) – страница загружается быстро.
Скорость загрузки страницы замеряется по Cобытию первой отрисовки контента (FCP) и DOM Content Loaded (DCL):
Отчет состоит из 3 разделов:
- Информация о скорости загрузки страницы – показывает количество операций и обращений к серверу при загрузке страницы;
- Предложения по оптимизации – чек-лист того, что нужно внедрить на странице для улучшения скорости;
- Внедренные приемы оптимизации – показывает то, что уже оптимизировано на сайте.
Давайте пройдемся по всем рекомендациям Google PageSpeed, чтобы понять как их использовать.
Читайте также: Оптимизация под голосовой поиск
Рекомендации Google PageSpeed Insights
1. Сократите время ответа сервера
Нормальным показателем будет 200-500 мс (0,2-0,5 с). Все что выше – Google уже отмечает.
Многое зависит от хостинга, а именно конфигурации и настроек сервера. Если он недостаточно мощный – могут возникать задержки в ответе сервера.
Также большое количество разных плагинов на сайте, которые постоянно обращаются к базе данных, могут увеличивать нагрузку на сервер, и тем самым создавать проблемы: при большом количестве просмотров сервер падает, возникают разные неполадки и задержки.
Как дополнительный вариант, можно отключить все ненужные службы, работающие на сервере, чтобы увеличить скорость.
Но самая большая разница, которую я заметил, чтобы уменьшить время отклика сервера, достаточно перейти на новую версию PHP, например PHP 7. Разные отчеты в интернете показывают увеличение скорости на 20-50% с переходом на PHP 7.
Читайте также: Как улучшить позиции сайта в мобильной выдаче
Итак, подытожим, что можно сделать для увеличения время ответа сервера:
- перейти на более современный и быстрый хостинг с поддержкой PHP 7
- изменить или обновить версию CMS сайта
- отключить или удалить все ненужные, устаревшие и “тяжелые” плагины на сайте, уменьшив таким образом количество обращений к базе данных и снизив нагрузку на CPU сервера
- очистить базу данных сайта от лишних записей, что также уменьшит использование CPU
Больше рекомендаций по оптимизации сервера в документации Google:
https://developers.google.com/speed/docs/insights/Server
2. Оптимизируйте изображения
Основная причина медленной загрузки страниц и низких баллов в PageSpeed Insights – большие изображения.
К примеру, для ПС Google все, что превышает 100 Кб считается большим.
Как только я сжал все свои изображения на сайте – получил огромное прибавление в скорости.
Если вы используете WordPress, один из лучших способов сжать изображения, не потратив много времени, использовать плагин. Мой любимый плагин для использования – WP Smush Image Compression and Optimization:
Если ваш сайт страдает из-за большого количества больших изображений, то их просто нужно сжать. Например, при сохранении в Photoshop качество сжатия jpeg-файла должно быть не выше 85%. В большинстве случаев нет никакой потребности указывать столь высокое значение. Некоторые веб-дизайнеры часто упоминают магическое число “51” для сжатия jpeg, но вы можете сами оценить, насколько можете уменьшить качество.
Бесплатные сервисы для сжатия изображений:
Более детально об оптимизации изображений:
https://developers.google.com/speed/docs/insights/OptimizeImages
3.Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Некоторые скрипты и стили, расположенные в самом верху страницы в header, блокируют отображение страницы.
Рекомендуется очень громоздкие скрипты переносить из верхней части сайта в нижнюю, например в footer. Или же попытаться разбить скрипты на несколько маленьких подгружаемых файлов, что увеличит скорость загрузки медленной страницы.
Детальнее о блокирующих элементах кода в документации Google:
https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS
4. Используйте кеш браузера
Кэширование браузера или Leverage browser caching – еще один инструмент, который может оказать большое влияние на скорость страницы. Получение ресурсов для загрузки вашего сайта требует больших усилий. Он требует загрузки каждого элемента изображения и страницы, а затем имеет дело с тяжелым HTML и кодированием. Каждый раз, когда кто-то загружает ваш сайт, этот процесс должен происходить снова и снова. Ваш сайт будет слишком долго загружаться. И именно здесь может помочь кэширование.
Кэширование позволяет вашему браузеру «помнить» определенные элементы, которые были недавно загружены – заголовок, навигация, логотип и т. д. Чем больше элементов браузер может кэшировать, тем меньше элементов он должен загружать, когда пользователь делает запрос и, в конечном счете, быстрее загрузится страница. Google рекомендует минимальную политику кэширования в течение одной недели, а для элементов, которые в основном остаются неизменными, предпочтительнее один год.
Он работает путем «запоминания» ранее загруженных ресурсов, поэтому ему не нужно перезагружать их при каждом посещении. Когда посетитель веб-сайта перемещается на новую страницу вашего сайта, все ваши данные, например, логотипы и нижние колонтитулы, больше не нужно загружать. Это приведет к значительному увеличению скорости!
Читайте также: Как использовать og image
5. Сократите JavaScript и CSS
Сведение к минимуму пространства, которое занимает ваше кодирование в формате Java Script, является еще одним важным фактором получения идеального результата от Google. Минимизация – это процесс удаления или исправления ненужных или дублированных данных, не влияя на то, как браузер будет обрабатывать HTML. Он включает в себя исправление кода, форматирование, удаление неиспользуемого кода и сокращение кода, когда это возможно. И еще раз, благодаря потрясающим плагинам WordPress, вам не нужно быть гением программирования, чтобы исправить это.
Желательно начать с валидации всего HTML-кода сайта: https://validator.w3.org
Список сервисов для оптимизации JavaScript:
Список сервисов для оптимизации CSS:
Детальнее об оптимизации JavaScript и CSS файлов в документации Google:
https://developers.google.com/speed/docs/insights/MinifyResources
6. Включите сжатие
Существует большой объем данных, которые необходимо передавать между серверами и пользователями при доступе к сайту. К счастью, есть способ сжатия передаваемой информации. Он называется – gzip (от GNU Zip).
Пользователи WordPress могут включить gzip сжатие, установив плагин GZip Ninja Speed Compression.Читайте также: Советы для SEO по WordPress.
На многих хостингах gzip-сжаите уже включено по умолчанию, но вы можете проверить включено оно или нет на вашем сайте с помощью сервиса: https://checkgzipcompression.com/
Детальнее о сжатии в документации Google:
https://developers.google.com/speed/docs/insights/EnableCompression#-
7. Мобильная версия
Все рекомендации выше касались десктопной версии сайта. Для мобильной они мало чем отличаются, но связаны с работой сайта под смартфоны и планшеты. Думаю, не стоит рассказывать вам, насколько важны обе, особенно с введением Mobile first Index в Google. Большую роль тут играет адаптивность и наличие AMP-страниц (Accelerated Mobile Pages). Что выбрать – мобильную версию или качественную адаптивную верстку – читайте в статье: Мобильный поиск в современном SEO
конверсии вашего сайта
в Яндекс-Директ
Уже скачали 1348 раз
Выводы
В целом, Google PageSpeed Insights – полезный инструмент, но нужно понимать, что он не является “мерилом” скорости сайта, а средством SEO аудита с точки зрения быстродействия сайта. Если нужно проверить реальную скорость – для этого существуют такие сервисы как GTMetrix, Pingdom или WebPageTest. PageSpeed же соберет для вас полезную информацию по проблемным зонам, тормозящие сайт и предоставит чек-лист для оптимизатора.
Так же, на мой взгляд, не стоит гнаться за 100/100 оценками в PageSpeed Insights. В некоторых ситуациях это практически невозможно. Чтобы их достичь, иногда нужно пойти в ущерб функциональности сайта. Да и не все рекомендации могут быть безопасными. Например, если перенести CSS в нижнюю часть страницы, как рекомендует PageSpeed, веб-страница будет сперва подгружаться без стилей, что конечно же увеличит количество отказов.
Самое главное – это выявить и проанализировать основные ошибки сайта и вовремя начать работать в направлении улучшения его быстродействия.
Экспертиза
Google Analytics, анализ данных, поисковый маркетинг, SEO, психология, поддержка клиентов, маркетинговые исследования.
Опыт работы
Google Analytics: анализ данных, создание пользовательских отчетов, настройка целей и воронок, отслеживание показателей электронной коммерции. Дмитрий также знаком с Google Tag Manager и использовал его для отслеживания событий и поведения пользователей на сайтах.
Анализ данных: различные инструменты, такие как Excel, SPSS и R, для анализа данных и получения выводов. Дмитрий также хорошо знаком со статистическим анализом и использовал его для выявления тенденций и закономерностей в данных.
Поисковый маркетинг (SEM) и SEO: опыт оптимизации рекламных кампаний для Google AdWords, Bing Ads и других платформ. Исследование ключевых слов, оптимизация страниц и создание ссылок для SEO.
Психология: образование в области социальной психологии, исследования потребительского поведения и принятия решений. Благодаря этому Дмитрий имеет более глубокое понимание того, как думают и ведут себя потребители, которое он применяет в своей работе в области маркетинга и поддержки клиентов.
Оказывая техническую поддержку клиентам, он проводит маркетинговые исследования для получения информации о потребностях и предпочтениях клиентов. Это позволяет лучше понимать поведение пользователей и предлагать эффективные решения их проблем.
Образование
Киевский университет туризма, экономики и права – менеджер – экономист
Киевский национальный университет имени Тараса Шевченко – психолог, психотерапевт
Отраслевые мероприятия
Конференция Sempro в 2016 и 2018 годах
Были ли у вас кейсы, когда доведение до зеленой зоны показателей скорости сайта максимально влияло на трафик?
Были и положительные, и нейтральные. В основном нейтральные.