Как вывести свой сайт в зелёную зону PageSpeed Insights — советуют эксперты
Многие используют PageSpeed Insights для оценки скорости загрузки страниц. Узнали у экспертов, как попасть в зелёную зону этого инструмента.
4К открытий5К показов
При разработке сайта многие используют инструмент PageSpeed Insights для оценки скорости загрузки страниц и стремятся вывести сайт в зелёную зону. Спросили у экспертов, как этого добиться.
Как вывести свой сайт в зелёную зону PageSpeed Insights?
Алина Шипилова
руководитель группы разработки компании «Рексофт»
Следите за bundle
Часто новички пишут код и не задумываются о размере подключаемых библиотек, не вспоминают о tree-shaking и оптимизации ровно до того момента, как замечают, что их сайт стал очень медленным. Если вы собираете проект с помощью webpack, то перед новым релизом или после добавления новой функциональности, рекомендую проверять размер и количество chunks с помощью webpack-bundle-analyzer.
Сжать всё!
PageSpeed Insights обязательно даст рекомендации о минификации js и css. Это простые истины. Если вы не в курсе о кэшировании и gzip сжатии – самое время изучить это!
Влюбитесь в lazy load
Не стоит грузить все изображения сразу – этого уже не скроешь от PageSpeed Insights. Возможно пользователь никогда не доскролит до очень красивой картинки внизу страницы, а Вы ее упорно грузите. Важно следить за размером изображений, сжимать, несильно теряя в качестве. Не стоит забывать про формат изображений – если есть webp, то почему бы не загружать такие картинки для браузеров, поддерживающих этот формат?
Если что-либо можно отложить – не сдерживайте себя
Отложенная загрузка скриптов приблизит ваш сайт к зеленой зоне. Желательно загружать скрипты не в <head>, так как браузер ждет, пока загрузится всё, и только потом покажет страницу. Конечно же, есть и асинхронная загрузка. Отличным решением будет загружать скрипты только по необходимости, в идеале — реализовывать динамический импорт только при загрузке необходимого блока или элемента.
Почистите свои стили
PageSpeed Insights любит стили, которые добавляются inline. Но если их уже очень много, то советую проверить — нужны ли они все сразу на странице. Скорее всего нет. В идеальном мире мы чистим или не добавляем лишние стили в сборку и загружаем их динамически, но лучше проверить себя, например, использовав UnusedCSS или PurifyCSS.
Всему свое время
Производительность сайта у реальных пользователей может сильно отличаться в зависимости от их устройств и скорости доступа к сети. Не забывайте проверять скорость отрисовки после добавления нового функционала, изменяя скорость загрузки сайта на вкладке Network в Chrome Developer Tools.
Следуйте рекомендациям от PageSpeed Insights или Lighthouse при анализе сайта, но не забывайте, что в первую очередь сайт должен быть удобным и функциональным.
Никита Одинец
инженер-программист IT-компании DD Planet
PageSpeed Insights — сервис Google для оценки скорости загрузки страницы. Все владельцы сайтов стремятся вывести свои ресурсы в зеленую зону — получить оценку от 90 баллов и выше.Чтобы улучшить скорость при проверке PageSpeed Insights, советую воспользоваться рекомендациями:
- Обратите внимание на размер загружаемых скриптов и стилей. Обязательно применяйте минификацию.
- Используйте сжатие текстовых ресурсов: скрипты, стили, HTML.
- Вынесите в инлайн набор стилей, которые используются для формирования каркаса страницы и первого экрана, и сделайте предзагрузку файла с оставшимися стилями.
- Предзагружайте шрифты, используемые на страницах.
- Используйте HTTP/2 Server Push для скриптов и стилей.
- Стоит использовать lazy-loading для изображений, которые не показываются пользователю сразу.
- Сам сервис рекомендует использовать современные форматы изображений: JPEG 2000, JPEG XR и WebP. Они обеспечивают более эффективное сжатие, но не все браузеры их поддерживают.
- Контент со сторонних ресурсов (чаты, формы обратной связи, видео, карты и т. д.) лучше грузить отложено, например, по скроллу или первому движению мыши на странице.
Советы по технической оптимизации для начинающих веб-мастеров:
- Старайтесь уменьшить объем и время выполнения скриптов при загрузке страницы. Если что-то можно отложить, то это лучше сделать.
- Чтобы повысить рейтинг, старайтесь как можно меньше использовать большие сторонние библиотеки. По возможности рекомендовал бы отказаться от Jquery и использовать нативный JavaScript.
- Если все-таки без Jquery никак, то не стоит подключать ее и код, который использует эту библиотеку в
<head>. Чем ниже он будет подключаться на странице, тем лучше. - Не стоит сильно увлекаться различными метриками, потому что на странице они должны быть сразу. Чем больше подключено, тем ниже падает рейтинг.
- Старайтесь не помещать лишний HTML, например, всплывающие окна сразу на страницу.
- Стремитесь к показателям в зеленой зоне, но впадать в паранойю и обязательно стараться выжимать 100 пунктов под мобильную верстку не стоит.
Владимир Зайцев
директор по клиентскому сервису NGENIX
Прежде всего, не стоит смотреть на Google Page Speed как на единственную верную метрику измерения скорости загрузки сайта. На оценку скорости загрузки влияет множество факторов: состояние операторских сетей и межоператорских стыков, которые участвуют в передаче данных; состояние ресурсов и ПО сервера, обрабатывающего запрос пользователя; состояние ПО и производительность устройства конечного пользователя; скорость и тип подключения конечного пользователя (проводное / беспроводное).
Алгоритм Google Page Speed по умолчанию эмулирует взаимодействие с сайтом с мобильного устройства, находящегося не в самой быстрой сети (например, 3G), также учитывается возможный троттлинг процессора. Имеет значение также, откуда производится замер: чем дальше это местоположения о серверов, на которых развернута инфраструктура веб-ресурса, тем меньше будет итоговый результат замера. То есть, для замера Google использует эмуляцию среднестатистического мобильного устройства и средней скорости интернет-соединения в мире.
Для получения объективной оценки необходимо проводить измерения скорости непосредственно в браузерах/приложениях реальных пользователей веб-ресурса. Мы, например, используем для замера скорости технологию Real User Monitoring (RUM): размещаем на страницах веб-ресурса небольшой JS-код, который загружает тестовый объект c серверов, подключенных к интернету. Сервис может одновременно замерять скорость доставки данных из нескольких источников.
Есть вероятность, что отказаться от тех элементов, которые тормозят загрузку, согласно Google Page Speed, не получится: в частности, алгоритм Google «не любит» Яндекс.Метрику или пиксели Facebook, значительно влияют и используемые движки — нередко тормозят сами «коробочные» Битрикс и WordPress. Однако можно немного поработать над оптимизациями со стороны бэкэнда, чтобы улучшить показатели времени загрузки и приблизиться к «зеленой зоне» Google Page Speed и положительно повлиять на поисковое ранжирование веб-сайта.
Ускорить доставку объектов на устройства пользователей
Современные сайты содержат множество объектов — изображений, шрифтов и так далее. Открывая веб-страницу, пользователь отправляет HTTP-запрос на сервер, с которого на устройство пользователя доставляются все запрошенные объекты. Чем больше хопов (переподключений между промежуточными серверами) придется сделать, чтобы доставить объект с сервера оригинации до устройства, тем больше задержка при обработке запроса в каждой точке маршрута и тем дольше грузится страница на стороне пользователя. Ускорить доставку объектов можно при помощи CDN-сети: сеть доставки контента кэширует и хранит запрашиваемые объекты на географически распределенных edge-серверах, и при запросе пользователю отдается закэшированный вариант объекта, находящийся на сервере, наиболее близком к пользователю, поэтому задержка значительно снижается.
Оптимизировать контент
Изображения — одни их самых «тяжелых» объектов на веб-странице. Если пользователь обращается к странице, на которой, скажем, содержатся несколько десяткой изображений в формате JPEG весом в 2 Мбайт каждый, страница может грузиться несколько секунд. Ситуация усугубляется, если пользователь просматривает веб-страницу с мобильного соединения: канал ограничен возможностями сотовой сети, и качество соединения может ухудшить показатели скорости загрузки. Будет неплохо озаботиться автоматической конвертацией изображений в оптимизированный формат WebP от Google: изображение останется в довольно приемлемом для мобильных устройств качестве, но его вес сократится на десятки процентов — так можно выиграть 20-40% к скорости загрузки веб-страницы. WebP поддерживается большинством браузеров, включая последний Safari — однако более старшие версии браузера от Apple не поддерживают WebP — на такие устройства нужно раздавать картинки в оригинальном формате.
Если говорить о мобильных пользователях, в ряде случае ресайзинг изображений под более маленький размер экрана также позволяет уменьшить размер объектов.Разобравшись с оптимизацией изображений, можно приняться за текстовый контент (.js, .css и т.д.): для этого можно использовать алгоритм сжатия данных Brotli — он поддерживается браузерами Firefox, Chrome и другими браузерами, основанными на Chromium. Он способен на 20% более эффективно сжимать текстовые файлы по сравнению с deflate.
Подключить протокол HTTP/2
HTTP/2 многопоточный протокол, который позволяет в параллельном режиме загружать множество объектов с одного домена одновременно, в то время как у протокола HTTP 1.1 имеется ограничение на количество подключений (не более шести на один домен). Параллельная загрузка объектов способна ускорить доставку контента и, следовательно, ускорить загрузку веб-страниц.
Использовать распределенный DNS
Соединение пользователя с сервером открывается быстрее, если сервер расположен ближе к месту, откуда отправляется запрос. Обращение к централизованному DNS-серверу, расположенному далеко от пользователя или в AWS (точка присутствия которого, например, может быть в Европе), удлиняет маршрут и увеличивает задержку. Если использовать географически распределенную инфраструктуру для размещения DNS-зоны, то доменное имя быстрее резолвится в точке присутствия, расположенной ближе к источнику запроса, что позволяет выиграть порой до нескольких сотен милисекунд к скорости обработки запроса.
Напоминаем, что вы можете задать свой вопрос экспертам, а мы соберём на него ответы, если он окажется интересным. Вопросы, которые уже задавались, можно найти в списке выпусков рубрики. Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.
4К открытий5К показов
JS-библиотек более тысячи — они постоянно обновляются, а многие из них создаются сообществом. Рассказываем о наиболее актуальных для разработки анимаций на сайте.
Пройдите небольшое тестирование, чтобы узнать, насколько вы знакомы с Python-библиотеками и фреймворками, которые используют в веб-разработке.
Роадмап для веб-разработчиков, который описывает, как выбрать язык программирования для изучения и найти первую работу.
Узнайте о лучших библиотеках Python, которые помогут вам в 2024 году. От анализа данных до веб-разработки — все, что нужно для эффективного программирования на Python.