• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Raport PageSpeed Insights: CLS, LCP

Object Storage Arubacloud
0 głosów
77 wizyt
pytanie zadane 3 lutego w HTML i CSS przez Loki Użytkownik (560 p.)

Witam.

Bardzo bym prosiło o pomoc jak mogę poprawić wyniki dla parametrów CLS, LCP.

Tutaj raport z google pagespeed insight:

https://pagespeed.web.dev/analysis/https-lexdex-pl-uslugi-cesielsko-dekarskie/yd9xvmk6tt?form_factor=desktop

Nie mogę zrozumieć jak mogę poprawić LCP dla głównego obrazka. W przypadku desktop obrazek ten waży 250kb (na mobile około 50kb). Dodatkowo preloduje go więc dlaczego google ma z tym jakiś problem. Przecież nawet nie ma informacji o tym że rozmiar czy format jest niewłaściwy.

Druga sprawa to CLS. Co ja mam w kodzie zrobić aby pozbyć się tych niskich wyników?

 

Nie wiem skąd się niby biorą te "mityczne" przesunięcia. Obrazki przecież mają ustalone rozmiary.
 

Natomiast na innej podstronie:

https://pagespeed.web.dev/analysis/https-lexdex-pl-market/hllwzzosmh?form_factor=mobile
 

Dla google największym problemem jest LCP elementu textowego:

Dlaczego tutaj text jest problemem?

Pomniejszy jeszcze problem to redukcja nie używanego kodu JS.

Nie wiem niby jak miałbym jquery zredukować jak to cała paczka jednolita. Z tym chyba trzeba już żyć albo nie korzystać.

Natomiast nie rozumiem jeszcze co jest nie tak z ze skryptem googla Google Tag. To przecież google ten skrypt tworzy więc dlaczego teraz raportuje że część jest nie używana.

Tak więc proszę bardzo o pomoc w wyjaśnieniu tego LCP i CLS. Co jest nie tak w kodzie html i jak mogę to poprawić.

Z góry dziękuję.

 

 

1 odpowiedź

+2 głosów
odpowiedź 3 lutego przez rafal.budzis Szeryf (85,260 p.)
wybrane 5 lutego przez Loki
 
Najlepsza

Dużo błędów popełnionych podczas optymalizacji. W kodzie widać bardziej oszukiwanie googla niż realną optymalizacje. Dużo artykułów o optymalizacji obrosło w mity lub są nieaktualne więc nie dziwi Ci się że trudno się w tym połapać. 

Pierwsza zasada preload nie jest do niczego potrzebny jeśli możesz podać wprost zasób który pobierasz.

Druga zasada jak najmniej JavaScriptu, najlepiej gdyby JS nie był wcale potrzebny do wyświetlenia strony. a służył tylko do interaktywności PO wczytaniu strony. Tak abyś mógł wczytać JSy gdy user już ogląda treść. 
--------------------------
Obie zasady łamiesz juz przy wczytywaniu CSSów 

<link rel="preload" as="style" onload="this.onload=null; this.rel='stylesheet'" href="fonts/social/styles.min.css">

Nie dość że nie potrzebnie użyty preload to dodatkowo wymagasz uruchomienia JSa po załadowaniu. 
--------------------------------------
Jeśli nie próbowałeś ustaw wczytywanie WSZYSTKICH plików JS jako defer. Nie musisz też umieszczać znaczników <script> na dole strony jeśli używasz atrybutów defer lub async :) 
----------------------------------
Ale wracając do Twoich problemów: 
Główny obrazek ma class="lazy-img" data-src="images/lexdex/roofing/top-slide1.webp" więc znów łamiesz zasadę z JSem. Aby Twój obrazek się wyświetlił musisz wczytać wszystkie JSy odpowiedzialne za lazy-img i dopiero po tym wszystkim przeglądarka może wyświetlić obrazek. Dodatkowo przez łamanie pierwszej zasady z preload przeglądarka niezaleznie od rozdzielczości wczytuje duży obrazek który jest w preload. Niepotrzebnie tracisz transfer na wczytywanie dużego obrazka a cała reszta zasobów traci na prędkości wczytania. 

Jak to naprawić? USUŃ lazy-loading dla głównego obrazka. lazy-loading używaj tylko do pozostałych slidów jeśli będą obecne. Do innych obrazków zamiast JSa użyj natywnego lazyloadingu z przeglądarek

<img loading="lazy" src="image.jpg" alt="..." />

Zamiast używania JSa do zmiany obrazka

	var bannerImage = document.getElementById('baner-image');

	if (window.screen.width <= 800) {
		bannerImage.dataset.src = 'images/lexdex/roofing/top-slide1-700x.webp';
	}

użyj atrybutu srcset i sizes dzięki temu obrazek będzie mógł się wczytać bez używania JSa i preload i wczyta się tylko jeden :) 

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

---------------------------------------

Kolejna rzecz usuń loader który zasłania stronę. Potrzebujesz JSa aby schować loader więc jest zaprzeczeniem optymalizacji :) Gdy usuniesz loader zobaczysz co się dzieje z czcionką i łatwiej będzie doradzić rozwiązanie :) 

PS daj znać jak wszystko poprawisz to będziemy mogli zerknąć na pozostałe błędy. Ten loader na całą stronę utrudnia debugowanie co się tam pod spodem dzieje. 

komentarz 3 lutego przez Loki Użytkownik (560 p.)
Dzięki wielkie za wyjaśnienie.

Wprowadziłem poprawki o których mi napisałeś oprócz tych związanych z css.

Bo jak usunę te funkcje to mi się style na stronie rozwalają trochę. Więc będę musiał poszukać co się miesza po zmianach.

Co do reszty to zrobiłem. Ale efektu w wynikach testu nie ma.
komentarz 3 lutego przez rafal.budzis Szeryf (85,260 p.)

Ok teraz widać lepiej gdzie jest problem ;) Ikony! Korzystasz z techniki dodawania ikon jako czcionka i masz tych czcionek aż trzy. Co również jest problemem. Przeglądarki ustalają priorytety pobierania względem typu pliku który wczytujesz Tu jest przykładowa tabela jak dział to w chrome: https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit?hl=pl

Czcionki mają wysoki priorytet dlatego też blokują wczytywanie innych zasobów. Dodatkowo czcionki "skaczą" przy wczytywaniu i dlatego dużo Ci się przesuwa. W moich projektach najlepiej sprawdzało mi się dodawanie w środku HTMLa znacznika <svg> z ikoną. Jeśli plik HTML mieści się w granicach 32 kb to jest git. Obecnie po gzip masz zaledwie 4 kb więc śmiało bym dodał ikony których używasz jako inline ;) PS Używając fill="currentColor" możesz używać kolorów czcionki :) 

Co do obrazków źle mnie zrozumiałeś. Chciałem abyś dodał loading="lazy" do WSZYSTKICH obrazków OPRÓCZ obrazka głównego. Główny obrazek i logo ma się wczytać możliwie jak najszybciej.


Ominąłeś dodanie defer do pierwszego skryptu. Tutaj też dodaj ;)  

 

<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>


Warto też dodać jakiś rozmiar dla głównego img. (możesz skorzystać z proporcji robiąc na pozycji relatywnej width:100% i padding-bottom:50%, wtedy wysokość jest 50% szerokosci :) policzysz sobie dla tego zdjęcia i bedzie git) Bez tego przeglądarka bedzie wczytywać zdjęcia poniżej bo beda przez chwilę w view port ;) 

Te CSSy musisz poprawić spróbuj jeszcze raz może jakąś literówkę zrobiłeś i dlatego się popsuło ;) 

Przy okazji preload dla skryptów mozesz usunąć nic on nie daje skoro przeglądarka może odczytać znacznik <script> ;) 

To do wywalenia :) 

    <link rel="preload" as="script" href="js/jquery-3.6.0.min.js">
    <link rel="preload" as="script" href="js/jquery.themepunch.tools.min.js">
    <link rel="preload" as="script" href="js/jquery.themepunch.revolution.min.js">
    <link rel="preload" as="script" href="https://www.googletagmanager.com/gtag/js?id=G-EBENS9N442">
    <link rel="preload" as="script" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js">

 

komentarz 4 lutego przez Loki Użytkownik (560 p.)

Znowu dziękuję za obszerne wyjaśnienie.

Nie wiedziałem jak mam użyć tego svg ze znacznika ikonką, więc umieściłem ikonkę w znaczniku <i>. I to pomogło. ogólny wynik znacznie się poprawił (o około 20 pkt).Napisałeś abym ustalił rozmiar dla głównego obrazka obliczając to z proporcji relatywnej. Nie bardzo rozumiem o co chodzi. Dodałem natomiast na sztywno rozmiar width i height i to pomogło trochę bo wynik poszedł do góry zarówno dla mobiliki jak i desktop. Ale nie wiem czy to właściwa droga :)

Chociaż skrypt google dalej twierdzi że jest dużo przesunięć. I dalej jest to nieszczęsne LCP dla diva z textem.

 

komentarz 4 lutego przez rafal.budzis Szeryf (85,260 p.)

Co do SVG to jest to format tekstowy grafiki wektorowej. Trzeba by było zerknąć na stronę z której masz czcionki i sprawdzić czy nie da się pobrać ikon w innym formacie niż czcionka. Jeśli nie jesteś przywiązany do obecnych ikon to znajdź odpowiedniki tutaj ;) 

https://pictogrammers.com/library/mdi/

I finalnie kod będzie wyglądać tak :) 
 

<li>
     <svg viewBox="0 0 24 24"><path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg>
     <a href="tel:+48600139238">+48 600 139 238</a>
</li>

Znacznik <i> nie jest do ikon i w sumie dużo nie zmienia. Dodaje on styl "italic" czyli pochyły do tekstu w środku. Nie powinieneś go stosować bo ikona to nie tekst.

Ja już jakiegoś dużego problemu nie widzę. Dzięki temu że dałeś wymiary do zdjęcia slidera wszystko się ładnie trzyma podczas wczytywania :) Co do proporcji to chodziło mi o responsywność gdybyś chciał zmniejszać szerokość i wysokość obrazka zachowująć jego proporcje. Ale widze że udało Ci się uzyskac taki efekt :) Ja najcześciej robie to za pomocą padding-bottom:XX% ponieważ procenty dla właściwości padding to procent szerokosci :) Jesli jesteś ciekawy możesz zerknać na mojej stronie jak działa odtwarzasz YouTube gdy zmniejszasz okno przeglądarki :)  (klasa CSS .videoWrapper)

https://budzis.pl/Wpisy/Prace/Gothic/Zombie-Mod/

Pamiętaj że narzędzia do analizy są dla developerów do łatwiejszego wyszukiwania problemów. Jednak jako developer możesz podejmować własne decyzje. Czasem po prostu nie warto poświecić następnych X godzin na optymalizacje która da bardzo małą różnicę. 

U mnie nie widzę błędu z LCP. 

komentarz 5 lutego przez Loki Użytkownik (560 p.)
Dziwne, u mnie dalej wysŧępuje.

Podobne pytania

0 głosów
1 odpowiedź 831 wizyt
0 głosów
1 odpowiedź 246 wizyt
pytanie zadane 7 grudnia 2015 w Nasze projekty przez makoso Mądrala (7,380 p.)
+1 głos
2 odpowiedzi 290 wizyt
pytanie zadane 9 czerwca 2020 w HTML i CSS przez Mirek Błażejewski Początkujący (280 p.)

92,539 zapytań

141,381 odpowiedzi

319,466 komentarzy

61,926 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...