CLS sklep z herbatą duże zdjęcia

Mam problem ze współczynnikiem CLS dla sklepu internetowego z herbatą. Wyskoczyło mi to w konsoli Google po jakichś tam zmianach. Pododawałam wszędzie wysokość i szerokość obrazków, pousuwałam zbędne skrypty, no na ile się dało i w granicach swoich możliwości. Początkowo myślałam, że to zdjęcia to powodują, bo w sklepie są wszędzie takie duże zdjęcia herbaty i trochę to jest kiepsko rozwiązane, ale one mają wszystkie zastosowany lazyload, więc chyba to nie to.

Jak robię test w page speed inisghts to w danych laboratoryjnych po tych zmianach wychodzi CLS w porządku. Z kolei w tych danych statystycznych zbieranych w Chrome dalej pokazywało, że jest źle. Z kolei dzisiaj wyświetla, że ma za mało danych. Wysłałam zatem prośbę o sprawdzenie w konsoli Google i wyskoczyło, że poprawne. Czerwone błędy zniknęły, ale na chwilę. Po czym zaraz znowu się pojawiły. Czy to możliwe, że potrzeba więcej czasu, żeby to się zaktualizowało (status sprawdzenia - jest jako poprawione), czy jednak coś jest źle dalej.

Niby wygląda na ok w pagespeed insights, a w konsoli G. pokazuje błędy.

Wiem, że tam są jeszcze inne problemy, ale ponoć teraz to CLS dość ważne jest.
Zna się tu ktoś na tym?

Podlinkuj tą stronę.

Jeśli te lazy zdjęcia ładujesz po fakcie, to czy ich placeholdery mają zadeklarowaną taką samą wysokość/szeokość jak finalne grafiki?
Może jakieś elementy samego interfejsu zawierają grafiki o niezdefiniowanych rozmiarach?
Może skrypty dodają do strony jakieś elementy, których nie ma w bazowym layoucie?
Może doczytywane z opóźnieniem czcionki powodują przesuwanie całości?

Dzięki za odpowiedź. To jest jedna ze stron wskazanych w Google Console. Nie ładują się od razu, a przynajmniej na telefonach na pewno nie, bo są poza pierwszym ekranem

Niestety w kwestii obrazków - tych zdjęć herbaty - nie jest to w ogóle dobrze rozwiązane- jak zobaczysz zdjęcie herbaty ma 800 x 600 i jest przeskalowane przez skrypt w kategorii. Przy czym pagespeed insights nigdzie nie odnosi się we wskazówkach do tych zdjęć herbaty, ani odnośnie wprowadzenia rozmiarów, ani zaleceń stosowania obrazów nowej generacji jak webp itp. Przypuszczam, że to przez ten leazyload.

Wcześniej wskazywał właśnie obrazki typu koszyka i inne ikony i elementy, że należy im wprowadzić width i height, ale tych zdjęć herbaty nie wskazywał.

Planuję coś z tymi zdjęciami herbat zrobić. Np. przejść na webp i może na sztywno jakoś ustalić ich wymiar, tak żeby nie były skalowane. Tak to chyba powinno być od początku. Tylko, że to już muszę zaangażować programistę, który robił ten sklep i chyba nie będzie to łatwe.

Na dzień dzisiejszy dla tej kategorii CLS z danych laboratoryjnych w pagespeed inisghts wychodzi 0,09. Czyli niby ok. Mam też wtyczkę do Chorme o nazwie CLS Checker, gdzie tam pokazuje niby te przesunięcia i tam też jest ok, a przesunięcia układu są głównie na banerze i tym górny menu, ale Search Console mi tę i inne kategorie wskazuje jako z błędami.

W karcie produktu (już w samym produkcie ze sklepu) z CLS jest w ogóle dramat, ale w pierwszej kolejności próbuję ogarnąć te kategorię. Tam już wskazuje te sugestie formatów nowej generacji. Przy czym z kartą produktu może też mi coś podpowiesz? Co ciekawe w Google Console są wskazane głównie kategorie, a nie strony kart produktu. Może to wynika z faktu, że sklep ma na razie za mało odwiedzin i w stosunku do kategorii jest więcej danych, a w przypadku pojedynczych herbat tych danych brakuje, bo też to czasem pokazuje, że brak jakiegoś wskaźnika z powodu niewystarczających danych.

Pierwsze co mi się rzuca w oczy, to fakt, że przy każdym przeładowaniu strona podskakuje, co najprawdopodobniej wynika z faktu niezadeklarowania height dla elementu

<nav class="navbar navbar-main navbar-expand-xl navbar-light my-0 border-bottom" style="top: 0px;">

Podobny problem jest chyba z elementem:

<div id="carousel" class="flexslider">

bo widzę, że elementy wyświetlane poniżej niego, to już w ogóle robią fikołki.

Najpierw popraw to.

Spróbuję, tylko nie wiem czy to z kolei czegoś innego nie uszkodzi.

Jeśli możesz, zajrzyj proszę też do karty produktu - konkretnej jakiejś herbaty. Tam jest dużo gorzej. Wydaje mi się, że to te duże zdjęcie herbaty i galeria przewijana powodują w karcie produktu największy problem, ale może się mylę.

Czym to sprawdzasz?

Edycja.

aha ta karuzela to w karcie produktu.Rzeczywiście to jest właśnie te dziadostwo czyli obrazek główny herbaty oraz ta mini galeria. Z reguły chyba się ta nie robi? Tylko obrazki mają stały wymiar. Ze sztywną wysokością div'ów, które je zawierają znacznie się poprawia cls.

Tylko kurczę nie wiem jak to zrobić.

1. Jak ustawię width i height to na telefonach główne zdjęcie herbaty wychodzi poza ekran.
2. Jak ustawię samo height to przycina zdjęcie na kompie, a na telefonach spycha galerię w dół.
3. style="height: 800px; width:600px; max-width: 90%; height: auto;" z kolei wraca do starego problemu CLS.

Jest na to jakiś sposób?

Nowamika napisał(a):

Czym to sprawdzasz?

Narzędziami developerskimi:
https://www.a2hosting.com/blog/chrome-devtools/

Tylko kurczę nie wiem jak to zrobić.

1. Jak ustawię width i height to na telefonach główne zdjęcie herbaty wychodzi poza ekran.
2. Jak ustawię samo height to przycina zdjęcie na kompie, a na telefonach spycha galerię w dół.
3. style="height: 800px; width:600px; max-width: 90%; height: auto;" z kolei wraca do starego problemu CLS.

Jest na to jakiś sposób?

Np. coś w stylu:

<img ... width="123" height="456" style="width:100%;">

I będziesz mieć fotkę dopasowującą się do szerokości kontenera i liczącą sobie wysokość jeszcze przed wczytaniem samego zdjęcia.

Oprócz obrazków zauważyłem, że niektóre skrypty nie są skompresowane (popper.js, masonry.pkgd.js itd), oraz sprawdziłbym, czy można coś wyciąć np z bootstrapa.

@Freja Draco

Niestety nie działa. Dla Div nie działa wprowadzenie wymiarów width i height w html dopiero jak ustawię w stylach to spada CLS. Jak wprowadzę w html to dalej jest 0,6 do nawet czasem 1 o zgrozo. Zależy jak wypadnie.

Z kolei te zdjęcia herbaty są przewijane i wyświetlane wszystkie.

<div class="col-12 col-lg-6">
  <img src="{$cfg.base_url}{$products_path}{$this.photos[0]}" alt="" class="d-none d-print-block img-fluid mx-auto" />
  
  <div class="photo-slider-wrapper d-print-none">
      <div id="slider" class="flexslider" style="width: 100%;">
          <ul class="slides">
              {foreach $this.photos as $photo name=photos}
              <li>
                  <img src="{$cfg.base_url}thumb/600/800/{$products_path}{$this.name|artseven_urlencode}-{$photo}" class="img-fluid d-block mx-auto" id="photo-{$smarty.foreach.photos.iteration}" alt="{$this.name|escape}" title="{$this.name|escape}" width="600" height="800" />
              </li>
              {/foreach}
          </ul>
      </div>
  
      <div id="carousel" class="flexslider" style="height: 111px;">
          <ul class="slides">
              {foreach $this.photos as $photo name=thumbs}
              <li>
                  <img src="{$cfg.base_url}thumb/150/111/{$products_path}{$this.name|artseven_urlencode}-{$photo}" alt="{$this.name|escape}" title="{$this.name|escape}" width="150" height="111" /></a>
              </li>
              {/foreach}
          </ul>
      </div>
  </div>

Nie mam pomysłu ;/. Zmienianie width i height tego głównego zdjęcia w ogóle nic nie zmienia. Więc to chyba skrypt ustala. Jedynie określenie w css wysokości tego div'a id="slider" obniża ten cls. Chwilowo tak zrobiłem ustalając na 600px, trochę się to na telefonach rozlatuje, a zdjęcie się przycina, ale przynajmniej cls spada do zielonego poziomu.

@Xarviel: Czy mogę to jakoś ręcznie zrobić na pliku i wgrać go po prostu. Czy muszą tam być jakieś brotli na serwerze, czy coś?

@Nowamika
Pliki możesz skompresować ręcznie przez jakieś narzędzie online, albo w przypadku bibliotek poszukać już gotowych na jakimś hostingu i wtedy jedynie trzeba podmienić plik na serwerze.

Edit: tylko jak masz jakieś pojedyncze pliki, które sam tworzyłeś np skrypt do menu, albo coś innego to przed skompresowaniem zrobiłbym kopie, żeby w razie jakichś zmian był dostęp do źródła, bo po zmianie, może być ciężko przywrócić oryginał.

Nowamika napisał(a):

@Freja Draco

Niestety nie działa. Dla Div nie działa wprowadzenie wymiarów width i height w html

Owszem. width i height jako atrybuty działają tylko w przypadku IMG.

Zmienianie width i height tego głównego zdjęcia w ogóle nic nie zmienia. Więc to chyba skrypt ustala.

Myślę, że próbujesz ułożyć puzzle metodą podrzucania klocków ;) Tzn. czasami na szybko też robię po prostu coś, co mi akurat intuicja podpowiada, bez ogarniania całości, ale jeśli chcesz zapanować nad zachowaniem swojej strony, to musisz rozumieć, co się na niej dzieje.