Laadtijd wordpress minimaliseren

Ik ga er even vanuit dat het om de Noodweer website gaat die je hier al eerder heb geplaatst?

Zo ja, dan is mijn advies download en installeer eens de Safari browser en activeer de Developer Tools die er standaard inzitten.

Nee, je hoeft deze browser niet als default browser in te stellen en van mij mag je hem ook weer direct verwijderen zodra je klaar bent met optimaliseren van je website maar waar het mij om gaat is de Developer Tools optie die er standaard inzit.

Hiermee kan iedereen een goed beeld krijgen van wat er allemaal mis gaat bij het laden van een webpagina en waar je dingen kunt verbeteren.
Dit wil niet zeggen dat iedereen ook alle aanpassingen kan doorvoeren, omdat er soms wel bepaalde kennis voor vereist is. Maar net zoals met WordPress je hoeft niet zelf te kunnen coderen maar alleen begrijpen wat een code is.

Dus je kunt aan de hand van de informatie die je krijg zelf verder zoeken naar oplossingen.

Hier heb je een screenshot van de Developer Tool.
http://i46.tinypic.com/xp7nkk.png

De drie buttons waar ik naar wijs vanaf het Logo zijn het belangrijkst voor iemand met minder kennis van webdesign maar hier kan hij of zij wel heel veel informatie uithalen.
Links onderaan kun je zien dat er 55 Browser Requests zijn die in totaal bijna 1MB (850kb) aan geheugen moeten laden tijden het opvragen van de homepage.

Twee belangrijke regels die je moet weten bij het bouwen van een website zijn:
1) Een website (pagina) moet zo licht mogelijk zijn 1MB voor één pagina is veel te zwaar zeker voor een homepage.
2) Het aantal Browser Requests moet je zo laag mogelijk houden. Niemand kan natuurlijk een website maken met maar één Request naar de browser maar ook hier Less is More.

Er zijn geen uitgangspunten van bijv. gemiddeld is … kb normaal omdat je ook geen ‘normale’ website kunt maken of een ‘normaal’ bord met eten kunt bestellen.

Maar iedereen hier kan denk ik deze screenshot wel begrijpen.
http://i47.tinypic.com/9l99u1.png

Zie je dat ik nu nog steeds in dezelfde Tab Netwerk zit als in mijn eerste screenshot? Alleen heb ik onderaan in het sub-menu gekozen om alleen de Stijlbladen (stylesheets) te tonen. Hierdoor krijg je een goed beeld hoeveel hoeveel stylesheets er geladen moeten worden op deze pagina en hoe het laden verloopt.

Als ik iemand hier zou vragen hoeveel stylesheets een browser tegelijk kan laden dan zouden de meeste mensen dat totaal niet weten omdat Who Cares! En terecht. Maar als het zoals vandaag WEL Cares dan is het wel handig om het via een Tool als deze direct te zien zonder dat je ook maar iets van kennis op hoeft te doen.
Je kunt goed zien dat de eerste 5 stylesheets in een groepje geladen geladen worden ze beginnen alle 5 op het zelfde moment en aan het groene bolletje kun je zien dat ze verschillende tijden hebben wanneer ze helemaal geladen zijn. Logisch ze zijn niet allemaal even veel KB. Let op dit zijn milliseconden.

Maar nu komt het, helemaal links kun je zien dat bij de eerste 5 stylesheets er 2 stylesheets zijn die geladen worden van font.google.apis.com , dit zijn waarschijnlijk 2 stylesheets voor speciale web-fonts die niets anders zeggen dan “Browser we maken gebruik van deze fonts”. Zie je ook dat deze twee stylesheets samen nog geen 2KB groot zijn? Waarom zou je ze dan apart laden?
Wat als we nu eens deze twee stylesheets zouden openen en de code die erin staat copy-/pasten in bijv. stylesheet nummer 1. Deze zal stylesheet nummer 1 waarschijnlijk geen 21.18KB meer zijn maar 22KB worden. Daar kunnen we denk ik wel mee leven maar zodra je dit doet kunnen we wel die twee aparte (nummer 3 en 4) verwijderen zodat nummer 6 en 7 bij het groepje van 5 terecht komen.

Simpel niet?
Dit is echt heel erg simpel denken maar als je hiermee gaat beginnen dan kom je echt al een heel eind en voordat je het weet ga je er een sport van maken om alleen nog maar in milliseconden te denken. Complete websites (pagina’s) moeten dan geladen worden in minder dan één seconde.
Als ik op dreef ben dan kan ik hier echt uren in steken om dat voor elkaar te krijgen maar dit is wel SUPER belangrijk. Niet alleen voor je SEO maar denk ook eens aan mensen met een mobieltje die je website bezoeken iemand die jouw website bezoekt terwijl hij-/zij in de trein zit en op het netwerk van KPN zit is nu al 800KB aan Data kwijt om jouw pagina te laden terwijl hij of zij alleen nog maar de homepage gezien heeft.

Even voor de duidelijkheid als je deze aanpassingen doorvoert ben je er nog niet er zijn meer menu -items onderaan de pagina die werken allemaal het zelfde MINDER laden en veel bij elkaar stoppen.

Waar echt je Focus moet liggen is bij Scripts (javascripts)
http://i48.tinypic.com/6z30hl.png

Zie je het verschil hoe groot deze bestanden zijn. En iets dat ik nog niet verteld had is dat je bij de kolom Grootte kunt zien hoe groot-/zwaar het bestand is en direct daaronder staat hoeveel KB van het totaal gebruikt wordt op jouw website.
Dus bij de eerste:
– Die is bijna 92KB en daar gebruik jij maar bijna 33KB van (op deze pagina)

Dat zijn ook puntjes waar je op moet letten.
Ook kun je zien dat de eerste twee geladen worden vanaf je eigen hosting, terwijl dit standaard jQuery bibliotheken zijn die ook via de Google CDN server te gebruiken zijn. Hierdoor worden ze veel sneller geladen als op jouw eigen website + ze tellen niet mee voor jouw bandbreedte omdat je ze niet zelf host maar ze bij Google op de server staan.

Klein advies, probeer eens te kijken of je een betere Facebook connect kunt vinden.
Plugins zijn leuk en ZEER handig maar ze worden vaak met de verkeerde gedachte gemaakt namelijk dat ze ALLES moeten kunnen voor een zo GROOT mogelijke doelgroep. Ik heb liever een plugin die iets minder kan maar veel beter past bij de opties die je wel nodig hebt. Je hebt niets aan veel opties als je ze toch niet gebruiken, vaak moeten daar wel instellingen en stylesheet codes voor geladen worden.

Als aller laatste wil ik je deze screenshot nog even laten zien.
http://i49.tinypic.com/16rj2f.png

De Controles Tab, dit spreekt denk ik ook voor zichzelf. Rode bolletjes zijn natuurlijk aandachtspunten die meer aandacht verdienen dan de Orangje bolletjes. Maar laat dit vooral geen obsessie worden zodat er straks nergens meer een bolletje mag staan.

Succes..

Klopt er wordt waarschijnlijk te veel geladen en ook nog eens op de verkeerde manier.

Als je helemaal geen ervaring hebt dan kun je ook tijdelijk eens deze plugin activeren.
http://wordpress.org/extend/plugins/wp-minify/

Wat het doet is het maakt van alle stylesheets en javascripts één bestand dus zodat je niet meer 7 stylesheets hebt maar nog maar 1 of 2 stylesheet dat geladen moet worden.

Maar een totale oplossing is het natuurlijk niet omdat er waarschijnlijk ook een hoop code tussen staat dat helemaal niet nodig is dus ook niet geladen hoeft te worden in die ene stylesheet of javascript.

Als jij snelle loadtime wilt moet je daar moeite voor doen of aan een professional overlaten.

Daar ben ik het niet helemaal mee eens, moeite doen oké, maar dit is niet iets dat alleen Professionals kunnen. Ik kan het ook dus..

Btw het gaat opzicht niet om het snelle laden van de pagina’s maar vooral om dat de hoster heeft gevraagd of hij iets aan het dataverbruik wilt doen. Dus te veel requests en te veel zware bestanden die geladen moeten worden. Dit is niet erg als je 100 bezoekers hebt maar als je er 1000 p/dag hebt dan tikt dit heel snel aan op je bandbreedte aan het einde van de maand.