Google učí, ako môžete optimalizovať obrázky pre svoju webovú stránku elektronického obchodu

Počas videorelácie Google hovoril Alan Kent o optimalizácii obrázkov pre vašu webovú stránku elektronického obchodu.

Ponúka niekoľko tipov pre SEO profesionálov, ktoré im pomôžu optimalizovať obrázky pre ich webovú stránku elektronického obchodu:

• Odstránenie kumulatívneho posunu rozloženia,
• Správna veľkosť obrázkov,
• Využitie najlepšieho formátu obrazového súboru,
• Správna kompresia obrázkov,
• Ukladanie obrázkov do vyrovnávacej pamäte v prehliadači,
• Správne sekvenovanie sťahovania obrázkov

Eliminujte Kumulatívny posun rozloženia

Alan podrobne vysvetlil kumulatívny posun usporiadania alebo CLS. Stručne povedané, CLS je miesto, kde sa obsah vašej stránky viditeľne pohybuje na obrazovke.

Poznáte tie stránky: začnete čítať alebo sa pokúšate kliknúť na odkaz a zrazu sa obsah stránky pohne.

Obrázky môžu prispieť k tomuto problému, ak sa používajú nesprávne, hovorí. CLS má taký vplyv na používateľskú skúsenosť, že ho Google definoval ako jednu z troch metrík Core Web Vitals.

Prečo môžu obrázky spôsobiť CLS? Ak chcete načítať stránku, vysvetľuje Alan, váš webový prehliadač začne sťahovať značku HTML stránky. Väčšina prehliadačov začne zobrazovať hornú časť stránky ešte pred stiahnutím celej stránky.

Aby sa skrátil čas čakania, všetky odkazy na obrázky sa pridajú do frontu zdrojov na stiahnutie. Do fronty sa pridajú aj súbory JavaScript a CSS.

Tieto súbory sa potom stiahnu paralelne s hlavnou stránkou, niekoľko naraz.

Problém je, keď prehliadač pred vykreslením obsahu stránky nepozná rozmery obrázka.

Posun rozloženia nastane, ak prehliadač zistí, že neponechal správne množstvo miesta pre obrázok. CLS je často ľahké nájsť na stránke manuálnym sledovaním jej načítania. Existujú však aj automatizované nástroje, ktoré to dokážu zmerať.

Ale poďme najprv trochu odbočiť a porozprávať sa o laboratórnych verzus terénnych údajoch. Laboratórne údaje sa zhromažďujú testovacími nástrojmi, ktoré nasmerujete na svoju webovú stránku, ako je napríklad Google Lighthouse. Kedykoľvek môžete vykonať laboratórny test a mať úplnú kontrolu nad procesom.

Údaje v teréne sa zhromažďujú meraním toho, čo sa stane skutočným používateľom na vašom webe. Vo výrobe je možné údaje z terénu zhromažďovať pomocou JavaScriptu na vloženie do vašich vlastných webových stránok alebo prostredníctvom anonymizovaných údajov zhromaždených prehliadačom Chrome.

Chrome sprístupňuje údaje pre obľúbené stránky v prehľade používateľského prostredia prehliadača Chrome alebo v skratke CrUX. Laboratórne údaje môžu byť pre vývojárov jednoduchšie zhromažďovať a analyzovať, ale majú určité obmedzenia.

Laboratórne údaje CLS môžu napríklad vynechať posuny, ktoré nastanú po dokončení načítania stránky. V konečnom dôsledku sú to údaje z terénu, ktoré demonštrujú, či ste pre svojich používateľov skutočne vyriešili problém.

PageSpeed ​​Insights je užitočný nástroj, pretože prezentuje laboratórne aj terénne údaje v jednom prehľade. V prípade CLS hľadajte upozornenia, ako napríklad: vyhnite sa veľkým posunom rozloženia a obrázkom, ktoré nemajú explicitnú šírku a výšku.

Nezabudnite, že zmeny rozloženia v zostave môžu byť spôsobené inými vecami ako obrázkami, ako je napríklad JavaScript. Riešenie problémov s vyrovnávacou pamäťou obrázkov môže byť také jednoduché, ako zahrnutie rozmerov obrázka do značky HTML.

Prehliadač tak okamžite presne vie, koľko miesta má pre obrázok vyhradiť. Existujú aj ďalšie triky CSS, ktoré sa dajú použiť, ak je CSS načítané správne.

Vyberte si správnu šírku a výšku svojich obrázkov

Druhým tipom je vybrať správnu šírku a výšku obrázkov. Sťahovanie väčších súborov trvá dlhšie, najmä na mobilných telefónoch s pomalším sieťovým pripojením. Väčšie súbory tiež vyžadujú viac času na spracovanie, najmä mobilné telefóny s menej výkonnými procesormi.

Správne nastavenie veľkosti obrázkov môže byť komplikované rozsahom veľkostí zariadení a rozlíšení, ktoré pristupujú k vašej lokalite. Ak prehliadač zmenší alebo oreže obrázok, súbor na stiahnutie je väčší, ako je potrebné, čo je zbytočné.

Jedným jednoduchým spôsobom, ako odhaliť obrázky s nesprávnou veľkosťou, je použiť sekciu Obrázky so správnou veľkosťou v rámci príležitostí v prehľade PageSpeed ​​Insights.

Štatistika PageSpeed ​​identifikuje obrázky na stránke, ktoré majú väčšie rozmery, ako je potrebné, a uvádza ich adresy URL. Keď zistíte problém, ako ho vyriešiť? Responzívne obrázky sú techniky, vďaka ktorým sa obrázky správajú dobre na zariadeniach rôznych veľkostí.

Napríklad v HTML existuje atribút source set. Umožňuje vám uvádzať adresy URL pre rôzne veľkosti a formáty obrázkov, takže prehliadač si môže vybrať ten najlepší na stiahnutie. To si vyžaduje, aby ste zmenili veľkosť obrázkov vopred alebo vykonali zmenu veľkosti obrázka na požiadanie.

Ak je zmena veľkosti obrázkov pre vašu vlastnú lokalitu príliš náročná, zvážte použitie siete na doručovanie obsahu alebo siete CDN.

Mnoho takýchto služieb dokáže zmeniť veľkosť obrázkov a previesť ich do efektívnejších formátov za vás.

Využite obrazové formáty novej generácie

Ďalším tipom je zamyslieť sa nad formátom súborov vašich obrázkov, napríklad či použiť súbory PNG, JPG alebo webP. Formát súboru ovplyvňuje veľkosť súboru. Treba však dávať pozor, formáty ako JPEG a webP môžu redukovať súbory pomocou stratových kompresných algoritmov. Strata znamená, že kvalita obrazu môže byť znížená ako kompromis za zmenšenie veľkosti súboru.

Ak sa vyžadujú obrázky s dokonalými pixelmi, napríklad pre ikony tlačidiel, mali by sa použiť menej efektívne, ale pixelové dokonalé formáty. Hoci obrázky nižšej kvality môžu znieť ako zlý nápad, pamätajte na to, že kupujúci si zhoršenie kvality nemusí všimnúť.

A výhoda rýchlosti môže byť značná. Nakupujúci môžu vašu stránku opustiť, ak jej načítanie trvá príliš dlho. Ak chcete zistiť, či vaša lokalita môže mať prospech z používania iného formátu obrázkov, pozrite sa do sekcie Poskytovať obrázky vo formáte novej generácie v prehľade PageSpeed ​​Insights.

Táto zostava obsahuje zoznam obrázkov na stránke, ktoré sú kandidátmi na konverziu do efektívnejšieho formátu súboru. Existuje teda jeden najlepší obrazový formát na použitie? Jednou komplikáciou je, že nie všetky formáty obrázkov budú fungovať vo všetkých prehliadačoch. Stránky caniuse.com možno použiť na kontrolu, ktoré prehliadače podporujú ktoré formáty obrázkových súborov. Napríklad webP teraz podporujú takmer všetky používané prehliadače.

To ponúka dobrú kombináciu účinnosti a prijatia. Alternatívne, namiesto výberu jedného formátu, môžete nechať svoje webové stránky vrátiť najefektívnejší formát, ktorý prehliadač podporuje. Opäť ide o službu, ktorú ponúkajú siete CDN.

Efektívne kódujte svoje obrázky

Tip číslo štyri je použiť správny faktor kvality pre vaše obrázky, aby ste ich efektívne zakódovali a zároveň zachovali požadovanú kvalitu obrázka. Časť Efektívne kódovanie obrázkov v správe PageSpeed ​​Insights možno použiť na identifikáciu obrázkov kandidátov na optimalizáciu kompresie.

Správa tiež ukazuje potenciálne úspory veľkosti súboru. Uvedomte si však, že správa nevykonáva vizuálnu kontrolu vašich komprimovaných obrázkov. Správa je založená na bežne používaných kompresných faktoroch.

Ak chcete nájsť faktor kvality, s ktorým ste spokojní, použite svoj obľúbený nástroj na konverziu obrázkov na niekoľkých obrázkoch s rôznymi hodnotami kvality. Bežná predvolená hodnota pre webP je 75.

Na tento účel môže byť užitočná stránka s potlačenou aplikáciou, pretože uľahčuje porovnanie predchádzajúcej a po verzii obrázkov.

Pamätajte tiež, že sú chvíle, keď chcete obrázky s vyšším rozlíšením, napríklad keď chcete umožniť kupujúcemu priblížiť si obrázok produktu. Chcete ísť hlbšie?

Jake a Surma majú skvelú reláciu o kompresii obrázkov na Web.dev Live.

Ukladanie obrázkov do vyrovnávacej pamäte pomocou prehliadača

Tip číslo päť je povedať prehliadaču, ako dlho môže bezpečne ukladať obrázky do vyrovnávacej pamäte. Keď vrátite obrázok z vašej lokality, môžete zahrnúť hlavičku odpovede HTTP s pokynmi na ukladanie do vyrovnávacej pamäte, napríklad ako dlho sa odporúča, aby prehliadač ukladal obrázok do vyrovnávacej pamäte.

Jedným zo spôsobov, ako zistiť, či boli hlavičky vyrovnávacej pamäte odpovede HTTP na vašom webe správne nastavené, je opäť použiť prehľad PageSpeed ​​Insights. Sekcia Poskytovanie statických aktív s politikou efektívnej vyrovnávacej pamäte v prehľade PageSpeed ​​Insights identifikuje obrázky, ktoré môžu mať prospech z vylepšení ukladania do vyrovnávacej pamäte.

Ďalším prístupom je použitie karty Sieť v nástrojoch pre vývojárov v prehliadači Chrome na preskúmanie hlavičiek odpovedí vyrovnávacej pamäte HTP. Ak chcete vyriešiť problémy na svojom webe, skontrolujte, či máte nastavenia platformy alebo webového servera, ktoré môžete zmeniť tak, aby sa prispôsobili životnosti vyrovnávacej pamäte pre obrázky na vašom webe.

Ak obrázky často nemeníte alebo ak obrázkom vždy prideľujete novú adresu URL, môžete nastaviť veľmi dlhú životnosť vyrovnávacej pamäte.

Okrem trvania vyrovnávacej pamäte, používanie CDN často urýchľuje sťahovanie tým, že ukladá do vyrovnávacej pamäte kópie vašich obrázkov na viacerých miestach po celom svete, bližšie k miestu, odkiaľ sa používatelia pripájajú.

Správne poradie, v akom sa zdroje sťahujú

Posledný tip je pokročilejší tip. Správne zoradenie poradia, v ktorom sa sťahujú zdroje vrátane obrázkov, môže výrazne zlepšiť výkon stránky, pretože sťahovanie obrázkov po jednom môže byť pomalé. Prehliadače používajúce HTTP/1 zvyčajne sťahujú niekoľko obrázkov paralelne cez nezávislé sieťové pripojenia na webovú stránku.

Ak webová lokalita podporuje HTTP/2, väčšina prehliadačov teraz multiplexuje sťahovanie cez jediné sieťové pripojenie. Vo všeobecnosti je to rýchlejšie a vyhnete sa problémom, ako sú veľké súbory blokujúce sťahovanie alebo menšie súbory. Bez ohľadu na to, ktorý prístup sa použije, stále existuje úzke miesto v šírke pásma siete. Vo všeobecnosti chcete, aby sa obrázky stiahli v nasledujúcom poradí.

Najprv si chcete stiahnuť veľké obrázky hrdinov v hornej časti stránky, pretože môžu ovplyvniť skóre maľovania najväčšieho obsahu pre stránku. Najväčšia farba obsahu alebo skrátene LCP je čas potrebný na zobrazenie hlavného obsahu obrazovky používateľovi. Najväčšie obsahové vyfarbenie, ako napríklad Kumulatívna zmena rozloženia, je základnou metrikou životných údajov webu.

Ďalej chcete, aby sa stiahli ďalšie obrázky, ktoré budú viditeľné bez posúvania. Obrázky, ktoré sú viditeľné bez použitia posúvania, sa označujú ako nad záhybom stránky. Zvyšok sa označuje ako pod záhybom.

Keďže webovú stránku je možné zobraziť na zariadeniach s rôznou veľkosťou obrazovky, je bežné odhadnúť, ktoré obrázky sú nad a pod záhybom stránky tak, že skontrolujete svoju lokalitu na viacerých zariadeniach. Nakoniec chcete, aby sa stiahli obrázky, ktoré sú práve mimo obrazovky, aby mohli byť pripravené na zobrazenie, keď používateľ začne rolovať.

Ostatné obrázky, ktoré sa pravdepodobne čoskoro nezobrazia, je často najlepšie načítať lenivo. Ak používateľ stránku neposúva, ich načítanie by znamenalo plytvanie zdrojmi. Ak chcete zistiť, či vaše stránky načítavajú obrázky efektívne, opäť vám môže pomôcť prehľad PageSpeed ​​Insights.

Napríklad časť Differ Offscreen Images správy identifikuje obrázky, ktoré možno načítať po iných obrázkoch. Existujú aj ďalšie časti, ktoré môžu byť užitočné, ako napríklad Vyhnite sa reťazeniu kritických zdrojov.

Hoci tieto reťazce zvyčajne zahŕňajú súbory JavaScript a CSS. Bežnou technikou na zlepšenie poradia načítania obrázkov je lenivé načítanie. Tu sa obrázky nestiahnu, kým používateľ neprejde na danú časť stránky. Lenivé načítanie bolo pôvodne implementované pomocou JavaScriptu, ale teraz väčšina prehliadačov podporuje atribút loading=”lenivé” HTML. Mali by ste byť opatrní, pretože ak sa pre obrázky nad záhybom použije pomalé načítanie, môže dôjsť k zníženiu výkonu.

John Mueller prepis stretnutia

Alan Kent 0:07
Hovorí sa, že obrázok vydá za tisíc slov. A neexistuje žiadna oblasť, kde by to nebolo pravdivejšie ako elektronický obchod. Volám sa Alan Kent a som advokátom vývojárov v spoločnosti Google. V tejto epizóde preskúmam šesť tipov na optimalizáciu obrázkov na vašom webe elektronického obchodu. Nie je nezvyčajné, že stránka elektronického obchodu odkazuje na stovky obrázkov. Tieto obrázky obsahujú všetko od obrázkov produktov v plnej veľkosti, menších miniatúr produktov, obrázkov kategórií, bannerov, dekorácií stránok a ikon tlačidiel. Vzhľadom na ich množstvo, ako sa môžete uistiť, že sú rýchle a efektívne?

Prvým tipom na optimalizáciu používania obrázkov na vašom webe je eliminácia kumulatívneho posunu rozloženia. Kumulatívny posun rozloženia alebo skrátene CLS je miesto, kde sa obsah stránky viditeľne pohybuje na obrazovke. Poznáte tie stránky, začnete čítať alebo sa pokúšate kliknúť na odkaz a zrazu sa obsah stránky pohne. Je to naozaj nepríjemné. Obrázky môžu prispieť k tomuto problému, ak sa použijú nesprávne. CLS má taký vplyv na používateľskú skúsenosť, že spoločnosť Google definovala CLS ako jednu z troch základných webových zásad. Toto sú faktory, ktoré Google považuje za dôležité pre používateľskú skúsenosť na všetkých webových stránkach. Prečo teda obrázky môžu spôsobiť CLS? Ak chcete načítať stránku, váš webový prehliadač začne sťahovať značku HTML stránky. Väčšina prehliadačov začne zobrazovať hornú časť stránky ešte pred stiahnutím celej stránky. Aby ste skrátili čakaciu dobu. Všetky odkazy na nájdené obrázky sa pridajú do frontu zdrojov na stiahnutie. Do fronty sa pridajú aj súbory JavaScript a CSS.

Tieto súbory sa potom stiahnu paralelne s hlavnou stránkou niekoľko naraz. Problém je, keď prehliadač pred vykreslením obsahu stránky nepozná rozmery obrázka. Posun rozloženia nastane, ak prehliadač zistí, že neponechal správne množstvo miesta pre obrázok. CLS je často ľahké nájsť na stránke manuálne a sledovať, ako sa načítava. Existujú však aj automatizované nástroje, ktoré to dokážu zmerať.

Ale poďme najprv trochu odbočiť a porozprávať sa o laboratórnych verzus terénnych údajoch. Laboratórne údaje sa zhromažďujú testovacími nástrojmi, ktoré nasmerujete na svoju webovú stránku, ako je napríklad Google Lighthouse. Kedykoľvek môžete vykonať laboratórny test a mať úplnú kontrolu nad procesom. Údaje v teréne sa zhromažďujú meraním toho, čo sa stane skutočným používateľom na vašom webe vo výrobe. Údaje poľa je možné zhromažďovať pomocou JavaScriptu na vloženie do vašich vlastných webových stránok alebo prostredníctvom anonymizovaných údajov zhromaždených prehliadačom Chrome. Chrome sprístupňuje údaje o obľúbených weboch v prehľade používateľského prostredia prehliadača Chrome alebo v skratke CrUX. Laboratórne údaje môžu byť pre vývojárov jednoduchšie zhromažďovať a analyzovať, ale majú určité obmedzenia.

Laboratórne údaje CLS môžu napríklad vynechať posuny, ktoré nastanú po dokončení načítania stránky. V konečnom dôsledku sú to údaje z terénu, ktoré demonštrujú, či ste pre svojich používateľov skutočne vyriešili problém. PageSpeed ​​Insights je užitočný nástroj, pretože prezentuje laboratórne aj terénne údaje v jednom prehľade. V prípade CLS hľadajte upozornenia, ako napríklad „vyhnite sa veľkým posunom rozloženia“ a „obrázky nemajú explicitnú šírku a výšku“. Nezabudnite, že zmeny rozloženia v zostave môžu byť spôsobené inými vecami ako obrázkami, ako je napríklad JavaScript. Oprava problémov so systémom CLS obrázka môže byť taká jednoduchá, ako zahrnutie rozmerov obrázka do značky HTML. Prehliadač tak okamžite presne vie, koľko miesta má pre obrázok vyhradiť. Existujú aj ďalšie triky CSS, ktoré sa dajú použiť, ak je CSS načítané správne.

Druhým tipom je vybrať správnu šírku a výšku obrázkov. Sťahovanie väčších súborov trvá dlhšie, najmä na mobilných telefónoch s pomalším sieťovým pripojením. Väčšie súbory tiež vyžadujú viac času na spracovanie, najmä mobilné telefóny s menej výkonnými procesormi. Správne nastavenie veľkosti obrázkov môže byť komplikované rozsahom veľkostí zariadení a rozlíšení, ktoré pristupujú k vašej lokalite. Ak prehliadač zmenší alebo oreže obrázok, súbor na stiahnutie je väčší, ako je potrebné, čo je zbytočné. Jedným jednoduchým spôsobom, ako zistiť obrázky s nesprávnou veľkosťou, je použiť sekciu obrázkov so správnou veľkosťou v časti Príležitosti v prehľade PageSpeed ​​Insights.

Štatistika PageSpeed ​​identifikuje obrázky na stránke, ktoré majú väčšie rozmery, ako je potrebné, a uvádza ich adresy URL. Keď zistíte problém, ako ho vyriešiť? Responzívne obrázky sa týkajú techník, vďaka ktorým sa obrázky správajú dobre na zariadeniach rôznych veľkostí. Napríklad v HTML existuje atribút zdrojovej množiny, ktorý vám umožňuje uvádzať adresy URL pre rôzne veľkosti a formáty obrázkov, takže prehliadač si môže vybrať ten najlepší na stiahnutie. To si vyžaduje, aby ste zmenili veľkosť obrázkov vopred alebo vykonali zmenu veľkosti obrázka na požiadanie. Ak je zmena veľkosti obrázkov pre vašu vlastnú lokalitu príliš náročná, zvážte použitie siete na doručovanie obsahu alebo siete CDN.

Mnoho takýchto služieb dokáže zmeniť veľkosť obrázkov a previesť ich do efektívnejších formátov za vás. Ďalším tipom je zamyslieť sa nad formátom súborov vašich obrázkov, napríklad či použiť súbory PNG, JPEG alebo webP. Formát súboru ovplyvňuje veľkosť súboru. Treba si však dávať pozor, pretože formáty ako JPEG a webP môžu redukovať súbory pomocou stratových kompresných algoritmov. Strata znamená, že kvalita obrazu môže byť znížená ako kompromis za zmenšenie veľkosti súboru. Ak sa vyžadujú obrázky s dokonalými pixelmi, napríklad pre ikony tlačidiel, mali by sa použiť menej efektívne, ale pixelové dokonalé formáty. Hoci obrázky nižšej kvality môžu znieť ako zlý nápad, pamätajte na to, že kupujúci si zhoršenie kvality nemusí všimnúť.

A výhoda rýchlosti môže byť značná. Nakupujúci môžu vašu stránku opustiť, ak jej načítanie trvá príliš dlho. Ak chcete zistiť, či vaša lokalita môže mať prospech z používania iného formátu obrázkov, pozrite sa na obrázky poskytovania v sekcii Formát ďalšej generácie v prehľade PageSpeed ​​Insights. Táto zostava obsahuje zoznam obrázkov na stránke, ktoré sú kandidátmi na konverziu do efektívnejšieho formátu súboru. Existuje teda jeden najlepší obrazový formát na použitie? Jednou komplikáciou je, že nie všetky formáty obrázkov budú fungovať vo všetkých prehliadačoch. Stránky caniuse.com možno použiť na kontrolu, ktoré prehliadače podporujú ktoré formáty obrázkových súborov. Napríklad webP teraz podporujú takmer všetky používané prehliadače.

Ponúka teda dobrú kombináciu účinnosti a prijatia. Alternatívne, namiesto výberu jedného formátu, môžete nechať svoje webové stránky vrátiť najefektívnejší formát, ktorý prehliadač podporuje. Opäť ide o službu, ktorú ponúkajú siete CDN. Tip číslo štyri je použiť správny faktor kvality pre vaše obrázky, aby ste ich efektívne zakódovali a zároveň zachovali požadovanú kvalitu obrázka. Časť Efektívne kódovanie obrázkov v správe PageSpeed ​​Insight možno použiť na identifikáciu obrázkov kandidátov na optimalizáciu kompresie. Správa tiež ukazuje potenciálne úspory veľkosti súboru. Uvedomte si však, že správa nevykonáva vizuálnu kontrolu vašich komprimovaných obrázkov. Správa je založená na bežne používaných kompresných faktoroch. Ak chcete nájsť faktor kvality, s ktorým ste spokojní, použite svoj obľúbený nástroj na konverziu obrázkov na niekoľkých obrázkoch s rôznymi hodnotami kvality. Bežná predvolená hodnota pre webP je 75. Na tento účel môže byť užitočná stránka s potlačenou aplikáciou, pretože uľahčuje porovnanie predchádzajúcej a po verzii obrázkov. Pamätajte tiež, že sú chvíle, keď chcete obrázky s vyšším rozlíšením, napríklad keď chcete umožniť kupujúcemu priblížiť si obrázok produktu. Chcete ísť hlbšie? Jake a Surma majú skvelú reláciu o kompresii obrázkov na Web.dev Live.

Tip číslo päť je povedať prehliadaču, ako dlho môže bezpečne ukladať obrázky do vyrovnávacej pamäte. Keď vrátite obrázok z vašej lokality, môžete zahrnúť hlavičku odpovede HTTP s pokynmi na ukladanie do vyrovnávacej pamäte, napríklad ako dlho sa odporúča, aby prehliadač ukladal obrázok do vyrovnávacej pamäte. Jedným zo spôsobov, ako zistiť, či boli hlavičky vyrovnávacej pamäte odpovede HTTP na vašom webe správne nastavené, je opäť použiť prehľad PageSpeed ​​Insights. Sekcia Poskytovanie statických aktív s politikou efektívnej vyrovnávacej pamäte v prehľade PageSpeed ​​Insights identifikuje obrázky, ktoré môžu mať prospech z vylepšení ukladania do vyrovnávacej pamäte. Ďalším prístupom je použitie karty Networking vo vývojárskych nástrojoch v prehliadači Chrome na preskúmanie hlavičiek odpovedí vyrovnávacej pamäte HTB. Ak chcete vyriešiť problémy na svojom webe, skontrolujte, či máte nastavenia platformy alebo webového servera, ktoré môžete zmeniť tak, aby sa prispôsobili životnosti vyrovnávacej pamäte pre obrázky na vašom webe.

Ak obrázky často nemeníte alebo ak obrázkom vždy prideľujete novú adresu URL, môžete nastaviť veľmi dlhú životnosť vyrovnávacej pamäte. Okrem trvania vyrovnávacej pamäte, používanie CDN často urýchľuje sťahovanie tým, že ukladá do vyrovnávacej pamäte kópie vašich obrázkov na viacerých miestach po celom svete, bližšie k miestu, odkiaľ sa používatelia pripájajú. Posledný tip je pokročilejší tip. Správne zoradenie poradia, v ktorom sa zdroje vrátane obrázkov sťahujú, môže výrazne zlepšiť výkon stránky, pretože sťahovanie obrázkov po jednom môže byť pomalé. Prehliadače používajúce HTTP/1 zvyčajne sťahujú niekoľko obrázkov paralelne cez nezávislé sieťové pripojenia na webovú stránku.

Ak webová lokalita podporuje HTTP/2, väčšina prehliadačov teraz multiplexuje sťahovanie cez jediné sieťové pripojenie. Vo všeobecnosti je to rýchlejšie a vyhnete sa problémom, ako sú veľké súbory, ktoré blokujú sťahovanie menších súborov. Bez ohľadu na to, ktorý prístup sa použije, stále existuje úzke miesto v šírke pásma siete. Vo všeobecnosti chcete, aby sa obrázky stiahli v nasledujúcom poradí: Najprv si chcete stiahnuť veľké obrázky hrdinov v hornej časti stránky, pretože môžu ovplyvniť najvyššie skóre Contentful Paint pre stránku. Largest Contentful Paint, alebo skrátene LCP, je čas potrebný na zobrazenie hlavného obsahu obrazovky používateľovi. Najväčšie obsahové vyfarbenie, podobne ako kumulatívny posun rozloženia, je kľúčovou metrikou webu. Ďalej chcete, aby sa stiahli ďalšie obrázky, ktoré budú viditeľné bez posúvania. Obrázky, ktoré sú viditeľné bez použitia posúvania, sa označujú ako nad záhybom stránky. Zvyšok sa označuje ako pod záhybom. Keďže webovú stránku je možné prezerať na zariadeniach s rôznymi veľkosťami obrazovky, je bežné odhadnúť, ktoré obrázky sú nad a pod záhybom stránky, tak, že skontrolujete svoje stránky na viacerých zariadeniach. Nakoniec chcete, aby sa stiahli obrázky, ktoré sú práve mimo obrazovky, aby mohli byť pripravené na zobrazenie, keď používateľ začne rolovať. Ostatné obrázky, ktoré sa pravdepodobne čoskoro nezobrazia, je často najlepšie načítať lenivo. Ak používateľ stránku neposúva, ich načítanie by znamenalo plytvanie zdrojmi. Ak chcete zistiť, či vaše stránky načítavajú obrázky efektívne, opäť vám môže pomôcť prehľad PageSpeed ​​Insights. Napríklad časť Differ Offscreen Images správy identifikuje obrázky, ktoré možno načítať po iných obrázkoch. Existujú aj ďalšie časti, ktoré môžu byť užitočné, ako napríklad Vyhnite sa reťazeniu kritických zdrojov. Hoci tieto reťazce zvyčajne zahŕňajú súbory JavaScript a CSS. Bežnou technikou na zlepšenie poradia načítania obrázkov je lenivé načítanie. Tu sa obrázky nestiahnu, kým používateľ neprejde na danú časť stránky.

Lazy loading bol pôvodne implementovaný pomocou JavaScriptu. Teraz však väčšina prehliadačov podporuje atribút loading=lenivý HTML. Mali by ste byť opatrní, pretože ak sa pre obrázky nad záhybom použije pomalé načítanie, môže dôjsť k zníženiu výkonu. Nedávne verzie Lighthouse zvýraznia, ak je obrázok načítaný lenivo, čo ovplyvní LCP. S príchodom HTTP/2 sú možné ďalšie optimalizácie, ak prehliadač aj web podporujú HTTP/2. Webová stránka HTTP/2 môže začať do prehliadača posielať obrázky, o ktorých vie, že budú potrebné, bez toho, aby čakala, kým si ich prehliadač vyžiada. HTTP/2 tiež umožňuje prehliadačom efektívnejšie sťahovať viacero obrázkov paralelne cez jediné sieťové pripojenie. Aby ste mohli využívať výhody HTTP/2, buď váš webový server musí byť nakonfigurovaný, aby vedel, ktoré zdroje má tlačiť, alebo použite CDN s podporou HTTP/2 a nakonfigurujte ho tak, aby tlačil zdroje podľa potreby.

Aby som to zhrnul, ukázal som bežné problémy, ktoré sa môžu vyskytnúť na stránkach elektronického obchodu so statickými obrázkami. Niektoré majú jednoduché opravy, ako napríklad zabezpečiť, aby značky obrázkov v HTML vždy určovali atribúty šírky a výšky obrázka, alebo použiť atribút načítanie sa rovná lenivému obrázku. Existujú pokročilejšie techniky, ktoré môžete implementovať priamo na svoj web. Najjednoduchšie však môže byť použiť CDN tretej strany s vhodnou podporou.

Takéto služby môžu poskytovať obrázky v najlepšom formáte podporovanom prehliadačom. Podľa potreby konvertujte obrázky z jedného zdrojového obrázka do efektívnejších formátov. Predformátujte obrázky na viacero veľkostí pre efektívne sťahovanie a zobrazenie na rôznych zariadeniach a komprimujte obrázky, aby ste zmenšili veľkosť sťahovania.

Dakujem za sledovanie. Ak sa vám toto video páčilo, nezabudnite kliknúť na Odoberať. Centrum vyhľadávania Google uverejňuje nové videá každý týždeň.