Как правильно замерить и улучшить скорость загрузки сайта

23.03.2022

1022

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

Большинство специалистов полагаются только на цифры Google PageSpeed Insights и на цвет зоны, в которой находится сайт. Правильно это или нет, мы разберем в этой статье.

Важна ли скорость загрузки

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

Google еще в 2010 году заявил об оценке скорости загрузки, а в 2018 году это же стало актуальным и для мобильной выдачи.

Однако, решая заняться проработкой скорости загрузки или нет стоит помнить и о пользователях, ведь именно на них скажется в первую очередь ваш выбор. Google проводил исследования и выявил, что если скорость загрузки будет повышена с 1 до 3 секунд, вероятность отказа вырастет на 32%, а если с 1 до 5 секунд, до на 90% соответственно. Логика простая - чем дольше юзер ждет загрузку сайта, тем с большей вероятностью он его покинет. Отчетливо это видно в мобильной выдаче, хоть мест с бесплатным Wifi с каждым днем все больше, встречается и 3g интернет.

Оценка скорости загрузки

Есть несколько метрик, по которым принято оценивать скорость загрузки сайта. Всего существует около 20 метрик, по которым поисковые системы и сервисы проводят оценку. В рамках этой статьи мы разберем только те метрики, которые напрямую влияют на пользователя.

TTFB (Time To First Byte)

Время загрузки первого байта - это время, которое прошло с момента отправки запроса до получения первого байта информации от сервера. Пользователи в этот момент видят белый экран вместо сайта (те самые мгновения).

Делится это время на три составляющие:

Затраченное время на отправку запроса
Затраченное время на обработку запроса и генерацию ответа
Затраченное время на доставку ответа

FCP (First contentful paint)

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

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

FMP (First Meaningful paint)

Время достаточной загрузки контента - это время, которое пройдет с момента отправки запроса, до отрисовки достаточной для работы с сайтом контента.

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

FCI (First CPU Idle)

Это время, с момента отправки запроса до возможности взаимодействия с сайтом. Например нажатие кнопок или заполнение форм. В идеале этот показатель также не должен сильно отличаться от FCP.

FID (First INput Delay)

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

TTI (Time to Interaction)

Финальная метрика. Время от отправки запроса до момента полной загрузки страницы.

Как анализировать

У Google есть два чудо-инструмента для анализа скорости загрузки сайта:

Test My Site
Google pagespeed insights

Для полноценного анализа скорости загрузки страницы нам пригодятся оба инструмента.

Test My site

Тут вам нужно вставить ссылку на сайт и выбрать 3g или 4g сеть, с которой будет происходить моделирование загрузки.

Сервис позволяет нам:

Проверить скорость загрузки сайта в мобильной сети
Показывает рост прибыли в зависимости от скорости загрузки сайта
Позволяет сравнить скорость загрузки с конкурентами
Дает рекомендации по улучшению скорости загрузки сайта
Позволяет генерировать отчет

Инструмент довольно интересный. Однако стоит учитывать, что он измеряет именно FCP.

Если сайт загружается менее одной секунда, в отчете вы увидите “хорошо”, 1-2,5 секунд - средне, больше 2.5 сек - плохо.

Если у вас есть конкуренты и вы хотите отслеживать их скорость загрузки - пожалуйста. Перейдите в раздел Benchmark.

Про калькулятор дохода в зависимости от скорости загрузки даже писать не будем.

В разделе “Optimise” вас ждет несколько рекомендаций по улучшению общей скорости загрузки.

Этот инструмент полезен, если вы хотите сравнить себя с конкурентами именно в мобильных сетях.

Google PageSpeed Insights

Пожалуй, самый популярный инструмент замера скорости загрузки сайта.

Замер происходит по 100-балльной шкале, где:

0-49 баллов - красная зона, низкий показатель
50-89 баллов - оранжевая зона, средний показатель
90-100 баллов - зеленая зона, наивысший показатель

Оценка сводная, которую могут испортить различные мелочи, на самом деле сильно не влияющие на действительную скорость загрузки.

Если в предыдущем сервисе замер происходил по одной метрике, то тут их пять:

FMP
FCI
FCP
Speed Index
TTI

Причем последняя имеет наибольший вес.

А теперь самое интересное. Сейчас не замеряет загрузку “здесь и сейчас”. Некоторые данные подтягиваются в усредненном виде за последний месяц из отчета Google Chrome CrUX. Особенно это касается данных о первой отрисовке контента и первой задержке ввода, к слову, они округляются до целых значений.

Также есть распределение по зонам. Например 21% загрузок прошли быстро, 64% со средней скоростью и 15% медленно.

Метрика, которая проверяется каждый раз по новой - это имитация загрузки. Тут уже в работу вступает технология LightHouse (которая встроена в ваш Хром и вы можете запустить её из консоли) и каждый раз по новой проверяет сайт.

Всего Google PageSpeed Insights проверяет сайт по 24 критериям и по каждому из них выводит мини-отчет. Скажем сразу, не стоит гнаться за 100%. Это не просто нелогично, но и не реально. Вам придется как минимум отключить все внешние скрипты, включая код метрики.

LightHouse

Если вы используете браузер на движке Chromium, то у вас есть инструмент в консоли во складке “Audits”.

Нажимая на кнопку “Generate Report” вы получите отчет сразу по пяти характеристикам:

Performance - производительность
Accessibility - доступность
Best Practices - советы
SEO - и так понятно
PWA - это прогрессивное веб приложение. Если у вас его нет, то и отчета нет.

Учитывая, что данные из этого приложения поступают в большинство сервисов Google оценивающих ваш сайт, можно сразу смотреть именно сюда.Тут вы сразу наглядно сможете увидеть все важные метрики, включая FCP, TTI, FCI и другие описанные выше.

Помимо основных метрик можно посмотреть сколько грузятся основные элементы сайта и увидеть проблемные зоны.

Network

Помимо вкладки Audits в консоли есть и вкладка Network. Очень полезная, между прочим. Тут вы можете наглядно посмотреть какие элементы в каком порядке и с какой скоростью загружаются. Если вглядеться внимательнее, вы сразу обнаружите все проблемные зоны сайта. Главные для вас колонки это Size и Time. Одна показывает вес элемента, другая время его загрузки. Чем быстрее элемент грузится, тем меньше он влияет на общую скорость. Ваша задача определить скрипты, картинки или подключаемые файлы, которые тормозят весь процесс. Можете замерить “до” началом работ по улучшению скорости и проверить “после”. Разница будет видна.

Query Monitor

А это очень полезный плагин для Wordpress. Этот плагин делает панель инструментов с очень важными данными. Тут вы можете отслеживать все проблемные плагины, медленные и повторяющиеся запросы к базе данных, PHP-ошибки и все HTTP-запросы. В общем для анализа и выявления проблемных мест сайта очень полезно. Также можно использовать и просто для постоянного мониторинга производительности сайта.

Другие сервисы, например GTMetrix

Конечно, существуют и другие сервисы проверки скорости загрузки. К самым популярным можно отнести зарубежные сервисы GTMetrix и WebPage Test.

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

Как ускорить сайт

Поскольку львиная доля сайтов в интернете сделана именно на Wordpress, то и речь вести в статье мы будем именно о нем.

Хостинг

Ускорение сайта начинается еще до его создания. То есть в момент выбора хостинга или сервера.

Выделенный сервер может позволить себе не только лишь каждый, так что поговорим об обычных shared-хостах. Что вам нужно учитывать:

Расположение серверов. Если сервер в Австралии, а ваша аудитория в России, то время ответа будет составлять несколько секунд, в лучшем случае три. Если сервера в Москве, время ответа едва перевалит за пол секунды. Учтите это.
Наличие ограничений трафика. Берите хостинг без каких-либо ограничений, это устаревший век.
Хостинг должен быть на SSD диске. Это обязательно.
Если деньги позволяют - лучше всего иметь выделенный сервер, который вы сможете дополнительно конфигурировать и улучшать.

Кэширование

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

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

Плагин имеет простые и расширенные настройки. В простых все просто, включите кэширование, а метод доставки кэша выберите “простой”. Все, теперь у вас работает кэширование в самом простом его виде.

Расширенные настройки сложнее, но лучше воспользоваться именно ими.

Тут вы можете определить, для каких пользователей будет кэшироваться сайт. Для себя (админа) вы можете кэш отключить, так будет проще продолжать разрабатывать сайт. Да и чистить кэш придется реже. Также тут стоит установить время хранения кэша. Время ставится в секундах. Если сайт обновляется резко, можно выставить время хранения в сутки, если часто - час или полчаса.

Сохраняем настройки.

GZIP-сжатие сайта

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

Откройте файл на хостинге и добавьте в него следующий код:

<ifModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</ifModule>

Также можно включить Gzip сжатие используя один из плагинов Wordpress.

Проверить работу можно с помощью любого сервиса в интернете, либо в Яндекс.Вебмастере в разделе “Ответ сервера”. Там должна быть строка Content-encoding: Gzip.

Оптимизация размера изображений

Сжатие изображений это целая наука. Во-первых, лучше отказаться от PNG формата совсем. Без вариантов. Для логотипа и иконок используйте SVG формат.

Все превью и миниатюры лучше переделать в WebP формат. Они не поддерживаются всеми браузерами, но это не беда. Весят они меньше и Google их рекомендует. Не стоит все картинки переделывать по этот формат, достаточно миниатюр.

Все остальные картинки должны быть в JPEG формате. Лучше не использовать изображения размером больше 1290 пикселей по ширине. Смысла в этом также нет.

Каждое изображение можно дополнительно оптимизировав с помощью софта, сервисов или плагинов WP. Без видимой потери качества изображение можно сжать с 10 мб до 500 кб. Легко вообще.

Из решений для Wordpress мы рекомендуем использовать плагин Insanity, он автоматически конвертирует все новые картинки в JPG (отключаемая опция) и сужает их до нужных вам размеров и с заданной вами потерей качества.

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

Отложенная загрузка изображений

Если вы частый пользователь интернета, но наверняка уже встречали такое. Скроллишь сайт, а картинки подгружаются по ходу скролла. Вот это и есть отложенная загрузка или Lazy Load.

Сделать такую штуку можно самостоятельно с помощью кода, а можно воспользоваться одним из сотен плагинов Wordpress. Плагины позволяют вам решить каким картинкам “лениво подгружаться”. Тут можно выбрать аватарки, миниатюры, картинки в виджетах или изображения в контенте. Лучше всего настраивать скрипт именно на изображения внутри контента.

Использование CDN и CloudFlare

CDN или Content Delivery Network - это сеть доставки контента. Если пользователь заходит к вам на сайт с Махачкалы, то и сайт подгружается с ближайшего к нему сервера. Единственный недостаток - это пока не очень хорошо работает в России. например всеми используемый CloudFlare в России имеет только один сервер - в Москве. Так что хоть используйте, хоть нет, все равно данные будут улетать с Мск.

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

Включите сжатие

Сжимать на сайте можно три вещи:

CSS
HTML
JavaScript

Делать это можно либо с помощью онлайн сервисов, которые сожмут вам каждый файл по отдельности, либо опять-же с помощью плагинов для CMS. Те, кому неуда спешить сжимают в ручную.

Главное, что нужно сделать перед сжатием файлом сайта - это бекап! Вообще старайтесь всегда делать бекапы.

Уменьшите количество Html-запросов

HTML-запросы сильно замедляют загрузку вашего сайта, особенно, если их много. Под такие запросы попадает вызов картинок, CSS файлов, скриптов и виджетов. Что вы можете сделать:

Объединить несколько CSS-файлов в один, при условии, что они загружаются на одной странице. Таким образом будет уже на несколько запросов меньше.
Использовать CSS-спрайты. Спрайт - это одна большая картинка, которая содержит в себе много маленьких. Хорошо подходит для объединения мелких дизайнерских элементов на сайте. Один спрайт может заменить один-два десятка картинок.

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

JavaScript внизу, CSS вверху

Тот, кто говорит “все подключения файлов и скрипты должны быть в футере” прав лишь отчасти. Основной CSS-файл нужно подключать однозначно в хедере. Фактического прироста скорости не даст, за то визуально сайт будет грузиться быстрее, что важно для пользователей. Все побочные CSS-файлы можно засунуть в футер.

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

HTTPS и HTTP/2

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

Cookie-Free-домены

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

Заключение

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