Hoe 100 / 100-punten op Google Pagespeed voor uw WordPress-website te krijgen

0
1192
page-speed inzichten

Google Pagespeed Insights is de bekende website-tool waarmee u alle relevante parameters voor de zoekmachine kunt controleren en optimaliseren. U kunt op de bovenstaande link klikken, of meestal in het beheersysteem een ​​dagelijks bijgewerkte waarde van uw pagina bekijken.

In deze gids laten we u zien hoe gemakkelijk het is Paginasnelheidscore van 100 / 100 te bereiken. Jij kunt het ook.

Voor ons voorbeeld hebben we een demo-website gebruikt met allerlei inhoud en een bekend thema, dat ook de gebruikelijke plug-ins bevat. Dus precies wat om goede websites te maken.

super-food-homepage

Wij zijn hier voor het thema The7 besloten. Het maakt niet echt uit welk thema je gebruikt. Het belangrijkste is dat het up-to-date is en enkele instellingsopties biedt voor het maken van de website.

Dat is wat je nodig hebt voor een snelle website.

  1. een snelle webhost met ervaring
  2. een schone huidige WordPress
  3. de juiste instellingen voor de webserver
  4. een tool voor optimalisaties en caching

We gebruiken in dit voorbeeld WP Rocket, Deze tools doen allemaal hetzelfde. U comprimeert tekstbestanden, vouwt de code samen en maakt mogelijk een statische pagina als kopie.

Hierdoor heeft de bezoeker snel toegang tot de pagina.

Statische pagina's doen denken aan html-code van toen. Websites die alleen uit eenvoudige HTML-code en afbeeldingen bestaan, zijn nog steeds de snelste. Maar niet dynamisch. Maar met deze plug-ins wordt de cache altijd opnieuw gemaakt zodra er iets op de pagina is gewijzigd.

Tip: schakel de WordPress Cronjob, Het is niet echt een cronjob in de ware zin van het woord, het wordt altijd genoemd als een bezoeker naar de pagina komt. Hoe dat te doen, laten we u in een ander artikel zien.

Google Pagespeed Insights

Ga naar uw huidige website op Google en bekijk de uitvoering.

Normaal krijgt men eerste waarden in het gele gebied, dus tot 85 als de Webhoster een goede server heeft.

In onze standaardinstallatie liet PSI ons 85 / 100 zien in de desktopweergave.

PSI Standaard WordPress-installatie

Enigszins misleidend is echter de bewering dat de server traag heeft gereageerd. Hier wordt de tijd tot de eerste byte bedoeld die wordt verzonden.

Er zijn veel factoren die hier op elkaar inwerken. Vaak verminder je de zogenaamde TTFB (Time to First Byte), als je alle andere punten oplost.

Google biedt handig de geoptimaliseerde code om te downloaden voor veel punten. Op dit moment raad ik echter over het algemeen aan om alleen eerder geoptimaliseerde afbeeldingen in de website op te nemen.

U kunt dat zelfs gratis doen met de Tinypng Panda doen.

tinypng beeld compressie
Tinypng.com Panda voedt de overbodige bytes.

De meeste thema's maken echter ook hun eigen afbeeldingen in verschillende formaten, zodat deze altijd terugkomen op nieuwe optimalisatiebehoeften.

Het is daarom af en toe aan te raden om alle afbeeldingsbestanden op de webserver opnieuw te optimaliseren en te overschrijven.

Pingdom, GTMetrix en Co.

Natuurlijk zijn er andere testpagina's. Hier is er echter vaak het probleem dat de oproep vanuit het buitenland komt en daarom niet zinvol genoeg is om de gebruikelijke bezoeker uit Duitsland te simuleren. Het is ook belangrijk om te weten dat sommige testprogramma's http / 2 niet kunnen verwerken en het voordeel van http / s, dat wil zeggen de parallelle overdracht van gegevens via een verbinding, negeren en negatief interpreteren.

gtmetrix
GTMetrix-prestatierapport

TTFB of totale laadtijd?

Kortom, het resultaat van de totale oplaadtijd telt. De eerste byte is afhankelijk van vele factoren die men alleen slecht kan beïnvloeden. Een pagina die niet is gecomprimeerd, heeft meestal een zeer lage TTFB-waarde dan een perfect gecomprimeerde pagina. Maar de totale laadtijd met compressie is duidelijk sneller op een pagina met veel inhoud. Hoe Google dat evalueert, is uiteindelijk vaag. We hebben zelfs pagina's die zwaar laden omdat de software verouderd is en een PSI-waarde van 68 heeft. Met 28K organische zoekwoorden, maar ongeveer 1000 bezoekers komen dagelijks op de site. Maar voor vergelijkbare sites zal de pagina met de betere waarden zeker hoger worden vermeld.

CDN en versnellingsmodules

Er zijn ook modules die statische gegevens op andere servers opslaan en afleveren, afhankelijk van de locatie van de bezoeker. Dit vermindert het aantal verbindingen met de server en vermindert de zogenaamde TTFB. Caches van akamai, cloudflare of incapsula zijn hier beschikbaar die ook compressie en optimalisatie bieden, afhankelijk van de geboekte service. Een kleine (D) Dos-bescherming is ook inbegrepen als de verbinding volledig via deze providers wordt gemaakt.

CloudFlare-web-traffic-uebersicht
Cloudflare verkeersanalyse

Speedkit voor Plesk

Er is bijvoorbeeld een plug-in voor Plesk, die de website met slechts een paar klikken sneller kan maken. In mijn test was echter precies het tegenovergestelde het geval. Het grootste probleem met dergelijke plug-ins is het feit dat de cache alleen start wanneer 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 wijzigingen aan te brengen in uw systeem. Maar het nadeel is dan eerder het gebrek aan snelheid bij 1 View-bezoekers. Om deze reden kunt u geen verandering zien met de gebruikelijke testprogramma's, omdat ze de site altijd bezoeken zonder te cachen als een gloednieuwe gebruiker.

Speedkit-website-accelerator-plesk
Speedkit voor Plesk is ontworpen om webpagina's sneller te maken. Maar werkt waarschijnlijk niet altijd.

Aangezien de meeste bezoekers vaak alleen naar de site komen via een link van een zoekmachine, is er geen snelheidsvoordeel voor deze bezoekers. Met on-board betekent het goed opschieten zonder externe caches. In termen van gegevensbescherming, met name DSGVO en de komende ePrivacy-verordening, is het gebruik van dergelijke services niet geschikt. Er ontbreekt al een contract voor de verwerking van bestelgegevens bij het bestellen van deze services.

Dus je maakt de website sneller.

Het belangrijkste punt: de juiste webhost.

Van buitenaf gezien doet iedereen dat Webhosting provider hetzelfde. Maar het verschil is zo vaak verborgen.

Er zijn webhosts die adverteren met cores en speciale bronnen, maar die allemaal alleen op zeer zwakke hardware draaien. Een kleine AMD-kern van een 10-jarige server is niet hetzelfde als een kern op een Intel Platinum Xeon de nieuwste versie.

vmware_cluster
Een voorbeeld van een VMWare-cluster

De meeste providers virtualiseren tegenwoordig ook hun volledige infrastructuur. Vaak op vreemde structuren zoals containersystemen waarin de klant geboekte cores door andere klanten van 20 werd geboekt. Goed en duur vanwege de softwarelicentiekosten leveranciers gebruiken juiste virtualisatiesystemen zoals VMware of KVM, meestal cloud genoemd.

kvm_cluster
Een klein KVM-cluster

Vaak is een gedeelde voldoende hosting out. Zelf hebben we websites opgezet met tienduizenden bezoekers per maand. Deze worden ook uitgevoerd in een klein hostingaccount, omdat webhostingmachines meestal al door de provider groot zijn, zodat ze honderden websites kunnen bedienen.

virtuozzo_cluster
Weergave van een Virtuozzo 7-knooppunt

De meeste sites hebben echter niet de services nodig die ze hebben geboekt, dus er is altijd voldoende stroom over.

Bij het kiezen van de webhoster, zoek gewoon een proefaccount en speel uw website vrijblijvend. Je kunt ze meestal bereiken via een subdomein en de snelheid testen. Als dit niets is, schakelt u gewoon over naar een andere provider.

In dit voorbeeld staat de demopagina op één SEO-server de webhoster.de AG waar u een Plesk-reseller-account krijgt met 10 IP-adressen voor uw projecten.

De gebruikte hardware is een Dell R740-server met MLC-server-SSD's als RAID-array.

De beheerinterface is Plesk Onyx in de huidige versie.

Een standaard WordPress met de volgende actieve plug-ins is geïnstalleerd:

  • Amazon Affiliate voor WordPress
  • NextScripts: SNAP Pro Upgrade Helper
  • NextScripts: Social Networks Auto-Poster
  • SEO Smart Links Bedrijf
  • Ultimate shortcodes
  • Inhoudsopgave Plus
  • The7-elementen
  • Ultieme add-ons voor WPBakery Page Builder
  • WPBakery Page Builder
  • Yoast SEO Premium
  • WP Rocket

Het ontwerpsjabloon

Het thema is de The7.

Het ontwerp van de pagina bestaat uit sjablonen van het thema of de paginabuilder. De subpagina's bevatten meestal 2500-3000-woorden en veel afbeeldingen 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 zit er ook onder Domein haalbaar. U kunt dus alle tests zelf verifiëren. In een ander artikel laten we zien hoe je in een mum van tijd een grote website bouwt met weinig middelen. Misschien is dat ook iets voor jou. De website wordt soms gekopieerd naar andere systemen voor testdoeleinden om vergelijkende tests te maken.

Hoe de webserver in te stellen via Plesk

Allereerst moet de webserver worden ingesteld via Plesk. Er zijn altijd aanbevelingen om nginx als pure webserver te gebruiken. We doen dat niet omdat er in wezen geen .htaccess-bestanden worden ondersteund en de meeste WordPress-functies van de plug-ins alleen met meer moeite kunnen worden geconverteerd, anders zijn ze niet effectief. Er is ook geen snelheidsvoordeel.

plesk-dashboard-domein
Het Plesk-dashboard voor het domein

PHP-instellingen in Plesk

We gebruiken de huidige php-versie 7.2.9 met de standaardinstellingen. Onder het menu-item PHP-instellingen kunt u de opties meestal zelf instellen. Zo niet, dan moet de webhostingprovider dit doen.

plesk-php-versie-set-apache-met
PHP-instellingen in het Plesk-menu. PHP FPM met Apache-webserver.

Instellingen voor Apache & nginx

In het geval van de instellingen voor nginx of Apache stellen we alleen de waarden in die al door de provider zijn voorbereid. Niets bijzonders dus. Hier zijn de symbolische koppelingen gedeactiveerd en de standaardcompressie alleen om veiligheidsredenen geactiveerd.

nginx-instellingen als proxy in het Plesk-menu

We gebruiken nginx alleen als proxyserver met de slimme verwerking van statische bestanden. Kortom, u kunt volledig zonder nginx. Dan werkt http / 2 niet meer en treden er andere problemen op. Laten we het dus gewoon op de standaardwaarden laten staan.

WordPress Dashboard

Onze demo-site draait al redelijk goed. Maar om de 100 / 100 te bereiken, hebben we enkele aanpassingen nodig, zoals de Minification, dus de samenvatting van CSS en Javascript zoals Google aanbeveelt.

Dit kan meestal niet alles samen kopiëren, dus er zijn nuttige helpers die het werk doen.

We gebruiken de plug-in WP-Rocket in deze review. Maar de meeste anderen kunnen.

wp-raket-booking
Het WP-Rocket Dashboard

In het gedeelte Voorkeuren, in het gedeelte Bestandsoptimalisatie, klikken we eenvoudig op alle items behalve die welke schadelijk zijn voor http / 2. Dat zijn de CSS-bestanden de "Verklein CSS"En"Optimaliseer CSS-presentatie".

css kleineren
WP Rocket CSS Minification

Met de javascript-instellingen moet u de instellingen wijzigen "Minimaliseer Javascript"En"Javascript vertraagd laden"Evenals de"Veilige modus voor jQuery (aanbevolen) ".

kleineren javascript
Javascript-instellingen voor WP Rocket

Dat is het bijna. Met de plug-in neemt de pagina met de PSI-waarde toe tot 94 / 100. Nu ontbreken slechts enkele kleine optimalisaties van de afbeeldingsbestanden of CSS-code, die op de een of andere manier niet waren gecomprimeerd in het zogenaamde onderliggende thema. Handig is dat Google deze bestanden biedt, maar geoptimaliseerd, zodat u ze eenvoudig kunt vervangen door Bestandsbeheer.

In dit geval konden we de afbeeldingen wijzigen die door het thema zijn gewijzigd en een CSS- en Javascript-bestand in het onderliggende thema plaatsen.
Toen was er slechts een kleine herlaadbeurt naar de verwachte 100 / 100 nadat alle optimalisaties waren uitgevoerd.

page-speed inzichten

page-speed-100-100
Google Pagespeed Insights met 100 / 100 geslaagd.

We hopen dat onze kleine zelfstudie u heeft geholpen met de optimalisatie. Dus alles is mogelijk. Maar dingen veranderen ook elke dag. Daarom moet u uw WordPress up-to-date houden, anders worden nieuwe functies niet langer ondersteund.

Je vindt binnenkort een complete video op ons YouTube-kanaal.

VERWIJDER EEN ANTWOORD

Vul hier uw reactie!
Vul uw naam hier