Optimering af billeder + LazyLoad.

Formål

Formålet med at optimere grafik (fotos, clipart, stregtegninger, etc.) er at nedbringe tiden indtil billederne vises og indtil siden er interaktiv. Hvis ikke grafikken er tilpasset den side, som de vises på, skal browseren på overarbejde, hvis billederne skal skaleres i browseren, og siden bliver langsom, hvis der skal overføres mere data end der er brug for. De vigtigste forhold i relation til at få en hurtig visning af billeder med tilstrækkelig kvalitet er:

billedets fysiske udstrækning (målt i pixels),
billedfilens størrelse (målt io bytes),
filtypen (filens format).

ad. a.
Hvis vi vælger at sætte højde og bredde på billedet, som noget andet end den "opløsning", som billedet har, så sker der en tilpasning i browseren. Det er browseren slet ikke beregnet til, så der sker ofte et fald i kvaliteten af billedet:


Billedets originalstørrelse er 4.000 × 3.000 pixels og filens størrelse er 2.293.904 bytes (~ 2,241 kB), dvs. mere end 72 gange større end billedet til højre	Billedets originalstørrelse er 400 × 300 pixels og filens størrelse er 31.609 byte bytes (~ 30,8 kB), dvs. filens størrelse er 1/72 del af billedet til venstre.

... LazyLoad af billeder er, at der ikke bruges tid (båndbredde) på at indlæse billeder i browseren, som alligevel ikke vises i browservinduet før der scrolles ned. Herved bliver siden hurtigere interaktiv for brugeren.

Ofte er der tale om marginale forbedringer, hvis en sides grafik allerede er optimeret og du bør overveje om dine anstrengelser står mål med resultatet; vil du bruge 5 - 10 minutters ekstra arbejde på at forbedre load time / time to interactive med en brøkdel af et sekund? Hvis ja, så kan du let bruge lazyload funktionen.
hvor stor er forskellen så? Vi har målt på en konkret side, https://help.n-gen.net/?id=26 og LazyLoaded 17 af sidens 20 grafikfiler.

Forudsætninger

Javascript filen (/scripts/lazysizes.min.js) skal være tilstede og inkluderet i /index.aspx for at Lazy Load virker. Referencen til javascriptet er inkluderet i index.aspx fra ver. 1.1 [2022-05-25] i linje 10, men udkommenteret således .

Selve scripts/lazysizes.min.js fylder ca. 8½ kB, så der er meget lidt overhead på at bruge scriptet i forhold til ikke at lazyloade billeder. Husk kun at lazyloade billeder, der ikke vises før der scrolles.

Brug af LazyLoad

For at anvende lazyload funktionen er det første du skal gøre at fjerne udkommenteringen i linje 10 i filen /index.aspx. Det gør du lettest ved at anvende n-gen CMS Source Code Editor (der er et link på bagsiden af Admin's Terning): Åbn /index.aspx, rediger koden ved at fjerne i linje 10 og gem filen igen. Herefter er LazyLoad et lille javascript, som nu er inkluderet i /index.aspx og som indlæses sammen med alle sider. Det eneste du derefter skal gøre for at lazyloade et billede, er at ændre lidt på <img /> tag'en: Du skal prefikse src-attributten med "data-" så der i stedet for at stå <img src="" /> kommer til at stå <img data-src="" ... /> derudover skal billedet have klassen (class) "lazyload". Den samlede syntaks bliver herefter

Der er ikke nogen WYSIWYG måde at gøre det på. Dvs. du skal åbne side-editoren, markere det billede, som du vil lazyloade og skifte til "Kilde" visning. Herefter skal du manuelt ændre <img> tag'en med ovenstående.

Se mere om lazyload på siden:
https://web.dev/codelab-use-lazysizes-to-lazyload-images/

Syntaks eksempel på Lazy Load af billeder; første linje er den normale syntaks for billede (flower2.png), den anden linje er med lazyload af billedet (flower3.png)

<img src="/images/flower2.png" alt="">
<img data-src="/images/flower3.png" class="lazyload" alt="">

Happy LazyLoadin'

Last updated 02-08-2022 19:24:26