Отложите закадровые изображения: как исправить эту возможность Google Lighthouse

Измерение производительности вашего сайта часто было задачей удачи или неудачи. Это связано с тем, что доступные инструменты не дали нам должного представления об опыте пользователя относительно производительности этого сайта. Тем не менее, Google Lighthouse устраняет многие из этих недостатков и делает его таким, чтобы вы могли вписать его в свой рабочий процесс разработки. Одной из «возможностей» в Lighthouse является откладывание закадровых изображений в WordPress. Хорошая новость заключается в том, что этого легко достичь.

В этом посте мы рассмотрим 🔎 как откладывать закадровые изображения в WordPress с помощью как кода, так и плагинов. Однако сначала нам нужно прояснить несколько терминов, касающихся Google Lighthouse, а затем поговорить о том, какое место в вашем списке приоритетов должна занимать метрика «Отложить закадровые изображения» .

Разница между рекомендацией аудитора и возможностью

Прежде чем мы перейдем к тому, как вы откладываете закадровые изображения в WordPress, важно понять, как эта инструкция встраивается в Google Lighthouse. Это «возможность» производительности, а не рекомендация аудита. Вот разница:

• Рекомендация аудита . Это окажет решающее влияние на ваши оценки в Google Lighthouse, и вы должны уделять этим показателям свое внимание в первую очередь.
• Возможности . Хотя они по-прежнему будут иметь определенное значение, они не повлияют на ваши аудиторские оценки. Таким образом, вы можете считать их второстепенной задачей.

Метрика «Отложить закадровые изображения» — это возможность. Это означает, что он все еще может оказывать влияние, но это то, на что вы можете обратить внимание, когда ваш счет уже не может улучшиться.

Отложить закадровые изображения – определение

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

Метрика «Отложить закадровые изображения» относится к визуальным элементам, которые соответствуют любому из следующих четырех критериев:

• Изображение должно начинаться ниже видимой области страницы и заканчиваться в три раза выше этой области.
• Сверхмаленькие изображения (размером менее 0,02 МБ) не будут учитываться в показателе «Отложить закадровые изображения» .
• Страницы, загрузка которых занимает более 50 мс, активируют возможность.
• Если ваша страница определяет атрибут загрузки, вы вообще не увидите закадровые изображения . Спойлер: освойтесь с loading="lazy" прямо сейчас!

Более того, вы можете обнаружить, что сайт с большим количеством закадровых изображений будет иметь плохие оценки наибольшей отрисовки содержимого (LCP). Это приводит к запутанному изменению в Google Lighthouse 10, о котором мы поговорим далее.

Улучшение времени до взаимодействия (TTI) — устаревшая метрика.

В старых версиях Google Lighthouse функция «Отложить закадровые изображения» влияла на TTI. Однако сейчас Google считает этот показатель устаревшим. Взвешивание в 10 % дало общую оценку аудита производительности, перенесенную в Cumulative Layout Shift (CLS), и теперь обеспечивает взвешивание в 25 % [1][2] .

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

Почему Google Lighthouse попросит вас отложить закадровые изображения

Несмотря на понижение статуса Defer за кадром , он по-прежнему имеет определенное значение для скорости загрузки и производительности. Вы можете увидеть влияние полностью загруженных закадровых изображений за считанные секунды в любом инструменте, который вы выберете:

Хотя эта метрика не влияет на CLS или TTI, она может повлиять на LCP, хотя во многих случаях незначительно. Это также хорошее напоминание о том, что вы должны загружать изображения только тогда, когда вам это нужно. Далее мы обсудим, почему.

Почему не стоит загружать все изображения сразу

В разговоре мы все работаем по «принципу сотрудничества». Это не урок социальных наук, поэтому мы не будем вдаваться в подробности. Однако есть важный аспект этой концепции, который имеет значение для метрики «Откладывать закадровые изображения» . «Максима количества Грайса» гласит, что вы должны раскрывать столько информации, сколько вам нужно для установления контекста.

Почему это важно? Потому что, если вы дадите слишком много информации, это может привести к перегрузке слушателя (среди прочих проблем).

Таким образом, вы также не должны загружать все изображения вашего сайта одновременно! Это происходит по нескольким веским причинам:

• Пользователь не увидит закадровые изображения, и в противном случае они займут ресурсы, которые вам понадобятся для элементов на экране.
• Загрузка закадровых изображений может привести к плохому взаимодействию с пользователем (UX), потому что страница будет загружаться без каких-либо заметных событий в области просмотра.
• Для пользователя это также может стоить ему денег. Например, предположим, что кто-то просматривает сайт, который не откладывает закадровые изображения при использовании мобильных данных, а не Wi-Fi.

Учитывая, что Google Lighthouse фокусируется на UX и на том, как на него влияет воспринимаемая производительность, все вышеперечисленное необходимо понимать. Хорошей новостью является то, что есть простой способ отложить закадровые изображения.

Как отложить закадровые изображения на вашем сайте

Ответ: ленивая загрузка. Это самый простой и эффективный способ уменьшить влияние закадровых изображений на воспринимаемую производительность вашего сайта. Более того, большинство браузеров поддерживают ленивую загрузку:

Однако Firefox поддерживает отложенную загрузку только для изображений, что будет иметь значение, если вы решите реализовать это для встроенных фреймов. Тем не менее, у вас есть несколько способов реализовать это. Основной подход использует атрибут loading HTML в элементе <img> или <iframe> . Вы получите возможность использовать три разных значения:

• eager . Это скажет браузеру сначала загрузить эти изображения. Это параметр по умолчанию, и его можно вообще не включать, поскольку изображения всегда будут отображаться независимо от того, где они находятся на странице.
• lazy . Это отложит загрузку изображения или iframe до тех пор, пока оно не достигнет жестко заданного расстояния от области просмотра. Точное расстояние может различаться в разных браузерах, и вы также всегда должны указывать размеры изображения.
• auto . Браузер сам выберет лучший вариант для задания.

Это так же просто реализовать, как и следовало ожидать:

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

Конечно, на фронтенде здесь нечего смотреть, потому что изображение все равно будет закадровым и невидимым.

Если вы решите использовать ускоренные мобильные страницы (AMP), вы можете реализовать отложенную загрузку на автоматической основе с помощью элемента amp-img . Когда дело доходит до других платформ, модули или плагины — лучший способ реализовать ленивую загрузку.

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

Использование плагинов WordPress для добавления отложенной загрузки на ваш сайт

Всякий раз, когда вы хотите добавить какие-либо дополнительные функции в WordPress, плагин всегда будет вашим лучшим выбором. Когда дело доходит до ленивой загрузки, это тоже может иметь место.

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

Это не будет обзор того, что может сделать Optimole в целом — наш дочерний сайт Themeisle может показать вам это. Вместо этого мы выделим быстрые и безболезненные варианты ленивой загрузки изображений. Чтобы найти нужные параметры, перейдите на экран «Медиа» > «Optimole» > «Настройки» , затем найдите тумблер «Масштабировать изображения» и «ленивая загрузка» . Вы должны убедиться, что это включено:

Как только вы это сделаете, в разделе «Дополнительно» > «Отложенная загрузка» станет доступно множество параметров:

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

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

Еще одна интересная функция — возможность указать селекторы CSS, которые помогут вам лениво загружать фоновые изображения:

Это дает вам возможность настроить весь процесс ленивой загрузки в зависимости от ваших потребностей и оценки Lighthouse, но при этом сохранить некоторую гибкость. Более того, все вышеперечисленное возможно с бесплатной версией Optimole!

Вывод 🧐

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

Например, Optimole — один из лучших плагинов, помогающих откладывать закадровые изображения в WordPress. Вы можете установить параметры с большей специфичностью, чем глобальный подход «всегда включен», который использует WordPress. Однако есть и другие плагины, которые помогут вам в этом, например плагины кэширования. Даже путь кодирования прост, и, что еще лучше, вы получаете поддержку почти во всех браузерах.

Станет ли Optimole вашим способом откладывать закадровые изображения в WordPress? Поделитесь с нами своими мыслями в разделе комментариев ниже!