5. Testen
Op de Visual thinking website staat heel veel data. Er zijn ongeveer 60 verschillende tekenmethodes met per stuk veel images. Toen ik de voorbeelden pagina met de carousel af had merkte ik dat de website echt enorm traag was. Elke pagina duurde gewoon 3/5 seconde om images te laden. Dit kan natuurlijk niet. Charley (de opdrachtgever) wil gewoon een snelle website waar images goed laden. Hiernaast is het voor de eindgebruiker ontzettend irritant als een pagina sloom laadt. Dus ik heb gekeken hoe ik dit anders kan doen.
De images staan allemaal in hygraph en hebben allemaal png als waarde. Wat beter zou zijn voor de images is om webp te gebruiken. Ik heb nog even onderzoek hiernaar gedaan.
De meest populaire keuzes voor afbeeldingsformaten zijn JPEG, PNG, SVG, GIF etc. Bij deze formaten wordt algemeen gezien dat als je de grootte van de afbeelding wil wijzigen, dat de kans groot is dat de kwaliteit van het beeld zal afnemen.
Om dit probleem op te lossen, heeft Google het webp-afbeeldingsbestandsformaat bedacht ter vervanging van de andere typen. Met dit bestandsformaat kan je nu kleinere bestanden met dezelfde kwaliteit of hogere kwaliteit voor hetzelfde formaat op websites gebruiken.
Wat is webp
Het enige dat WebP uniek maakt ten opzichte van alle andere bestandsformaten, zijn de compressie-eigenschappen. Compressie is het coderen van de gegevens van een bestand in kleinere bits dan het origineel.
Voordelen
-
Websites met WebP-afbeeldingen laden sneller vanwege hun kleinere formaat. Blijkbaar vermindert een vertraging van een seconde bij het laden van een pagina de bezoekerstevredenheid met 16%. En één op de vier bezoekers verlaat uw site als deze niet binnen vier seconden wordt geladen.
-
Wanneer je afbeeldingen op een website kleiner maakt, bespaar je op opslagruimte. Voor kleine websites is dit verschil misschien niet zo groot, maar als je veel afbeeldingen hebt, kan het gebruik van het WebP-formaat je website veel ruimte en kosten besparen bij het hosten van de website.
-
WebP-bestanden zijn handig omdat ze transparante achtergronden zoals PNG en animaties zoals GIF ondersteunen.
Maar er is een klein nadeel. Niet alle webbrowsers kunnen WebP-bestanden goed weergeven. Veel moderne browsers doen het prima, maar oudere browsers zoals Internet Explorer hebben hier soms moeite mee. Daarnaast is er een heel subtiele afname in beeldkwaliteit, maar meestal is dit verschil zo klein dat je het niet eens kunt zien.
Visual thinking
Zoals ik eerder zei heeft de visual thinking website erg veel images, dus wil ik webp toepassen op elke afbeelding. Dit heb ik gedaan door in hygraph de foto-eigenschappen van de images te veranderen naar WEBP. Op deze manier hoop ik dat de website wat sneller laadt bij gebruikers.
Netwerk test
Om nog even het verschil te meten van de uitkomsten heb ik network tests gedaan. Zie hier de uitkomsten.
- Png test Dit zijn de resultaten als ik png test. Dit duurt dus 17,5 seconden.
- Webp test Dit zijn de resultaten als ik webp test. Dit duurt 6 seconden.
Conclusie
Webp is echt dubbel zo snel als Png. Dit is erg voordelig voor de opdrachtgever (want mensen blijven op de site) en voor de eindgebruiker (dan duurt het niet zo lang).
Bron
Ik heb de performance getest mijn pagina scored best wel goed. de accesibility was minder goed door de lijn contrast (charley wensen) en de header en footer. wat beter kunnen met ul tag bijvoorbeeld.
