Отмеченные Core Web Vitals элементы изображения не имеют явной ширины и высоты

Я проверял Core Vitals на PageSpeed ​​Insight и заметил, что он помечается Image elements do not have explicit width and height и предлагая Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

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

      <img src="someimage.jpg" width="100%" height="100%" alt="something" class="img-responsive">

Моя страница адаптивна, и я использую для нее bootstrap v3.x, так как это старая страница. поскольку страница адаптивна, и я использую class = "img-responsive", который автоматически изменяет размер изображения, но это влияет на жизненно важные элементы, такие как CLS.

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

Я заметил, что большая часть CLS, о которой сообщает Page Speed ​​Insigh, предназначена для совы Carousal.

Ниже приведена копия кода, который создает проблему CLS для изображений.

      <div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-12 lc-hp-col">
      <div class="owl-carousel owl-theme" data-items="1" data-items-desktop="1" data-items-tablet="[991,1]" data-items-mobile="[767,1]" data-pagination-speed="200" data-auto-play="true" data-stop-on-hover="true">
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+1">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+2">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+3">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+4">
        </div>
        <div class="item">
          <img alt="ALT" class="img-responsive" src="https://dummyimage.com/992x588/000/3431af&text=IMAGE+5">
        </div>
      </div>
    </div>
  </div>
</div>

Ссылка на CodePen

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

      <img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>
Источник

5 ответов

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

Я согласен с тем, что интеграция изображений разных размеров сложна и обременительна и, возможно, не всегда оправдана. Даже если вы интегрируете несколько размеров изображений, вы все равно можете сдвигать макет, если изображения настроены на масштабирование в соответствии с ЛЮБЫМ размером, а не только с набором параметров.

CLS с меньшей вероятностью будет отмечен Google (или беспокоить пользователей), если ваши изображения начнут загружаться очень быстро, так что размеры изображений будут известны до того, как макет сможет полностью отрисоваться (и, следовательно, сдвинуться). Отложите все, что вы можете, чтобы вывести изображения на передний план.

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

      <img class="img_scale"
    src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" 
    data-src="/img/img.jpg"
/>

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

Источник

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

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

Источник

ПРИМЕЧАНИЕ: размеры ваших изображений фиксированы механикой Bootstrap!

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

Итак, вы можете устанавливать фиксированные значения для размеров ваших изображений без изменения макета !!!

Вы найдете исходные шаги, которые использует Bootstrap (если они не были изменены для проекта) здесь:
https://getbootstrap.com/docs/3.4/css/#grid-media-queries

Как видите, стандарт Bootstrap: если ширина области просмотра становится больше, чем 769px размер меняется, как на 992px и дальше 1200px.

Взято из примера кода, размеры ваших изображений:

      // Up from Vieport width:  
768px = Image: 720x426px   
992px = Image: 940x557px   
1200px = Image: 992x588px

(Примечание: ширина области просмотра ниже 768pxcodepen не работает. Посмотрите размеры на исходной странице.)

Зная, что вы можете посоветовать изображениям фиксированного размера с помощью медиа-запросов. Вы можете сделать это, используя sass с оригинальными инструментами Bootstrap (см. Ссылку выше). Или сделайте что-то вроде этого:

      /* below 768px take values from original page */

@media (min-width: 768px { 
   .owl-carousel img {
      width: 720px !important;
      height: 426px !important; 
}
@media (min-width: 992px { 
   .owl-carousel img {
      width: 940px !important;
      height: 552px !important; 
}
@media (min-width: 1200px { 
   .owl-carousel img {
      width: 992px !important;
      height: 588px !important; 
}

ПРИМЕЧАНИЕ: я не совсем уверен, перезаписывает ли этот CSS разметку Bootstrap. Так что, возможно, вам нужно придать ему более высокую специфичность, например, используя div.owl-carousel div imgили что-то подобное. Если высота указана неправильно, считайте все размеры с исходной страницы. Иногда вам нужно будет быть более точным, например, с height: 588.xxxx px.

Источник

Когда вы используете тег img src, вам нужно добавить ширину и высоту независимо от фактической ширины и атрибута высоты изображения с тегом img для такого примера:

Фиктивное изображение

Так что это не Create CLI в аналитике страницы Google.

Источник

Вы можете обойти эту проблему,

  • Явная установка <img width height>- для значения высоты используйте свое лучшее предположение, какой будет наибольшая высота изображения

  • Позже переопределите атрибут высоты HTML-элемента с помощью следующего CSS:

         .my-img {
        height: auto;
    }

Однако обратите внимание, что это вызывает кумулятивный сдвиг макета, CLS, событие после загрузки изображения, поэтому вы, по сути, перемещаете проблему. Проблему CLS можно обойти, убедившись, что элемент-контейнер, в котором находится изображение, min-heightустановлен.

Вот полный исходный код примера компонента Svelte, где я работал над этой проблемой .

Источник
Другие вопросы по тегам