Responsive images en minder laadtijd

Trage website? Voorkom daling in (mobile) visits

"Mijn website is al snel.". Het is een veelgehoorde uitspraak. Maar hoe snel is je mobiele website nou eigenlijk? Dag in dag uit surfen we alsmaar meer met onze smartphone en/of tablet. Bij lange laadtijden haken we echter af.

Maikel Koopman is front end developer bij GoalGorilla. Hij deelt zijn ervaring met de DrupalJam 2015 en responsive websites graag met jullie.

 

Op de DrupalJam 2015 gaf Bruce Lawson, van de Europese browser Opera, een boeiende presentatie. Het ging over de ontwikkeling en achtergrond van nieuwe responsive images en het <picture> element. De snelheid van je website verbetert aanzienlijk bij de toepassing hiervan.

Mobiele website: Focus op afbeeldingen

Responsive images worden steeds belangrijker. Afbeeldingen zijn namelijk gemiddeld genomen goed voor meer dan de helft van de laadtijd van een pagina. In de meeste gevallen loopt dit zelfs richting de 70-80%. Als je dus ergens winst kunt behalen is het wel op gebied van afbeeldingen.

Test het zelf

Wil je weten hoe snel jouw website is? Wil je weten wat er allemaal van de server naar de browser gestuurd wordt? Check dan Pingdom Tools en vul je website in. Let erop dat je de uitkomst goed interpreteert: Een grote website met veel afbeeldingen is nu eenmaal langzamer dan een blog zonder afbeeldingen. Responsive images bieden een uitkomst.

De ontwikkeling van mobiel is de oorzaak van het probleem

Het probleem met afbeeldingen is de ontwikkeling van beeldschermen. De afgelopen jaren heeft dit zich in 2 richtingen ontwikkeld.

  1. Er is steeds meer mobile traffic. Dit vanuit smartphones met een klein scherm van meestal 320 pixels.
  2. Apple ontwikkelde iMacs en MacBooks met beeldschermen van maar liefst 2880 pixels breed. 

Tot voor kort was het niet mogelijk om voor verschillende apparaten verschillende afbeeldingen in te laden. Het probleem is hierbij het grote bestandsformaat van (grote, scherpe HD) afbeeldingen. Zowel naar desktop gebruikers (bijv. iMac, MacBook) als naar mobile gebruikers met een tablet (iPad) of smartphone (iPhone) wordt eenzelfde afbeelding gestuurd. Bij mobile devices zorgt dit voor een langere laadtijd. Met als gevolg enorm langzame websites op bijvoorbeeld 3G, maar ook hogere kosten als gevolg van meer mobiel dataverkeer.

Responsive Images

Met responsive design kon je al wel met behulp van stylesheets de layout, typografie en opmaak aanpassen. Dit op basis van de schermresolutie van een browser. De afbeelding verwees echter altijd naar 1 bron (1 afbeelding op de server). Bruce Lawson heeft samen met een aantal andere vrijwilligers de Responsive Image Community Group opgericht. Deze heeft als doel voorgenoemd probleem op te lossen. De groep heeft zich de afgelopen jaren ingezet om de oplossing te bedenken, schrijven en uitvoerig te praten met alle grote browsers. En ervoor te zorgen dat er een nieuwe standaard ontwikkeld kon worden die iedere browser kan en wil ondersteunen.

Inmiddels is deze nieuwe standaard voor iedere website toegankelijk. Bij goede implementatie zal het ook niet tot problemen in oudere browsers leiden. De nieuwe standaard maakt het nu mogelijk een kleine afbeelding naar kleine schermen te sturen en grote afbeeldingen naar grote schermen. Voornamelijk voor mobile gebruikers kan dit de ervaring met jouw website enorm verbeteren. Zij hebben genoeg aan die afbeelding van 20kb en hebben niet de versie van 200kb nodig. Door de juiste afbeelding te sturen kan de gebruiker zich richten op de inhoud van de site en zal zich niet ergeren aan het wachten.

Snelheid = alles...

Snelheid is één van de meest belangrijke aspecten van een website. Iemand zoekt de service/producten die jij aanbiedt en is in de buurt. Vervolgens wordt de telefoon gepakt en jouw website gevonden in de zoekmachine. Je website is na 15 seconden nog aan het laden, de potentiële klant haakt af. De potentiële klant keert weer terug naar de zoekresultaten in Google. Hij/zij bezoekt de site van je concurrent die wel binnen de verwachtte tijd laad op zijn 3G netwerk. Jammer van al die tijd die je gestoken hebt in pakkende teksten, een prachtig design en de professionele foto’s. Weg klant... :(
Zorg dus allereerst dat je website snel is en snel blijft. Dit voordat je investeert in andere aspecten van je site.   

GoalGorilla investeert in performance

Wij hebben de afgelopen maanden veel tijd gestoken in de website performance van onze klanten. Het gebruik van responsive images was hier een belangrijk onderdeel bij. Maar we keken ook verder naar andere mogelijkheden voor verbetering van performance. Een goed voorbeeld is het Greenpeace Greenwire Prototype. Hierbij hebben we bijvoorbeeld lazy loading, image sprites, local storage en een doordacht design architectuur gebruikt. Dit resulteert in razendsnelle interfaces die in minder dan 1 seconde laden. Cruciaal voor een platform waar mensen snel informatie met elkaar willen uitwisselen. 


Wil jij weten hoe goed jouw website presteert? Hoeveel data iemand verbruikt bij bezoek aan je (mobiele) website? Of heb je (andere) vragen over website performance?

 

Spreek ons dan nu meteen aan via live chat of bel 053 - 711 36 91. Een e-mail sturen kan natuurlijk ook: agile@goalgorilla.com. Binnen één werkdag heb jij een reactie. Je hebt nog nooit zo dicht bij jouw users gestaan!

 

Beheerder
GoalGorilla

Bekijk ook onze andere nieuwsartikelen

Klik voor onze award winnende klanten