Drupal – Algemene optimalisering

Dit artikel is geoptimaliseerd voor Drupal 7

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.

Gebruik de Drupal cache

Standaard geactiveerd bij Drupal 8

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

Log in op jouw Drupal admin
Klik op Configuratie bovenaan de admin balk
Klik in de rubriek Development op Performance
Vink hier aan:
1. Cache pages voor anonieme gebruikers
2. Cache blocks
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).

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.
Klik op de link om Drupal APC te downloaden en installeer die in /sites/all/modules/.
Activeer APC vanuit de Modules afdeling van jouw back-end.
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.

Voeg code toe

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;

Voeg code toe

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

Controleer voor alle zekerheid of de site nog werkt.

Gebruik de Boost module

Voorbereiding
1. Activeer Clean URLs in Configuration >> SEARCH AND METADATA >> Clean URLs.
2. Zorg ervoor dat Cronjobs niet uitgezet is.
Download de Drupal Boost module en installeer die in jouw Drupal folder, in sites/all/modules.
Activeer de module vanuit de Modules afdeling in jouw back-end.
Ga naar Configuration >> Development >> Performance en verwijder het vinkje naast Cache pages for anonymous users.
Controleer dat de cache map in Configuration > System > Boost > File System wel degelijk 755 permissies heeft.
.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.
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:

stroom Drupal Boost

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

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

Download en installeer

Download Aggregate Cache door op de link te klikken.
Installeer in /sites/all/modules
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).

Logo Javascript

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).

logo CSS inline