Ik maak websites die zelf bij te houden zijn.

Geplaatst: 5 jaar geleden

Optimalisatie voor WordPress

Ik kom veel websites tegen die erg veel potentie hebben, maar als het enorm lang duurt om een website te laden bent u mij als bezoeker kwijt. Ik spendeer veel tijd achter de computer en verwacht van een informatiebron dat deze vrijwel direct beschikbaar is.

In dit artikel neem ik een paar stappen door om uw WordPress website sneller te maken is. Ook licht ik een paar tooltjes uit om goed te kunnen testen.

Minimalisme

Begin al bij uw design. Het codewoord voor designs op dit moment, minimalisme. “Less is more”. We houden van strakke websites met veel actieknoppen. Haal hier uw voordeel uit. Werk met contrasten en trigger mensen met bekende symbolen. U moet de weg creëren, die uw bezoekers over uw website berijden.

Plug-Ins

Doe rustig met plug-ins. Voor WordPress is voor vrijwel alles een plug-in te vinden. Dit neemt gelijk een nadeel met zich mee. Elke plug-in moet geladen worden bij het opvragen van uw pagina.

Afbeeldingen

Een fout die ik op erg veel websites zie zit hem in de afbeeldingen. Een afbeelding kan al snel een beste bestandsgrootte met zich meenemen. Door gebruik te maken van de plug-in WP-Smush It worden afbeeldingen die u upload gecomprimeerd en geoptimaliseerd (dit kan al tot 60% per afbeelding schelen!)

Afbeelding grootte (dimensies)

Een probleem wat bij veel websites aanwezig is. We nemen het voorbeeld van een leuke foto voor op uw site die u gebruikt als ondersteunend middel bij uw tekst. U heeft zelf een foto gemaakt met uw fotocamera en wil deze op uw site zetten.

Er wordt snel vergeten deze afbeelding te verkleinen naar de grootte dat u deze op de site wil hebben. Een voorbeeld:
Een camera heeft tegenwoordig met gemak 12MP. Dit staat gelijk aan een afbeeldingsgrootte van 4000×3000 pixels.

Vervolgens uploaden we de desbetreffende foto op de website en krijgt het in de HTML een lengte en een breedte meegegeven, bijvoorbeeld 800×600. Probleem is dat de afbeelding die geladen moet worden nog steeds 4000×3000 pixels is. 4x zo groot!  Resize uw afbeeldingen dus al direct vóór het uploaden.

Klik op de afbeeldingen in dit bericht om te kijken wat ik bedoel, dit zijn ook voorbeelden!

Hoe test ik mijn website op snelheid?

Nu u de voorgaande tips mee heeft genomen in het creëren van uw website, is het tijd om te kijken wat het precies doet. Ik gebruik 2 websites voor het testen van mijn snelheid.

Testresultaten

Deze testresultaten zijn de testresultaten in mijn slechtste situatie. De website is hier nog niet (volledig) geoptimaliseerd.Voor WordPress optimalisatie






Voor WordPress Optimalisatie

 

Nog niet echt iets om trots op te zijn. Voor de gevorderde webdesigner raad ik aan eens specifieker te kijken waar GTmetrix u op afrekent. Eindgebruikers die geen verstand hier van hebben raad ik het af om hier zelf mee aan de gang te gaan!

Hoe versnel ik mijn website?

 

Plugins

Zoals al eerder beschreven kunnen plug-ins erg zwaar zijn voor uw website. Neem eens een kijkje in uw lijst met plug-ins. Zijn ze allemaal wel nodig? Verwijder gedeactiveerde plug-ins.

Er bestaat een mooie plug-in (zal geen toeval zijn) om uw plug-ins te testen, genaamd P3 Profiler. Wanneer u het gevoel heeft dat de plug-in in kwestie toch iets te langzaam is, is het wellicht handig om op zoek te gaan naar een alternatief of overwegen om achterwegen te laten.

Caching

Elke keer dat uw bezoeker een aanvraag doet naar uw website, zal er van alle aanwezige bronnen informatie ingeladen worden. Uiteindelijk als resultaat verschijnt uw webpagina. Eigenlijk heel inefficiënt. Vergelijk het eens met het lezen van de krant van vandaag. Later op de dag denkt u aan dat ene artikel dat u nog even wilt lezen, maar koopt u hier een extra krant voor? Nee, natuurlijk niet! Waarom zouden we dit dan wel met onze website willen?

Een cache is een geheugen waarin tijdelijk veel opgevraagde bestanden en pagina’s in worden opgeslagen. Vanuit een cache kunnen deze een stuk sneller worden ingeladen. Er zijn veel plug-ins die u kunt gebruiken voor het zogenoemde caching. Echter raad ik er maar 2 aan.

Voor beginners WP Super Cache en voor gevorderden W3 Total Cache

Buffer flush

Het flushen van de buffer zorgt er voor dat content eerder wordt weergegeven. Het speelt in op de normale methode van weergave. Normaal pakt de browser alle informatie die hij nodig heeft en toont het resultaat. Door middel van dit script gebeurd dat tegelijk.
<?php
// Flush uw buffer voor snellere weergave!
flush();
?>

Plaats dit stukje code in uw header.php tussen het einde van uw head tag en het begin van uw body tag. Heeft u geen idee waar ik het over heb, sla deze stap dan zeker over.

Optimaliseer uw database

Vergeet nooit een back-up van uw database te maken wanneer u hier wijzigingen aan toe gaat brengen!

De plek waar al uw tekst en afbeeldingen uit opgeroepen wordt. Eigenlijk dus de aller belangrijkste plek om te optimaliseren, toch ook snel vergeten. Het klinkt al snel eng om bezig te gaan aan de database. Echter is er een mooie plug-in voor die dit heel makkelijk voor u doet, namelijk WP Optimize.

Resultaten

Het belangrijkste van alles. Wat levert het uiteindelijk op. Vergeet na deze stap niet al uw gebruikte plug-ins te deactiveren en te verwijderen. Wanneer u uw website nogmaals wilt testen kunt u deze plug-ins eenvoudig opnieuw downloaden.Na WordPress optimalisatie





Na WordPress optimalisatie

Zoals te zien is heeft er duidelijk verbetering plaats gevonden. Het is ook mogelijk dat uw hosting traag is, waardoor u uw score niet verder omhoog kan krijgen. Kijk eens naar websites van anderen bij deze hostingpartij. Ik ben benieuwd naar uw resultaten!


Some HTML is OK