5 tips om de laadtijd van jouw blog te verlagen

website-laadtijd-verlagen

Merk je dat jouw (WordPress) website traag laadt? Of misschien een bepaalde pagina waar het langer duurt voordat hij volledig geladen is? Ik geef vijf tips om dit probleem te verhelpen.

Test de snelheid van jouw website

Om de snelheid van jouw website te testen kan je naar Pingdom, GTMetrix of WebPageTest gaan. Deze websites analyseren jouw blog en geven aan waar de problemen liggen, zoals afbeeldingen of stylesheets die te groot zijn of Javascripts die er lang over doen om volledig te laden. Wanneer je een scan uitvoert krijg je precies te zien wat er geladen wordt en hoelang dit duurt.

deliciae_pingdom

Ik heb de homepagina van Deliciae Design getest en over het algemeen scoort mijn website een performance grade 87 van de 100. Dit is op zich niet slecht, maar kan beter. Ik heb gekeken naar wat er ‘mis’ gaat (ook al heb ik een idee) en dat zijn de afbeeldingen. Ondanks dat ik ze comprimeer met Photoshop, duurt het toch een aantal seconden. Nu kan je denken, ach, seconden, maar op een mobiel apparaat of een mindere verbinding kan dit oplopen tot een minuut, misschien langer. Het is dus altijd raadzaam om je afbeeldingen te optimaliseren zodat dit deels voorkomen kan worden.

deliciae_pingdom_afbeeldingen

In deze resultaten zie je dat de afbeelding genaamd Link Love vrij lang duurt om te laden. Ik zal deze afbeelding gebruiken als voorbeeld voor dit artikel.

JPG, PNG of GIF?

Weet je niet in welk formaat je jouw afbeelding moet opslaan, kijk dan even in deze tabel. Let op – dit is voor gebruik op internet. Voor ander gebruik kunnen er andere regels gelden.

Gebruik Formaat
Foto JPG
Vector PNG
Afbeelding met paar kleuren PNG
Afbeelding met transparantie PNG
Animatie GIF

Nog een tip: hoe vaker je een JPG opslaat, hoe slechter de kwaliteit wordt. Denk je dat je de afbeelding vaak gaat openen, eventueel gaat aanpassen om vervolgens weer op te slaan? Gebruik dan een loss-less formaat zoals PNG, PSD of TIFF.

Hoe optimaliseer ik afbeeldingen voor gebruik op het internet?

Indien je een grafisch programma gebruikt om jouw afbeeldingen te maken, dan zit er standaard een optie in waarbij je de afbeelding kan opslaan voor het Web. In het Adobe pakket ga je naar Bestand – Opslaan voor Web. Je kan kiezen uit JPEG, PNG en GIF. Als je deze optie hebt, gebruik hem dan! De optie zit er niet voor niets natuurlijk. Als je de afbeelding op de normale manier opslaat (bestand – opslaan) zie je gelijk dat hij vaak 2x zo groot is en dus ook 2x zo lang duurt om te laden. Zo zonde! Je hoeft voor deze optie geen extra handelingen uit te voeren dus het is ook nog eens zo gedaan.

Wanneer ik JPG afbeeldingen gebruik, dan sla ik deze standaard op via Bestand – Opslaan voor Web in Photoshop. Ik zet de kwaliteit terug naar 60% (hoog) en klik dan op Opslaan. Je hoeft voor de meeste afbeeldingen de kwaliteit niet op 100% te zetten want het verschil in kwaliteit is vaak nihil terwijl het aantal KB drastisch wordt verlaagd.

opslaan-web-jpeg

Deze optie gebruik ik standaard, maar ik merkte dat de afbeeldingen nog meer gecomprimeerd konden worden. Ik was bekend met JPEGMini en deed een kleine test. Ik gebruikte de online versie en de afbeelding werd met zo’n 20% in grootte verlaagd! Dat betekend dat de optie Opslaan voor Web dus niet de beste is, want ik moet eigenlijk twee handelingen doen om tot het beste resultaat te komen.

jpeg-mini

Ik heb dus gelijk de Pro versie van JPEGMini aangeschaft voor het bedrag van $19,95 en haal mijn afbeeldingen nu standaard hier doorheen. Ik merk qua kwaliteit geen verschil in de foto’s, ik hoef nu maar één stap te doen (opslaan voor web sla ik nu over) en kom nog steeds tot het beste resultaat. Ideaal!

Wil je liever niet betalen, dan kan je altijd de online versie gebruiken van JPEGMini (of download de trial versie). Ook kan je terecht bij de volgende websites:

Niet alle compressie websites kunnen een PNG bestand aan, dus daarvoor kan je hier terecht:

En nog beter, heb je een WordPress website dan kan je de plugin Compress JPEG & PNG images installeren die een afbeelding automatisch comprimeert wanneer je er eentje upload. Nadeel is wel dat je de kwaliteit pas kan zien wanneer je de afbeelding al geupload hebt.

Let ook op de afmeting van een afbeelding

Ik heb het alleen nog gehad hoe je een afbeelding qua grootte in KB’s kan verlagen, maar waar je ook rekening mee moet houden is de afmetingen. Wat bloggers vaak doen is overal grote afbeeldingen gebruiken, ik zie regelmatig een profielfoto in de zijbalk met een afmeting van zo’n 1000px of meer. Dat is nergens voor nodig. Je moet een afbeelding niet groter maken dan dat hij ooit zal worden weergegeven.

Is jouw zijbalk niet breder dan 300px dan hoef je daar ook geen afbeelding te gebruiken van 1000px. Het verkleinen van een afbeelding met HTML of CSS heeft géén effect op de grootte van de afbeelding.

Ook al oogt de afbeelding kleiner, dat betekend niet dat deze daadwerkelijk kleiner is. De webbrowser laad alsnog de gigantische afbeelding en verkleint deze door de CSS en/of HTML die toegepast is in jouw thema. Dit zal zeker negatief effect hebben op de laadtijd.

Wat je dus moet doen, is alleen de afmeting gebruiken die je ook wilt laten zien. Wil je dat jouw profielfoto 300px breed en 300px hoog is, dan verklein je deze in Photoshop tot 300×300 voordat je deze upload naar jouw website.

Heb je een mobiele versie en weet je niet zeker hoe breed jouw zijbalk is? Dan kan je alsnog een bepaalde breedte aanhouden voor al jouw foto’s en deze laten centreren zodat jouw design op de mobiel versie ook mooi oogt.

Vier extra tips om de laadtijd van jouw website te verlagen

Tip 1: Kijk naar jouw CSS stylesheet. Staan er dubbele coderingen in, kan je betere combinaties maken of misschien het volledige bestand comprimeren? Een handige tool om jouw stylesheet te analyseren en comprimeren is Minify and Compress CSS.

Tip 2: Gebruik een cache plugin zoals W3 Total Cache. Wanneer een bezoeker een pagina bezoekt, worden er zware en dynamische PHP scripts geladen wat belastend is voor jouw server. Een cache plugin zorgt ervoor dat er een statische HTML pagina wordt opgeslagen en weergegeven aan gebruikers die op een pagina komen die al eerder bezocht is door een andere bezoeker. Dit scheelt enorm veel bandbreedte. Je website wordt tevens sneller wat natuurlijk de gebruikerservaring positief beïnvloedt. Met een cache plugin kan je jouw CSS en Javascript overigens ook comprimeren!

Tip 3: Pas jouw homepage aan om de laadtijd te verlagen.

  • Zet het aantal artikelen dat weergegeven wordt tussen de 5 en 7.
  • Maak gebruik van de read-more knop. Laat in plaats van het volledige artikel, de samenvatting of eerste alinea zien.
  • Verwijder plugins die je niet gebruikt.
  • Speaking of plugins, analyseer de laadtijd van iedere plugin die je geïnstalleerd hebt door middel van de P3 (Plugin Performance Profiler). Plugins kunnen ook zorgen voor een langere laadtijd. Doe een test, kijk welke plugins de boosdoeners zijn en maak vervolgens een afweging of je ze wel of niet wilt houden.
  • Gebruik niet al te veel widgets in jouw zijbalk.
  • Keep it minimal! Bezoekers willen snel en makkelijk toegang tot jouw content.

Tip 4: Comprimeer jouw WordPress database. Wanneer jouw WordPress website steeds groter wordt, groeit de database mee. Door WP-Optimize te gebruiken kan je jouw database tabellen optimaliseren maar ook al jouw artikel revisies verwijderen die je toch niet meer nodig hebt en eigenlijk alleen ruimte opnemen. Het is een geweldige manier om jouw website klein, schoon en snel te houden! Het is raadzaam wanneer je dergelijke plugins gebruikt, regelmatig een backup te maken van jouw website.

Hopelijk heb je wat aan deze tips om de laadtijd van jouw WordPress website te verlagen.

Heb je zelf nog tips om een lange laadtijd van je website te vermijden?

Geef een reactie

3 reacties

  1. Sanne says:

    Handig om te lezen, alleen gebruik ik altijd png voor mijn foto’s.
    Misschien toch eens dringend veranderen dan?