iOS 13.4: sneller en efficiënter surfen met lazy loading

Door: Raymon Mens - 9 reacties
Safari tracking cookies privacy
(Afbeelding: Apple, montage: OMT)

iOS 13.4 en iPadOS 13.4 zijn alweer enige tijd beschikbaar en bieden een functie die nog maar weinig bekend is. Het gaat om lazy loading van afbeeldingen tijdens het surfen. Dat zorgt ervoor dat pagina’s sneller laden en minder data wordt gebruikt. Je moet de functie echter nog wel zelf inschakelen.

Lazy loading laat zich eenvoudig omschrijven. Het zorgt ervoor dat afbeeldingen op een pagina pas geladen worden als ze (bijna) in beeld zijn. Grote kans dat je zeker op je iPhone of iPad nooit de onderkant van een webpagina haalt. Waarom zouden de afbeeldingen die daar staan dan al vooraf geladen moeten geworden?

Zo werkt lazy loading in iOS 13.4

Op deze voorbeeldwebsite zie je 100 kattenfoto’s. Tot nu toe zou Safari meteen alle foto’s gaan laden. Als je lazy loading van iOS 13.4 inschakelt, worden alleen de afbeeldingen die de browser direct moet tonen geladen. De afbeeldingen lager op de pagina zijn nog niet in beeld en worden alleen geladen wanneer je naar beneden scrollt.

Lazy loading vereist niet alleen een moderne browser, maar ook een moderne website. Websites kunnen namelijk aangeven welke afbeeldingen in aanmerking komen voor lazy loading. Afbeeldingen die essentieel zijn voor de werking van de website, zoals iconen, krijgen een label waardoor ze meteen laden. Andere dingen zoals foto’s onderaan een artikel, zijn zeer geschikt voor lazy loading. WordPress, een populair CMS waar meer dan 30 procent van alle websites op draait, ondersteunt dit sinds kort.

Safari iOS 13.4 lazy image loading 001
Klik/tap voor groter. (Screenshot: OMT/Raymon Mens)

Nu nog handmatig inschakelen

Terwijl Google Chrome lazy loading al sinds versie 76 ondersteunt, is Apple momenteel nog wat terughoudend. De functie is geïntegreerd in iOS 13.4 en iPadOS 13.4, maar staat standaard uit. Je hoeft ‘m alleen maar te activeren om lazy loading te laten werken op correct voorbereide websites. Doe dit via InstellingenSafariGeavanceerdExperimentele functies.

Reacties

9 reacties
  • Profielfoto
    bechris60

    Of je optimaliseert als Web Developer al lazy loading in je website….

  • Profielfoto
    Shmoo

    😁 met een 🐦 🔫

  • Profielfoto
    mvmaastricht

    “Op deze voorbeeldwebsite zie je 100 kattenfoto’s.”

    Op welke voorbeeldwebsite?

  • Profielfoto
    Caszz

    Als je lazy loading aanzetten dan zie je de katten 🐱

  • Profielfoto
    Odyssey

    bechris60 op 12 april 2020 16:05
    Of je optimaliseert als Web Developer al lazy loading in je website….

    en hoe veel beter is het niet als je browser dat doet ipv extra JS troep?

  • Profielfoto
    csteelooper

    Odyssey op 12 april 2020 23:34

    bechris60 op 12 april 2020 16:05
    Of je optimaliseert als Web Developer al lazy loading in je website….

    en hoe veel beter is het niet als je browser dat doet ipv extra JS troep?

    Bedoel je nu dat Lazy Image Loading extra JS troep creëert of…?

    bechris60 op 12 april 2020 16:05
    Of je optimaliseert als Web Developer al lazy loading in je website….

    Ähm… Snap je het wel helemaal? Ook al pas je die optimalisaties toe, wil je gebruik maken van Lazy Loading met Safari in i(Pad)OS dan moet je het aanzetten…

    Trouwens, weet iemand hier of Safari op macOS dit ook ondersteunt, en zo ja hoe? Chrome doet dat wel, en daar hoef je het niet expliciet aan te schakelen, dus daar werkt het gewoon.

  • Profielfoto
    csteelooper

    csteelooper op 13 april 2020 07:23
    Trouwens, weet iemand hier of Safari op macOS dit ook ondersteunt, en zo ja hoe? Chrome doet dat wel, en daar hoef je het niet expliciet aan te schakelen, dus daar werkt het gewoon.

    Ik haat het dat je hier je posts nog steeds niet kunt bewerken… Maar goed… Ik heb het gevonden voor Safari op macOS. Het is onderdeel van het menu voor ontwikkelaars (“Develop”). Daar kun je het vinden onder Experimentele Functies. Als je het menu niet in je menubalk ziet, moet je dat eerst aanzetten in de voorkeuren van Safari

  • Profielfoto
    maxtje

    @csteelooper denk dat jij het niet volledig snapt 😂

  • Profielfoto
    Xenophon

    Native in de browser zal altijd een stuk sneller zijn dan fallback op een lazy loading js oplossing. Je hebt het render-blocking effect en de execution van je JS. Vroeger gebruikte ik wel blazy.js hiervoor.