Stampi u veloċità: formati, daqsijiet u lazy loading

Għaliex l-istampi jiddeċiedu l-ħin tat-tagħbija

Google tikteb li l-istampi spiss huma l-akbar kontributur għad-daqs totali tal-paġna, u dan jista' jagħmel il-paġni bil-mod u għaljin biex jitgħabbew. Tnejn mill-Core Web Vitals jiddependu direttament mill-istampi. Largest Contentful Paint (LCP) ikejjel it-tagħbija: Google tagħti parir li l-akbar element għandu jidher fl-ewwel 2.5 sekondi wara li l-paġna tibda titgħabba. F'ħafna paġni dak l-element huwa stampa, pereżempju ritratt kbir fil-quċċata. Cumulative Layout Shift (CLS) ikejjel l-istabbiltà viżiva u għandu jibqa' taħt 0.1. Stampi li jaslu mingħajr spazju riżervat jimbuttaw it-test 'l isfel u jgħollu dan il-valur.

Il-format it-tajjeb

• Ritratti: JPEG jaħdem kullimkien. WebP u AVIF spiss huma ħafna iżgħar bi kwalità simili.
• Grafika b'truf qawwija jew trasparenza: PNG, jew WebP u AVIF, li jistgħu jkunu trasparenti wkoll.
• Logos u ikoni: SVG, għax jibqa' ċar f'kull daqs u normalment huwa żgħir ħafna.
• Google Search tappoġġa stampi fl-attribut src fil-formati BMP, GIF, JPEG, PNG, WebP, SVG u AVIF.

Jekk toffri WebP jew AVIF, tista' żżomm JPEG bħala riżerva f'element picture. Il-browser jagħżel l-ewwel sors li jifhem.

Id-daqs it-tajjeb

Stampa wiesgħa 2400 pixel iżda murija f'600 pixel taħli l-biċċa l-kbira tal-bytes tagħha. Esporta l-istampi bejn wieħed u ieħor fil-wisa' li bih jintwerew, u għal skrins ċari b'madwar darbtejn dak il-wisa'. Imbagħad ikkompressahom. F'ħafna programmi tal-istampi, setting tal-kwalità madwar nofs l-iskala jkun biżżejjed għar-ritratti fuq il-web. Iċċekkja r-riżultat fid-daqs sħiħ qabel tissostitwixxi l-oriġinal.

srcset u sizes

Fajl wieħed qatt ma jaqbel ma' kull skrin. B'srcset toffri diversi fajls tal-istess stampa u tgħid il-wisa' ta' kull fajl. B'sizes tgħid lill-browser kemm se tintwera wiesgħa l-istampa. Il-browser imbagħad jagħżel l-iżgħar fajl li huwa ċar biżżejjed.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

F'dan l-eżempju, l-istampa timla l-iskrin fuq skrins dojoq u hija wiesgħa 700 pixel fuq dawk usa'. Google tirrakkomanda li dejjem iżżomm riżerva fl-attribut src. Ikteb test alternattiv veru minflok it-tliet tikek.

Width u height kontra ċ-ċaqliq tat-tqassim

Mingħajr width u height, il-browser ma jafx kemm spazju teħtieġ stampa sakemm jasal il-fajl. It-test taħtha mbagħad jaqbeż 'l isfel. Il-gwida ta' web.dev dwar iċ-ċaqliq tat-tqassim tagħti dan il-parir: dejjem inkludi l-attributi width u height fuq l-istampi u l-elementi tal-vidjo, bid-daqs tal-fajl f'pixels jew mill-inqas il-proporzjon korrett. Il-browsers moderni jistabbilixxu l-proporzjon default ta' stampa minn dawn il-valuri u jirriżervaw l-ispazju. Fis-CSS, width: 100% u height: auto iżommu l-istampa flessibbli. Jekk ma tistax tissettja l-attributi, il-gwida ssemmi l-proprjetà CSS aspect-ratio bħala alternattiva.

Lazy loading

B'loading="lazy" il-browser itella' stampa biss meta toqrob lejn iż-żona viżibbli. Dan jiffranka d-data għall-istampi aktar 'l isfel fil-paġna. Google tgħid dwar il-lazy loading: iżżidux ma' kontenut li x'aktarx ikun viżibbli immedjatament meta utent jiftaħ paġna. Il-lazy loading integrat tal-browser huwa disponibbli għall-istampi u għall-iframes.

L-istampa LCP

L-akbar stampa fil-quċċata, spiss hero image jew ir-ritratt prinċipali tal-prodott, hija l-iktar fajl importanti tal-paġna. Il-gwida ta' web.dev dwar l-LCP tgħid: qatt tagħmel lazy loading tal-istampa LCP tiegħek. fetchpriority="high" huwa ħjiel lill-browser biex itellagħha kmieni. Skont il-gwida, prijorità għolja fuq aktar minn stampa jew tnejn ma tibqax tgħin. Stampi li l-indirizz tagħhom librerija ta' scripts taħbih f'data-src, jew li huma biss sfond CSS, jinstabu tard mill-browser. Għal stampa tal-isfond, il-gwida ssemmi preload b'link rel="preload" fl-HTML. AVIF jew WebP u fajl iżgħar iqassru wkoll il-ħin tat-tagħbija.

Biex tara kif qed jaħdmu l-paġni tiegħek, Google tirreferi għar-rapport Core Web Vitals f'Search Console. Għal paġna waħda, l-għodod tal-prestazzjoni tal-browser tiegħek juru liema element huwa l-element LCP u liema elementi jċaqilqu t-tqassim. Kejjel qabel u wara bidla, biex tkun taf jekk għenitx.

Checklist qasira

• L-akbar stampa fil-quċċata titgħabba normalment, mhux b'lazy loading?
• Kull img għandu width u height, jew l-ispazju riżervat b'aspect-ratio?
• Kull fajl huwa bejn wieħed u ieħor wiesa' daqs kemm jintwera, u kkompressat?
• Ir-ritratti kbar jiġu f'diversi wisgħat b'srcset u sizes?
• Hemm fajls JPEG jew PNG li jistgħu jkunu WebP jew AVIF?

Aħdem b'Do4U

Il-Verifika tal-istampi taqra paġna waħda u kull stampa fiha. Għal kull fajl tirrapporta l-format, id-daqs tal-fajl u l-pixels, u mill-HTML width u height, loading, fetchpriority, srcset u sizes, sorsi ta' picture u stampi tal-isfond f'attributi style. Do4U jaqta' mill-HTML liema hija x'aktarx l-istampa LCP. Ma jkejjilhiex, għax l-element LCP reali jiddeċidih il-browser. Tirċievi tabella tal-istampi bis-sejbiet, il-piż totali u sommarju qasir. Stampi li jdaħħal il-JavaScript u stampi tal-isfond minn fajls CSS esterni mhumiex inklużi. Ma tintuża l-ebda AI, u l-verifika hija b'xejn, b'limitu kuljum.

Do4U jsib noti, int tiċċekkja u tiddeċiedi. Ikkonferma l-element LCP bl-għodod tal-prestazzjoni tal-browser tiegħek qabel tibdel il-paġna.