Оптимизация скорости загрузки страниц сайта

Webpagetest - главная страница

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

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

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

Главную страницу сайта рекомендуем оптимизировать в самый последний момент, потому что на ней размещается больше всего разностороннего контента – фото, видео, интерактивные элементы, карта, анимация, форма обратной связи – она самая тяжёлая, сложная, объёмная, несистемная и загруженная. Оставим ей на десерт.

Для тестирования нашего сайта я использую три тулзы и браузер Chrome в качестве локальной:
https://developers.google.com/speed/pagespeed/insights/
https://www.webpagetest.org/
https://gtmetrix.com/

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

Например, GTMetrix использует преимущественно канадские сервера:
GTMetrix использует преимущественно канадские сервера

А вот это карта серверов Webpagetest:
карта серверов Webpagetest

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

  • Пустая страница
  • Пустая страница с sidebar
  • Главная страница
  • Контентная
  • Товарная
  • Категорийная
  • Контактная

Проводя оптимизацию обязательно проверяйте страницы из вашего списка, потому что каждая из них несёт свой объём загружаемых скриптов и стилей. А также не забывайте выключать кеширование страницы, чтобы видеть изменения прямо здесь и сейчас.

Сведём все первоначальные постраничные показания в таблицу. Для понимания адекватности и стабильности результатов, первые страницы проверялись по два раза.


пустая страница


пустая с sidebar


главная страница


контентная


товарная


категорийная


контакты



webpagetest


пустая страница
webpagetest пустая страница


пустая с sidebar
webpagetest пустая с sidebar


главная страница
webpagetest главная страница


контентная
webpagetest контентная


товарная
webpagetest товарная


категорийная
webpagetest категорийная


контакты
webpagetest контакты


пустая страница
gtmetrix пустая страница


пустая с sidebar
gtmetrix пустая с sidebar


главная страница
gtmetrix главная страница


контентная
gtmetrix контентная


товарная
gtmetrix товарная


категорийная
gtmetrix категорийная


контакты
gtmetrix контакты

Оценки всех страниц по загрузке в целом похожи. Если мы оптимизируем максимально страницу без контента, мы сможем выиграть какое-то время. На данные момент сложно сказать, сколько секунд.

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

имитация загрузки страницы 1

имитация загрузки страницы 2

Так или иначе, для работы над улучшением скорости сайта необходимо выбрать одну с наиболее понятными вам рекомендациями систему оценки производительности. Нельзя выбрать по одной конкретной рекомендации лучшую систему. Так, например, webpagetest.net делает за один ваш запуск сразу три теста на прорисовку контента по временной линии (timeline).

Так называемый waterfall показывает, что время до первого байта (TTFB – time to first byte), то есть время отклика сервера, составляется почти 2.6 секунд, после чего начинается получение первых байтов. В нашем случае в самом начале сайт отдаёт все стили и скрипты, а потом, где-то через 10 секунд, начинается прорисовка первого текста и посетитель сайта понимает, что здесь есть жизнь и информация. Дождался ли он? Это уже другой вопрос, который можно проследить в метрике в столбце “показатель отказов” (bounce rate).

Поисковики рекомендуют держать TTFB от 50 до 200 мс. Если этот показатель такой как у нас, необходимо это срочно исправлять.

показатель TTFB - time to first byte

Если вы хотите проверить, какой ответа или сам waterfall будет выглядеть без включённого кеширования страницы, то достаточно в любом браузере нажать Ctrl+Shift+I и на вкладке Network увидеть всю ту же самую информацию, но, возможно, с несколько другими показателями.

В нашем случае время ответа сервера (TTFB) оставило 2.51сек.

время ответа сервера (TTFB)

Базовые рекомендации по улучшению времени ответа сервера:

  • оптимизировать базу данных
  • располагать сайт на выделенном сервере (VPS)
  • использовать акселераторы PHP
  • настоить кеширование сервером
  • ускорить сайт используя content delivery network (CDN)

Тест “Пустой страницы” через Chrome Lighthouse. Ход работ:

Тест "Пустой страницы" через Chrome Lighthouse

Тест "Пустой страницы" через Chrome Lighthouse

Тест "Пустой страницы" через Chrome Lighthouse

  • выключить неиспользуемые или не важные плагины
  • включение Redis
  • используя coverage определить неиспользуемые стили и выключить их
  • минимизировать и скомбинировать css и js
  • удалить неиспользуемый код и определить, какие скрипты и стили должны включаться на текущей странице

Полученные результаты после оптимизации

Покажу улучшение на нескольких страницах

Пустая страница (страница без контента)

Pagespeed Insight

показатель Pagespeed Insight
показатель Pagespeed Insight

Webpagetest

Webpagetest - пустая страница

GTMetrix

GTMetrix - главная страница

Главная страница

Pagespeed Insight

Pagespeed Insight - главная страница 1

Pagespeed Insight - главная страница 2

Webpagetest

Webpagetest - главная страница

GTMetrix

GTMetrix - главная страница [2]

Вывод

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


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