Image Prioritizer v1.0.0-beta2

Этот плагин оптимизирует загрузку изображений (и видео) с определением приоритетов для улучшения функции Largest Contentful Paint (LCP), отложенной загрузки и более точного выбора размера изображения.

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

- Добавьте ссылки fetchpriority=high preload, специфичные для точки останова (как элементы LINK[rel=preload], так и заголовки ответа на ссылку) для URL-адресов изображений элементов LCP:

- Элемент IMG, включая атрибуты srcset/sizes, предоставляемые как imagesrcset/imagesizes в LINK.

- Первый элемент SOURCE с атрибутом типа в элементе PICTURE. (Элементы PICTURE с художественным оформлением, использующие медиа-запросы, не поддерживаются.)

- Элемент с атрибутом встроенного стиля CSS-фонового изображения.

- Элемент с фоновым изображением CSS, примененным с помощью таблицы стилей (если изображение имеет разрешенное происхождение).

- Афиша элемента ВИДЕО.

- Убедитесь, что fetchpriority=high добавляется в IMG только в том случае, если он является элементом LCP во всех реагирующих точках останова.

- Добавьте fetchpriority=low к тегам IMG, которые появляются в начальной области просмотра, но невидимы, например, когда они являются последующими слайдами карусели.

- Отложенная загрузка:

- Применять отложенную загрузку к тегам IMG в зависимости от того, появляются ли они в начальном окне просмотра какой-либо точки останова.

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

- Отложенная загрузка тегов ВИДЕО путем установки соответствующих атрибутов в зависимости от того, отображаются ли они в исходном окне просмотра. Если VIDEO является элементом LCP, ему присваивается значение preload=auto; если он находится в исходном окне просмотра, остается значение по умолчанию preload=metadata; если его нет в исходном окне просмотра, он получает preload=none. Для видео с отложенной загрузкой также восстанавливаются первоначальные атрибуты предварительной загрузки, автозапуска и постера, когда ВИДЕО выходит в область просмотра.

- Адаптивные размеры изображений:

- Вычислите атрибут размеров, используя ширину изображения, полученного из метрик URL-адреса для каждой точки останова (если он не загружен с отложенной загрузкой, поскольку затем обрабатывается с помощью size=auto).

- Убедитесь, что для тегов IMG установлен параметр size=auto после настройки правильной отложенной загрузки (см. выше).

- Уменьшите размер постера ВИДЕО с полного размера до размера, соответствующего максимальной ширине видео (на рабочем столе).

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

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

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