Je NAS maakt het mogelijk om 24/7 een website te hosten met behulp van het WordPress pakket. In enkele stappen leggen de stappen uit om een website, gebouwd met WordPress, te installeren en snel te laten draaien. Naast prestaties is beveiliging van de website en het verkeer tussen browser en webserver van belang, voor de bezoeker en de webhoster. Dit is uitgelegd op Beveiliging van de website.

Installeren van WordPress

Ga naar het Package Center om WordPress te installeren. Je krijgt tijdens de installatie meldingen om PHP, Apache Server en Webstation te installeren. Deze pakketten heb je nodig en kun je dus bevestigen. Twee keer word je gevraagd om een gebruikersnaam en wachtwoord op te geven. Allereerst voor de PHP database (mariadb) waarin je een gebruikersnaam opgeeft met een wachtwoord. Voor de wordpress database geef je ook een gebruikersnaam en wachtwoord op. Deze hoeven niet gelijk te zijn aan de NAS gebruikersnaam.

Zodra de pakketten zijn geïnstalleerd, worden alle benodigde bestanden geüpload naar de webmap zonder dat je PHP-instellingen moet configureren. Je kunt de configuratiebestanden terugvinden in de nieuw aangemaakte gedeelde map web. De inhoudelijke bestanden worden niet in de map web opgeslagen maar in een database (maria-db) die achter de afgeschermde besturingsomgeving van de NAS zit. In deze omgeving kun je alleen komen als root. Hoe je hierin kunt komen, beschrijf ik in het bericht over inloggen op het besturingssysteem. Voor het hosten van je website heb je voor de juiste configuratie van je website toegang tot het besturingssysteem niet nodig overigens. Wel is het handig om toegang tot de maria-db te hebben via het pakket PHPmyadmin. Dit kun je dan ook beter meteen installeren.

Inloggen op wordpress

Om in te loggen ga je naar https://domeinnaam.nl/wordpress/wp-login. Dit is dezelfde gebruikersnaam die je tijdens het installatieproces hebt opgegeven bij de installatiestap wordpressdatabase-gebruiker en -wachtwoord. Voeg bij instellingen/algemeen de site adressen toe van de domeinnaam (WordPress-adres (URL) en Siteadres (URL)). Ervan uitgaande dat de site alleen in https oproepbaar moet zijn, geef het site adres op met https. Geef je email adres op waarmee je bereikbaar bent. Dit is belangrijk omdat je hiermee voor wordpress bereikbaar bent in het geval van geweigerde toegang. Dit laatste is me overkomen bij het inloggen op wordpress met de inlognaam ‘admin’. Deze had ik uit voorzorg al geblokkeerd maar door hier zelf als test gebruik van te maken, blokkeerde ik mijn eigen toegang. Niet handig.

Installeren van een certificaat

Om https op je domeinnaam mogelijk te maken, moet je een certificaat verkrijgen. Dit kan via het configuratiescherm onder tabblad beveiliging en menu-optie certificaat. Kies voor de optie om een certificaat te verkrijgen via let’s encrypt. Vladislav Denishev heeft een uitstekend leesbare handleiding en uitleg gepubliceerd over https en het waarborgen van betrouwbaarheid, integriteit en authenticatie van de https verbinding en domeinnaam.

Voeg in de DNS instellingen van je hosting provider een A record toe met de naam ‘@’ (dit betekent alles) en de waarde ‘IP-adres’. Dit is het IP adres waaronder je bereikbaar bent, te checken met whatismyipaddress.com. Als je weet wat je ipv6 adres is, voeg dit dan ook toe aan de DNS instellingen door middel van een AAAA record met de naam ‘@’ en de waarde ‘IP-adres’ volgens ipv6 formaat. Let’s encrypt checkt bij het toekennen van het certificaat of de domeinnaam overeenkomt met het IP adres waaronder de NAS de aanvraag doet. Het moet kloppen, anders accepteert let’s encrypt niet. Met het nieuwe certificaat kan de website worden opgezet. Overigens is dit certificaat ook nodig om de mailserver instellingen te valideren zodat je als een betrouwbare mailserver wordt gezien. Zie ook het bericht over Geen Gmail of Apple mail, maar je eigen MailPlus server. Nog iets over de DNS instellingen: het is niet nodig om een CAA record (voor Let’s encrypt) toe te voegen of een PTR record. Het laatste is alleen nodig voor een virtual private hosting service. Daar is hiervan geen sprake.

Https vereisten

WordPress slaat de website op onder web/wordpress. Dit is eigenlijk niet zo handig omdat de bezoeker de ‘domeinnaam.nl/wordpress’ moet intikken. Dit kun je veranderen door het .htaccess bestand aan te passen. Tevens geef je hierin aan dat alleen over https een verbinding gemaakt kan worden en niet (meer) via http.

  • Open de map /web/wordpress en verplaats het .htaccess bestand naar de hoofdmap /web. Let op: dus niet het .htaccess bestand wijzigen onder /web/wordpress maar onder /web.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{HTTP_HOST} ^(www.)?domeinnaam.nl$
RewriteCond %{REQUEST_URI} !^/wordpress/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /wordpress/$1
RewriteCond %{HTTP_HOST} ^(www.)?domeinnaam.nl$
RewriteRule ^(/)?$ wordpress/index.php [L]
</IfModule>
  • Regels drie en vier geven aan dat de verbinding via https moet verlopen. De regels vijf en verder duiden aan waar de website te vinden is wanneer de bezoeker de website bezoekt onder de map /web.
  • Zodra je in filestation een wijziging aanbrengt in .htaccess bestand, verandert het  eigenaarschap. Je kunt het eigenaarschap en de machtigingen weer terugzetten naar de ‘http’ usergroup door naar eigenschappen te gaan van het bestand .htaccess in file station. Een juiste registratie van eigenaarschap en machtigingen zorgt er ook voor dat de firewall van wordpress (plugin wordfence) het bestand .htaccess kan benaderen en geen foutmeldingen gaat afgeven over aanpassingen aan het bestand.
  • Je kunt overigens wijzigingen ook aanbrengen door in te loggen op het besturingssysteem met behulp van SSH. Dan kun je wijzigingen aanbrengen in het bestand zonder dat de eigenaar verandert.
  • Als alternatief voor het verwijzen naar de map /web/wordpress kan een virtual host worden aangemaakt in het pakket Webstation. Dit is met de instelling van het .htaccess bestand onder de map /web dus niet meer nodig. Bijkomend voordeel is dat de https-verbinding sowieso via .htaccess moet worden ingesteld om een volledig veilige https-only website te realiseren.
  • Testen kan via hardenize en ssllabs.
Meta tag manager

Met de plugin meta tag manager kun je meta-karakteristieken beschrijven over de webpagina. Bij de algemene opties van deze plugin geef je aan op welk type pagina’s een specificatie van de meta tags kan worden opgegeven. Bijvoorbeeld op de pagina’s en berichten. Op het tablad custom mega tag kun je met het attribuut ‘meta name’ de google verificatie code opgeven. Deze code geldt voor de gehele website. De google verificatie code zelf geef je op in het veld ‘content’. Onderaan elk bericht of elke pagina geeft de meta tag manager de mogelijkheid om meta tags op te voeren. Bijvoorbeeld voor de auteur van de pagina of het bericht. Of om keywords op te voeren, gescheiden door komma’s.

Plugins van wordpress

WordPress plugins geven meer functionaliteit aan de installatie van je website. Het is te vergelijken met apps voor je telefoon. Wanneer je een plugin installeert, dan voeg je een stukje functionaliteit toe aan jouw website. Er zijn verschillende plugins. Een hebben we al genoemd, wordfence als firewall van je website. Zo heb je plugins voor social media knoppen, voor statistieken, om spam tegen te gaan, om je website sneller te maken of je website veiliger te maken zoals http headers. De onderstaande plugins draaien op deze site.

  • Smart password pages(*): neem de code [smartpwpages] op in de hoofdpagina (bv de verwijzingspagina) en maak een nieuwe pagina (kind-pagina) die onder deze hoofdpagina valt. Dit kun je in de instellingen aan de rechterkant van de pagina instellen).
  • Ninja Forms: een populaire plugin om formulieren aan te maken, berichten te versturen en deze te beantwoorden. Je kunt de plugin integreren met mailchimp, betaalfaciliteiten, documentbeheertools of web analytics tools. Wil je liever niet Google gebruiken, dan kun je ook van de akismet antispam plugin gebuirken.
  • Akismet Antispam. Een standaard plugin die erop toeziet dat spam reacties op formulieren weggefilterd worden. Je kunt de controle op de naam en afzender al laten checken voordat het formulier geaccepteerd wordt. Zo ben je er vroegtijdig bij. Geef bijvoorbeeld voor een eenvoudig formulier het volgende op:
<label> Je naam (verplicht)
[text* your-name akismet:author] </label>

<label> Je e-mailadres (verplicht)
[email* your-email akismet:author_email] </label>

<label> Onderwerp
[text your-subject akismet:subject] </label>

<label> Je bericht
[textarea your-message] </label>

[submit "Verzenden"]
  • All 404 redirect to homepage(*). Hiermee kun je alle opgegeven links zonder achterliggende webpagina op je domeinnaam afvangen en terugleiden naar bijvoorbeeld je homepage. Wil je geen plugin hiervoor installeren, dan kun je de wijziging ook zelf in het htaccess bestand aanbrengen door in te loggen op het besturingssysteem van de NAS. De wijzigingen in het htaccess bestand zijn als volgt:
# BEGIN FRedirect_ErrorDocument
ErrorDocument 404 /wordpress/index.php?error=404
# END FRedirect_ErrorDocument
  • WP YouTube Lite. Praktisch om individuele youtube filmpjes met schermafbeelding in te voegen. Ten opzichte van Embed YouTube Plus heeft deze plugin als voordeel dat deze lichter is en geen notificaties stuurt naar YouTube (dus niet informatie over het gebruik van het filmpje terugspeelt aan YouTube zelf).
  • Complianz privacy plugin: Hiermee kun je een cookie melding tonen met mogelijkheid om de bezoeker naar het cookie- en/of privacybeleid te verwijzen. De plugin biedt de mogelijkheid om bepaalde cookies aan of uit te zetten. Een handig hulpmiddel is het doorzoeken van de configuratie van de website op cookies met de suggestie hoe de meldingen over cookies aan of uit kunnen worden gezet. GDPR/AVG compliance is makkelijker dankzij deze plugin.
  • Yoast SEO plugin: Een plugin die helpt om de site beter vindbaar te maken voor zoekmachines. Met behulp van de snippet kun je een samenvatting geven van de kernboodschap van de pagina. Yoast helpt ook om de leesbaarheid te verbeteren. Tot slot kun je met Yoast een sitemap index (xml) aanmaken van je website die je kunt uploaden naar Google Console of Bing Webmaster.
  • UpdraftPlus – Backup/Restore: Met UpdraftPlus kun je een back-up van je site laten maken. Meerdere backups naar de cloud zijn mogelijk. Mocht je site vastlopen, dan kun je eenvoudig met deze plugin herstellen.
  • Wordfence: je wilt je site niet zonder firewall laten opereren. Elke dag vinden talloze inlogpogingen plaats om toegang te krijgen tot de server en deze voor andere doeleinden in te zetten. Wordfence bevat een firewall en een malware scanner die geïntegreerd binnen wordpress ervoor zorgen dat de nieuwste bedreigingen, malware signatures en kwaardaardige IP adressen geblokkeerd worden. Mag dus niet ontbreken.
  • Cache Enabler: Naast de cache instellingen voor de browser (expiry headers en cache control headers in .htaccess bestand), is het voor de snelheid van de website bevorderlijk om page caching in te stellen. Deze plugin doet alleen dat (en dus niets anders). Zet alle vinkjes aan bij het cache gedrag, bij cache uitsluitingen voer je de pagina ID op die je niet wilt cachen. Bijvoorbeeld de actuele weerswaarnemingen (post ID kun je vinden in de url van de betreffende pagina wanneer je deze pagina bewerkt).
  • JSON Content Importer: wanneer je data uit een JSON bestand moet converteren naar toonbare data. Bijvoorbeeld bij het laden van actuele waarnemingsdata uit de API van weathercloud (zie ook actuele waarnemingen).
  • jQuery updater: Deze plugin updates het pakket jQuery naar de laatst stabiele versie. Aangezien wordpress dit zelf niet doet, kunnen er foutmeldingen ontstaan in de web developer console van (onder andere) webbrowser firefox. Met installatie van deze plugin behoren deze meldingen tot het verleden.
  • WebP Express Settings: Meer dan 80% van de mobiele gebruikers maken gebruik van een browser die in staat is om webp afbeeldingen te tonen. Echter, de meeste websites hanteren grotendeels jpeg afbeeldingen die doorgaans twee keer zo groot zijn als webp afbeeldingen. Dat kost bandbreedte en snelheid bij het lader van de webpagina’s. Deze plugin helpt om automatisch webp afbeeldingen te genereren bij het tonen van jpeg of png afbeeldingen. De plugin genereert via een redirect binnen de wordpress map een webp afbeeldingen van elke afbeelding die getoond wordt. Het gaat ongemerkt en draagt bij aan de prestaties maar ook het gebruikersgemak van de site. Wel belangrijk dat de apache server versie 2.4 draait en niet apache 2.2.
Optimalisatie van blokkerende bronnen via plugins

Voor het verder optimaliseren van de site zijn de bovenstaande plugins nog niet voldoende. Er zijn namelijk scripts of stijlbestanden die volledig geladen moeten worden voordat de browser met de volgende stap in het ‘parsen’ van de pagina-code verder kan gaan. In het kort gezegd komt het erop neer dat de webbrowser de code van de site begint te interpreteren zodra de bezoeker met zijn browser op de site terechtkomt. De browser gaat van boven naar beneden door de code heen. Wanneer een stijlbestand (CSS) of javascriptbestand (JS) in de code staat, moet het bestand eerst geopend worden zodat de browser dit bestand kan inlezen. De browser moet dus even pauzeren. Dat belemmert de snelheid bij het laden van de pagina. Een deel van de code is nodig om het scherm te vullen dat de bezoeker beziet voordat hij gaat scrollen. In de onderstaande pagespeed schermafdruk zijn er op deze site twee bronnen die de weergave met een ruime halve seconde vertragen.

Er zijn optimalisatie-plugins in WordPress die deze bronnen kunnen aanpakken: deze plugins schuiven de code, die het weergeven van de pagina (tijdelijk) blokkeert, naar achteren bij het laden van de pagina. Alleen de scripts of stijlcode die nodig is om de pagina weer te geven, wordt als eerste uitgevoerd. Plugins zoals WP Optimize, Autoptimize of Hummingbird helpen hierbij. Zoals we nog zullen zien, kun je als beheerder instellingen voor de cache of compressie (gzip) zelf instellen, via het .htaccess configuratiebestand. Maar het uitstellen van (delen van) script of stijlbestanden vergt forse ingrepen in de code van de website. Het kan dus fout gaan: de webpagina wordt slechts deels weergegeven. Of het kan leiden tot fouten bijvoorbeeld bij het weergeven in mobiele browsers. Daarom kun je dus beter de genoemde plugins toepassen: deze doen het zware werk en zijn goed getest. Meer informatie hierover kun je hier vinden.

Zelf aan de slag met blokkerende CSS bronnen

Wil je het toch zelf proberen, dan kun je via PageSpeed informatie verkrijgen welke code kritiek is en welke niet. Hiervoor hebben we een programma in python geschreven waarmee de code van een css stijlbestand in tweeën wordt gesplitst: de kritieke code die inline in de php code (header.php) van wordpress kan worden ingevoegd. De resterende code die voor het laden van de pagina dus niet nodig is, wordt wel geladen maar voorwaardelijk: pas wanneer de code gebruikt wordt, bijvoorbeeld onderaan de pagina of wanneer de code wordt ingelezen op een ander medium (mobiele telefoon, ipad, etc.). NB: met het splitsen van js bestanden is het risico groot dat de site gebroken wordt. Naar eigen ervaring is uitstel van de js bestanden ruim voldoende om de weergave snelheid te verbeteren; het splitsen van js code naar kritisch en niet-kritisch heeft weinig nut.

Vervroegd inlezen van kritische javascript helpt

Net als bij het laden van de stijlbestanden, moet de webbrowser ook wachten met het lezen van de code totdat de javascript (js) bestanden zijn geopend, gelezen en verwerkt. De snelheid van de site wordt beïnvloed door het aantal js scripts dat geopend en ingelezen moet worden. Aangezien de javascript bestanden best groot (kunnen) zijn, en dus de laad- en weergavetijd afremmen, is de vraag of het openen en lezen vn javascript code kan worden uitgesteld. Dit is mogelijk door het toevoegen van async of defer attributen aan de script tags.

Hoe weet je of dit nodig is? Gebruik de pagespeed tool of de gtmetrix tool: voer de website in en wacht een halve minuut op de resultaten. In onderstaande figuur is vermeld dat één bron van javascript een snelle weergave van de webpagina blokkeert. Het gaat in dit geval om het jquery javascript bestand.

schermafdruk pagespeed over jquery

jquery blokkeert

Er zijn diverse plugins in WordPress beschikbaar die helpen om javascript (en css) bestanden uit te stellen. Op de blogsite van Rara Themes is niet alleen goed beschreven hoe de browser een webpagina laadt, maar ook welke plugins handig en bruikbaar zijn. Wil je de wijzigingen zelf aanbrengen, dan is de door Rara Themes vermelde code aan te bevelen. Je kunt kiezen of je het js bestand asynchroon leest of uitstelt in de volgorde die het thema voorschrijft.

// ADD ASYNC OR DEFER ATTRIBUTE TO SCRIPT
add_filter('script_loader_tag', 'add_defer_tags_to_scripts');

function add_defer_tags_to_scripts($tag){

# List scripts to add attributes to
$scripts_to_defer = array('jquery-migrate', 'admin-bar', 'comment-reply', 'wp-embed', 'hoverintent-js', 'wpforms-confirmation', 'hestia_scripts', 'akismet-form');
$scripts_to_async = array('jquery-bootstrap', 'bootstrap');

# add the defer tags to scripts_to_defer array
foreach($scripts_to_defer as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' defer="defer" src', $tag);
}

# add the async tags to scripts_to_async array
foreach($scripts_to_async as $current_script){
if(true == strpos($tag, $current_script))
return str_replace(' src', ' async="async" src', $tag);
}

return $tag;
}

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {

wp_enqueue_script('jquery-migrate', site_url().'/wp-content/plugins/jquery-updater/js/jquery-migrate-3.3.0.min.js');
wp_enqueue_script('jquery-core', site_url().'/wp-content/plugins/jquery-updater/js/jquery-3.5.1.min.js');
wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().'/assets/bootstrap/js/bootstrap.min');
wp_enqueue_script('jquery-ui-core', site_url().'/wp-includes/js/jquery/ui/core.min.js');
wp_enqueue_script('comment-reply', site_url().'/wp-includes/js/comment-reply.min.js');
wp_enqueue_script('wp-embed', site_url().'/wp-includes/js/wp-embed.min.js');
wp_enqueue_script('hoverintent-js', site_url().'/wp-includes/js/hoverintent-js.min.js');
wp_enqueue_script('wpforms-confirmation', site_url().'/wp-content/plugins/wpforms-lite/assets/js/wpforms-confirmation.js');
wp_enqueue_script('hestia_scripts', get_stylesheet_directory_uri().'/assets/js/script.min.js');
wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().'/assets/bootstrap/js/bootstrap.min.js');
wp_enqueue_script('admin-bar', site_url().'/wp-includes/js/admin-bar.min.js');
wp_enqueue_script('akismet-form', site_url().'/wp-content/plugins/akismet/_inc/form.js');

}
De handle als aanduiding van het javascript bestand

De bovenstaande code, met dank aan Rara Themes, is als code snippet eenvoudig toe te voegen aan het functions.php bestand in de map van het thema. In de arrays geef je aan welke scripts moeten worden uitgesteld (‘deferred’) of tijdelijk uitgesteld totdat het bestand geladen is (asynchroon geladen en gelezen). Met behulp van de zogenaamde ‘handle‘ geef je aan welk script een defer of async attribuut krijgt. De handle kun je vinden door nog een tweede code snippet toe te voegen aan functions.php waarna je de webpagina opnieuw laadt en de bron ervan opent (paginabron bekijken).

// ADD DATA_HANDLE INFO TO SCRIPT TAGS (VIEW IN SOURCE)
add_filter( 'script_loader_tag', 'cameronjonesweb_add_script_handle', 10, 3 );
function cameronjonesweb_add_script_handle( $tag, $handle, $src ) {
return str_replace( '<script', sprintf(
'<script data-handle="%1$s"',
esc_attr( $handle )
), $tag );
}

Hieronder een voorbeeld van een data-handle, genaamd ‘jquery-core’ van het javascript bestand jquery. Deze handle voeg je toe aan het array, naar keuze.

schermafdruk data handle op paginabron

schermafdruk data handle op paginabron

Hiermee gaat de snelheid in weergave van de pagina verder omhoog, tot ruim onder 1 seconde voor deze site.

Passive listeners

De zogenaamde touch & wheel event listeners zijn nuttig in het tracken van de interactie met de gebruiker. Deze listeners creëren een smooth klantervaring wanneer deze de webpagina leest, bekijkt en deze activeert door middel van buttons. De browser moet heel even wachten om te checken wat de listener ‘vertelt’. Dat kan bij een langzame browser leiden tot een schokkerig beeld bij het scrollen.

Passive listeners belemmeren een vloeiende scroll weergave

Passive listeners belemmeren een vloeiende scroll weergave

 

Door de volgende code op te nemen aan het eind van het betreffende js bestand, in dit geval jquery, worden de listeners passief gemaakt.

document.addEventListener('touchstart', onTouchStart, {passive: true});

Dit verbetert de score van 99 naar 100 (pagespeed) doch er zit een adder onder het gras.

jQuery heeft tot doel om de toepassing van JavaScript op een website te vergemakkelijken. Zonder jQuery kunnen andere scripts niet draaien. Het is een essentieel script voor een goede werking van de site. De adder zit hem erin dat na aanpassing van het jQuery scrip de site in verschillende browsers op een desktop PC prima werkt maar dat in een mobiele omgeving de site breekt. In mijn geval blijkt het menu niet langer meer te werken.

Desondanks geeft het verplaatsen van code uit de stijlbestanden naar de inline-code dermate veel vooruitgang dat de score voor cumulative lay-out shift op 0,005 uitkomt. Dat biedt voldoende waarborg voor een 100 punten score. Zie ook deze schermafdruk.

Ipv6 bereikbaarheid

In de DNS instellingen van de webhoster heb je al een AAAA record aangemaakt die verwijst naar het ipv6 adres van de NAS. Dat wil nog niet zeggen dat daarmee je site ook bereikbaar is voro bezoekers die via ipv6 protocol op internet zoeken. Hardenize en Internet.nl geven scores aan de veiligheid en bereikbaarheid van sites, zowel onder ipv4 als ipv6 standaard. Verbeter de bereikbaarheid van de site ook naar de toekomst toe en zorg ervoor dat je bereikbaar bent voor beide protocollen.

Configureer ipv6 in het modem/router (in mijn geval de Fritzbox router) waarmee je toegang tot internet hebt. Gebruik je twee routers, zet dan de tweede router (in mijn geval de Netgear router) op ‘automatisch doorvoeren’ van de ipv6 adressen die de eerste router aan de aangesloten apparaten toekent, dus ook voor die apparaten die met de tweede router verbonden zijn. Voor Fritzbox gelden de volgende instellingen:

  • schakel ipv6 support in.
  • stel in dat automatisch en globaal adres onderhandeld wordt (‘Automatically negotiate a global address’).
  • geef bij de instellingen aan onder home network –> network settings aan –> ipv6 addresses: ‘use native ipv6 connection; assign unique local addresses’.
  • De FRITZ!Box verzorgt de standaard internet verbinding met een hoge prioriteit. Daarmee zijn de ipv6 adressen bepaald door de Fritzbox router.
  • Schakel de optie uit: ‘Allow IPv6 prefixes announced by other IPv6 routers in the home network’.
  • Schakel de optie in: ‘Also announce DNSv6 server via router advertisement’.
  • Schakel de DHCPv6 server in bij de menu optie: FRITZ!Box for the home network; ‘Assign DNS server, prefix (IA_PD) and IPv6 address (IA_NA)’.
  • Stuur de ipv6 poorten voor http (80), https (443) en mail (25) door naar het ipv6 adres van de NAS zelf. Dit is essentieel. Ook al staan de ipv4 poorten open; je moet een separate poort doorleiding maken voor ipv6. Anders is je site niet bereikbaar voor ipv6.

Test op hardenize.com en nl.internet.nl. En pas zonodig de instellingen aan. Bekijk hier de testrapporten van hardenize en internet.nl voor Adagia.

Cache instellen

Om de laadsnelheid van terugkerende bezoekers te verbeteren, kun je browser caching instellen. De server geeft dan aan de client-browser aan dat de pagina tijdelijk in het geheugen van de browser kan worden opgeslagen. Daarmee wordt de server niet (opnieuw) belast met verzoeken om data op te halen. De data zijn niet veranderd, dus waarom zou je deze dan opnieuw opvragen? Hierdoor checkt en downloadt de browser in de tussentijd de gecachte bestanden niet meer, waardoor nog maar een klein deel van je website hoeft te worden ingeladen.

Makkelijker en sneller is het om deze uit het geheugen van de client-computer te halen via de browser. Met de Pagespeed tool van Google of de test tool van Gmetrix kun je de snelheid van je site testen. Je zult zien dat caching een hogere laadprestatie toont. Er zijn vele plugins in WordPress die caching van plaatjes, videos, pagina’s e.d. optimaliseren. Maar niet altijd werken deze plugins. Daarom kun je het ook zelf instellen via het eerder genoemde .htaccess bestand.

Er zijn vele voorbeelden op internet om caching in te stellen. Je kunt het beste via de moderne cache headers, Cache-Control headers, de instellingen voor het tijdelijk opslaan van bestanden configureren. De Expires-headers is een ouderwetser alternatief. Voeg de code aan het .htaccess bestand (onder web/wordpress) alsook aan het httpd.conf bestand (onder /usr/local/etc/apache22/conf/httpd22.conf).

# BROWSER CACHING USING CACHE-CONTROL HEADERS
<ifModule mod_headers.c> 
# One year for image, audio and video files
<filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|mp3|mpeg|wav|png|svg|swf|webp)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

# One month for JavaScript, fonts and PDF files
<filesMatch ".(js|pdf|otf|ttf|woff|woff2)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

# One week for CSS files
<filesMatch ".(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=3600, private, must-revalidate"
</filesMatch>
</ifModule>

Tenslotte is een test op webpagetest.org inzichtelijk in die zin dat het goed weergeeft hoe je je website kunt verbeteren.

Compressie via gzip

Na het instellen van de cache kan je website worden gemaakt door de resources die nodig zijn te comprimeren. Het protocol hiertoe is gzip compressie. Webservers en browsers zijn hierop ingericht. Het betekent dat bestanden als een zip-bestand, maar dan in het format gzip, gecomprimeerd worden, voordat deze aan de browser toegestuurd worden. Zie ook dit plaatje met dank aan kinsta.com.

hoe werkt gzip compressie ?

hoe werkt gzip compressie ?

Dat betekent minder data-overdracht en dus een snellere weergave op het scherm van de browser.  GZIP is gebaseerd op het DEFLATE algoritme. Deze term heb je nodig om in het .htaccess configuratiebestand de instellingen aan te passen. Voeg in het bestand onderaand de volgende code toe.

# BEGIN Gzip compression
<IfModule mod_filter.c>
        <IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
                AddType application/vnd.ms-fontobject .eot
                AddType font/ttf .ttf
                AddType font/otf .otf
                AddType font/x-woff .woff
                AddType image/svg+xml .svg

                AddOutputFilterByType DEFLATE application/javascript
                AddOutputFilterByType DEFLATE application/rss+xml
                AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
                AddOutputFilterByType DEFLATE application/x-font
                AddOutputFilterByType DEFLATE application/x-font-opentype
                AddOutputFilterByType DEFLATE application/x-font-otf
                AddOutputFilterByType DEFLATE application/x-font-truetype
                AddOutputFilterByType DEFLATE application/x-font-ttf
                AddOutputFilterByType DEFLATE application/x-font-woff
                AddOutputFilterByType DEFLATE application/x-javascript
                AddOutputFilterByType DEFLATE application/xhtml+xml
                AddOutputFilterByType DEFLATE application/xml
                AddOutputFilterByType DEFLATE font/opentype
                AddOutputFilterByType DEFLATE font/otf
                AddOutputFilterByType DEFLATE font/ttf
                AddOutputFilterByType DEFLATE font/woff
                AddOutputFilterByType DEFLATE font/woff2
                AddOutputFilterByType DEFLATE image/svg+xml
                AddOutputFilterByType DEFLATE image/x-icon
                AddOutputFilterByType DEFLATE text/css
                AddOutputFilterByType DEFLATE text/html
                AddOutputFilterByType DEFLATE text/javascript
                AddOutputFilterByType DEFLATE text/plain
                AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
                BrowserMatch ^Mozilla/4 gzip-only-text/html
                BrowserMatch ^Mozilla/4\.0[678] no-gzip
                BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
                Header append Vary: User-Agent
        </IfModule>
</IfModule>
# END Gzip compression

Na opslaan van het .htaccess bestand, laad je de pagina van je website opnieuw en controleer je in de console of de header content: gzip weergegeven wordt. Zie ook volgende figuur.

schermafdruk met antwoordheader over gzip

schermafdruk met antwoordheader over gzip

Naast het verzenden van bestanden via gzip-encoding, kun je de snelheid van laden vergroten door ervoor te zorgen dat afbeeldingen in een efficiënt format zijn opgeslagen. Niet in jpg, png of gif format, maar in het moderne webp format: dit biedt superieure ‘lossless’ compressie voor afbeeldingen op webpagina’s. Met gebruik van webp, kun je kleinere en rijkere afbeeldingen maken waardoor de snelheid van je website verbetert. Webp afbeeldingen zijn circa 26% kleiner in omvang in vergelijking met het png formaat (dit format wordt gebruikt voor het weergeven van de grafieken in de maandoverzichten). En circa 25-35% kleiner dan jpg afbeeldingen.

Het webp format wordt ondersteund in diverse browsers zoals Google Chrome, Firefox, Edge, Opera en Brave. De media bibliotheek van wordpress ondersteunt helaas niet webp format, maar met een aanpassing van het functions.php bestand, kun je dit wel mogelijk maken. Voeg onderstaande regels toe aan het functions.php bestand onder de map van het werkzame thema van de site. Dit is alleen nodig voor wordpress versies 5.7 en lager.

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );

if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}

return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

 

PhP versie

Nog een laatste ding: Synology installeert niet de laatste pakketversie van apache en php, de pakketten die nodig zijn om de webserver voor wordpress te laten draaien. PHP (PHP: Hypertext Preprocessor) is een scripttaal, die bedoeld is om op webservers dynamische webpagina’s te creëren. Wil je de laatste php versie gebruiken, bijvoorbeeld php7.3 in plaats van php7.2, dan moet je een aanpassing doen in het besturingssysteem met behulp van SSH toegang. Dit doet Synology niet vanzelf, of heel traag. Verander dan in het bestand wordpress.conf de term ‘php72’ door ‘php73’. Het bestand is te vinden onder /usr/local/etc/apache22/sites-enabled/wordpress.conf.

FastCgiExternalServer /php-fpm-wordpress-handler -socket /run/php-fpm/php73-fpm.sock -idle-timeout 3600
ScriptAlias /php-fpm-wordpress-handler.fcgi /php-fpm-wordpress-handler

<Directory "/var/services/web/wordpress">
<IfModule fastcgi_module>
AddHandler php-fastcgi .php .php3 .php4 .php5 .php7 .phtml
Action php-fastcgi /php-fpm-wordpress-handler.fcgi
</IfModule>
</Directory>

Om de instellingen van kracht te laten zijn, kun je de webserver opnieuw opstarten. Deze is apache 2.2 of 2.4 (afhankelijk van de versie die webstation package gebruikt). Het commando voor een herstart kun je via SSH ingeven: synoservice –restart pkgctl-Apache2.2. Helaas staat het wordpress pakket niet toe om gebruik te maken van apache 2.4 versie en moet je het dus nog helaas met de apache 2.2. versie doen. Synology is niet snel met het updaten van de wordpress versie. De huidige door Synology via de Package Center beschikbaar gestelde wordpress versie (januari 2021) is versie 5.3. Je kunt ervoor kiezen om een latere versie te installeren. Dit kun je handmatig doen via de package site van synology. Download de laatste *.spk versie en installeer deze handmatig in het Package Center menu.

Let wel op bij het aanbrengen van wijzigingen in de plugins of thema’s. Je kunt snel fouten maken die veroorzaakt worden door een wijziging in het .htaccess bestand. Hierin staat de verwijzing naar de map waarin de wordpress databases, tabellen, plugins, thema’s en dergelijke te vinden zijn. Zorg ervoor dat je een backup van het .htaccess bestand regelmatig maakt. Deze wordt namelijk niet meegenomen in de backup van UpdraftPlus.

Preloading

Niet alleen door het implementeren van een cache beleid maak je de site sneller. Ook door het vooraf inladen van grote bestanden. Dit kunnen stijl (css), javascript (js), font of media bestanden zijn. Het laden van de font kan al snel 200kB in beslag nemen. De site heeft deze font sowieso nodig. Je kunt dit instellen in de html code van het thema. Deze is te vinden in het bestand headers.php onder web/wordpress/wp-content/themes/hestia/header.php. Kopieer het bestand eerst naar je lokale omgeving voordat je wijzigingen aanbrengt. Vervolgens voeg je een regel toe waarin de verwijzing opgenomen is naar de betreffende fonts, stijl- of scriptbestanden. In het onderstaande voorbeeld is de font die van deze site: deze aanpassen naar het gehanteerde lettertype. Dit kun je vaststellen via de pagespeed tool van Google Insight. Maak voor de zekerheid een backup van het headers.php bestand voordat je het aangepaste bestand vanuit je lokale omgeving uploadt naar de website. Als je de aanpassingen in het header.php bestand niet terugziet in de console van firefox of chrome, dan maakt de browser nog gebruik van de cache. Pas dan in dit geval tijdelijk de cache instellingen in het ‘.htacces’ configuratiebestand aan naar bijvoorbeeld 5 sec voor font en html bestanden. Dan worden de wijzigingen alsnog doorgevoerd in de browser.

<link rel="preload" href="/assets/font-awesome/webfonts/fa-brands-400.woff2" as="font" type="font/woff2">

 

HTTP/2 protocol

Het Hyper Text Transfer Protocol (HTTP) is uitgevonden in 1991 en heeft de basis gelegd voor het wereldwijde web. Het is een essentieel protocol in de communicatie wereldwijd. HTTP zorgt er namelijk voor dat we publiek toegankelijke, aan netwerken verbonden gegevensbronnen kunnen opvragen. Het protocol is in de loop van de jaren verbeterd en is een snelle, veilige en multifunctionele manier voor digitale communicatie.

HTTP werd voorgesteld door Tim Berners-Lee, de pionier van het wereldwijde web, die het applicatieprotocol ontwikkelde met de bedoeling om op een simpele manier high-level datacommunicatiefuncties tussen webservers en clients uit te kunnen voeren. De eerste gedocumenteerde versie van HTTP kwam in 1991 als HTTP0.9 op de markt wat in 1996 leidde tot de officiële introductie van HTTP1.0. In 1997 volgde HTTP1.1 en sindsdien worden er regelmatig kleine verbeteringen uitgebracht (bron kinsta.com).

http/2 tijdslijn ontwikkeling

http/2 tijdslijn ontwikkeling

In februari 2015 is HTTP herzien en doorontwikkeld tot de tweede grote versie van het applicatieprotocol, met HTTP/2 als resultaat. HTTP/2 realiseert op drie vlakken grote verbeteringen ten opzichte van HTTP1.1: eenvoud, hoge prestaties en robuustheid. Dit wordt mogelijk gemaakt met functies die de vertraging van het verwerken van browserverzoeken verminderen. Daarbij worden technieken als multiplexing, compressie, prioriteitsbepaling van verzoeken en serverpushes gebruikt. Het collectieve systeem stelt servers in staat om efficiënter te reageren op meer informatie dan de clients oorspronkelijk aanvroegen, waardoor de tussenkomst van users niet nodig is om een website volledig in de webbrowser te laden.

Effect van HTTP/2

Net als kinsta geeft ook wikipedia aan dat de server push capacity van HTTP/2 de mogelijkheid biedt om inhoud te ‘pushen’, dus met meer data dan waar de klant (de bezoekende webbrowser) om gevraagd heeft. De server ‘weet’ namelijk al welke data gevraagd gaan worden en anticipeert hierop door de webpagina voor te bereiden zonder dat de browser hoeft te wachten op verzoeken aan de webserver om bepaalde delen van informatie (scripts, stijlbestanden, lettertypen, afbeeldingen, etc.). Dit wordt verder aangevuld met de informatie die al via de cache van de browser beschikbaar is. Efficiënte compressie van HTTP headerbestanden minimaliseert de overhead van het protocol, wat voor elk browserverzoek en serverrespons de prestaties verbetert.

Het gebruik van HTTP/2 leidt tot significante prestatieverbeteringen. Zo heeft de overstap van HTTP1.1 naar HTTP/2 protocol geleid tot een verbetering geleid van 90 naar 98, gemeten met behulp van de Pagespeed Insight tool van Google. Zie ook de afbeeldingen hieronder.

vergelijking 90 score versus 98 scherm bij toepassing van http/2

vergelijking 90 score versus 98 scherm bij toepassing van http/2

Hoe stel je het HTTP/2 protocol in?

Het gebruik van het HTTP2 protocol vereist een HTTPS-certificaat. Dit hebben we gelukkig al eerder ingesteld. Ten tweede is het TLS protocol, versie gelijk of hoger dan 1.2,  met gebruikmaking van moderne cipher suites vereist. Dit zit bij Synology snor. Waar Synology niet lekker meewerkt is bij de installatie van het WordPress pakket. De installatie wizard dwingt de het gebruik af van webserver apache versie 2.2 in plaats van de moderne versie 2.4. En dit is waar het mis gaat. Apache versie 2.4.29 of hoger laat het HTTP/2 protocol namelijk wel toe. Oudere apache versies passen nog het HTTP1.1 protocol toe. Dit kun je ook zien in mijn schermafbeelding bij de gzip compressie: eerst draaide deze website met apache 2.2 op basis van HTTP1.1: zie het rood omcirkelde rechthoekje dat het protocol weergeeft waarmee de informatie wordt overgebracht. Het groene blokje illustreert HTTP/2 protocol met behulp van apache 2.4.4 versie.

knipsel http1.1 plaatje

Bevestiging http1.1 protocol (rood omkaderd)

Apache 2.4 in plaats van apache 2.2

Instellen van apache 2.4 is nog niet zo gemakkelijk. De configuratie van het WordPress pakket voorziet niet in een keuze: het dwingt af dat apache 2.2. versie nodig is. Je kunt dit omzeilen door eerst een virtual host aan te maken in webstation. Vul als hostnaam de domeinnaam van de site in. Verwijs in de document hoofdmap naar de web-map onder de hoofdmap volumex. Kies als HTTP back-end server Apacher HTTP Server 2.4; selecteer de meest recente PHP versie. Na het klikken van OK gebruikt gebruikt WordPress nu wel de nieuwe webserver versie die HTTP/2 faciliteert.

instelling virtual host php7.4

Mocht dit tot ongemakken leiden, zoals het niet meer kunnen benaderen van de wp-admin/wp-login functionaliteit, dan kun je twee dingen doen. Althans zo heeft dit voor mij goed gewerkt:

  1. log in via het ip-adres van de NAS: 192.168.1.xxx/wordpress/wp-admin; of
  2. schakel de virtual host uit en stop het pakket apache 2.2 (via package manager).

Met HTTP/2 protocol is de website goed bij de tijd en merkt de bezoeker dat de pagina snel geladen wordt. Wachten is er niet meer bij. Check kun je ook doen via http2.pro.

schermafdruk http2 protocol

Upgrade naar nieuw besturingssysteem van DSM

Bij het uitbrengen van een nieuwe upgrade van het besturingssysteem (DSM), verricht Synology van tevoren testen, via alpha en beta releases. Ondanks de zorgvuldigheid en lange aanlooptijd naar een nieuwe versie, kan het gebeuren dat de website niet meer of onvoldoende functioneert na de upgrade. De teksten zijn leesbaar maar de figuren en afbeeldingen niet. De ontwikkelaarconsole in de browser toont diverse fouten.

Het is mogelijk dat het htaccess configuratiebestand is aangepast tijdens de upgrade waardoor onjuiste verwijzingen worden aangebracht. Zo ook bij de upgrade naar DSM7.0. Synology heeft een update aangebracht naar een nieuwe versie van wordpress (5.5) die in een nieuwe gedeelde map wordpress_packages is geïnstalleerd. Tevens is een nieuw type gebruiker geïntroduceerd ‘WordPress’. Vermoedelijk functioneren hierdoor de verwijzingen tussen de oude web mappen en de nieuwe wordpress_packages niet meer.

Wat te doen?
  • Maak een backup van de bestanden via de plugin updraftplus en maak ook een backup via phpmyadmin van de database wordpress in de database (mariadb).
  • Deinstalleer de pakketten wordpress, apache 2.2 en apache 2.4, web station, mariadb en phpmyadmin.
  • Installeer pakket apache 2.4 waarmee automatisch ook web station wordt geïnstalleerd.
  • Installeer pakket wordpress waarmee automatisch ook mariadb en apache 2.2 worden geïnstalleerd.
  • Download de laatste wordpress versie (versie 5.7.2), pak het zip bestand uit en sla de bestanden op onder de web map. Doe dit voor alle mappen uit het zip-bestand m.u.v. de map wp-content, het bestand wpconfig.php en .htaccess.
  • Maak een virtual host aan voor adagia.eu. Verwijs hierbij naar web en niet naar web_packages.
virtual host adagia.eu

virtual host adagia.eu

  • Loop de permissies door van de hoofdmappen van de wordpress map en check of het .htaccess bestand voor de gebruikersgroep http bereikbaar is. Stel de permissies zo in dat deze in sommige gevallen ook overschrijfbaar zijn, maar alleen voor bepaalde bestanden. Zie ook deze toelichting.
  • Schakel in de webstation de virtual host
uitschakeling wordpress

uitschakeling wordpress gebruiker in webservice portaal

  • Login onder https://interne-ip-adres-NAS/wordpress/wp-login.
  • Voeg twee Define regels toe aan wp-config.php die de verbinding regelen naar het nieuwe  siteurl en home adres.
    define('WP_HOME','https://adagia.eu'); define('WP_SITEURL','https://adagia.eu/wordpress');
  • Start apache server opnieuw op (of start de NAS opnieuw op) en login onder https://domeinnaam/wordpress/wp-login.
  • Geef de wordpress_map onder de map web_packages een andere naam om te voorkomen dat er een update wordt uitgevoerd die de configuratie weer terugzet naar fabriekinstellingen. Negeer het advies in de pakketmanager om het wordpress pakket te herstellen.

Als voordeel heeft deze nieuwe installatie dat de laatste versie van wordpress geïnstalleerd is. Daarnaast kun je via de virtual host aangeven welke php versie toegepast moet worden. De door DSM afgedwongen php versie voor wordpress is 7.3, helaas niet 7.4. Dat is minder veilig en ook minder snel.


0 reacties

Geef een reactie

Avatar plaatshouder

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *