Korjaa Lighthouse-varoitus: Defer offscreen images

Mikä on 'defer offscreen images' Lighthouse-varoitus?

Mikä on defer offscreen images -varoitus Lighthousessa? Lighthouse merkitsee sivut, joilla on:

• Kuvat, jotka päättyvät yli 3 kertaa näkymän korkeuden alapuolelle.
  Kun kuvaa ei ole lazy-ladattu ja se päättyy yli 3 kertaa sivun näkyvän osan korkeuden alapuolelle ja alkaa näkyvän osan alapuolelta.
• Ja ovat suurempia kuin 0,02 Mt tai latautuminen kestää yli 50 ms.
  Lighthouse ohittaa kuvat, jotka ovat pieniä tai upotettuja. Usein lazy loading -skriptit käyttävät pieniä paikkamerkkikuvia.
• Ja joilla ei ole loading-attribuuttia määriteltynä.
  Lighthouse ohittaa kuvat, joilla on joko loading="lazy" tai loading="eager" -attribuutti.

'Defer offscreen images' -varoitus ei suoraan vaikuta mihinkään Lighthouse-mittariin. Teoriassa sivut, joissa on näytön ulkopuolisia kuvia, voisivat latautua melko nopeasti. Käytännössä ne usein eivät lataudu. Liian monet näytön ulkopuoliset kuvat vaikuttavat todennäköisesti epäsuorasti tärkeisiin Lighthouse-mittareihin, kuten Largest Contentful Paint (LCP).

Pikamuistutus – Mikä on lazy loading?

Lazy loading tarkoittaa, että kuvat, jotka eivät ole sivun näkyvässä osassa, voidaan ladata myöhemmin, yleensä juuri ennen kuin ne tulevat näkyviin vierittäessä.

Mikä aiheuttaa 'eager loaded' -näytön ulkopuolisia kuvia?

Kuvia ei lykätä oletusarvoisesti. Näytön ulkopuoliset kuvat, joita ei lykätä, sijoitetaan sivulle, koska kuvan loading-attribuutti on tyhjä tai kuva ei ole yhteensopiva mukautetun lazy loading -kirjaston kanssa. Näytön ulkopuoliset kuvat johtuvat yleensä seuraavista syistä:

• Huonosti koodatut CMS-lisäosat.
• Lisäosat, jotka poistavat natiivin lazy loadingin käytöstä
• Taustakuvat
• Page Builderit, jotka tuottavat huonoa HTML-koodia (esimerkiksi: Elementor tai WP Bakery).
  
• Teksti, joka on kopioitu ja liitetty WYSIWYG-editoriin (kuten TinyMCE).
• Huono template-koodaus.

Miten näytön ulkopuoliset kuvat vaikuttavat sivun nopeuteen

Näytön ulkopuoliset kuvat eivät suoraan vaikuta Lighthouse-mittareihin. Ne tekevät verkkosivun renderöinnistä tarpeettoman monimutkaista, mikä tekee korkean Lighthouse-pistemäärän saavuttamisesta lähes mahdotonta. Selaimesi joutuu lataamaan enemmän resursseja ennen kuin verkkosivu voidaan näyttää näytöllä. Näytön ulkopuolisissa kuvissa on 3 ongelmaa.

• Selaimesi joutuu lataamaan enemmän kuvia ennen sivun renderöintiä.
• Muut sivun renderöintiin tarvittavat resurssit saattavat viivästyä, koska ne saavat alemman prioriteetin
• Selaimesi saattaa käyttää huomattavasti enemmän muistia sivun renderöinnissä.

Kuinka korjata 'defer offscreen images'

Korjataksesi 'defer offscreen images' -varoituksen sinun tulee lazy-ladata kuvat, jotka eivät ole näkyvässä näkymässä. Voit tehdä tämän lisäämällä natiivin lazy loadingin tai lazy loading -kirjaston. Lisää natiivi lazy loading lisäämällä 'loading="lazy"' kuvaelementtiin.

<img      src="image.webp" 
     alt="a native lazy loaded image" 
     width="300" height="300">

Vaihtoehtoisesti voit lisätä natiivin lazy loading -kirjaston, kuten lazysizes, tai toteuttaa oman lazy loadingin (se on helpompaa kuin luuletkaan).

Siitä eteenpäin sinun täytyy tehdä hieman tutkimustyötä. Yritä selvittää, mikä aiheuttaa näiden kuvien sijoittamisen sivulle ilman lykkäystä. Tavallisia syyllisiä on 5:

1. Huonosti koodatut CMS-lisäosat.
   Jotkut lisäosat saattavat lisätä HTML-koodia suoraan sivulle eivätkä käytä oikeita koukkuja, jotka mahdollistavat lazy loadingin.
2. Lisäosat, jotka poistavat natiivin lazy loadingin käytöstä.
   On olemassa lisäosia, jotka poistavat natiivin lazy loadingin oletusarvoisesti käytöstä.
3. Page Builderit, jotka tuottavat huonoa HTML-koodia
   Page Builderit, kuten Elementor tai WP Bakery, luovat usein paisunutta koodia, joka on kaukana täydellisestä. Tähän ei ole helppoa ratkaisua. Page Builderit ovat usein osa työnkulkua. Ratkaisu sisältää paisuneen koodin siivoamisen ja työnkulun muuttamisen.
4. Teksti, joka on kopioitu ja liitetty WYSIWYG-editoriin
   Useimmat WYSIWYG-editorit, kuten TinyMCE, tekevät huonoa työtä liitetyn koodin siivoamisessa, erityisesti kun se on liitetty toisesta rikastekstin lähteestä, kuten Microsoft Wordista. Nämä editorit eivät välttämättä lisää lazy loadingia kuviisi.
5. Huono (template-) koodaus.
   Vaikka lazy loading olisi käytössä, templateihin kovakoodatut kuvat eivät välttämättä ole lazy-ladattuja. Tarkista templatesi näytön ulkopuolisten kuvien varalta ja lazy-lataa ne.

Kumpi on parempi – Natiivi lazy loading vai lazy loading -skriptit?

Kumpi on parempi? Pitäisikö käyttää selaimen natiivia loading="lazy" vai lazy loading -skriptiä? Henkilökohtaisesti suosin selaimen natiivia lazy loadingia. Miksi? Koska en tarvitse ulkoista skriptiä, joka aiheuttaa ylimääräistä kuormitusta. Natiivi lazy loading on yksinkertaisesti nopeampi. Natiivi lazy loading ei kuitenkaan ole Safarin tukema. Jos suurin osa käyttäjistäsi selaa verkkoa iPhoneilla tai Mac-tietokoneilla, harkitse lazy loading -skriptin käyttöä. Useimmiten natiivin lazy loadingin edut ylittävät Safarin tuen puutteen haitat.

Kiertotapa 'defer offscreen images' -varoitukselle

Joskus näytön ulkopuolisten kuvien lykkääminen ei ole mahdollista. Sinulla ei ehkä ole pääsyä templateen tai CMS:si ei ehkä tue lazy loadingia. On olemassa muutamia kiertotapoja näytön ulkopuolisten kuvien vaikutuksen vähentämiseksi. Nämä kiertotavat eivät ole täydellisiä ja saattavat tuoda mukanaan aivan uusia haasteita.

• Pienennä ja pakkaa kuvasi.
  Pienennä ja pakkaa nykyiset kuvasi. Pienemmillä kuvilla on vähemmän vaikutusta lataussuorituskykyyn kuin suurilla kuvilla.
• Käytä uusia ja nopeampia kuvaformaatteja.
  Vaihda png- ja jpeg-tiedostomuodoista nopeampaan tiedostomuotoon, kuten WebP.
• Jaa suuret sivut useiksi sivuiksi.
  Suurten sivujen jakaminen useiksi sivuiksi voi vähentää sivulla näytettävien kuvien määrää.
• Toteuta infinite scroll.
  Infinite scroll on periaatteessa lazy loadingia, mutta ei vain kuville vaan kokonaisille verkkosivun osille. Vieritettäessä toistuvia elementtejä, kuten kuvia (katso esimerkiksi Pinterest), infinite scroll voi nopeuttaa sivuasi huomattavasti.