Optimizimi i imazheve të sajtit: WebP, AVIF dhe lazy loading

Në shumicën e sajteve që analizojmë, imazhet janë shkaku i parë i ngadalësisë: peshojnë më shumë se gjithë pjesa tjetër e faqes e marrë së bashku. Lajmi i mirë është se optimizimi i imazheve të sajtit është ndërhyrja e performancës me raportin më të mirë mes mundit dhe rezultatit: formate moderne si WebP dhe AVIF, përmasa të sakta dhe lazy loading mjaftojnë për t'i transformuar kohët e ngarkimit.

Pse imazhet peshojnë kaq shumë

Problemi lind pothuajse gjithmonë në burim: foto të ngarkuara në CMS ashtu siç dalin nga aparati ose smartphone-i, me rezolucione të stërmëdha krahasuar me hapësirën që do të zënë në faqe, në formate të menduara për shtypin më shumë se për web-in. Browser-i shkarkon gjithçka, edhe pikselët që nuk do t'i shfaqë kurrë.

Pasojat nuk janë vetëm estetike. Metrikat e përvojës së përdoruesit që Google përdor në vlerësimin e faqeve preken drejtpërdrejt nga imazhet: elementi më i madh i ekranit fillestar shpesh është një foto, dhe derisa ajo të mbërrijë, faqja duket bosh. Në mobile, me lidhje të ndryshueshme, diferencën mes një sajti të kuruar dhe një të lënë pas dore e bëjnë pikërisht kilobajtët e imazheve.

WebP dhe AVIF: çfarë të zgjedhësh

WebP dhe AVIF janë dy formatet moderne që zëvendësojnë JPEG-un dhe PNG-në për përdorimin web. Në përmbledhje:

• WebP është kompromisi i besueshëm: kompreson më mirë se JPEG me të njëjtën cilësi të perceptuar, mbështet transparencën si PNG dhe menaxhohet nga të gjithë browser-at aktualë;
• AVIF kompreson zakonisht edhe më mirë, sidomos në cilësitë mesatare-të ulëta, dhe tashmë mbështetet gjerësisht; kodimi është më i ngadaltë, gjë që ka rëndësi vetëm nëse gjeneron shumë imazhe në çast.

Strategjia që zbatojmë zakonisht: AVIF aty ku fluxi i punës e gjeneron pa fërkime, WebP si format kryesor ose rezervë, dhe origjinali JPEG a PNG si fallback shtesë. Në HTML kjo bëhet me elementin picture, që ia lë browser-it zgjedhjen e formatit më të mirë që di të lexojë; në CMS-të më të përhapura ekzistojnë plugin-e dhe shërbime që i konvertojnë dhe i shërbejnë formatet moderne automatikisht, pa prekur bibliotekën media.

Një paralajmërim: formati modern nuk e zëvendëson kompresimin. Një imazh i eksportuar keq mbetet i rëndë edhe në AVIF. Rregulloje cilësinë në minimumin që syri e pranon: për fotot dytësore mund të zbresësh mjaft para se të vësh re ndryshime.

Para formatit: përmasat e duhura

Fitimi më i madh, edhe para formatit, vjen nga shërbimi i imazheve me përmasën e duhur për ekranin që i shikon. Një telefon nuk ka nevojë për imazhin e përgatitur për një monitor tavoline.

Mjetet janë standarde: atributet srcset dhe sizes lejojnë të deklarosh disa versione të të njëjtit imazh, dhe browser-i zgjedh atë të përshtatshmin. CMS-të moderne i gjenerojnë variantet vetë me ngarkimin; duhet verifikuar megjithatë që tema t'i përdorë vërtet, sepse ndodh shpesh të gjesh tema që ngarkojnë origjinalin gjithsesi.

Dy zakone që shmangin probleme:

• ngarko në CMS imazhe tashmë të ripërmasuara në një maksimum të arsyeshëm për layout-in tënd, jo skedarët origjinalë të aparatit;
• trego gjithmonë gjerësinë dhe lartësinë (ose proporcionet) në HTML, kështu faqja nuk kërcen gjatë ngarkimit.

Lazy loading i bërë mirë

Lazy loading-u e shtyn ngarkimin e imazheve jashtë ekranit deri kur përdoruesi u afrohet duke lëvizur poshtë. Sot është funksion nativ i browser-ave: mjafton atributi loading i vendosur në lazy, pa librari shtesë.

Gabimi për t'u shmangur është ta aplikosh kudo pa dallim: imazhi kryesor në krye të faqes nuk duhet ngarkuar kurrë me vonesë, sepse është gjëja e parë që përdoruesi duhet të shohë dhe ta vonosh e përkeqëson pikërisht metrikën që do të përmirësoje. Rregulli është i thjeshtë: imazhet e dukshme në hapje ngarkohen menjëherë, gjithçka tjetër mund të presë.

Kuadrin e plotëson një CDN, që i shërben skedarët nga nyja më e afërt me vizitorin, dhe një politikë cache me afate të gjata për burimet statike: imazhi i shkarkuar një herë nuk duhet kërkuar sërish në çdo vizitë.

Si t'i verifikosh rezultatet

Të optimizosh pa matur është të qëllosh kuturu. Cikli i kontrollit që bëjmë në çdo projekt:

1. testo faqet kryesore (home, një faqe kategorie, një faqe produkti ose një artikull) me mjetet e analizës së performancës të disponueshme falas online, para dhe pas ndërhyrjeve;
2. shiko peshën totale të imazheve për faqe dhe sa kërkesa nisen me ngarkimin e parë;
3. kontrollo në raport cilat imazhe sinjalizohen si të stërmëdha ose në formate të vjetruara;
4. përsërite testin nga mobile, ku problemet shihen të parat.

Në faqet e internetit dhe eCommerce që realizojmë, kjo pipeline është ngritur që nga fillimi: konvertim automatik në formatet moderne, variante responsive të gjeneruara nga CMS-i dhe lazy loading selektiv. Rezultati është që klienti i ngarkon fotot dhe sistemi bën pjesën tjetër, pa u varur nga disiplina e atij që publikon.

Sajti yt ngarkohet ngadalë për shkak të imazheve?

Nëse faqet e sajtit tënd vonojnë shumë të hapen, ka të ngjarë që pjesa më e madhe e problemit të jetë e zgjidhshme në pak kohë. Realizojmë dhe optimizojmë faqe interneti dhe eCommerce me pipeline imazhesh të automatizuara. Rezervo një telefonatë falas: i analizojmë faqet e tua dhe të themi sa marzh shpejtësie ka.