Drupal – Algemene optimalisering

Drupal is een van de populairste content management systemen. Het kan, mits wat optimalisering, zowel grote als kleine websites aan. Dit artikel zal je helpen om jouw CMS klaar te maken om grote hoeveelheden verkeer aan te kunnen, zonder aan snelheid in te boeten.

Het eerste deel van dit artikel zal je standaard optimalisatie technieken tonen, die geschikt zijn voor elke hosting, zelfs wanneer je geen gebruik maakt van caching opties.

Pas Nadat je de algemene optimalisatie volledig uitgevoerd hebt, kan je beginnen aan het tweede deel van het artikel, dat je toont hoe uw CMS kan profiteren van de Performance hosting tools.

IN DIT ARTIKEL

• Gebruik maken van Drupal cache
• Activering van APC
• Gebruik maken van de Boost module
• Client optimalisatie
• Installeer Aggregate Cache
• Beheer Render blocking resources

 

Gebruik de Drupal cache

Standaard geactiveerd bij Drupal 8

Activeer dit in de back-end van Drupal als volgt:

1. Log in op jouw Drupal admin
2. Klik op Configuratie bovenaan de admin balk
3. Klik in de rubriek Development op Performance
4. Vink hier aan:
   1. Cache pages voor anonieme gebruikers
   2. Cache blocks

   

5. Kik op Configuratie bewaren

Activeer APC

OPGELET: activeer APC niet wanneer je de optionele Redis caching add-on gaat gebruiken!

(Voer deze wijzigingen voor APC niet uit in settings.php – doe dat in de back-end).

1. Activeer APC in het controlepaneel. APC is verkrijgbaar voor PHP 5.4 en lager
   1. Log in op het controlepaneel
   2. Ga naar Mijn Producten >> Web hosting details
   3. In het linkerpaneel ga je naar PHP instellingen
      
   4. Je bent nu in het Overzicht. Controleer de PHP versie.
   5. Wissel naar het AAN/UIT tabblad.
   6. Zet APC op Aan.
   7. Wijzigingen in PHP vragen wat tijd. Om te controleren of jouw wijziging doorgevoerd werd, ga je naar het tabblad PHP. Kijk of je een onderdeel APC vindt. Als het daar is, heb je met succes APC geactiveerd.
      
2. Klik op de link om Drupal APC te downloaden en installeer die in /sites/all/modules/.
   
   
3. Activeer APC vanuit de Modules afdeling van jouw back-end.
   
4. Voeg nu de volgende code toe aan het settings.php bestand.

Dit bestand kan gevonden worden in /sites/default/settings.php (vanuit de root van jouw Drupal installatie).

 /**
Add APC Caching.
 */
 $conf['cache_backends'][] = 'sites/all/modules/apc/drupal_apc_cache.inc';
 $conf['cache_class_cache'] = 'DrupalAPCCache';
 $conf['cache_class_cache_bootstrap'] = 'DrupalAPCCache';
 //$conf['apc_show_debug'] = TRUE;  // Remove the slashes to use debug mode.

Controleer nu of de site nog werkt. Zo ja, ga dan verder met de volgende stap.

Voeg de volgende code toe aan het settings.php bestand:

 $conf['page_cache_without_database'] = TRUE;
 $conf['page_cache_invoke_hooks'] = FALSE;

Dit zorgt ervoor dat ook de page caching de APC aanroept.

Controleer voor alle zekerheid of de site nog werkt.

Gebruik de Boost module

1. Voorbereiding
   1. Activeer Clean URLs in Configuration >> SEARCH AND METADATA >> Clean URLs.
      
      
   2. Zorg ervoor dat Cronjobs niet uitgezet is.
2. Download de Drupal Boost module en installeer die in jouw Drupal folder, in sites/all/modules.
   
   
3. Activeer de module vanuit de Modules afdeling in jouw back-end.
   
4. Ga naar Configuration >> Development >> Performance en verwijder het vinkje naast Cache pages for anonymous users.
   
   
5. Controleer dat de cache map in Configuration > System > Boost > File System wel degelijk 755 permissies heeft.
   
   
6. .htaccess
   1. Maak een back-up van jouw origineel .htaccess bestand.
   2. Kopieer de op maat aangemaakte .htaccess regel vanuit Configuration > System > Boost > .htaccess > .htaccess Generation en kopieer die naar jouw .htaccess bestand. Zorg ervoor dat je het segment op de juiste plaats plakt; zie hiervoor de instructies onderaan de aangemaakte tekst.
      
      
   3. Controleer of de website nog altijd werkt. Is dat niet het geval, herstel jouw .htaccess bestand en probeer het opnieuw.
7. Proficiat, jouw Drupal heeft een boost gekregen! Voor eventuele problemen met de Boost module installatie, kan je op de link klikken.

Dit toont een stroom die Drupal Boost zal toevoegen:

Client optimalisatie

De client kan proactief werken met meerdere subdomeinen, om media sneller te laden. Wanneer een client data te traag downloadt, dan is het interessant om met de Firefox plugin Firebug te bekijken wat er juist geladen wordt. Zijn er bijvoorbeeld meer dan 50 aparte items die geladen moeten worden, dan moet misschien op het volgende gewezen worden.

Simultane Browser Connecties

• IE7: 2 simultane connecties
• IE8: 6 simultane connecties
• Google Chrome: 6 simultane connecties
• Mozilla Firefox: 8 simultane connecties

Dit betekent dat, wanneer er 50 items geladen moeten worden, dit de laadtijd vertraagt, gezien alle acties die in wacht gezet worden tot er een verbinding beschikbaar is. Pas dan zal het volgende element van jouw site geladen worden, enzovoort enzoverder, tot alle items geladen zijn. De snelheid hangt uiteraard ook af van de grootte van de items.

Manieren om het sneller te laten gaan:

• Gebruik maken van CSS sprites
• Elementen laden via individuele (sub)domeinen

CSS sprites:

Een CSS sprite kan dit voorkomen, omdat er dan slechts één beeldbestand is dat geladen moet worden. Daardoor zijn er minder connecties nodig. Bovendien kan vaak ook de totale grootte herleid worden.

Klik op de link voor meer informatie over CSS sprites

Gebruik (sub)domeinen om in elementen te laden:

Een andere manier om de laadtijd in jouw code te verminderen, is door bijvoorbeeld meerdere subdomeinen te gebruiken. Jouw browser beperkt het aantal gelijktijdige connecties per domein, maar de browser zal domeinnaam.be zien, css.domeinnaam.be, imaes.domeinnaam.be, en die allemaal als aparte domeinen beschouwen. Daardoor krijg je een hoger aantal simultane connecties.

Door bijvoorbeeld de afbeeldingen te laten downloaden via images.domeinnaam.be en de css-bestanden via css.domeinnaam.be, kan je de laadtijd versnellen. De bestanden zullen tegelijkertijd downloaden en de connecties overschrijden de beperkingen van de browser. Met deze methode kan je zelfs drie keer meer simultane connecties realiseren.

Installeer Aggregate Cache

1. Voorbereiding
   • CLEAN URLs moet actief zijn.
     • Activeer dit in Search & Metadata >> Clean URLs
       

Download en installeer

1. Download Aggregate Cache door op de link te klikken.
2. Installeer in /sites/all/modules
   
3. Activeer de module vanuit de Modules afdeling in jouw back-end.
   

Beheer de Render blocking resources.

Maak volgende aanpassingen om de browser sneller te laten beginnen met het renderen, zodat de laadtijd beduidend vermindert.

Verplaats de locatie van Javascript

Plaats Javascript in de footer van de website, zodat het later in het proces geladen wordt (nadat de pagina voor een groot deel gerendered is).

CSS inline

Zet enkel de meest kritieke CSS code inline in de themabestanden, en laat de rest asynchroon laden via LoadCSS (zie ook https://github.com/filamentgroup/loadCSS).

Gebruik async/defer

De module zorgt ervoor dat kritieke JavaScript inline geplaatst kan worden.

1. Download de “Magic” module door op de link te klikken.
2. Installeer in /sites/all/modules
   
3. Activeer de module vanuit de Modules afdeling van jouw back-end.
   

Nog enkele tweak opties:

• Aaneenschakeling (Concatenatie) van bestanden, (zoals CSS bestanden).
• Het essentiële (van js, css en andere) inline in de PHP bestanden zetten.
• CSS Spriting