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.

IN DIT ARTIKEL

 

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 adminLog in Drupal admin
  2. Klik op Configuratie bovenaan de admin balkconfiguratie
  3. Klik in de rubriek Development op PerformanceDevelopment op Performance
  4. Vink hier aan:
    1. Cache pages voor anonieme gebruikers
    2. Cache blocks

    Caching

  5. Kik op Configuratie bewarenConfiguratie 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
      PHP settings
    4. Je bent nu in het Overzicht. Controleer de PHP versie.
    5. Wissel naar het AAN/UIT tabblad.
    6. Zet APC op Aan.APCU: 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.
      Onderdeel APC
  2. Klik op de link om Drupal APC te downloaden en installeer die in /sites/all/modules/.Drupal APC downloaden
    Drupal APC downloaden
    Drupal APC downloaden
  3. Activeer APC vanuit de Modules afdeling van jouw back-end.modules
    Activeer APC
  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.

/sites/default/settings.php
/sites/default/settings.php
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

  1. Voorbereiding
    1. Activeer Clean URLs in Configuration >> SEARCH AND METADATA >> Clean URLs.Configuratie
      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.Download de Drupal Boost module
    sites/all/modules
    sites/all/modules
  3. Activeer de module vanuit de Modules afdeling in jouw back-end.Modules
    Performance and scalability
  4. Ga naar Configuration >> Development >> Performance en verwijder het vinkje naast Cache pages for anonymous users.configuratie
    Development > performance” width=”661″ height=”116″><br />
<img loading=
    Configuratie bewaren
  5. Controleer dat de cache map in Configuration > System > Boost > File System wel degelijk 755 permissies heeft.configuratie
    System > boost” width=”669″ height=”241″><br />
<img loading=
    Cache map
  6. .htaccess
    1. Maak een back-up van jouw origineel .htaccess bestand.back up .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.configuratie
      System > boost” width=”669″ height=”241″><br />
<img loading=
      Generated ruleswww/drupal/.htaccess
    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:

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

  1. Voorbereiding
    • CLEAN URLs moet actief zijn.
      • Activeer dit in Search & Metadata >> Clean URLsSearch & Metadata >> Clean URLs” width=”465″ height=”182″></li>
</ul>
</li>
<li>CSS / Javascript Aggregation moet actief zijn.
<ul>
<li>CSS / Javascript Aggregation staat in Configuration >> Development, bij Performance. Zorg ervoor dat je het volgende aanvinkt:
<ol>
<li>Aggregate and compress CSS files.</li>
<li>Aggregate JavaScript files.<img loading=
        Development > performance” width=”661″ height=”116″><br />
<img loading=
  • Download en installeer
    1. Download Aggregate Cache door op de link te klikken.Download Aggregate Cache
    2. Installeer in /sites/all/modules/sites/all/modules
      /sites/all/modules/sites/all/modules
    3. Activeer de module vanuit de Modules afdeling in jouw back-end.Modules
      Activeer de module
  • 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

    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.Download de "Magic" module
    2. Installeer in /sites/all/modules/sites/all/modules
      /sites/all/modules
    3. Activeer de module vanuit de Modules afdeling van jouw back-end.Modules
      Activeer de module

    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
    Geüpdatet op 16 september 2022

    Heeft dit artikel jou geholpen?

    Hulp nodig?
    Geen oplossing gevonden? Maak je geen zorgen, we zijn er altijd om je te helpen!
    Contacteer support

    Geen oplossing gevonden?

    support_bottom_contact_alt

    Onze specialisten staan 24/7 klaar met gratis support. Aarzel niet om Joachim en zijn collega's te contacteren via e-mail of telefoon.

    support_bottom_contact_alt
    Joachim Coessens Specialist Support