При разработке сайта многие используют инструмент PageSpeed Insights для оценки скорости загрузки страниц и стремятся вывести сайт в зелёную зону. Как этого добиться, рассказала руководитель группы разработки компании «Рексофт» Алина Шипилова.
Следите за bundle
Часто новички пишут код и не задумываются о размере подключаемых библиотек, не вспоминают о tree-shaking и оптимизации ровно до того момента, как замечают, что их сайт стал очень медленным. Если вы собираете проект с помощью webpack, то перед новым релизом или после добавления новой функциональности, рекомендую проверять размер и количество chunks с помощью webpack-bundle-analyzer.
Сжать всё!
PageSpeed Insights обязательно даст рекомендации о минификации js и css. Это простые истины. Если вы не в курсе о кэшировании и gzip сжатии – самое время изучить это!
Влюбитесь в lazy load
Не стоит грузить все изображения сразу – этого уже не скроешь от PageSpeed Insights. Возможно пользователь никогда не доскролит до очень красивой картинки внизу страницы, а Вы ее упорно грузите. Важно следить за размером изображений, сжимать, несильно теряя в качестве. Не стоит забывать про формат изображений – если есть webp, то почему бы не загружать такие картинки для браузеров, поддерживающих этот формат?
Если что-либо можно отложить – не сдерживайте себя
Отложенная загрузка скриптов приблизит ваш сайт к зеленой зоне. Желательно загружать скрипты не в , так как браузер ждет, пока загрузится всё, и только потом покажет страницу. Конечно же, есть и асинхронная загрузка. Отличным решением будет загружать скрипты только по необходимости, в идеале – реализовывать динамический импорт только при загрузке необходимого блока или элемента.
Почистите свои стили
PageSpeed Insights любит стили, которые добавляются inline. Но если их уже очень много, то советую проверить — нужны ли они все сразу на странице. Скорее всего нет. В идеальном мире мы чистим или не добавляем лишние стили в сборку и загружаем их динамически, но лучше проверить себя, например, использовав UnusedCSS или PurifyCSS.
Всему свое время
Производительность сайта у реальных пользователей может сильно отличаться в зависимости от их устройств и скорости доступа к сети. Не забывайте проверять скорость отрисовки после добавления нового функционала, изменяя скорость загрузки сайта на вкладке Network в Chrome Developer Tools.
Следуйте рекомендациям от PageSpeed Insights или Lighthouse при анализе сайта, но не забывайте, что в первую очередь сайт должен быть удобным и функциональным.
Источник: статья на Tproger
