Embed Optimizer v1.0.0-beta2

Цель этого плагина - оптимизировать производительность встраивания в WordPress, например твитов, видео на YouTube, TikToks и других.

Текущие оптимизации включают в себя:

- Ленивая загрузка встраивания непосредственно перед тем, как оно появится в поле зрения.

- Добавление ссылок предварительного подключения для встраивания в исходную область просмотра.

- Резервирование места для встраивания, размер которых изменяется, чтобы уменьшить смещение макета.

Встраивания с отложенной загрузкой повышают производительность, поскольку встраивания, как правило, очень ресурсоемки, поэтому отложенная загрузка гарантирует, что они не будут конкурировать с ресурсами при загрузке страницы. Отложенная загрузка встраиваемых файлов на основе IFRAME осуществляется простым добавлением атрибута loading=lazy. Встраивание с отложенной загрузкой, включающее теги SCRIPT, обрабатывается с помощью Intersection Observer, который отслеживает, когда контейнер FigURE встраивания войдет в область просмотра, а затем динамически вставляет тег SCRIPT.

Этот плагин также рекомендует вам установить и активировать плагин Optimization Detective, который открывает несколько оптимизаций, помимо простой отложенной загрузки. Без Optimization Detective отложенная загрузка может фактически снизить производительность, когда встраивание располагается в исходном окне просмотра. Это связано с тем, что отложенная загрузка таких начальных элементов области просмотра может ухудшить качество LCP, поскольку рендеринг задерживается логикой, определяющей, является ли элемент видимым. Вот почему WordPress Core изо всех сил старается избегать ленивой загрузки тегов IMG, которые появляются в исходном окне просмотра, хотя эвристика на стороне сервера не идеальна. Именно здесь на помощь приходит Optimization Detective, поскольку он определяет, появляется ли встраивание в каких-либо областях просмотра, специфичных для точки останова, таких как мобильные устройства, планшеты и настольные компьютеры. (См. также плагин Image Prioritizer, который расширяет возможности Optimization Detective, обеспечивая правильное применение отложенной загрузки в зависимости от того, находится ли IMG в исходном окне просмотра.)

Когда "Детектив оптимизации" активен, он начнет отслеживать, какие вставки появляются в начальной области просмотра на основе фактических посещений вашего сайта. Имея эту информацию, Embed Optimizer позволит избежать ленивой загрузки встраиваемых изображений, которые появляются в исходном окне просмотра. Кроме того, для таких встраиваний выше сгиба Embed Optimizer также добавит ссылки предварительного подключения для ресурсов, которые, как известно, используются этими встраиваниями. Например, если в начальной области просмотра появляется встраивание YouTube, Оптимизатор встраивания с помощью Optimization Detective пропустит loading=lazy, а также добавит ссылку предварительного подключения для https://i.ytimg.com, который является доменом, с которого обслуживаются изображения видеопостеров YouTube. Такие ссылки предварительного подключения приводят к тому, что встраивания исходного окна просмотра загружаются еще быстрее.

Другая важная функция Embed Optimizer, реализованная с помощью Optimization Detective, - это уменьшение сдвигов макета, вызванных встраиванием, размер которых изменяется при загрузке. Это обычно наблюдается при встраивании сообщений WordPress или твитов. Оптимизатор встраивания отслеживает измененную высоту этих вставок. Сохранив эти измененные высоты, Embed Optimizer устанавливает соответствующую высоту в элементе контейнера ФИГУРА в качестве минимальной высоты, зависящей от области просмотра, чтобы при загрузке встраивания это не вызывало сдвига макета.

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

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

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