Успеть за 25 часов: или как оперативно вывести сайт в зеленую зону

Наш постоянный клиент попал в красную зону по GooglePageSpeed. 

Ааа. Паника. Что делать?! Куда бежать?!

Как говорил прекрасный герой: «Спокойствие. Только спокойствие». 

Итак, все по порядку.

ЗАДАЧА: перевести сайт из красной в зеленую зону.

РЕШЕНИЕ: 

Оптимизация по критериям инструмента GooglePageSpeed, а именно LightHouse.

Но сначала предыстория.

Многие разработчики могут пообещать вывести сайт в зеленую зону и за 5 минут.

Как это делается: для проверки через GooglePageSpeed сайт отдает одну картинку и вуаля получает 100 баллов. Оперативно, но вопрос, насколько эффективно?!

Смысл всей оптимизации: не обмануть GooglePageSpeed, а сделать индексацию и ранжирование сайта более эффективными.

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

Конечно, сейчас может развернуться спор: влияют ли показатели LightHouse на индексацию или нет. 

Однако мы склонны верить тому, что более быстрый сайт — это хорошо.

Итак, что же от нас требуется для улучшения показателей LightHouse?

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

Теперь перейдем к конкретике, надеюсь, я не утомил Вас долгим вступлением.

РЕКОМЕНДАЦИИ:

CSS и шрифты

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

• По возможности стоит подгружать куски CSS и HTML кода через отложенную загрузку, особенно для блоков, которые долго загружаются.

• Стоит минифицировать CSS.

• Если подгружать стили через ссылку, то первая загрузка страницы будет более медленной, но при этом браузер кэширует подгружаемый ресурс. Если удалось для каждой страницы написать свои CSS стили, то советуем использовать тег «style» вместо подключения файла CSS по ссылке: <style> содержимое файла </style>

• Рекомендуем делать предзагрузку шрифтов

JavaScript код

• Вместо JavaScript старайтесь чаще использовать HTML5 теги.

• Стоит минифицировать JavaScript

• Следует выносить весь JavaScript код, как можно ниже в исходном коде страницы.

• Рекомендуем делать отложенную загрузку скриптов. Здесь, конечно, могут возникнуть проблемы, особенно, когда один скрипт использует переменные, функции, классы другого. Поэтому нужно правильно расставить порядок загрузки.

• Если подгружать скрипты через ссылку, то как и в случае со стилями, первая загрузка страницы будет более медленной, но при этом браузер кэширует подгружаемый ресурс. Альтернативой является использование тега «scripts»:

<script> содержимое файла </script>

Изображения и другие объекты

• Форматы изображений PNG и JPG лучше заменить на WEBP для тех браузеров, которые это поддерживают (а это почти все основные). При этом, лучше делать автоматическую конвертацию и быть готовым, что потребуется место на диске.

• Используйте отложенную загрузку для изображений, которые находятся в pop-ups или на втором и следующих экранах страницы, т.е. в невидимой области.

• Используйте максимальное сжатие картинок. Не секрет, что одна и та же картинка может весить 1Mb и 300Кб, при этом качество у них одинаковое. Дело в том, что картинка 1Мб имеет в своём бинарном коде много лишнего, не имеющего отношения к самому изображению, например, информацию об авторе, дате последнего изменения и т.д. Так вот: нам это все НЕ НУЖНО. «Легкие» картинки в приоритете.

• Для iframe, video, audio, javascript и других подобных объектов лучше используйте отложенную загрузку 

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

Цель: использовать как можно меньше тегов на странице.

К сожалению, это не всегда возможно без сокращения количества блоков. Поэтому здесь вопрос только к корректности кода. 

Обратите внимание: не стоит без лишней необходимости писать нечто:

<div><div><div>текст</div></div></div>

ИТОГ:

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

 От 20-30 баллов выросли до 90-100.

 Да, не за 5 минут, но мы не стремимся к номинальным результатам и работе для галочки, нас интересует эффективность и долгосрочная работа с клиентами.

А с данным партнером работаем уже много лет, в следующей статье мы как раз расскажем о создании его интернет-магазина.

До новых встреч.