Google Pagespeed Inzichten is de bekende website tool waarmee u alle voor de zoekmachine relevante parameters kunt controleren en optimaliseren. U kunt op de bovenstaande link klikken, of u kunt een dagelijks bijgewerkte waarde van uw site in het administratiesysteem zien.
In deze handleiding laten we zien hoe makkelijk het is om de paginasnelheidsscore van 100/100 om te bereiken. Jij kan het ook.
Voor ons voorbeeld hebben we gebruik gemaakt van een demo-website met allerlei soorten content en een bekend thema, waar ook de gebruikelijke plugins in zitten. Dus het is precies hetzelfde wat je gebruikt om goede websites te maken.
We zijn hier voor het thema De7 besloten. Maar het maakt niet uit welk thema je gebruikt. Het belangrijkste is dat het up-to-date is en enkele instelmogelijkheden biedt voor de creatie van de website.
Dat heb je nodig voor een snelle website.
- a snelle webhoster door ervaring
- een schone huidige WordPress
- de juiste instellingen voor de webserver
- een hulpmiddel voor optimalisatie en caching
In dit voorbeeld gebruiken we WP Raket. Deze instrumenten doen allemaal hetzelfde. Ze comprimeren tekstbestanden, voegen de code samen en maken, indien nodig, een statische pagina als kopie.
Hierdoor kan de bezoeker de pagina snel oproepen.
Statische pagina's doen denken aan html-code van toen. Websites die bestaan uit eenvoudige html-code en afbeeldingen zijn nog steeds het snelst. Maar niet dynamisch. Met deze plugins wordt de cache steeds weer opnieuw opgebouwd zodra er iets verandert aan de pagina.
Tip: Deactiveer de WordPress Cronjob. Het is niet echt een cronjob in de echte zin van het woord, maar het wordt altijd genoemd als een bezoeker op de pagina komt. In een ander artikel laten we zien hoe dit werkt.
Google Pagespeed Inzichten
Voer uw huidige website in op google en zie de voorstelling.
Normaal gesproken krijg je waarden in het gele bereik tot 85 als de webhoster een goede server heeft.
In onze standaardinstallatie toonde PSI ons 85/100 in de bureaubladweergave.
Enigszins misleidend is echter de bewering dat de server traag reageerde. Hier wordt de tijd tot de eerste byte bedoeld, die wordt doorgegeven.
Er zijn heel veel factoren die hier samen spelen. Vaak zal je de zogenaamde TTFB (Time to first Byte) verminderen als je alle andere punten repareert.
Google biedt de geoptimaliseerde code voor vele downloadpunten handig aan. Maar ik raad aan om alleen geoptimaliseerde afbeeldingen te gebruiken in de website.
Dit kan zelfs gratis worden gedaan, bijvoorbeeld met de Tinypng Panda ...om er voor te zorgen.
De meeste thema's creëren echter ook hun eigen beelden in verschillende formaten, zodat er altijd behoefte is aan nieuwe optimalisatie.
Het is daarom aan te raden om af en toe eenvoudigweg alle beeldbestanden op de webserver te heroptimaliseren en te overschrijven.
Pingdom, GTMetrix en Co.
Er zijn natuurlijk ook andere controlepagina's. Hier is echter vaak het probleem dat het ophalen vanuit het buitenland gebeurt en dus niet zinvol genoeg is om de gebruikelijke bezoeker uit Duitsland te simuleren. Het is ook belangrijk om te weten dat sommige testprogramma's niet met http/2 kunnen omgaan en het voordeel van http/s, d.w.z. de parallelle overdracht van gegevens over een verbinding, precies negeren en dit negatief interpreteren.
TTFB of totale oplaadtijd?
In principe is het resultaat van de totale laadtijd wat telt. De eerste byte is afhankelijk van vele factoren die moeilijk te beïnvloeden zijn. Een pagina die niet gecomprimeerd is, heeft meestal een zeer lage TTFB-waarde dan een perfect gecomprimeerde pagina. Maar de totale laadtijd met compressie is natuurlijk sneller voor een pagina met veel inhoud. Hoe google dit uiteindelijk beoordeelt is nevelig. We hebben zelfs pagina's die langzaam laden omdat de software verouderd is en een PSI-waarde van 68, maar met 28K organische sleutelwoorden krijgen we ongeveer 1000 bezoekers per dag. Maar met vergelijkbare sites zal de site met de betere waarden zeker hoger genoteerd worden.
CDN en versnellingsmodules
Er zijn ook modules die statische gegevens opslaan op andere servers en deze afhankelijk van de locatie van de bezoeker aanleveren. Dit vermindert het aantal verbindingen met de server en dus ook de zogenaamde TTFB. Hier kunnen caches van akamai, cloudflare of incapsula worden gebruikt die ook compressie en optimalisatie bieden, afhankelijk van de geboekte service. Een kleine (D)Dos-beveiliging is ook inbegrepen, zolang de verbinding maar volledig via deze providers tot stand komt.
Speedkit voor Plesk
Zo is er bijvoorbeeld een plugin voor Plesk die de website met een paar klikken sneller kan maken. Maar in mijn test was precies het tegenovergestelde het geval. Het grootste probleem met dergelijke plugins is dat de cache pas opstart als de bezoeker de pagina een tweede keer bekijkt of eerst verbinding maakt met het systeem.
Het voordeel is dat u het eenvoudig kunt activeren zonder dat u wijzigingen in uw systeem hoeft aan te brengen. Maar het nadeel is de ontbrekende snelheid voor 1 View bezoekers. Om deze reden zie je geen enkele verandering met de gebruikelijke controleprogramma's, omdat ze altijd de site bezoeken zonder caching als een compleet nieuwe gebruiker.
Aangezien de meeste bezoekers vaak alleen via een zoekmachinelink op de site komen, is er geen snelheidsvoordeel voor deze bezoekers. Met gereedschap aan boord kun je goed opschieten zonder externe caches. Ook in termen van gegevensbescherming, met name DSGVO en de komende ePrivacy-regelgeving, is het gebruik van dergelijke diensten niet geschikt. Bij de bestelling van deze diensten ontbreekt reeds een contract voor gegevensverwerking.
Zo maakt u de website sneller.
Het belangrijkste punt: de juiste webhost.
Van buitenaf gezien, iedereen webhostingprovider Hetzelfde. Maar het verschil is zo vaak verborgen.
Er zijn webhosters die adverteren met kernen en toegewijde middelen, maar dit alles draait alleen op zeer zwakke hardware. Een kleine AMD-core van een 10 jaar oude server is niet hetzelfde als een core op een Intel Platinum Xeon van de laatste versie.
De meeste aanbieders virtualiseren tegenwoordig ook hun hele infrastructuur. Vaak op vreemde constructies zoals containersystemen waarbij de door de klant geboekte kernen ook door 20 andere klanten werden geboekt. Goed en vanwege de softwarelicentiekosten maken aanbieders gebruik van echte virtualisatiesystemen zoals vmware of KVM, doorgaans cloud genoemd.
Vaak is shared hosting voldoende. Wij hebben zelf websites gebouwd met duizenden bezoekers per maand. Deze draaien ook in een kleine hosting account, want webhosting machines zijn meestal al zeer groot gedimensioneerd door de provider, zodat ze honderden websites kunnen bedienen.
De meeste websites zullen echter niet de macht nodig hebben die ze hebben geboekt, dus er is altijd genoeg macht over.
Bij het kiezen van een webhoster hoeft u alleen maar een testaccount te zoeken en daar uw website vrijblijvend te uploaden. U kunt het meestal bereiken via een subdomein en de snelheid testen. Als het niets is, schakel dan gewoon over naar een andere provider.
In dit voorbeeld bevindt de demopagina zich op een SEO-server de webhoster.de AG waar u een Plesk Reseller Account met 10 IP-adressen voor uw projecten krijgt.
De gebruikte hardware is een Dell R740 server met MLC server SSD's als raid array.
De administratie-interface is Plesk Onyx in de huidige versie.
Er is een standaard WordPress met de volgende actieve plugins geïnstalleerd:
- Amazonefiliaal voor WordPress
- NextScripts: SNAP Pro Upgrade Helper
- NextScripts: Sociale netwerken Auto-affiche
- SEO Smart Links Business
- Kortingscodes Ultiem
- Inhoudstafel Plus
- De7 Elementen
- Ultieme toevoegingen voor WPBakery Page Builder
- WPBakery Page Builder
- Yoast SEO Premium
- WP Raket
De ontwerpsjabloon
De 7 wordt als thema gebruikt.
Het ontwerp van de pagina bestaat uit sjablonen uit het Thema of de Page Builder. De subpagina's hebben meestal 2500-3000 woorden en veel foto's en tabellen.
Daarom is het altijd belangrijk om niet alleen de startpagina te controleren, maar ook de subpagina's.
Onze demosite heet www.super-food.de en is ook toegankelijk onder dit domein. Dus je kunt alle testen zelf controleren. In een ander artikel laten we zien hoe je in korte tijd een grote website kunt bouwen met weinig middelen. Misschien is dit ook iets voor jou. De website wordt van tijd tot tijd gekopieerd naar andere systemen voor testdoeleinden om vergelijkingstests te maken.
Om de webserver via Plesk op te zetten
Allereerst moet de webserver via Plesk worden opgezet. Er zijn altijd aanbevelingen om nginx te gebruiken als een pure webserver. Maar dat doen we niet omdat er in principe geen .htaccess-bestanden worden ondersteund en de meeste WordPress-functies van de plugins alleen met meer moeite kunnen worden geconverteerd, anders zijn ze niet effectief. Er is ook geen snelheidsvoordeel.
PHP-instellingen in Plesk
We gebruiken de huidige php versie 7.2.9 met de standaardinstellingen. Onder het menu-item PHP-instellingen kunt u meestal zelf de opties instellen. Zo niet, dan moet de webhostingprovider dat doen.
Instellingen voor Apache & nginx
In de instellingen voor nginx of Apache stellen we alleen de waarden in die al door de provider zijn voorgedefinieerd. Dus niets bijzonders. Alleen om veiligheidsredenen worden de symbolische koppelingen gedeactiveerd en wordt de standaardcompressie geactiveerd.
nginx werken we alleen als proxyserver met de intelligente verwerking van statische bestanden. In principe kun je ook volledig zonder nginx. Maar dan werkt http/2 niet meer en ontstaan er andere problemen. Dus we laten de hele zaak gewoon op de standaardwaarden staan.
WordPress Dashboard
Onze demopagina loopt eigenlijk al aardig goed. Maar om de 100/100 te bereiken hebben we enkele aanpassingen nodig zoals de ontmijning, dus de combinatie van CSS en Javascript zoals Google aanbeveelt.
Meestal kun je niet alles zelf kopiëren, maar daarom zijn er nuttige kleine helpers die het werk doen.
We gebruiken de WP-Rocket plugin in deze test. Maar de meeste anderen kunnen dat ook.
In de instellingen klikken we eenvoudigweg op alle items in de sectie Bestandsoptimalisatie, behalve de instellingen die schadelijk zijn voor http/2. Voor CSS-bestanden zijn dit de "Minimaliseer CSS"enCSS-weergave optimaliseren„.
Bij de Javascript-instellingen moet u de instellingen wijzigen "Javascript minimaliseren"enJavascript vertraagd laden"en de"Veilige modus voor jQuery (aanbevolen)".
Dat was het bijna. Met de plugin stijgt de PSI-waarde van de pagina naar 94/100. Nu ontbreken slechts enkele kleine optimalisaties van de beeldbestanden of CSS-code, die op de een of andere manier niet gecomprimeerd werden met het zogenaamde Kinderthema. Praktisch gezien biedt google deze bestanden geoptimaliseerd aan, zodat u ze gemakkelijk kunt vervangen door de bestandsmanager.
We hopen dat onze kleine tutorial u heeft geholpen met de optimalisatie. Dus alles is mogelijk. Maar de dingen veranderen elke dag. Daarom moet u uw WordPress altijd up-to-date houden, anders worden nieuwe functies niet meer ondersteund.
U vindt binnenkort een complete video op ons Youtube-kanaal.
