21. Optimaliseren van je WordPress site: Snelheid is belangrijk.

Snelheid van de website is een factor geworden dat je ranking bepaald in zoekmachines (maw: in Google). In webmasterhulpprogramma’s van Google zie je daar ook hoe snel je website gaat vergeleken met andere website en suggesties hoe je dit kan verbeteren.

We gaan nu zelf eens kijken hoe we onze site zo optimaal mogelijk voorbereiden. Als je reeds een bestaande website hebt, dan is het nuttig om eerst te kijken hoeveel de laadtijd bedraagt. Je kan dit doen met deze service: pingdom.com
Maak zeker een backup alvorens je veranderingen aanbrengt, je weet nooit wat er mis kan gaan.

Template optimaliseren

1. Laadt alle css in de header sectie (tussen de <header> en </header> tags).
2. Doe een flush, voeg volgende code toe na de </header> tag: <?php flush(); ?>; Dit zal er voor zorgen dat je bezoekers eerst de css kan gaan laden en daarna de rest van de pagina.
3. Plaats zoveel mogelijk Javascript in de footer van je website.
4. Zo weinig mogelijk de database oproepen; een voorbeeld: in onze theme hebben we bijvoorbeeld volgende bepalingen:
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Als je een website hebt, zal de url niet veranderen, dat is althans de bedoeling, daarom kan je ook volgende code in de plaats gebruiken:
<link rel="pingback" href="http://yourwebsite.com/xmlrpc.php" />
Dit kan ook gedaan worden bij je titel van je blog en andere zaken die niet frequent veranderen:

  • Traag: <?php bloginfo(name); ?><?php bloginfo(description); ?>
  • Snel: <title>Euro bijverdienen – En hier mijn omschrijving</title>

5. Plugins aanpassen. Plugins gaan code toevoegen aan onze site. Alhoewel plugins zeer nuttig zijn en ons in staat stellen sites enorm uit te breiden, zijn ze ook verantwoordelijk voor de snelheid van onze website. Stel dat je een mailformulier hebt: dit moet in principe enkel geladen worden bij pages. Als je op de homepage van je WordPress site staat en je ziet dat daar al de css geladen wordt, dan is dit verloren moeite. Je kan daarom zelf de plugin gaan aanpassen met de plugin editor. Zoek naar de code waar de css geladen wordt en je kan dat bijvoorbeeld tweaken tot iets zoals dit:

<?php if(is_page()) { ?>
<link rel="stylesheet" href="http://website.com/mailform.css"
type="text/css" media="screen" />
<?php } ?>

6. Je css optimaliseren: De zogenaamde css-compressors maken je bestand kleiner. Zoek er maar eentje op via Google of gebruik deze: cssdrive csscompressor/
7. zelf je css optimaliseren: Gebruik kortere codes waar je dat kan; bijvoorbeeld:
.class { padding-top:3px; padding-right:10px; padding-bottom:5px; padding-left:2px; }
Dit kan je makkelijk vervangen door:
.class { padding: 3px 10px 5px 2px; }
8. Afbeeldingen verkleinen: Soms worden er zeer grote afbeeldingen geladen en dan als een kleine thumbnail getoond op de website. Het gevolg? De gebruiker download een bestand dat bijvoorbeeld 1000px groot is, maar op de website slechts 100px is. De gebruiker download dus 10x meer als nodig is. Deze dienst kan je hierbij helpen: smush.it
9. Installeer php speedy: Ik heb het zelf nog niet gebruikt, maar heel veel mensen raden dit aan: php-speedy
10. nog meer css: WordPress laadt in een template vaak automatisch de standaard stylesheet. Dit is nodig om gegevens er uit te halen dat dient als omschrijving wanneer je in je adminpaneel kijkt naar alle themes die je geïnstalleerd hebt staan. Je hebt de mogelijkheid om je css te splitsen. Velen gebruiken dit als middel om structuur te brengen (zie afbeelding).
wp-serie-65-css-laden

Laat ons een stap verder gaan voor onze wordpress blog en er voor kiezen om enkel een bepaald css bestand te laden als we een blogbericht bezoeken (dus een geschreven artikel – de comments worden enkel geladen in single.php):


<?php    
if ( is_single() ) { 
// load css and js
echo '<link rel="stylesheet" type="text/css" href="';?><?php bloginfo('template_directory');?><?php echo '/twee.css' . '" />'; } ?>

Stap voor stap bekeken bekomen we het volgende:
if ( is_single() ) { –> oproepen van een blogpost
echo '<link rel="stylesheet" type="text/css" href="';?><?php bloginfo('template_directory');?><?php echo '/twee.css' . '" />'; } ?> – in eerste instantie doen we het zelfde als bij html. Halverwege de code ontbreken we de php echo functie en openen we een nieuwe php lijn. Op deze tweede lijn verwijzen we naar de locatie waar onder het css bestand staat. Dit is heel nuttig om een template dynamisch te maken: je kan het op verschillende sites gebruiken en automatisatie is heel belangrijk in zo’n proces. Na het oproepen van de locatie gaan we verder met wat we normaal in een html bestand zouden coderen: we verwijzen naar de naam van het bestand en sluiten alle tags.

Het gevolg?
Op al je pagina’s wordt de standaard css geladen, maar op de specifieke pagina’s waar extra css nodig is wordt pas bij het bezoeken ervan het extra css bestand geladen. Door onnodige codes niet te laden op pagina’s waar dat niet nodig is sparen we toch laaddtijd uit. Een goed voorbeeld om dit te doen zijn met de stijlen die de comments nodig hebben (en dat zijn er heel wat!). Op de vaste pagina’s worden op veel sites geen commentaren toegelaten en zou dit dus overbodig zijn.

WordPress plugins optimaliseren

1. Zorg ervoor dat je zo weinig mogelijk plugins draait. Vandaar dat het nuttig is om zelf in staat te staan om bepaalde acties uit te voeren, en dit is net wat ik met deze WordPress handleiding tracht te bereiken.
2. WordPress ‘cachen’: het cachen van je website kan je als volgt zien: Dit is het opslaan van je pagina’s zodat het niet telkens opnieuw moet worden geladen door iedere bezoeker. Er bestaan twee plugins die dit voor jou doen: wp-super-cache en w3-total-cache.
3. Splits je commentaren in verschillende pagina’s: Dit kan je instellen bij de settings: ga naar Settings > Discussion en activeer de checkbox ‘Break comments into pages…’
4. Verwijder plugins die je niet gebruikt of die niet geactiveerd zijn. Als je een pagina bekijkt in WordPress dan worden al deze plugins geladen. Onnodig dus om ze te laten staan.
Soms moet je bij een plugin een aanpassing verrichten in je theme, dat ziet er bijvoorbeeld als volgt uit: <?php plugin_code(); ?>
Dat laat soms errors na als de plugin word gedeactiveerd. Een goede oplossing is als volgt:
<?php if (function_exists('plugin_code')) { plugin_code(); } ?>
Dit zorgt er voor dat WordPress de code zal laten als de plugin nog steeds actief is. Zoniet dan wordt er dus niets getoond op de pagina.

Optimaliseer je database

Hier dien je toch wel mee op te letten en alvorens hiermee van start te gaan zou ik toch de database backuppen met een plugin alvorens je veranderingen aanbrengt (ik spreek uit ervaring op dit gebied).

Installeer volgende plugin: wp-db-backup
Deze heb ik staan op al mijn websites om snel en eenvoudig mijn database backup te maken. Ik download ze wekelijks op mijn computer, maar je kan ze ook naar jezelf doormailen.

Het managen van je database kan je manueel doen, via phpmyadmin, maar veel mensen weten niet hoe dit werkt. Mijn SQL kennis is ook niet zo groot en ik beroep mij voornamelijk op plugins om het onderhoud uit te voeren. Het voordeel hiervan is wel dat je ze na gebruik opnieuw kunt uitzetten.

De beste en meest handige plugin dat ik heb gevonden is: wp-cleanfix.
Deze plugin scant je database en vertelt je waar er verbetering mogelijk is. Daarnaast voert hij ook de acties uit die je wilt.

wp-serie-62-plugin-cleanfix

Als je cleanfix hebt geïnstalleerd dan heb je ongeveer alle opties die je nodig hebt; Belangrijk is bijvoorbeeld om de ‘post revisions’ te wissen; WordPress slaat automatisch een bericht op als je erin aan het werken bent, maar deze blijven bestaan.
De post revisions kan je ook manueel uitschakelen door naar wp-config.php te zoeken (dat staat in je root) en daar volgende code aan toe te voegen: <?php define('WP_POST_REVISIONS',false); ?>

Soms test je plugins uit en vind je ze niet geschikt, je wist ze dan en ziet ze niet meer staan in je lijst, maar wat je niet weet is dat deze sporen nalaten in de database. Wederom vond ik een plugin die scant naar zulke bestanden zodat je deze onnodige sporen kan wissen. De plugin waarover ik het heb is: Plugins Garbage Collector.
De plugin scant dan je database en geeft een overzicht van alle plugins weer, ook info over de sporen die je dan kan wissen.

wp-serie-63-plugin-garbage-collector

Diverse optimalisaties.

  • Splits lange pagina’s op in verschillende pagina’s met volgende code: <!--nextpage-->
  • Zorg er voor dat je de laatste versies hebt van WordPress. Je kan eventueel enkele weken wachten om te upgraden, tenzij de upgrade dient om de beveiliging van je website te garanderen. Door te wachten geef je ook de plugin beheerders de kans om hun plugins te updaten.
  • Zorg dat je de laatste plugin versies hebt

Dit zijn de meest gekende acties die je kan ondernemen om je WordPress site te onderhouden. Je kunt er nog vinden, maar deze zijn meer geavanceerd en omvatten dus meer risico’s; dat laat ik dan aan jezelf over.

In het volgende deel gaan we de functions.php optimaal benutten. Je zal leren dat dit bestand zeer belangrijk is om je blog naar je eigen hand te zetten, zonder enige core files aan te passen.

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close