Добавьте явную ширину и высоту на все изображения с помощью JS/Jquery

#javascript #html #jquery #pagespeed #lighthouse

Вопрос:

Теперь для Google важно добавить явную ширину и высоту изображения, теперь мне нужно добавить это вручную на все сайты моих клиентов, есть ли способ добавить эти параметры на все изображения с помощью JS/Jquery ? И пройдите тест Google pagespeed.

Я пробовал использовать этот код, добавляя attr, но это не снимает флаг.

 $(document).ready(function(){
  $('img').each(function(idx, img) {
    $(this).attr({
      width: img.naturalWidth,
      height: img.naturalHeight
    })
  });
});

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

2. Если это как-то связано с поиском Google, они индексируют предварительно отрисованную страницу (без javascript), поэтому решение jquery не будет иметь эффекта.

3. @Kinglish это уже не совсем так, у Google есть технология обхода, которая может интерпретировать JS.

4. @Kinglish это для [lighthouse] , который встроен в Chrome: вкладка F12/lighthouse, затем перезагрузите свою страницу. Он выполняет все виды анализа, один из которых заключается в том, есть ли <img> у тегов height= width= атрибуты и. Добавление их после выполнения анализа не влияет на анализ. И, как отмечалось выше, это не повлияет на время рендеринга страницы , так как img тег будет отображаться без размера, загрузите изображение и измените макет страницы по мере увеличения размера изображения. Если тег img имеет размеры при первом отображении, страницу не нужно перестраивать, что может привести к существенному увеличению скорости.

5. Любая попытка, которая опирается на размеры изображения, определяемые самим клиентом , конечно, бессмысленна. Вся цель этого состоит в том, чтобы заранее сообщить клиенту о размерах изображения.

Ответ №1:

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

Ответ №2:

Попробуйте использовать

 $(window).load(function() {}

вместо

 $(document).ready(function(){}