Website technisch sneller maken – part 4

Ondertussen hebben we al genoeg gelezen dat snelheid een rankingsfactor is van Google en dat er meer belang moet aangehecht worden, maar tijd om dit hoofdstuk eens af te sluiten met deel 4 van hoe je jouw website sneller kan maken.

De eerste delen gemist? Begin bij de eerste tips om websites sneller te maken en doorloop de 4 topics. Het loont de moeite!

Server ontlasten voor de snelheid van jouw website – Senior niveau coding

Laat ik eerst beginnen met enkele zaken die de meesten waarschijnlijk al eens zullen van gehoord hebben. Daarna vul ik de rest wat aan met wat andere tips die misschien wel handig zijn voor jouw website, misschien toch eerder WordPress of tenminste een PHP site in het algemeen.

1. Future Expire Headers en Cache-Control Headers voor onnodige HTTP requests
   
   Iedere bezoeker die de eerste keer op jouw website komt zal een heleboel HTTP requests moeten uitvoeren om alle images en andere bestanden in te laden. Dit hoeft eigenlijk maar 1 keer. Door het instellen van Future Expire Headers zeg je de returning visitor dat deze eerder ingeladen files best uit de cachen mogen komen.Na de FilesMatch stel je best nog even de Cache-Control in die zegt hoelang er mag gecached worden en zet je best op “public” of je kan ook kiezen voor “must-revalidate” of “Last-Modified” maar voor die laatste lees je best even nummertje 2.Je kan het cachen best instellen voor javascripts, afbeeldingen en Flash animaties. Zelf gooi ik er nog wat andere files bij zoals html, txt, html, … om de laadtijd wat in te korten. Plaats de onderstaande code in je .htaccess file.

   <IfModule mod_headers.c>
   <FilesMatch "\.(ico|pdf|js|css|gif|png|jpg|jpeg|swf|txt|html|htm)$">
   Header set Cache-Control "max-age=2592000, public"
   </FilesMatch>
   </IfModule>

2. Etags uitschakelen
   
   Door Etags uit te schakelen geef je de caches en browsers geen kans om de content opnieuw op te halen. Deze worden zo geforceerd om te vertrouwen op hun eerder opgeslagen bestanden. Zo kan je kijken of de content al dan niet is veranderd en die dan toch opnieuw te laten cachen zo dat deze up-to-date is. Vooraleer je onderstaande code in je .htaccess file plakt, zou ik toch even overwegen deze stap misschien niet te doen afhankelijk waar jouw website gehost staat.Aangezien de Etags server afhankelijk zijn, kan het voorvallen dat deze veranderen. Dat wil dus zeggen dat de Etags, hoewel je ze hebt uitgeschakeld terug actief zullen zijn. Dit kan als jouw website bijvoorbeeld wordt gehost op een cluster van servers. Iedere server heeft unieke Etags. Stel jij surft naar jouw website, dan krijgt jouw browser een set Etags voorgeschoteld. Doordat je website gehost wordt op een clusters van servers kan deze door één van die servers worden opgevraagd en kan deze dus andere Etags doorgeven aan de browser omdat deze technisch gezien een andere server is dan de voorgaande waar de browser de Etags van ontving. Dus… misschien even vragen bij de firma van de hosting vooraleer je dit uitschakeld.

   Header unset ETag
   FileETag None

3. Last-Modified header uitschakelen
   
   Als je dan toch alles wil uitschakelen kan je ook de “Last-Modified” header uitschakelen in combinatie met de Etags uit te schakelen. Door deze header uit te schakelen kan er geen nieuwe content meer worden opgevraagd totdat de Expire Headers verlopen zijn. Niet echt ideaal als je veel update maar dan moet je overwegen de “max-age” iets minder te zetten. Laat ik er wel even bijzeggen dat je best nog eens alles test op je website want als je javascripts en dergelijke dingen laat cachen, zou het wel eens kunnen dat zaken zoals form validations een eigen leven beginnen te leven.Terug weer wat code in de .htaccess file plaatsen:

   <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
   Header unset Last-Modified
   </FilesMatch>

4. Subdomeinen gebruiken om files in te laden Ik denk niet dat iedereen hier al van gehoord heeft maar ik zie het nu toch meer en meer opduiken en plan het zelf ook te gaan doen in de nabije toekomst : meerdere subdomeinen gebruiken om jouw site sneller te maken.
   
   Je maakt een subdomein of 2 aan en verdeeld de content, bijvoorbeeld 1 subdomein voor alle soorten afbeeldingen en het ander subdomein voor mp3′s, filmpjes en flash bestanden. Daarna pas je alle linken aan op jouw website.
   
   De werking is vrij simpel: als iemand jouw website bezoekt en jouw url ingeeft, vraagt deze persoon een IP op dat gekoppeld is met jouw domein. Het vertalen van de hostname naar het IP adres wordt gecached en dus moeten er geen DNS opzoekingen meer gebeuren. Eén van de voordelen is de snelle weergave van de content. Eerst wordt de content opgehaald en daarna pas de images en andere bestanden van de subdomeinen.
   
   In principe worden de files, in dit voorbeeld, opgehaald vanaf 3 verschillende plaatsen en worden deze dus parrallel ingeladen wat dus resulteert in tijdswinst. Er kruipt wel wat werk in dit te realiseren voor een WordPress blog bijvoorbeeld maar ik plan het toch eens te doen één der dezer dagen. O ja, je moet wel een paar subdomeinen gebruiken hé anders heeft het geen zin!

Nog 2 tips waar je misschien niet onmiddellijk aan dacht :

1. Vermijd hotlinking
   
   Het gebeurd wel eens vaker dat images rechtstreeks worden gelinkt vanuit een website of een blog. Dit vreet ook aan jouw bandbreedte, als je tenminste een grote en druk bezochte site hebt. Je kan hiervoor ook een stukje code in je .htaccess file plaatsen.

   RewriteEngine on
   RewriteCond %{HTTP_REFERER} !^$
   RewriteCond %{HTTP_REFERER} !^https?://(www\.)?EXAMPLE\.com($|/) [NC]
   RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]
   

   Wil je hierover nog meer weten? Check hier dan eens hoe je de bandbreedte van jouw website beschermd.

2. Bots gedeeltelijk blokkerenOm nog eens echt te overdrijven kan je de bots gedeeltelijk blokkeren op jouw site. In principe zijn zoekmachine spiders ook bezoekers die bandbreedte vreten van jouw website. Aan jouw de keuze om die deels te blokkeren of niet. Ik doe het niet, maar het kan helpen, mocht je natuurlijk veel activiteit zien van zoekrobotten op jouw website. Het is een weetje, je doet er mee wat je wil. Plant deze code in je .htaccess.

   User-agent: *
   Crawl-Delay: 3600
   Allow: /wp-content/uploads/*.gif
   Allow: /wp-content/uploads/*.png
   Allow: /wp-content/uploads/*.jpg
   Disallow: /wp-
   Disallow: /search
   Disallow: /?s=
   Disallow: /feed
   Disallow: /comments/feed
   Disallow: /author/
   Disallow: /useronline/
   Allow: /feed/$
   Disallow: /*/feed/$
   Disallow: /*/feed/rss/$
   Disallow: /*/trackback/$
   Disallow: /*/*/feed/$
   Disallow: /*/*/feed/rss/$
   Disallow: /*/*/trackback/$
   Disallow: /*/*/*/feed/$
   Disallow: /*/*/*/feed/rss/$
   Disallow: /*/*/*/trackback/$
   

   Je ziet ook dat er een delay voor het bezoeken is ingesteld, maar Google negeert die. Naar het schijnt moet je deze delay instellen via de Google Webmaster Tools maar ik zie er geen verschil in of je dat nou zelf in de tekst zou voorzien of via de Google Webmaster Tools.

En als dat allemaal nog niet volstaat kan je altijd overwegen CDN hosting aan te schaffen maar persoonlijk zou ik dat niet doen. Het is inderdaad een stuk gemakkelijker maar hoeft dat voor jouw website? Die CDN hosting geraakt trouwens ook opgebruikt na verloop van tijd dus… wat dan? Ik zou het pas gebruiken mocht je nu echt een héle grote site hebben of veel trafiek hebben maar voor enkele duizenden bezoekers per maand en snelheid van de website die maar voor 1% mee telt in de rankings kan je gerust al veel uit deze 4 topics halen!