Egentlig betyder det at udskyde billeder, at lazyloade billederne, vente med at hente og vise billeder til deres billedtag er over folden. Det er en teknik som gør underværker for hastigheden, og især gør noget for de hjemmesider der har mange 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 er de billeder som ikke er på skærmen, 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 skabe 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å er alt det indhold du ser uden at scrolle, 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 udskyde 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 superhurtig, 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 stort 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 lave 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 kan indstilles på mange måder.
Magento
For Magento, som er en 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 sættes op til at udskyde billederne.
- 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 gøre siden hurtigere.
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.
Sådan laver du lazy loading i koden
Ligegyldigt hvilket system du bruger, går det ud på 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 scroller 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 optimerer ikoner, så kan du læse mere her.
Lazyload i korte træk
En hurtig gennemgang af lazyload hvad det gør og hvorfor det er vigtigt
Test din hjemmesides hastighed med PageSpeed Insights og et tjek af plugins, tema og server. Gratis, og resultatet får sin egen side.
Kim Tetzlaff
Programmør og webudvikler · Kim Tetzlaff ApS
- Koder siden 1995
- HTML siden 1996
- WordPress siden 2007
- Oplægsholder, WordCamp Denmark 2013
- Hvem
- Skrevet af mig, der laver arbejdet: hastighedsoptimering, teknisk SEO og udvikling for egne kunder.
- Hvordan
- Bygger på målinger af rigtige hjemmesider med PageSpeed Insights, GTmetrix og mine egne testværktøjer. Udgivet 2. oktober 2024, senest opdateret 31. oktober 2026.
- Hvorfor
- Skrevet så du selv kan finde ud af, hvor din side taber tid, og hvad der er værd at rette først.
