Отчёт Lighthouse: откладывайте изображения вне экрана в WordPress

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

Конечно, это может звучать как большая работа, но здесь есть и низко висящие фрукты, особенно если посмотреть на изображения. Изображения обычно занимают больше всего трафика при загрузке сайта, и традиционно вы просто грузите всё подряд.

В этом есть несколько недостатков:

• Вы тратите ресурсы на то, чего пользователь, возможно, и не увидит.
• Возможные издержки и для пользователя, и для вас. Пользователь может быть на мобильном тарифе с лимитом, а вы хоститесь в облаке и платите за исходящий трафик.
• Плохой пользовательский опыт и воспринимаемая производительность, потому что вы скачиваете и обрабатываете бесполезный (вне экрана) контент вместо того, что в зоне видимости.
• Это, в свою очередь, может приводить и к понижению позиций в выдаче Google, поскольку Google отдаёт предпочтение более отзывчивым страницам.

Решение: откладывать и загружать изображения только тогда, когда они появляются в зоне видимости. И, как уже было сказано, это низко висящий фрукт - есть плагин, который делает именно это: Lazy Load Optimizer.

Просто добавьте его на ваш WordPress-сайт - и готово. Теперь при заходе на вашу страницу пользователи будут скачивать только те изображения, что попадают в их область просмотра. Остальные изображения подгрузятся лениво по мере скролла.

Одно только это подняло рейтинг производительности блога на 20 пунктов - с 41 до 61. Посмотрим, что будет дальше.

Решение проблем

Лично у меня после установки плагина возникли проблемы: несколько изображений “разъезжались” вот так:

Причина была в захардкоженных стилях прямо в тегах img - что в любом случае считается плохой практикой. Я перенёс всё в пару CSS-классов, которые подгружаются отдельно, и теперь всё хорошо.