10-08-2021 - In deel 2 van deze 3-delige artikelreeks helpen we om webpagina's te optimaliseren. Of je nu een website, een e-shop of een online toepassing op het internet hebt, de snelheid ervan is een belangrijke factor in de gebruikservaring en het succes.
Een snelle website zorgt voor gelukkige lezers, klanten en gebruikers. Waar tot enkele jaren geleden de vuistregel was dat een webpagina binnen 3 seconden moest laden, zijn internetgebruikers intussen een stuk veeleisender geworden. En dat is direct ook zichtbaar in de resultaten van een webshop: iedere halve seconde dat een webpagina sneller inlaadt zorgt voor significant meer sales en meer tevreden bezoekers.
Een bijkomende reden om kritisch naar de laadsnelheid te kijken is de update die Google van zijn zoekmachine uitrolt sinds mei van dit jaar: de Page Experience Update. Die aanpassing draait vooral rond de snelheid en gebruikservaring : de core web vitals. Websites die goed scoren op die parameters zullen extra beloond worden met een goede positie in de zoekresultaten. Daarnaast wordt in de update van het zoekalgoritme ook meer aandacht gegeven aan mobiele websites, veilige websites en websites met https. Websites met opdringerige advertenties worden afgestraft.
In dit tweede artikel gaan we verder in op wat je kan doen om op de webpagina’s zelf om die sneller te maken.
De HTML structuur of Document Object Model (DOM) heeft een grote impact op de tijd die nodig is om een webpagina te tonen in een browser. Algemeen kan je stellen dat hoe kleiner de resulterende HTML is, hoe sneller de webpagina zal tonen. Dat kan je bekomen door het aantal HTML elementen te beperken.
Een tweede mogelijkheid is het beperken van de HTML diepte. Probeer de HTML zo plat mogelijk te houden.
Mooi gestyleerde, grote schermvullende foto’s maken je website stijlvol en brengen je product of dienst perfect in beeld. Die afbeeldingen hebben echter een grote impact op de laadsnelheid. Door foto’s te comprimeren kan de bestandsgrootte drastisch beperkt worden. Er zijn verschillende compressiemogelijkheden die lossless werken, maar je kan ook experimenteren met nog sterkere compressie waar er een deel details van foto’s verdwijnen. In vele gevallen zien de meeste gebruikers het verschil niet, maar zullen ze wel aangenaam verrast zijn van de sneller ladende foto’s.
Het comprimeren van foto’s kan je doen aan de hand van een grafisch programma, maar online zijn er heel wat diensten beschikbaar waarmee je heel eenvoudig online afbeeldingen kan verkleinen, zonder zelf software te installeren.
WebP is een bestandsformaat, ontwikkeld door Google, dat nog betere compressie toelaat dan de traditionele jpg en png bestanden. In vele gevallen zijn WebP bestanden 20% (lossless compressie) tot 40% (lossy compressie) kleiner dan hun tradionele tegenhanger.
Het converteren van afbeeldingen naar het WebP formaat kan vaak rechtstreeks een Content Management Systeem, via een grafisch programma of via een online tool (bijv. https://www.imagecompressonline.com/webp)
Het belangrijkste nadeel van WebP is dat Safari heeft geen ondersteuning voor WebP. Omdat Safari een marktaandeel heeft van bijna 20%, kan je niet anders dan ook de afbeeldingen op te slaan in jpg of png formaat. Dat kan je doen op 2 manieren:
Met deze methode laat je de internetbrowser zelf het gepaste formaat “kiezen” door middel van een HTML5 picture tag :
Met deze methode zal de webserver bepalen aan de hand van de http-headers of de browser ondersteuning heeft voor het WebP-formaat. Door deze code in je .htaccess bestand te plaatsen, worden alle jpg, png en gif-afbeeldingen automatisch vervangen door WebP afbeeldingen indien de browser dit ondersteunt. Zorg ervoor dat de beide versies van de afbeeldingen in dezelfde servermap zitten.
Let op: de .htaccess-methode kan je niet gebruiken als je een caching methode gebruikt als Varnish of een CDN als Cloudflare.
De meeste afbeelding op het internet zijn rastergebaseerd. Ze zijn opgebouwd uit kleine puntjes. SVG is een bestandsformaat voor een vectorafbeelding die is opgebouwd uit lijnen en vlakken. Het meest voor de hand liggende voordeel is dat het onbeperkt vergroot of verkleind worden zonder kwaliteitsverlies. Zo kan je één afbeelding met verschillende groottes gebruiken. Daarbij heb je altijd haarscherpe tekeningen en afbeeldingen, onafhankelijk van de grootte waarin ze getoond worden. Dat maakt het bijzonder geschikt voor logo’s en schema’s en tekeningen.
Een bijkomend voordeel is dat vectorgebaseerde afbeeldingen vaak een veel kleiner bestand hebben, dat goed gecomprimeerd kan worden.
Het beste resultaat krijg je als een bestand gemaakt wordt vanuit je grafische toepassing, maar online staan er ook conversie programma’s waarmee je in 2 kliks een bestaande afbeelding kan omzetten naar het svg-formaat:
De meeste webpagina’s bevatten content en afbeeldingen die niet direct zichtbaar zijn als je de pagina inlaadt omdat de webpagina's veel langer zijn dan het scherm. Bij LazyLoading worden die afbeeldingen pas ingeladen als ze zichtbaar worden voor de gebruiker.
Waar LazyLoading voorheen werd geregeld door een javascript, bieden de meeste browsers standaard ondersteuning voor extra attributes die lazyloading toelaten.
Ook hier is Safari de spelbreker omdat het (nog) geen ondersteuning geeft aan native LazyLoading.
De meeste website worden gebouwd op basis van frameworks als Bootstrap, Foundation of Pure. Hoewel die frameworks toelaten om zeer snel websites te ontwikkelen, bevatten de CSS-bestanden heel wat extra code die niet noodzakelijk wordt gebruikt in jouw website. Zo wordt vaak 50%-80% van de meegestuurde CSS-codes niet gebruikt. Dat is nefast voor de laadtijd en het tonen van de webpagina’s.
Met een tool als unused-css.com kan je zeer eenvoudig de ongebruikte CSS-code verwijderen. De tool scant je website en levert de geoptimaliseerde css-bestanden aan.
Criticalcss.com is een andere tool die detecteert welke CSS-code kritisch is voor je webpagina. Die CSS-code plaats je dan binnen de HTML van je webpagina. Zo moet er niet gewacht worden met het weergeven van je webpagina tot alle css-bestanden zijn geladen.
HTML, CSS en javascript bevatten heel wat extra, onnodige karakters. Door onnodige spaties, commentaar en linebreaks te verwijderen kan je bestanden tot 15% kleiner maken. Dat heeft verschillende voordelen. De bestanden laden sneller, nemen minder geheugen in beslag en kunnen sneller geparsed worden in de browser.
De meeste Content Management Systemen hebben plug-ins of hebben standaard ingebouwde minify-functies.
In je website kan je aan de browser hints geven welke kritische bestanden je later zal gebruiken. Die bestanden kunnen vooraf al ingeladen worden, zodat de pagina’s sneller getoond kunnen worden.
Er zijn verschillende hints die je kan meegeven :
Een browser wacht met het tonen van tekst tot de lettertypes zijn ingeladen. Dat klinkt logisch. Het wil ook zeggen dat gebruikers met een trage internetverbinding of wanneer er een probleem is met het inladen van de fonts, de pagina lege stukken zal tonen voor een paar seconden.
Met de font-display-functie in CSS kan je de browser aangeven dat er een standaard lettertype kan gebruikt worden en pas later – nadat het font is ingeladen – het correcte lettertype zal getoond worden.
Javascripts brengen interactiviteit op een webpagina en zorgen – als het slim is ingezet – voor een goede user experience. Denk maar aan de integratie met een chat toepassing of het ophalen van extra informatie waarbij niet de hele webpagina ververst.
Het inladen van javascripts kan echter het tonen van een webpagina vertragen. De HTML-code van een webpagina wordt sequentieel uitgevoerd. Komt de browser op een instructie om de javascript in te laden, dan zal de browser het renderproces blokkeren tot het script is ingeladen en uitgevoerd. Dat kan voor grote scripts een serieuze vertraging betekenen.
Zet daarom javascript niet in de HEAD van de pagina, maar verplaats het helemaal onderaan de pagina in de BODY.
Je kan de browser ook instructies geven over wanneer die moet starten bij het uitvoeren van het script.
In de meeste gevallen is defer de beste optie.
Tip: Wees kritisch welke scripts je toevoegt op je webpagina’s. Vaak kan je met eenvoudige “hacks” ervoor zorgen dat je geen zware externe scripts moet inladen (op iedere pagina). Een voorbeeld is een video-player. In plaats van de video-player direct in te laden kan je een screenshot tonen. Pas als er op de screenshot wordt geklikt laadt je het script om de video-player te embedden.
Het tijdelijk bewaren van bestanden in de browser zorgt voor een enorme performantieboost omdat de bestanden niet meer over het internet worden ingeladen. Als webdesigner bepaal je zelf hoelang een bestand in de cache van de browser wordt gehouden. In vele gevallen zijn afbeeldingen, fonts, javascripts en CSS-bestanden gedurende lange tijd onveranderd. Daarom kan je ze zonder problemen 1 jaar in de cache laten.
Voorbeeld:
In dit voorbeeld worden alle bestanden gedurende 1 jaar gecached met uitzondering van pagina's in HTML-formaat.
Tip: Wil je toch de browser forceren om een nieuwe versie van een bestand op te halen van de webserver? Dan kan je in de querystring een versienummer opgeven, zoals https://www.cloudstar.be/css/app.css?v=11
Waar voorheen het opgeven van hoogte en breedte van afbeeldingen in HTML heel normaal was, raakte dit in onbruik door responsive websites. De grootte van de afbeeldingen wordt bepaald en berekend in een CSS-bestand.
Toch wordt door de web core vitals de hoogte en breedte van afbeeldingen meegeven in HTML opnieuw noodzakelijk.
Ook voor responsive websites kan je via de picture-tag de hoogte en breedte speciferen in HTML voor verschillende scherm-groottes:
Responsive websites laten toe om één website te tonen op verschillende schermformaten. Een alternatief hierop is het maken van een speciale, geoptimaliseerde versie voor een mobiel toestel, ook wel adaptive design genoemd. Door het maken van 2 versies kan je de templates, CSS en afbeeldingen optimaliseren voor een schermformaat.
Hoewel je met adaptive design de laadsnelheid kan verbeteren, is een adaptive design website veel moeilijker te bouwen. Content Management Systemen hebben meestal geen ondersteuning voor meerdere versies.
Lees in het volgende deel hoe je de performantie van je webpagina's effectief kan verbeteren door de server en de hosting te optimaliseren.
