Snelheid tips voor websites, werkt echt! – part 2

In het 2e deel van mijn post over de snelheid van websites ga ik ietsje dieper in op de code en nog enkele tips die je kan toepassen voor jouw WordPress blog maar ook voor een ‘gewone’ website.

Mocht je deel 1 gemist hebben, kan je hier terecht voor de eerste website snelheid tips die écht werken. In dit deel spreek ik over het amateur niveau qua codering. Concreet zijn dat relatief gemakkelijke tipjes die iedereen kan uitvoeren mits wat geduld en er tijd in te steken, voor sommige onderdelen dan toch. Deel 3 zal nog ietsje dieper op de zaken ingaan, dat zal dan meer voor de medior en senior zijn maar laten we eerst deel 2 bespreken.

Snelheid tips voor jouw website – Amateur niveau codering

1. Xmlrpc.php uit WordPress gooien
   
   Als je een WordPress blog hebt, schrap je beste deze file. Gooi de file misschien niet onmiddellijk weg maar verwijder de link uit de header. Die kan je terugvinden in jouw theme template.XML-RPC is een protocoll dat bloggen van op afstand mogelijk maakt. Ik ga niet uitleggen hoe het precies in elkaar zit maar het principe werkt op een XML structuur die HTML request behandelt of liever gezegd omvormt tot HTML request. Je kan het zien als een soort API die je kan aanspreken om posts te doen van op afstand. Meer hierover kan je op Wikipediavinden, maar dat hoef je niet allemaal technisch te weten.Die xmlrpc.php file wordt steeds heringeladen en staat te wachten om een boodschap om te zetten in een post. Als jij die niet gebruikt, en ik vermoed dat de meesten onder ons niet eens wisten dat je dit kon met WordPress, mag je die gerust uit je header schrappen. Het zal je wat laadtijd besparen!
2. Overweeg de Google (AJAX) libraries of Microsoft libraries
   
   Je weet het misschien niet maar Google  en Microsoft hosten zelf heel wat bekende javascript libraries. Libraries zoals JQuery, Prototype, Scriptaculous, … worden ook gebruikt voor hun eigen toepassingen. Beide bedrijven geven hiermee jouw de kans deze libraries op te roepen vanaf hun supersnelle server. Probeer het zeker eens uit, het kan jouw laadtijd versnellen.
   
   Voor Google hoef je je enkel aan te melden voor een API key, 1 lijntje code toevoegen en je hebt toegang tot enkele van de meeste gekende en gebruikte javascript libraries. Mense die al een API key hebben, door een Google Maps applicatie (gemaakt met de Google Maps API weliswaar) op jouw website of iets dergelijks runnen, kunnen dezelfde API Key gebruiken. Er is ook een Google Ajax libraries WordPress plugin voor de mensen die niet zelf in de code van de header willen prutsen.Je kan misschien zeggen dat dit weer een extra DNS lookup is en dat klopt  de scriptjes worden gehost op een CDN en dat is supersnel! Een Content Delivery Network is een samenstelling van snelle cache servers die op strategische netwerkpunten van het internet staan. Met andere woorden zijn deze servers snel aanspreekbaar aangezien ze gekoppeld zijn via de hoofdleidingen van het internet, vermoedelijk de eerste zijtakken of misschien zelfs de knooppunten van de backbones. Je kan natuurlijk ook zelf CDN hosting kopen maar dat is waarschijnlijk nét ietsje te duur voor velen onder jullie. Voor een simpele blog raad ik dit niet aan, mss voor een grote multinational is dit overweegbaar hoewel ik me vragen stel bij de trafiek die ze aanbieden.

   Meer weten over die Microsoft CDN?
   Officiële info over hoe je Microsoft CDN gebruikt kan je hier vinden.

   Eerlijk is eerlijk, het verschil tussen de 2 in snelheid kan ik niet zeggen. Momenteel gebruik ik Google maar plan binnenkort eens te testen met Microsoft. De snelste zal de eer hebben scriptjes te mogen inladen voor mijn blog :p
   

3. Minify javascripts en voeg die samen (cliché maar het werkt)
   
   Het alom gevreesde puntje op de “to-do”-lijst van iedere webdeveloper (of toch de meesten onder ons). Het is, zoals ik al veel heb gehoord en over gelezen, een tricky business. Ik kan enkel maar aanraden 1 scriptje per keer samen te voegen en zien wat het heeft. Alles samenvoegen zal nooit gaan en ik zal je zeggen waarom.Meestal kom je leuke en handige JQuery scriptjes tegen (toch de meeste gekende dezer dagen) en wil die ook testen. Na het importeren werkt alles perfect, voeg je er nog een ander JQuery scriptje aan toe, dan is alles terug om zeep en werkt er géén eentje van de 2 meer. Programmeurs van JQuery scriptjes zijn blijkbaar nog teveel bezig met hun eigen programmatie en daar moet dringend verandering in komen. Meestal worden dezelfde variabelen gebruikt in de scriptjes en dus overschrijven deze elkaar. Ondertussen is er al wat schot in de zaak gekomen om dergelijke problemen op te lossen met de function “NoConflict” maar er is nog werk aan de winkel.Een slimme tool die alles netjes samenvoegt en minimized, ben ik nog niet tegengekomen maar de beste tool (tot nu toe) vind ik de YUI Online Compressor gebaseerd op de YUI compressor van Yahoo. Het mag gezegd worden, Yahoo heeft duidelijk kaas gegeten van dergelijke tools. Yahoo! heeft een totaal arsenaal aan dergelijke tools, componenten en API’s voor websites! Voor de mensen die het minimizen niet snappen : minimizen is alles op 1 lijn zetten, meer niet. Compressen is dingen eruit laten om zo een effectievere code te hebben die dezelfde functies uitvoert.
4. Minify CSS en voeg die samen (cliché maar het werkt)
   
   CSS minimizen en samenvoegen werkt op hetzelfde principe zoals javascripts minimizen en samenvoegen. Die Online YUI Compressor kan je hier ook voor gebruiken. Een echte aanrader. Terug nog eens alles checken als je de file online gooit, je weet maar nooit. Als er iets fout loopt, moet je herbeginnen.
   
   Indien je slechts enkele CSS’s hebt, kan je het gerust manueel doen en alles netjes op 1 rij plaatsen en de code wat filteren maar daar kruipt wel wat tijd in natuurlijk! Je kan ook de Google Page Speed tool eens laten lopen. Deze geeft mooi aan wat je uit je CSS code kan weglaten. 

    

    

    

    

   

   Minify CSS met Google Page Speed tool

   Let wel op dat geen dingen schrapt die bijvoorbeeld op een andere pagina van je website wél gebruikt wordt! Dat is een beetje een stille instinker die je moet in je achterhoofd houden!
   

5. Parrallel laden – volgorde CSS en javascript is belangrijk!
   
   Je staat er niet onmiddellijk bij stil bij het maken van een website, maar de volgorde van CSS’s en javascriptjes inladen is wel degelijk belangrijk! Velen doen het nog niet maar het is zeker een aanrader!Om het kort te houden: eerst CSS files en daarna pas javascripts files! Werk je met inline javascripts (kleine stukjes code wel te verstaan, geen kilometers lange blokken) dan plaats je die best voor de CSS files. Let wel op, als er dingen afhangen van elkaar moet je de volgorde respecteren in welke volgorde de verschillende files elkaar nodig hebbenJavascripts worden standaard trager ingeladen en uitgevoerd door een browser omdat de opmaak van de website er kan van afhangen. In die tijd  kunnen CSS files worden ingeladen en win je dus laadtijd! Hoe het allemaal precies technisch werkt kan je hier vinden.

Snelheid website tips voor de freaks onder ons

Wie na dit nog even verder wil gaan, zit ongeveer op mijn freakyness niveau. Ik geef je nog 3 snelheid tips voor jouw website die je ook kan uitvoeren of op je “to-do” lijstje zetten, maar terug hetzelfde verhaal : het vergt wel wat moeite!

1. Plugins aanpakken
   
   Opvallend is dat plugins héél slordig worden geschreven, de meesten althans. De code wordt totaal niet geoptimaliseerd en de meeste plugins installeren de zelfde libraries. Zo had ik een tijdje geleden wel 3 verwijzingen naar een JQuery library (die dan nog niet eens de nieuwste was) en dus vertraagde die mijn blog.Ga eens na welke plugins je kan uitschakelen, daarna probeer je uit te zoeken of ze ergens extra CSS en javascript implementeren en haal die er uit. Zet die CSS in je overkoepelende CSS file, idem voor de extra lijnen javascript. Overweeg misschien ook weer het samenvoegen van de CSS files en de javascript files. Trek er tijd voor uit, er kruipt toch wel even werk in! Zelf worstel ik nog met een plugin die ik kost wat kost wil verkleinen qua code.
2. Gebruik geen @import voor CSS maar wel link
   
   Als je hier en daar al eens een CSS tutorial opzoekt, zal je merken dat de CSS opgeroepen wordt via de @import functie. Zelf deed ik het ook en ik heb deze veranderd na het lezen van deze post. Zelf merk ik niet zoveel verschil, niets noemenswaardig maar als je het gebruikt, raad ik het je sterk aan ook over te schakelen naar link. Niet zozeer om de laadtijd te verbeteren maar eerder omdat niet alle browsers overweg kunnen met de @import functie, vooral oudere browsers! 
3. Compress images (cliché maar het werkt)
   
   Je staat er niet bij stil maar images vreten ook aan je laadtijd, vooral als je er veel oproept. Overweeg kleinere images maar vooral, compress die nog eens! De kwaliteit wat terug schroeven in Photoshop volstaat niet! Doe het maar! Ik plan binnenkort al mijn images op mijn blog (ja inclusief die in mijn posts) allemaal te compressen, één voor één. What can I say, I’m a freak baby, deal with it! Terug grijp ik naar een Yahoo! tool voor compressie van images. Echt een super compress tool voor PNG, JPG, … you name it.

In de volgende post graaf ik nog ietsje dieper, voor wie het nog aankan. Op naar de volgende post!