Ik heb laatst een audit van een externe website gedaan omdat de opdrachtgever vond dat zijn pagina traag reageerde en slecht gevonden werd in Google. De vraag was: “Cees, je pretendeert goed te zijn in websites, zou jij eens willen kijken naar ons probleem?”. Het is voor mij altijd een uitdaging om een website van een andere leverancier te bekijken aangezien ik niet weet hoe deze gebouwd is. Al snel kwam ik tot de conclusie dat het gebruik van afbeeldingen (foto’s) voor een enorme vertraging zorgden. Daarnaast speelde het gebruik van Google Fonts ook een grote rol in het langzaam laden van de website.
In deze blog vertel ik je wat ik eraan gedaan heb om de website weer lekker te laten lopen. Het is belangrijke informatie die ik je als klant of als bezoeker graag wil vertellen.
Snelheid in het algemeen
Snelheid van je website is een zeer belangrijke factor in ‘vindbaarheid’. Voor de vindbaarheid zijn we afhankelijk van zoekmachines als Google en Bing. Deze machtige partijen verwerken dagelijks miljarden bytes aan informatie en het spreekt voor zich dat ze eisen stellen aan hoe deze informatie wordt aangeboden. Een groot gedeelte van de websites wordt gebouwd op kosteloze templates. Iedere hobbyist kan tegenwoordig een website in elkaar knutselen met Wordpress en een gratis theme. Of bij één van de kiloknallers die je voor 1 euro een website aanbieden.
Invloed van afbeeldingen
Tegenwoordig beschikt bijna iedereen over een smartphone met een camera. De foto’s worden steeds beter en de kleuren fantastisch. Alle afbeeldingen staan opgeslagen op je telefoon of in de cloud en met één druk op de knop maak je een Instagram post met de meest geweldige filters. Met WhatsApp stuur je de foto’s door naar je familie en iedereen is blij! Maar weet jij je ook iets over de foto zelf? Hoe ‘groot’ de foto is of welk ‘bestandsformaat’ wordt gebruikt? Waarschijnlijk niet. En hier gaat het vaak mis bij het bouwen van een website of het maken van een leuke blog-post. Je sleept de foto naar je internetpagina en hop, de hele wereld kan hem vanaf nu zien.
Resolutie
Doordat de foto’s steeds scherper worden en veel meer kleuren bevatten neemt de ‘resolutie’ toe. Dit is het aantal ‘dpi’, dots per inch oftewel het aantal puntjes per inch (2,54). Hieronder zie je een foto in een hele lage resolutie en eentje in een normale resolutie. Hoe meer puntjes er aanwezig zijn hoe scherper de foto is en dus ook hoe groter het bestandsformaat.
Pixels
Een afbeelding uit je smartphone heeft een hoogte en een breedte, uitgedrukt in pixels. Onderstaande foto heeft de afmeting 3042 x 4032, oftewel een ‘portrait’ afbeelding. Bij een portrait (portret) is de telefoon gebruikt zoals je hem ook vasthoudt en dit zie je vooral terug in Instagram story’s. Maak je de foto in ‘landscape’ dan is de horizontale lente groter. Je wilt zo’n foto nooit in die pixels op je website hebben staan tenzij deze bedoeld is voor specifieke doeleinden zoals het downloaden van een foto.
Welke invloed heeft de foto op mijn website?
Als je website geladen wordt dan worden de data en afbeeldingen samengevoegd tot één pagina. Afhankelijk van de grote van je device (e.g. desktop of smartphone) wordt de hele foto geladen in je browser. Heb je snel internet dan zal je daar niet veel van merken. Heb je mobiel internet of sta je bij een drukke hotspot op het station dan gaat het langer duren. Google vind daarom dat je afbeeldingen zo snel mogelijk moet kunnen aanbieden op een mobiel netwerk. Mobile First is de strategie.
Puntentelling van je website
Hoe groter je afbeeldingen zijn des te lager zal de beoordeling zijn. Het is al vaak onderzocht dat bezoekers na een bepaald aantal seconden je website wegklikken als ze lang moeten wachten. Daarnaast kost het openen van een website met grote afbeeldingen veel data.
Het verbeteren van je afbeeldingen
Om de snelheid van je website te verbeteren beginnen we dus bij het optimaliseren van je foto’s. Wat kan je hier zelf aan doen?
Versturen een foto
Zorg ervoor dat je altijd een originele foto gebruikt. Komt de foto uit je WhatsApp gooi hem dan maar weg: WhatsApp comprimeert de foto zelf ook aangezien ze niet al die grote bestandsformaten willen versturen omdat je anders zo door je databundel heen bent. Vraag aan je bezoeker of klant om de foto in het originele formaat te vesturen. Als het 1 foto is kan dit makkelijk per e-mail. Zijn het er meer gebruik dan een dienst als WeTranfer. Heb je een iPhone of MacBook dan is AirDrop een uitkomst: AirDrop verstuurd de foto in het originele formaat naar de ontvangende partij.
Bewerken van een foto
Heb je zelf een fotobewerkingsprogramma als Photoshop, Affinity, Pixelmator of aan andere app dan kan je zelf de foto gaan bewerken. Allereerst kijk je naar de verhouding van de foto. Meestal houdt ik zelf 16:9 of 1:1 aan. Ook 3:2 is een gangbaar formaat. Ik hoor je denken: wat houdt 16*9 in? Dit zijn verhoudingen. Een breedbeeldtelevisie of YouTube gebruiken de verhouding 16:9. Als je dit omzet naar pixels is dit bijvoorbeeld 1440 * 810 pixels of 1280 * 720.
Bewerken met Squoosh (gratis)
Heb je geen eigen programma dan kan ik je het online programma Squoosh.App adviseren. Je sleept je afbeelding hierheen en je kan beginnen. Met een stippellijn in het midden kan je goed zijn hoe de foto was en hoe de foto wordt. Daarnaast kan je het uiteindelijke resultaat rechtsonder zien staan. Hoe lager dit getal hoe sneller de foto geladen wordt. Voor het bewerken en comprimeren van je afbeeldingen met Squoosh heb ik een handleiding gemaakt.
Staar je niet blind. op de scherpte. Hoe groter de foto, hoe scherper en kleurrijker deze is. Als je de foto bewerkt zit je op een groot scherm naar een grote foto te kijken. Dat is heel iets anders een foto op je telefoon bekijken (wat meer dan 80 % van je bezoekers doet) of op een website. Is je website bedoeld voor ‘fotografie’ dan speelt dit natuurlijk wel een rol.
Grootte van de afbeelding.
Voor mijn opdrachtgevers probeer ik foto’s altijd tussen de 120kb en 200kb te houden. Soms is het doel iets anders en moet het meer zijn. Snelheid is voor mij belangrijker dan de exacte kleurendiepte in Photohop!!
Naam van de foto
Heb je de foto bewerkt en ben je tevreden dan kan je deze opslaan. De naam van de foto is belangrijk: hoe beter de omschrijving hoe eerder deze gevonden wordt. En eerlijk is eerlijk: ook ik vergeet in de snelheid wel eens de juiste naam te bedenken. Een foto met de naam grote-kerk-in-amersfoort.jpg is heel iets anders dan image002428.jpg
Bestandstype: JPG vs PNG
Veelal zie ik nog foto’s opgeslagen worden in PNG. PNG maakt bestanden enorm groot en is bedoeld voor ‘pixel perfect’ en transparante achtergronden. Hier staat een ander artikel van op mijn website. Zorg ervoor dat je afbeeldingen opslaat in JPG op JPEG. Gaat het om een icoon of een logo dan is PNG prima.
Wat is een alt-tag
Zodra je de foto gaat uploaden naar de website zijn moet je ook de zgn Alt tag invoeren. Dit is een omschrijving van de foto die wordt geladen op je website zonder dat je het ziet. De Alt tag wordt gebruikt in screenreaders (visueel gehandicapten) maar dus ook voor Google! Google gebruikt de ‘alt-tag’ om je foto’s te indexeren en weer te geven in de zoekmachine. Hoe specifieker de omschrijving hoe beter je gevonden wordt. Wil je meer informatie kijk dan eens op gratzergrapic.com
CDN’s en caching
De wereld wordt de laatste jaren meer en meer volgezet met datacentra. Dit zijn enorme bedrijven waar honderden servers draaien van bijvoorbeeld Google, Facebook of Apple. Ook andere partijen gebruiken deze datacentra. Een voorbeeld hiervan zijn partijen die een zogenaamde CDN aanbieden. Een CDN staat voor Content Delivery Network en is een wereldwijd netwerk waar een kopie van jouw website staat. Stel voor dat jouw bedrijf ook veel zaken doet in Amerika dan is het slimmer om een ‘kopie van je website’ op een CDN server in Amerika te laten plaatsen. De data die verstuurd wordt hoeft dan immers niet iedere keer vanaf je webserver in Nederland naar Amerika verstuurd te worden. Daarnaast biedt het ook bescherming tegen een zgn DDoS aanval. Bij zo’n aanval probeert een hacker zoveel data aan je website te vragen dat deze er op een bepaald moment uitklapt. Wil je meer weten over de werking van een CDN lees dan dit artikel op SDIM.
Ben je klant van CCMP dan staat je webserver in Amsterdam. Tenzij je een enorm groot online klantenaanbod hebt of je veel zaken in het buitenland doet is een CDN vooralsnog niet aan de orde.
Het gebruik van Fonts
Een ‘font’ is een lettertype. Een website bestaat uit meerdere fonts die iedere keer geladen worden als iemand je website bezoekt. Ook dit kan de snelheid van je website beïnvloeden als je veel font’s of zwaardere font’s gebruikt. Voor het gebruik van Font’s heb ik een apart artikel geschreven die je binnenkort vindt op de website.