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 u helpen om uw CMS klaar te maken om grote hoeveelheden verkeer aan te kunnen, zonder aan snelheid in te boeten.

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

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

Inhoudsopgave:

• Algemene optimalisatie
  • Gebruik maken van Drupal cache
  • Activering van APC
  • Gebruik maken van de Boost module
  • Client optimalisatie
    • Simultane Browser Connecties
    • Manieren om dit te versnellen
      • CSS sprites
      • Gebruik van (sub) domeinen om in elementen te laden
  • Installeer Aggregate Cache
  • Beheer Render blocking resources
    • Verplaats de locatie van Javascript
    • CSS inline
    • async/defer gebruiken

Algemene optimalisatie

Dit artikel schetst de gebruikelijke optimalisatie die in Drupal gedaan kan worden.

Hier volgen enkele optimalisatie tips om Drupal soepeler te laten draaien.

Gebruik de Drupal cache

Standaard geactiveerd bij Drupal 8

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

1. Log in op uw 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 u 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 My Combell.

   APC is verkrijgbaar voor PHP 5.4 en lager

   1. Log in op My Combell

      

   2. Ga naar Mijn Producten >> Web hosting details

      

      

   3. In het linkerpaneel gaat u naar PHP instellingen

      

   4. U 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 uw wijziging doorgevoerd werd, gaat u naar het tabblad PHP. Kijk of u een onderdeel APC vindt. Als het daar is, hebt u 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 uw 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 uw Drupal installatie).

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:

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 uw Drupal folder, in sites/all/modules.

   

   

   

3. Activeer de module vanuit de Modules afdeling in uw 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 uw origineel .htaccess bestand.

      

   2. Kopieer de op maat aangemaakte .htaccess regel vanuit Configuration > System > Boost > .htaccess > .htaccess Generation en kopieer die naar uw .htaccess bestand. Zorg ervoor dat u 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 uw .htaccess bestand en probeer het opnieuw.

7. Proficiat, uw Drupal heeft een boost gekregen! Voor eventuele problemen met de Boost module installatie, kunt u 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 uw 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 uw code te verminderen, is door bijvoorbeeld meerdere subdomeinen te gebruiken. Uw 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 krijgt u een hoger aantal simultane connecties.

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

Installeer Aggregate Cache

1. Voorbereiding

   • CLEAN URLs moet actief zijn.

     • Activeer dit in Search & Metadata >> Clean URLs

       

   • CSS / Javascript Aggregation moet actief zijn.

     • CSS / Javascript Aggregation staat in Configuration >> Development, bij Performance. Zorg ervoor dat u het volgende aanvinkt:

       1. Aggregate and compress CSS files.

       2. Aggregate JavaScript files.

          

          

          

2. 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 uw 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 uw 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

WordPress is het populairste content management systeem. Online vindt u enorm veel tips & tricks die u vertellen hoe u het meeste kan halen uit uw WordPress.

Dit artikel bevat links naar verschillende goede bronnen, naast onze eigen support artikels over WordPress.

De WordPress Codex

In de WordPress Codex vindt u goede artikels over verschillende interessante onderwerpen:

• Hoe WordPress gebruiken?
• Werken met Thema's
• Een Plug-in schrijven
• Bijdragen aan de Ontwikkeling

http://codex.wordpress.org/

Bronnen van WPMU DEV

Zoekt u naar een uitgebreide lijst die informatie bevat over verschillende onderwerpen en u interessante opties toont, dan is dit een goed adres:

http://premium.wpmudev.org/blog/wordpress-career-boosting-resources/

Uiteraard vindt u ook veel goede handleidingen bij Google en how-to's die u stap-voor-stap begeleiden op YouTube

Wanneer u wijzigingen wil aanbrengen aan uw WordPress website, dan is het aan te bevelen om die eerst te testen. Of u nu een nieuw thema aanbrengt, nieuwe plug-ins of nieuwe content, u wil die wellicht eerst uittesten. Deze stappen tonen u hoe u een werkende kopie (staging copy) van uw WordPress website maken kunt, waarmee u dan aan de slag kunt, terwijl uw originele website nog altijd online staat. Deze handleiding zal u ook helpen wanneer u uw WordPress website naar een andere host wil overzetten.

In dit artikel gebruiken wij deze website als voorbeeld: http://ninefortwowebhosting.com/. Let er dus op dat u, bij het volgen van deze stappen, telkens deze string vervangt door uw eigen domeinnaam.

1. Maak uw staging subsite aan. Dat zal het adres zijn voor uw staging website.

2. Kopieer u uw officiële website naar de staging versie, zodat u die kunt bewerken. Log in naar SSH. Voer dit uit vanuit ssh root directory:

   rsync -rtv www/ subsites/staging.ninefortwowebhosting.com/

   Dit zal echter niet voldoende zijn om uw staging kopie te laten werken. U hebt ook de database details.

3. U hebt ook bepaalde details van de database nodig om een backup te kunnen maken. Die kunt u ophalen in uw configuratie door het volgende commando uit te voeren:

   cat www/wp-config.php | grep DB_

   De output zal er ongeveer zo uitzien:

   define('DB_NAME', 'ID111111_user'); define('DB_USER', ' ID111111_user '); define('DB_PASSWORD', XXXXXXXXXX); define('DB_HOST', 'mysql111.hosting.brand.com'); define('DB_CHARSET', 'utf8'); define('DB_COLLATE', '');

   Maak een kopie van uw database gebruikersnaam

4. Maak een database backup. Download het dump bestand via rsync of ftp.

5. Nu kunt u, vanuit het controlepaneel, de nieuwe DB aamaken die gebruikt zal worden voor de staging kopie.

6. U kunt deze tool gebruiken: https://wpdomainchanger.com/ om de URL's van de originele WordPress te wijzigen naar de staging WordPress. Download de gewijzigde database dump.

7. Importeer de gewijzigde dump

8. Nu moet u het wp-config.php bestand van de staging kopie updaten met de nieuwe DB details. Open het config bestand:

   nano www/wp-config.php

   Wijzig de volgende strings met de details van de nieuwe database die u aangemaakt hebt:

   In deze string vult u de naam van uw nieuwe database in

   define('DB_NAME', 'ID111111_name'); In deze string vult u uw nieuwe gebruikersnaam (username) in

   define('DB_USER', ' ID111111_user '); In deze string vult u uw nieuw wachtwoord in

   define('DB_PASSWORD', XXXXXXXXXX); In deze string vult u uw nieuwe database host in

   define('DB_HOST', 'mysql111.hosting.brand.com');

9. Nu test u of uw kopie werkt.