Блог

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

Итак, у меня есть 4 файла:

 header-big.webp
header-small.webp
header-big.jpg
header-small.jpg
 

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

 <link rel="preload" href="header-small.jpg" as="image" type="image/jpg" media="(max-width: 575px)">
<link rel="preload" href="header-small.webp" as="image" type="image/webp" media="(max-width: 575px)">
<link rel="preload" href="header-big.jpg" as="image" type="image/jpg" media="(min-width: 576px)">
<link rel="preload" href="header-big.webp" as="image" type="image/webp" media="(min-width: 576px)">
 

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

и да, это имеет смысл, потому что jpg и webp могут быть реализованы одновременно. поэтому, конечно, браузер предварительно загружает оба.

но могу ли я сказать «если вы поддерживаете webp, предварительно загрузите webp и не загружайте jpg»?

Спасибо, Флориан

Решение, которое я реализовал, включает в себя небольшой скрипт, взятый из https://avif.io/blog/tutorials/use-avif-in-css / для обнаружения AVIF и WEBP, потому что мне уже нужно было добавить поддержку CSS для обоих форматов, но для вашего варианта использования это может быть немного упрощено. Как только я узнаю, что он поддерживается, я добавляю preload ссылку в заголовок.

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

 <script type="text/javascript">
  function addPreloadLink(img, type) {
    var fileref = document.createElement('link');
    fileref.setAttribute('rel', 'preload');
    fileref.setAttribute('as', 'image');
    fileref.setAttribute('href', img);
    fileref.setAttribute('type', type);

    document.head.appendChild(fileref);
  }

  function AddClass(c) {
    document.documentElement.classList.add(c);
  }

  var webp = new Image();
  webp.src =
    'data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==';
  webp.onload = function() {
    AddClass('webp');
    addPreloadLink('header-small.webp', 'image/webp');
    addPreloadLink('header-big.webp', 'image/webp');
  };
  webp.onerror = function() {
    //load JPG
    addPreloadLink('header-small.jpg', 'image/jpg');
    addPreloadLink('header-big.jpg', 'image/jpg');
  };
</script>
 

Итак, я пришел к этому вопросу, потому что пытаюсь улучшить LCP для последнего обновления поискового сигнала Google. Я тоже хотел предварительно загрузить webp, когда поддерживается, и предварительно загрузить jpg, когда нет.

В случае предварительной загрузки jpg, когда webp не поддерживается, это может произойти только в том случае, если браузер поддерживает предварительную загрузку, а не webp. Когда я посмотрел на https://caniuse.com/webp и сравнил его с https://caniuse.com/link-rel-preload чтобы определить, насколько велика эта область пересечения, я заметил, что существует не так много версий браузеров, которые поддерживают предварительную загрузку, а не webp, в основном safari. Я суммировал это пересечение в таблице ниже. Столбцы webp и preload показывают первую версию с достаточной поддержкой webp и элемента link и предварительной загрузки соответственно. Столбец version gap показывает, какие версии попадают в категорию «поддерживает предварительную загрузку, но не webp», и% пользователей в gap, показывает, какой процент глобальных пользователей попадает в эту категорию и выиграет от предварительно загруженных файлов jpeg. % были агрегированы из https://caniuse.com/usage-table

Итак, примерно 1,93% во всем мире, и я предполагаю, что если ваша аудитория в основном из США, то, вероятно, меньше, если предположить, что в «развитом» мире больше людей используют новейшее оборудование и браузеры, чем где-либо еще. Я также ожидаю, что это число будет асимптотически уменьшаться к нулю с течением времени, и что пользователи, использующие эти старые браузеры, с большей вероятностью будут подключаться к более медленным соединениям.

Моя оценка из этого анализа заключается в том, что, вероятно, не стоит пытаться выполнять какую-либо предварительную загрузку файлов jpeg, если у вас есть доступные ресурсы webp, потому что пользователи, которые выиграют, — это а) небольшая доля от общего количества и б) вероятно, сложнее оптимизировать в целом, с уменьшающейся отдачей по мере того, как пользователизакройте эти версии браузера.

Если вы похожи на меня, и ваша цель — перевести достаточное количество пользователей с «плохих» и «нуждающихся в улучшении» показателей по основным веб-показателям в «хороший» диапазон, чтобы достичь порога 75% пользователей, указанного Google, вы получите какое-то специальное указание на «быстрый сайт» в спискерезультаты поиска, тогда вы, вероятно, можете не беспокоиться об этой когорте.