Czy baner nagłówkowy może mieć lazyload?

[Farlicki]

Strona zwiera wielkie banery w nagłówku. Nie mają wysokości i szerokości zdefiniowanej, a w wprowadzenie tych wartości powoduje problemy ze skalowaniem. Czy ma sens dodawanie do takiego baneru loading="lazy" ? 

Adres: https://cleancaracademy.pl/szkolenie-szlifowanie-polerowanie-level5-2dni

Na każdej podstronie jest inny baner. Nie mam za bardzo pomysłu jak to ogarnąć. Informatyk, który projektował stronę powiedział, że nie można wysokości i szerokości wprowadzać, bo się będzie rozlatywało właśnie te skalowanie na komórkach i innych ekranach.

 

Jak się to profesjonalnie i dobrze rozwiązuje z takim banerami?

 

P.S.

Wiem, że tam jest masa do zrobienia pod web core vitals, ale to małymi krokami. Projektanci stron mają to gdzieś. Tam były obrazki full hd po kilka MB, a ikonki 10px w rozmiarze fizycznym 600 px. Gdzieś tam to będzie wszystko poprawiane. Na razie wprowadzili webp.

 

[jimmi]

według mnie nie ma sensu... ale możesz jak chcesz

[Farlicki]

Jedne programista mi coś takiego zaproponował

 

<picture>      

<source media='(max-width: 320px)' srcset='tempOpen/images/news-slider-main-obrazekbox072lg2t2mah17o-a-320-400-1.webp'>

<source media='(max-width: 480px)' srcset='tempOpen/images/news-slider-main-obrazekbox072lg2t2mah17o-b-480-400-1.webp'>      

<source media='(max-width: 640px)' srcset='tempOpen/images/news-slider-main-obrazekbox072lg2t2mah17o-c-640-450-1.webp'>      

<source media='(max-width:1024px)' srcset='tempOpen/images/news-slider-main-obrazekbox072lg2t2mah17o-d-1024-500-1.webp'>            

<img src='tempOpen/images/news-slider-main-obrazekbox072lg2t2mah17o-e-1903-700-1.webp' alt='Razem rozwiążemy każdy problem'>    

</picture>

 

Że to niby tak ma działać, że dla różnych rozdzielczości ładuje różne rozmiary obrazu - banera, ale w zasadzie, który potem jest brany pod uwagę przez Googlebota?

[Mion]

Skupisz się NA nieistotnych sprawach

[Farlicki]

Czemu? Czyli zlać te banery? Czy to przekombinowywanie?

[jimmi]

Walkę z tym banerem zostaw na później 

[Farlicki]

No ok, w sumie pliki po kompresji na wbpp są małe mimo rozmiaru. Tylko chciałem uniknąć pogarszania CLS z powodu braku rozmiaru. No, ale CLS mieści się w normie w pagespeed insights (co mnie nieco dziwi bo one mają sporą wysokość). No, ale mogę to olać na razie.

 

No to jakie newralgiczne problemy w pierwszej kolejności rozwiązać?

 

Na głównej jest cała seria banerów i  muszą niby zostać. Teraz jest bodajże 6, ale może być nawet 15. Zależy od ilości aktualnie dostępnych szkoleń. Rozmiar fizyczny mają w:1920px i przeskalonwae. Są jeszcze w innym miejscu wyświetlane tu w większym rozmiarze. Pagespeed insights ich w ogóle nie wskazuje, ale może dlatego, że wykazuje tylko próbkę i akurat inne obrazki, które są mocniej przeskalowywane. Na wersji demo są już poprawione.

 

To co te banery też olać? Według mnie to one są ogólnie nieczytelne i niespecjalnie sensownie zrobione, no ale muszą zostać.

Edytowane 13 Maja 2022 przez jimmi
linki out

[Xenobi]

Projektując nowe Weby warto pomyśleć o formacie .AVIF,który jest znacznie lżejszy od .webp. A pod system WordPress można znaleźć kilka ciekawych wtyczek optymalizujących właśnie pod ten format np. webp-converter-for-media (opcja konwerji do AVIF jest tylko w w wersji PRO, webp jest darmowe), shortpixel-image-optimiser (tu z tego co pamiętam (a pamięć ludzka jest dosyć ulotna) jest 30 konwersji w miesiącu).

[blazejs]

16 godzin temu, Xenobi napisał:

Projektując nowe Weby warto pomyśleć o formacie .AVIF,który jest znacznie lżejszy od .webp. A pod system WordPress można znaleźć kilka ciekawych wtyczek optymalizujących właśnie pod ten format np. webp-converter-for-media (opcja konwerji do AVIF jest tylko w w wersji PRO, webp jest darmowe), shortpixel-image-optimiser (tu z tego co pamiętam (a pamięć ludzka jest dosyć ulotna) jest 30 konwersji w miesiącu).

 

https://caniuse.com/?search=avif i tyle w temacie (w przyszlosci moze sie to zmienic, ale mowimy o stanie na dzisaj).

[blazejs]

Dobra, to jeszcze dla jasnosci.

 

1) obrazy "above the fold" nie powinny miec lazy loadingu bo to bedzie wplywac na First Contentful Paint.

2) wstawienie width i height w <img> poprawia Cumulative Layout Shift, ale od dosc dawna przegladarki nie interpretuja tego jak sztywne okreslenie wymiarow (zwlaszcza jesli masz responsywne skalowanie obrazow na width: 100%, height: auto) tylko jako okreslenie proporcji - na upartego mozna to tez ustawic jako aspect-ratio w CSS (np. w polaczeniu z object-fit dla img)

3) slidery/karuzele "above the fold" to jest bardzo glupi pomysl, co udowodniono juz nie raz, a im wiecej tych obrazow tam ladujesz tym dluzej trwa ladowanie i First Contentful Paint; jesli naprawde bardzo to chcesz to lepiej przeniesc to nizej i wtedy mozesz spokojnie juz dac ten lazy loading (ale oprocz pierwszego), no chyba ze skrypt, ktorego do tego uzywasz sie na tym wywali, ale podsumowujac karuzele juz nie dzialaja bo wiekszosc userow nie czeka az to zacznie sie przewijac tylko skroluje nizej

4) uzywam tez srcset'ow, ale to jest bardziej zlozony problem niz sie wydaje bo wez pod uwage, ze teraz smartfony maja juz bardzo czesto Full HD i tak czy siak zaladuje sie obraz o najwiekszych rozmiarach, musialbys to tak ustawic, ze ten dla smartfona ma duze wymiary, ale jest duzo bardziej skompresowany (po przeskalowaniu nie bedzie widac takiej roznicy nawet jesli ma jakosc rzedu 30-40)

[Farlicki]

Czyli nic co jest ładowane w pierwszym ekranie nie powinno mieć lazyload?

 

Ad. 2) to jak to się rozwiązuje przy responsywnych obrazach? Olewa się ten width i height jeśli nie ma dużego problemu z CLS?

[blazejs]

1 godzinę temu, Farlicki napisał:

Czyli nic co jest ładowane w pierwszym ekranie nie powinno mieć lazyload?

 

Dokladnie. Bo chcesz zeby to sie zaladowalo od razu. A lazyload po prostu wstrzymuje ladowanie obrazow nizej w kodzie. Wiec strona sie zrenderuje szybciej.

 

1 godzinę temu, Farlicki napisał:

Ad. 2) to jak to się rozwiązuje przy responsywnych obrazach? Olewa się ten width i height jeśli nie ma dużego problemu z CLS?

 

Ja zwykle olewam width i height, ale zalezy co rozumiesz przez responsywne. Bo jesli tylko skalowanie to nie ma problemu (mozesz miec ustawione w <img> width i height na ile chcesz, nie rozjedzie ci sie obraz bo traktowane to jest jak proporcje uwzgledniane przy liczeniu CLS, dopiero jak podasz w css to wyswietli ci w takim rozmiarze w jakim podasz). Ale jesli uzywasz np. <picture> i srcset, a masz takie widzimisie zeby na smartfonie ladowac kwadrat, a na desktopie podluzny prostokat, to juz bym to width i height olal. Bo ono jest ustawiane dla tego defaultowego <img>.

[okazwłoka]

Ale nie wiesz co jest pierwszym ekranem, może Ci się wydawać że jest to header. Ale są też np. kotwice czy zwykłe odświeżenie strony a jeszcze lepiej można sobie odświeżyć CTRL+F5 po przewinięciu na dół. Po co mi wtedy wgranie headera od razu?