Выводим сайт в зелёную зону PageSpeed Insights
PageSpeed Insights — это инструмент от Google для измерения скорости загрузки страницы. Сайт попадает в зелёную зону, как только получает оценку от 90 баллов и выше. Но нужно не только добиться хороших показателей, но и потом поддерживать их в процессе продвижения сайта. В этой статье мы дадим несколько советов, как улучшить скорость загрузки сайта и тем самым вывести его в зелёную зону.
Бывает, что скорость загрузки снижается из-за подтормаживания самой CMS. Кроме того, PageSpeed Insights может не выводить сайт в зелёную зону из-за некоторых особенностей поведения алгоритмов. Например, они несколько предвзято относятся к Яндекс.Метрике, пикселям Facebook. Хотя и в этих случаях добиться хороших показателей можно, если провести оптимизацию со стороны бэкэнда.
Что поможет улучшить показатели PageSpeed Insights
При анализе сайта сервис сам подсказывает, что нужно исправить для получения высокой оценки. Не стоит пренебрегать советами PageSpeed Insights, однако и слепо следовать им тоже не всегда целесообразно. Особенно в случаях, когда это может негативно сказаться на функциональности сайта и сделать его менее удобным для пользователя. Мобильная вёрстка требует особого внимания: пользователю нужно стремиться к хорошим показателям в зелёной зоне, но не стоит пытаться достичь максимума.
Примечание. Каждый раз при добавлении нового функционала проверяйте скорость отрисовки, изменяя скорость загрузки веб-ресурса на вкладке Network в Chrome Developer Tools.
Сжатие скриптов, стилей, HTML, файлов
Минификация относится к стандартным рекомендациям сервиса. Пользователю следует обращать внимание на размер загружаемых скриптов и стилей и научиться сжимать всё, что только можно. Хорошо работает технология кэширования с помощью прокси-сервера, который сокращает нагрузку на веб-серверы. Минификация направлена на уменьшение размера исходного кода, с такой задачей отлично справляется и утилита gzip, которая сжимает файлы. Для Firefox, Chrome и других браузеров на основе Chromium разработан Brotli — алгоритм сжатия данных с открытым исходным кодом.
Как оптимизировать загрузку текстовых ресурсов:
- избегать лишних фрагментов HTML наподобие всплывающих окон;
- предзагружать шрифты;
- вынести в inline базу стилей для формирования основы веб-страницы и первого экрана, затем выполнить предзагрузку файла с остальными стилями (проверить код на наличие лишних стилей можно в UnusedCSS или PurifyCSS);
- отказаться от больших сторонних библиотек — пользоваться JavaScript вместо Jquery.
Последний пункт не всегда удаётся соблюдать. Но и в этом случае вопрос оптимизации можно решить, если не подключать код, который использует Jquery в <head>. Лучше подключать его как можно ниже на веб-странице. И стоит периодически применять Tree shaking — метод оптимизации библиотек, который позволяет удалить ненужный код из окончательного файла.
Лучше загружать скрипты только по необходимости. Можно применить динамический импорт, который выполняет отложенную загрузку. Тогда скрипты будут подгружаться только при загрузке нужного блока. Отложенная загрузка хорошо выручает при загрузке видео, чатов, карт со сторонних сайтов. Можно настроить так, чтобы они появлялись по скроллу или при начале движения мыши на веб-странице.
Контент, который нельзя загружать отложенным способом, лучше минимизировать. В частности, это относится к метрикам. Если их будет много на сайте, мало вероятности вывести его в зелёную зону.
Оптимизация и сжатие изображений
Веб-страницы со множеством картинок всегда грузятся дольше. Мы советуем пользоваться шаблоном проектирования lazy-loading для загрузки изображений, которые пользователь видит не сразу. Он может и не долистать до них, а вся веб-страница будет грузиться медленно именно из-за этих картинок.
Изображения следует сжимать так, чтобы они при этом оставались вполне качественными. Удобно использовать формат webp, особенно для мобильных версий. PageSpeed Insights хорошо относится и к другим современным форматам — JPEG 2000, JPEG XR. С их помощью можно удачно сжимать картинки, только не все браузеры их поддерживают. А формат WebP совместим с большинством браузеров, но старшие версии браузера от Apple — исключение. В этом случае придётся раздавать изображения в исходном формате.
Иногда ресайзинг картинок под более маленький размер экрана позволяет удачно уменьшить размер объектов. Ещё один хороший способ улучшить загрузку веб-страниц на смартфонах — настроить автоматическую конвертацию изображений в формат WebP. При этом картинка будет в неплохом для телефона качестве, но её вес значительно уменьшится. Таким способом можно высвободить дополнительные 20-40% к скорости загрузки веб-страницы.
Использование CDN-сети для ускорения доставки объектов к пользователям
Когда пользователь открывает веб-страницу, HTTP-запрос поступает на сервер, где хранятся шрифты, картинки и всё остальное. Затем эти объекты доставляются на устройство пользователя. Если при этом производится много переподключений между промежуточными серверами, то у пользователя веб-страница прогружается дольше из-за задержек при обработке запросов.
Хороший способ решить проблему — использовать CDN-сеть. Она помогает снизить задержки, так как сеть доставки объектов кэширует и хранит их на географически распределённых edge-серверах. И когда пользователь отправляет запрос, ему сразу поступает закэшированный вариант объекта с сервера, который ближе всего к пользователю. Получается, использование распределённого DNS помогает на доли секунды ускорить загрузку, что очень удобно для пользователя.
Подключение протокола HTTP/2
Протокол HTTP 1.1 имеет ограничение на количество подключений — максимум 6 на один домен. А при использовании HTTP/2 можно в параллельном режиме загружать любое количество объектов с одного домена одновременно. В итоге владелец сайта получает возможность сделать доставку контента более быстрой, и у пользователей веб-страницы загружаются быстрее.
Как ещё можно оценить скорость загрузки
Сервис PageSpeed Insights — не единственное правильное средство измерения скорости загрузки сайта. Важно также учитывать состояние операторских сетей и межоператорских стыков, задействованных в передаче данных. Многое зависит от конечного пользователя — проводное или беспроводное у него подключение, какова производительность устройства и в каком состоянии находятся ресурсы и ПО сервер, который обрабатывает запрос пользователя.
По умолчанию Page Speed эмулирует взаимодействие с сайтом с мобильного устройства, которое находится не в максимально быстрой сети, также учитывается вероятность троттлинга процессора. Ещё важно, какое расстояние между местом, откуда производят замер, и серверами, где развернута инфраструктура веб-ресурса. Чем это расстояние больше, тем больше показатель замера.
Чтобы оценить скорость загрузки объективно, нужно измерять её в браузерах или веб-приложениях фактических посетителей сайта. К примеру, можно использовать метод Real User Monitoring, то есть разместить на веб-страницах JS-код. При этом можно оценивать скорость доставки данных из двух и более источников. JS-код выполняет загрузку тестового объекта c подключённых к интернету серверов.
Запомнить
PageSpeed Insights — это инструмент для измерения скорости загрузки страницы.
Чтобы попасть в зелёную зону, сайт должен получить оценку от 90 баллов и выше.
Попасть в зелёную зону можно, если сжимать скрипты, оптимизировать картинки, использовать CDN-сеть для ускорения доставки объектов к пользователям и подключить протокол HTTP/2.
Есть и другие способы оценить скорость загрузки сайта — например, с помощью JS-кода.