Оптимизация скорости загрузки сайта в Google PageSpeed Insights

Оптимизация скорости загрузки сайта в Google PageSpeed Insights

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

Привет, это Сергеенков Александр — SEO оптимизатор и сегодня я вас расскажу: как попасть в зеленую зону PageSpeed Insights. Для начала придется немного вникнуть в теорию.

Как работает сайт

Сайт это не совокупность статических страниц, контент сохраняется в базе данных и используется при генерации странички после получения соответствующего запроса со стороны клиента. За работу сайта и формирование страничек отличает сервер (удаленный компьютер который работает 24 на 7).

Сервер имеет свою производительность, обусловленную мощностью того железа из которого он состоит и настройками в соответствии с которыми он работает.

Также мы знаем что у каждого сайта есть свое доменное имя, по которому собственно ваш сайт и находят. Казалось бы всё достаточно просто: домен, сервер, браузер. Но вот сам процесс перехода по ссылке, за которым следует начало загрузки страницы, на самом деле не так прост.

Формирование и отрисовка HTML

Когда мы переходим из поисковой выдачи Яндекс и Google, сначала происходит запрос ДНС, который отдает IP адрес сервера, где уже находится сайт. Затем по-данному IP осуществляется запрос вследствие которого происходит формирование HTML страницы. Которая вместе с ответом сервера и попадает в браузер пользователя.

В процессе скачивание HTML страницы браузер узнает о всех её элементах, css стилях, скриптах, изображениях и других медиа файлах и для того чтобы вы увидели контент страницы браузеру нужно эти файлы скачать, обработать и потом уже выполнить отрисовку страницы.

Backend это что браузер получает от сервера и frontend, то есть это html, css и javascript.

Соответственно, на то как быстро работает ваш сайт, оказывает влияние то, что работает на сервере.

Google PageSpeed Insights

Аудит PageSpeed Insights оценивает то, как быстро пользователи могут начать взаимодействие с вашей страницей. То есть нам важно, то насколько быстро грузится контент первого экрана сайта и как быстро выполняются в браузере скрипты, которые влияют на его функциональность.

Google PageSpeed Insights

Скорость ответа сервера

Начнем с backend, в целом эффективность работы характеризуется скоростью ответа сервера на запрос клиента и то, в каком формате он отдает этот ответ.

Если у вас есть проблемы со скоростью ответа сервера вы увидите это в отчете PageSpeed.

Определить время ответа сервера для вашей страницы в данный момент времени можно при помощи инструмента яндекс вебмастер — проверкой ответа сервера.

Вставляем url нажимаем проверить. Время ответа сервера должно быть менее 200 миллисекунд. Что делать если время ответа сервера больше 200 миллисекунд? Сначала нужно разобраться с настройками сервера…

Версия PHP

Первое — обращаем внимание на версию php, чем выше версия тем скорее выполняет соответствующий код php.

Версия PHP

То есть HTML страница может быстрее формироваться на сервере. Версия php передается в http заголовке страницы, поэтому проверить ее можно при помощи того же инструмента — проверки ответа сервера в яндекс вебмастер.

Версия php передается в http заголовке страницы

Версию php можно изменить в панели администрирования вашего хостинга.

Но следует иметь в виду, что некоторые скрипты сайта могут быть написаны под более раннюю версию php и не будут функционировать при активации новой. Поэтому лучше подключить к этой задаче разработчика, чтобы он выполнил обновление php и сделал необходимые доработки.

Где изменить версию php

Серверное кеширование

Второе — это наличие серверного кэширования серверное. Кэш подразумевает сохранение статических копий динамических страниц на сервере для последующей их передачи в браузер пользователя.

Серверное кеширование

Как настроить? Для большинства популярных CMS существует масса плагинов при помощи которых можно настроить сервер на кэширование.

Пплагины CMS для кэширования на сервере

Как же существуют отдельные модули для различных типов серверов, которые обеспечивают кэширование всего документа либо его части.

Нагрузка на сервер

Нагрузка на сервер

При росте посещаемости сайта, растет нагрузка на сервер, что будет замедлять скорость загрузки сайта. Чтобы понять, справляется ли сервер с нагрузкой, нам просто нужно узнать: как часто возникают ошибки сервера? Определить их можно проанализировав статистику по ошибкам в метриках установленных на хостинге.

счетчик AWStats

Например, на хостинге установлен счетчик AWStats, где самом низу отчета вы увидите статистику по http ошибкам.

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

Что делать, если растет нагрузка на сервер с ростом посещаемости сайта

Что делать, если нагрузка на сервер обусловлена ростом посещаемости сайта? Следует подумать о более производительным хостинге. Если выяснилось, что сайт постоянно парсится различными ботами, кроме ботов поисковых систем, необходимопринять меры по блокировке этих ботов.

Если рост нагрузки обусловлен выполнением каких-либо сторонних процессов — необходимо разобраться что происходит и как оптимизировать работу. В таком случае нужно подключать опытного разработчика.

Сжатие

Сжатие страниц сайта на сервере может обеспечить значительное уменьшение их объема. Например, при активации gzip сжатия поток передаваемой от сервера в браузер информации перекодируются на лету. В результате браузер клиента получает трафик в сжатом виде который распаковываются им при получении.

Сжатие страниц сайта на сервере gzip

Как проверить

Если у вас не включено сжатие на сервере у вас будет соответствующее уведомление в отчете по PageSpeed Insights (включите сжатие текста).

Также наличие сжатия и то насколько оно эффективно работает можно проверить при помощи сервисов «http compression test». Выбираем любой из поиска google, переходим в сервис, вставляем адрес страницы и жмем — начать тест.

Как видно, использование gzip сжатие значительно сокращает объем передаваемой информации.

Что делать

Если сжатие на сервере не настроено? Настройка сжатия осуществляется посредством внесения настроек конфигурационные файлы сервера.

Настройка сжатия на сервере

Для этого конечно лучше привлечь разработчика, но для популярных cms можно использовать плагины. Например, для WordPress есть плагин Hyper cache в котором можно настроить сжатие.

Структура кода страницы

Структура кода страницы сайта определяет порядок загрузки внешних данных, изображений и других медиафайлов. Тем самым оказывая влияние на время отрисовки страницы в браузере и скорость загрузки страницы сайта в целом.

Чем больше файлов загружается при формировании страницы, тем дольше страница может загружаться для отображения. Соответственно уменьшение количества файлов, которые загружаются на страницу, положительно скажется на скорости загрузки.

Структура кода страницы
Уменьшение количества файлов для увеличения скорости загрузки

Как проверить

PageSpeed Insights - постарайтесь уменьшить количество запросов и размеры данных

В аудите PageSpeed Insights вы можете увидеть соответствующую ошибку (постарайтесь уменьшить количество запросов и размеры данных). Где будут перечислены типы ресурсов которые участвуют в формировании страницы.

Что делать

Как уменьшить количество запросов и размеры данных
  1. Удаление лишних файлов веб-страницы уменьшит не только количество запросов к серверу, но и вес страницы в целом. Это не значит, что следует отказаться от всех картинок и файлов шрифтов, просто используйте принцип минимализма.
  2. Объединение css и js файлов — это действенный способ уменьшить количество запросов к серверу.
  3. Отложить загрузку файлов которые не участвуют в формировании первой части контента страницы сайта.

JS файлы

Скрипты, которые участвуют в формировании контента страницы, могут значительно снижать скорость загрузки страницы:

  1. Для их выполнения браузеру может понадобиться скачать дополнительные файлы.
  2. Скрипты, при неправильной настройке загрузки, могут блокировать работу друг друга.

Как определить проблему

Проверка скриптов в аудите PageSpeed Insights

В аудите PageSpeed Insights есть масса проверок скриптов. В большинстве случаев PageSpeed просит:

  • удалить не используемые скрипты
  • уменьшить размеры внешних или решить проблему с блокировкой отображение контента по вине скриптов.

Что тут можно сделать

  • Перенести теги script из head в конец body.
  • Обеспечить асинхронную загрузку JS файлов.
  • Исключить загрузку неиспользуемых JS файлов.
  • Настроить предзагрузку важных для отрисовки первого экрана скриптов.
  • Минимизировать JS файлы путем удаления пробелов и пустых строк.
  • При использовании протокола HTTP/2, можно настроить принудительный пуш важных JS вместе с HTTP заголовками.

CSS файлы

CSS отвечают за управление внешним видом элементов страницы. Если браузеру необходимо загрузить большое количество css и они вдобавок имеют большой вес, то это приводит к замедлению скорости загрузки страницы.

Как проверить

Удалить неиспользуемые css или уменьшить их размер

Если у вас есть проблемы с css, то PageSpeed Insights попросит вас удалить неиспользуемые css или уменьшить их размер.

Что делать

Чтобы css не мешал скорости загрузки страницы, можно:

  • Разместить критические стили Inline, то есть непосредственно в коде страницы.
  • Обеспечить асинхронную загрузку css файлов.
  • Переработать стили таким образом, чтобы на страницу грузились только те которые используется в данном шаблоне.
  • При использовании протокола HTTP/2 можно настроить принудительный пуш необходимых css клиенту.

Шрифты

Если на вашем сайте используются шрифты Google Fonts значит скорость загрузки можно 100% увеличить.

Как определить проблему

Подключены шрифты Google Fonts

Открываем код страницы и смотрим как подключены шрифты. Если вы видите ссылку с подключенными шрифтами, то их загрузку нужно оптимизировать.

Что делать

Наиболее эффективный вариант — это использование шрифтов размещенных на локальном сервере и подключенных inline (то есть не через внешний css, а непосредственно в коде страницы в разделе head).

Изображения

Вес изображения может значительно влиять на скорость загрузки веб-страниц.

Как проверить

Проблемы с изображениями PageSpeed Insights

Если у вас есть проблемы с изображениями PageSpeed Insights покажет вам это в отчетах своего аудита. Будет ругаться на формат изображения, размер, кодировку и тип их загрузки.

Что делать

  • Сжать изображение можно при помощи любого онлайн-сервиса.
  • Уменьшить расширение изображения и глубину цвета можно при помощи любого графического редактора, например, Adobe Photoshop.

Ленивая загрузка

Изображения, а так же медиафайлы (видео, карты, а так же блоки соц. сетей) можно грузить не все сразу, а отложено. Либо по мере прокрутки страницы пользователем.

Таким образом браузер не скачивает все файлы сразу, при загрузке html-кода страницы, а подгружает их тогда, когда их нужно показать пользователю.

Как проверить

Как грузится изображение в консоли разработчика Google Chrome

Понять как грузится изображение можно в консоли разработчика Google Chrome. Переходим во вкладку «network» и выбираем вкладку «изображения». Обновляем страницу, скролим страницу и видим как изображения подгружается во время скролла.

Как настроить ленивую загрузку

  • Для изображений и iframe используем атрибут loading=»lazy» (в последней версии WordPress уже есть в стоке)
  • Настроить ленивую загрузку как для изображений, так и для других медиафайлов можно посредством скриптов.

Если у вас при обновлении страницы загружаются все изображения, то тут есть над чем поработать.

Кеширование в браузере

Кэширование не настроено в 
PageSpeed Insights

Если кэширование не настроено или настроена некорректно, вы это увидите в PageSpeed Insights.

Как настроить

  • Настройка браузерного кэширования осуществляется посредством редактирования конфигурационных файлов сервера. Для этого лучше привлечь разработчиков.
  • Также существует масса плагинов для популярных cms, которые помогут настроить кэширование файлов, например, WP-Optimize или WP Fastest Cache.

Давайте подытожим. На скорость загрузки сайта влияет работа сервера и его настройки, html-код его структура. Если вы уже столкнулись с тем что PageSpeed Insights показывает вам малое количество баллов, то я вам пояснил: куда нужно смотреть, что бы понять в чем проблема.

Оставьте комментарий

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