Snelheidtips voor jouw website – part 3

Na de website snelheid tips part 1 en voor de al iets gevorderde snelheid tips voor websites part 2 is het tijd om het 3e deel aan te kaarten en nog ietsje dieper in te gaan op de snelheid voor websites. In dit deel ga ik nog iets dieper in op de code en wat je nog allemaal kan doen om je website sneller te maken door voornamelijk je server te ontlasten.

Terug weer zoals voorgaande besproken items, handen uit de mouwen en aan de slag met technische website snelheid tips om de server te ontlasten en dus ook jouw website sneller te laten inladen!

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

• Zorg dat Gzip compressie actief is
  
  Gzip is een compressie die uitgevoerd wordt door de server waarop jouw website gehost is. HTML op zich is redundant en en dat voor iedere tag. Er is namelijk een tag voor het openen van de “functie” en er is een tag om die terug af te sluiten. Dit allemaal samen telt de boel op tot héél wat code. Gzip zorgt ervoor dat de verstuurde code vanaf de server in een gecompresseerde vorm doorgestuurd wordt naar de browser en die browser pakt het pakketje uit en toont de webpagina zoals die precies moet zijn. De overdracht van het bestand gaat dus sneller.
  

  Gzip compressie

  Zelf wordt mijn website voor bijna 81% gecompressed! Inderdaad, je leest het goed!

  

  Bijna 81% compression met Gzip

  Om eens te checken of jouw hosting Gzip compressie ondersteunt kan je een PHP pagina aanmaken met volgende code erin:

  <?php phpinfo() ?>

  Zet deze pagina op jouw website, surf er naar toe en kijk in de tabel of Gzip ondersteunt wordt. Je kan het ook rechtstreeks doen met deze HTTP headers checker tool als je niet over PHP beschikt. Is Gzip actief, hoef je niets te doen. Mocht dit niet het geval zijn, neem je best even contact op met de firma die jouw webhosting verzorgd en die zullen dat wel activeren.

  Let wel op, nu heb je alleen nog maar gecontroleerd of de webserver compressie gebruikt. Nu moet je nog Gzip activeren voor jouw website. Jouw website moet doorgeven aan de server dat deze moet gecompressed worden bij het opvragen van een webpagina.

  Als je beschikt over een .htaccess file kan je deze code toevoegen:

  AddOutputFilterByType DEFLATE text/html text/plain text/xml

  of je kan het per type file doen:

  <Files *.html>
  SetOutputFilter DEFLATE
  </Files>

  Heb je een WordPress blog, kan je sneller te werk gaan met WP Cache of WP Super Cache en daar Gzip gewoon aanvinken. Heb je een ‘gewone’ PHP site kan je deze code in de pagina plaatsen:

  <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

  Merk op dat ik alleen maar HTML files compress als je al compressie toepast voor CSS en javascript files. 2 maal compress heeft geen zin.
  

• Zet alle HTML code op 1 lijn
  
  Hier kruipt er toch wat werk in hoor! Alle code, maar dan ook alle code hé, probeer je te zetten op 1 lijn. Dus alle enters die de code leesbaar maken en handig om in te werken, gooi je er uit en plaats je alles netjes achter elkaar. Het principe leunt aan bij het javascript en CSS minify.Hierdoor ga de uiteindelijk uitgeschreven HTML code van je webpagina grondig shrinken in aantal regels en zal je veel bandbreedte sparen en dus ook je server ontlasten. Zelf heb ik het ook gedaan voor mijn blog en ben ik van iets meer dan 500 regels HTML naar een kleine 50 regels HTML code geëvolueerd. Dat kan dus tellen hé dat door alleen maar alle overbodige enters en spatiëring uit de code te gooien. Het voordeel is hiervan ook dat je dankzij deze cleane code terug wat kiloBytes wint wat de grootte betreft van je file en dus die compressie ook een stuk groter zal zijn! Een echte aanrader!Google en Bing doen ook aan one line HTML code hoor. Als de groten het doen, zal het niet zomaar zijn hé ;)O ja, mocht je bang zijn dat zoekmachines jouw code misschien niet meer zouden kunnen inlezen, hoef je niets te vrezen. Die zien ook liever alles op 1 rij staan hoor! Dat leest gemakkelijker en sneller.  Zelf plan ik nog wat mijn code in te krimpen waar ik kan, maar het is even zoeken op dit moment. Ik wou alvast eens aanhalen dat ik overlaatst deze techniek heb toegepast voor een andere website en het aantal regels HTML code van een goeie 800 naar slechts 9 regels is gegaan. Als dat niet kan tellen, dan weet ik het ook niet meer hoor!

  Als je hier echt geen zin hebt, kan je deze code implementeren in jouw PHP pagina’s. Deze ruimt jouw code op en zet die op 1 lijn. Zelf heb ik het nog niet getest dus opletten zou ik zeggen!

  <span style="font-family: monospace; line-height: 19px; white-space: normal; font-size: 13px;"><?php</span></pre>
  </span>
  <code>function stripwhitespace($bff){$pzcr=0;$pzed=strlen($bff)-1;$rst="";while($pzcr<$pzed){
  $t_poz_start=stripos($bff,"<textarea",$pzcr);if($t_poz_start===false){$bffstp=substr($bff,$pzcr);
  $temp=stripBuffer($bffstp);$rst.=$temp;$pzcr=$pzed;}else{$bffstp=substr($bff,$pzcr,$t_poz_start-$pzcr);
  $temp=stripBuffer($bffstp);$rst.=$temp;$t_poz_end=stripos($bff,"</textarea>",$t_poz_start);
  $temp=substr($bff,$t_poz_start,$t_poz_end-$t_poz_start);$rst.=$temp;$pzcr=$t_poz_end;}}return $rst;}
  function stripBuffer($bff){$bff=str_replace(array("\r\r\r","\r\r","\r\n","\n\r","\n\n\n","\n\n"),"\n",$bff);
  $bff=str_replace(array(">\r<a",">\n<a"),"><a",$bff);$bff=str_replace(array(">\r<b",">\n<b"),"><b",$bff);
  $bff=str_replace(array(">\r<d",">\n<d"),"><d",$bff);$bff=str_replace(array(">\r<h",">\n<h"),"><h",$bff);
  $bff=str_replace(array(">\r<i",">\n<i"),"><i",$bff);$bff=str_replace(array(">\r<i",">\n<i"),"><i",$bff);
  $bff=str_replace(array(">\r<l",">\n<l"),"><l",$bff);$bff=str_replace(array(">\r<m",">\n<m"),"><m",$bff);
  $bff=str_replace(array(">\r<p",">\n<p"),"><p",$bff);$bff=str_replace(array(">\r<t",">\n<t"),"><t",$bff);
  $bff=str_replace(array(">\r</u",">\n</u"),"></u",$bff);$bff=str_replace(array(">\r</d",">\n</d"),"></d",$bff);
  $bff=str_replace(array(">\r<!",">\n<!"),"><!",$bff);$bff=str_replace(array(">\r</h",">\n</h"),"></h",$bff);
  $bff=str_replace(array("\r<u","\n<u"),"<u",$bff);$bff=str_replace(array("/>\r","/>\n"),"/>",$bff);
  $bff=ereg_replace(" {2,}",' ',$bff);$bff=str_replace("> <","><",$bff);$bff=str_replace(" &nbsp;","&nbsp;",$bff);
  $bff=str_replace("&nbsp; ","&nbsp;",$bff);return $bff;}ob_start("stripwhitespace");
  
  ?><span style="font-family: Consolas, Monaco, 'Courier New', Courier, monospace; line-height: 18px; font-size: 12px; white-space: pre;">

• Vervang WordPress Queries
  
  Wordpress is een schitterend platform maar zoals handig en vooral gemakkelijke platforms kan je zelf veel instellen wat resulteert in teveel dingen ophalen vanuit de database. Telkens als er een SQL query uitgevoerd wordt, vertraagd dit een beetje jouw website. HTML websites zijn de snelste, dat is een feit maar daar kan je niets dynamisch mee doen. Zelf geen updates voorzien, geen fotogalerij die je zelf kan updaten, …
  
  Daarom is het belangrijk het aantal SQL queries zo laag mogelijk te houden. Bijvoorbeeld de titel van je blog invullen in de Admin, dat is een SQL query. In de header staat er een regeltje code die deze titel uit de database ophaalt en dat kan je vermijden door zelf in de header die queries te vervangen door statische tekst.In de file header.php in jouw WordPress theme zal je volgende code zien staan:

  <meta http-equiv=”Content-Type” content=”<strong><em><?php bloginfo(‘html_type’); ?></em></strong>; charset=<em><strong><?php bloginfo(‘charset’); ?></strong></em>” /><?php bloginfo(‘name’); ?>

  Vervang hier de WP queries gerust door statische tekst, zo kan dit bijvoorbeeld er zo gaan uit zien:

  <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ /><title>De naam van jouw blog</title>

  Zoals je ziet kan je deze WP queries vervangen door statische tekst en spaar je hier in bovenstaand voorbeeld al 2 queries uit. Er wordt dus minder data opgevraagd van de database en zal dit dus resulteren in een snellere weergave van jouw blog. Natuurlijk is de impact van 2 queries niet zo groot maar als je overal in WordPress dergelijke zaken zal aanpassen zal je toch snel een query of 10 kunnen uitsparen.Wat kan je allemaal aanpassen:

  • Titel van jouw blog
  • Alle linken die naar jouw theme map leiden
  • De linken naar de RSS feeds, alhoewel ik deze eruit heb geflikkerd (website snelheid tips part 1 – punt 6)
  • Het menu in de sidebar of de header kan je ook best zelf uitschrijven
  • In de footer staan er ook nog enkele overbodige zaken
  • Archives, tagclouds, you name it, het kan er allemaal deels uit gegooid worden
  • de file gelinkt vanuit je theme “searchform.php” kan er ook uit, die kan je statisch in je theme zetten en scheelt ook al 1 à 2 WordPress queries

  Op het einde van de rit wil je natuurlijk weten hoeveel queries je hebt uitgespaard. Kijk daarom eerst vooraleer je van start gaat even in je broncode als jouw blog is ingeladen. Onderaan zal je ergens een aantal WP queries zien staan. Begin alles ter vervangen en je zal zien dat deze queries zullen afnemen.

  Hou er misschien ook rekening mee even in je statistieken te kijken wat je allemaal kan weggooien. Tagclouds en archieven zijn misschien de meest aangeklikte linken en die gooi je er misschien dan ook best niet uit. In principe moet je de totale sidebar overwegen weg te gooien afhankelijk van je stats want in die sidebar staat meestal de nutteloze content of items van jouw blog. Durf eens wat te wissen. Neem misschien een backup, dan kan je nog alles terugzetten zonder al te veel werk.

Ik had eerder aangekondigd dat er ‘slechts 3 delen met tips voor de snelheid van websites te verbeteren gepland waren, maar deze post werd weer al eens veel te lang en dus komt er een deel 4 aan! Stay tuned, dan graven we nog ietsje dieper.