• 👽 SEO-оптимизация

Улучшаем скорость сайта с помощью Google PageSpeed Insights

  • 17 октября 2021
  • 9 мин.

Ускорение вашего сайта — непростая задача. Бывает трудно определить, что заставляет ваш сайт работать медленнее.

Ускорение вашего сайта — непростая задача. Бывает трудно определить, что заставляет ваш сайт работать медленнее. Вашей проблемой может быть что угодно — от замусоренного и плохо написанного кода, до изображений или каких-то других больших элементов страницы. И вам нужно быстро диагностировать и устранить эти проблемы. Поисковики отдают предпочтение сайтам, которые загружаются быстро. Чем быстрее загружается сайт, тем ниже показатель отказов. Если ваш сайт быстрый, у вас больше шансов увеличить трафик в 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 разделов:

  1. Информация о скорости загрузки страницы — показывает количество операций и обращений к серверу при загрузке страницы;
  2. Предложения по оптимизации — чек-лист того, что нужно внедрить на странице для улучшения скорости;
  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

Выводы

В целом, Google PageSpeed Insights — полезный инструмент, но нужно понимать, что он не является “мерилом” скорости сайта, а средством SEO аудита с точки зрения быстродействия сайта. Если нужно проверить реальную скорость — для этого существуют такие сервисы как GTMetrixPingdom или WebPageTest. PageSpeed же соберет для вас полезную информацию по проблемным зонам, тормозящие сайт и предоставит чек-лист для оптимизатора.

Так же, на мой взгляд, не стоит гнаться за 100/100 оценками в PageSpeed Insights. В некоторых ситуациях это практически невозможно. Чтобы их достичь, иногда нужно пойти в ущерб функциональности сайта. Да и не все рекомендации могут быть безопасными. Например, если перенести CSS в нижнюю часть страницы, как рекомендует PageSpeed, веб-страница будет сперва подгружаться без стилей, что конечно же увеличит количество отказов. 

Самое главное —  это выявить и проанализировать основные ошибки сайта и вовремя начать работать в направлении улучшения его быстродействия.


Руководитель Rush Analytics Дмитрий Цытрош
Просмотров
13409
Рейтинг
5,0/5
Оценить
Комментариев
2
Комментировать
Оцените статью Оценка анонимная
Комментарии
  1. Max
    01 мая 2022 11:41

    Были ли у вас кейсы, когда доведение до зеленой зоны показателей скорости сайта максимально влияло на трафик?

    1
    0
    Ответить
    • Раш Рашич
      04 июня 2022 20:22

      Были и положительные, и нейтральные. В основном нейтральные.

      0
      0
      Ответить
Добавить комментарий

Ваш адрес email не будет опубликован

Rush Analytics

Другие наши статьи

На страницу статей

Получите 7 дней бесплатного доступа

Здесь вы можете собрать поисковые подсказки из Яндекс, Google или YouTube

Зарегистрироваться