Udskyd billeder, der ikke er på skærmen – Lazyload billeder

Hvad menes der med udskyd billeder?

Når google pagespeed fortæller at du skal udskyde billeder som ikke er på skærmen, menes der at du loader billeder som endnu ikke bliver set af brugeren der besøger din hjemmeside. Du tænker sikkert, jamen billederne er jo på siden, så brugeren ser dem jo når de besøger den. Og ja, det kan man jo på sin vis sige.

Men i virkeligheden de billeder som ikke er på skærmen, er også de billeder som er under folden, det vil sige brugeren kan ikke se billederne uden at scrolle ned på siden. Det ved vi reelt ikke om brugeren gør og derfor er der ingen grund til at loade billeder, før de eventuelt skal ses af brugeren. Det skaber nemlig bare højere loadtider og dermed langsommere hjemmeside.

Og fordi billeder har en stor indflydelse på hjemmesidens hastighed, så er det vigtigt at du benytter dig af at udskyde billeder også kaldet lazy load.

Hvad betyder det at “udskyde billeder” (defer images)?

At udskyde indlæsning af billeder betyder, at du forsinker indlæsningen af billederne på en webside, indtil de faktisk er synlige for brugeren. Dette forbedrer din sides hastighed og reducerer den tid, det tager at få vist de første dele af indholdet (såkaldt First Contentful Paint). Dette kan især være nyttigt for sider med mange billeder, da det reducerer belastningen på brugerens browser, indtil billederne er nødvendige. Men det kan også være nyttigt i forhold til ikonoptimering.

Hvornår skal man udskyde billeder?

Det korte svar er at man altid skal udskyde billeder, der er ingen grund til ikke at gøre det. Det eneste du ikke må udskyde er det brugeren ser over folden, da det vil kabe mange andre problemer og faktisk gør hjemmesidens hastighed langsommere, og i nogle tilfælde også skabe en side der reelt først loader efter brugeren er landet på din side, og dermed visuelt også virke meget langsom.

Hvorfor skal billeder udskydes?

Billeder skal udskydes fordi det gør sidens hastighed noget bedre og ofte meget bedre. Og det er ganske simpelt fordi når brugeren besøger din hjemmeside, skal browseren kun indlæse det der er over folden, og det som brugeren reelt kigger på. Det vil sige, scroller brugeren aldrig, vil de billeder under folden heller ikke loade, og hverken browser eller server skal bruge kræfter på dem.

Forskellen på over folden og under folden.
Når du besøger en hjemmeside, så det alt det indhold du ser uden at scrolle, er over folden. Under folden er derfor alt det indhold som du skal scrolle for at kunne se.

Hvordan udskyder man billeder der ikke er på skærmen?

Det kommer lidt an på den hjemmeside du har. Har du wordpress findes der et hav af plugins som kan udskyde billeder. Men bruger du andre systemer eller en custom hjemmeside som du selv har bygget fra bunden, så skal der andre metoder i brug. Her vil jeg forklare hvordan man udskyder billeder der ikke er på skærmen:

Udskyd billeder / Defer images med wordpress plugins

Der findes mange plugins som kan udskyder billederne (lazy loader billeder mm), herunder lister jeg de som jeg kender og selv har brugt eller bruger i arbejdet med hastighedsoptimering.

WP Rocket: Dette plugin kan mange ting ud over at billeder bliver udskudt. Det gode ved dette plugin er at det ud over at udskyde almindelige billeder som holdes af et picture/img tag, også kan udskyde både baggrundsbilleder og iframes. Kombineret med imagify, gør det hjemmesiden super hurtig, da imagify er lavet til at komprimere billeder og det gør den godt. Det koster noget at bruge WP Rocket, Imagify kan bruges i gratis udgave, men kun til billeder der er 2MB og derunder. Betalt udgave koster ret lidt og der er ingen grænse for optimering. Man kan tilpasse WP rocket, ned i dybden, sådan at det ikke udskyder alle billeder.

Vil du ikke have proplugins, så kan du nøjes med at bruge LazyLoad Plugin – Lazy Load Images, Videos, and Iframes af WP rocket (https://wordpress.org/plugins/rocket-lazy-load/) også, det er gratis, og udskyder bare billeder, video og baggrunde.

SMUSH: Dette plugin kan både komprimere og lazyloade, det er gratis medmindre du gerne vil kunne komprimere billeder der er større end 5MB og medmindre du gerne vil kunne lazyloade baggrundsbilleder, så koster det noget at bruge.

Lazy Loader: Et gratis plugin der ja, lazy loader billeder, baggrunde, video, lyd og mange andre ting. Der er også mulighed for at tilpasse dette plugin på forskellige måder. det gør hvad det er lavet til.

A3 Lazy Load: er et stor lazyload plugin, som jeg brugte meget før i tiden. Det er nok det plugin som har eksisteret længst tid, og det kan alt fra at lazyloade billeder, video og iframes både vertikalt (normalen) og horisontalt (fx i slidere), til at du kan bestemme hvilke billeder der skal udskydes.

Eksempler på udskydning af billeder i andre open source-systemer

Der findes mange open source CMS på markedet, og herunder får du lidt hjælp til hvilke moduler/plugins du kan bruge til netop at gøre så billeder lazy loader.

Joomla
I Joomla kan du bruge udvidelser til at implementere lazy loading (udskydning af billeder), som f.eks. Lazy Load for Joomla eller JCH Optimize. Disse plugins kan konfigureres til at udskyde indlæsningen af billeder og andre ressourcer.

• Lazy Load for Joomla: Dette plugin erstatter dine billeder med en placeholder og indlæser billedet først, når det er i brugerens synsfelt.
• JCH Optimize: Ud over lazy loading af billeder kan det også optimere CSS, JavaScript og HTML, så du får en hurtigere indlæsningshastighed for hele din hjemmeside.

Drupal
Drupal har flere moduler til lazy loading af billeder. Et af de mest populære er Lazy Loader-modulet, som giver dig mulighed for automatisk at udskyde indlæsning af billeder på hele din side eller for bestemte dele af den.

• Lazy Loader Modul: Dette modul gør det let at tilføje lazy loading ved at ændre dine billeder til kun at indlæse, når de er nødvendige. Det er en simpel løsning, som er meget konfigurerbar.

Magento
For Magento, som er et open source e-commerce platform, kan du bruge moduler som Lazy Load by Magefan eller Amasty Lazy Load.

• Lazy Load by Magefan: Dette modul gør det muligt at udskyde indlæsningen af billeder i hele butikken, hvilket forbedrer sidens indlæsningstid.
• Amasty Lazy Load: Lignende funktioner som Magefan, men også mulighed for at optimere andre elementer som videoer og iframes.

Grav CMS
Grav CMS er et filbaseret CMS, som også understøtter lazy loading. Der findes plugins som Lazy Load eller Responsive Images, som nemt kan implementeres til at udskyde billedernes indlæsning.

• Lazy Load Plugin: Dette plugin indlæser billeder, når de bliver synlige i viewporten, og kan bruges sammen med andre optimeringsværktøjer til at forbedre webstedets ydelse.

Hugo
Hugo er en populær open source static site generator, og lazy loading kan implementeres her via forskellige metoder, som f.eks. ved at bruge custom JavaScript eller et bibliotek som lazysizes.

• lazysizes: Dette er et tredjepartsbibliotek, som kan bruges i Hugo til at udskyde billeder. Det kræver blot, at du tilføjer de rette attributter til dine billeder og inkluderer lazysizes.js i din skabelon.

Hvordan implementeres lazy loading via kode?

Uanset hvilket system du vælger, er den grundlæggende idé at bruge en kombination af HTML5’s loading="lazy" attribut på <img>-tags eller bruge et JavaScript-bibliotek, som sørger for at udskyde indlæsningen af billeder.

Eksempel på brug af loading="lazy" i HTML:

<img src="sti-til-billede.jpg" alt="Beskrivelse af billedet" loading="lazy">

Sådan bruger du lazysizes

Alternativt kan du tilføje et JavaScript-bibliotek som lazysizes, som giver mere kontrol og flere funktioner:

Tilføj lazysizes til din side, du finder javascript biblioteket her (https://github.com/aFarkas/lazysizes)

<script src="stien-til-lazysizes.js" async=""></script>

Brug class="lazyload" i dine billeder

<img src="stien-til-billede-der-skal-loade-først.jpg" data-src="sti-til-billedet-der-skal-vises.jpg" class="lazyload" alt="Beskrivelse af billedet">

Det vigtige her er at fx stien-til-billede-der-skal-loade-først.jpg, kan være et lille bitte billede, på 1×1 pixel, det går igen på alle billeder der skal lazy loades, og gør at brugeren kun skal loade et meget lille billede til en start, og når de scoller ned til billedet, så vises det rette billede så. Husk altid at sætte bredde og højde, så det hele ikke danser når det rigtige billede skal vises.

Man kan også bruge data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== i src attributten, Så skal der slet ikke loades noget.

Bliv klogere på at udskyde billeder her. Google kommer med sin forklaring på det

Hvis du gerne vil vide mere om hvad du skal gøre med ikoner på din hjemmeside, hvordan du optimere ikoner, så kan du læse mere her.