Her hos Kinsta arbejder vi med mange bureauer og freelancere, der beskæftiger sig med klienter på daglig basis. Det er ikke ualmindeligt for kunder eller endda en administrerende direktør for et firma, at bede deres agentur eller WordPress-udvikler om at øge deres Google PageSpeed Insights-score. Google gør et godt job med at markedsføre dette værktøj til forbrugerne, og mange gange forstår de ikke altid, at en dårlig score ikke er verdens ende. Dette kan helt sikkert være frustrerende til tider. Men i dag vil vi dele nogle tips og strategier med dig, der kan hjælpe dig med at score en 100/100 i Google PageSpeed Insights med dit WordPress-websted.

Hvor Vigtigt er Google PageSpeed Insights?

Google PageSpeed ​​Insights er et webpræstationsværktøj, der er oprettet af Google, og hjælper dig med nemt at identificere måder at gøre dit websted hurtigere og mere mobilvenligt, ved at følge anbefalinger om bedste webpraksis. En meget vigtig ting at huske, er dog, at du ikke altid bør være besat af at score 100/100. Dette kan ikke engang være muligt i alle scenarier, afhængigt af hvordan dit WordPress-websted er konfigureret. Med mange multifunktions-temaer og websteder med snesevis af eksterne scripts, har du simpelthen en næsten umulig opgave, ved at forsøge at opnå en perfekt score. Hvilket er helt OK.

Vi anbefaler at se på dit websteds hastighed, mere end scorerne. Scores med værktøjer som Pingdom, GTMetrix og Google PageSpeed ​​Insights kan nogle gange føre dig på afveje. Især da nogle af dem ikke engang understøtter HTTP/2 endnu. Det der virkelig betyder noget, er at sikre dit websted belastninger hurtigt, og at den opfattede ydeevne også er op til par. Opfattet ydeevne er, hvor hurtigt dit websted føles som det laster for brugerne.

Stadig på udkig efter det perfekte WordPress vært?

Prøv Kinstas premium managed WordPress hosting for at opleve dit websted uden problemer.
  • Stiliserede kontroller, der repræsenterer ledelsen Fuldt administreret
  • Skærm med et kryds, der repræsenterer sikkerhedSikker som fort knox
  • Sammenlægning af linjer, der repræsenterer migreringerGratis migreringer
  • Tre rigtige chevrons repræsenterer serverhastighedUltimativ hastighed
  • Cirkulær pil med prik i midten, der repræsenterer sikkerhedskopierDaglige sikkerhedskopieringer
  • Offset hexagoner repræsenterer vores server stackGoogle Cloud Platform

Bruger Google PageSpeed ​​Insights når det kommer til SEO og siden hastighed rangering faktor eller ren respons hastighed? Dette var et interessant spørgsmål opdraget af SEO over på FDP Group Leeds og diskuteret på Search Engine Roundtable. Gary Illyes, Webmaster Trends Analyst for Google, svarede med at sige “Jeg går med begge.”

Dette skyldes delvis, at i de fleste tilfælde, når du har en langsom hjemmeside, vil du højst sandsynligt have mange advarsler i Google PageSpeed Insights. Mange af anbefalingerne går hånd i hånd med, hvordan de relaterer til dine rene reaktionstider. De korrelerer ikke altid 100%, men hvad Gary mest sandsynligt siger er, at hvis du har en langsom hjemmeside, ja, så vil det vil nok påvirke dine placeringer.

At Score 100/100 på Både Shared Hosting og Kinsta

Vi troede at det ville være sjovt at udforske det nye Twenty Seventeen tema i WordPress 4.7. Dette er det første standard WordPress-tema, der er rettet mod virksomheder i stedet for en typisk blog, som er spændende! Så i dag skal vi vise dig, hvordan du scorer den perfekte 100/100 på både Desktop og Mobil. Vi har installeret almindelige værktøjer og tjenester, som mange WordPress-websteder bruger, såsom Google Analytics, Akismet, Yoast SEO osv. Vi kørte tests på både en lavbudget delt vært og på Kinsta for at vise dig, hvor meget forskel der kan være, når Det kommer til finjusteret Google Cloud hosting mod et delt hosting miljø.

Selvom dette er et lille websted, er det et godt fundament at i det mindste forstå lidt om, hvordan Google PageSpeed Insights fungerer. Hvis du er interesseret i at se nogle optimeringer på et større multifunktions tema, skal du tjekke vores indlæg på optimering af Total WordPress-temaet.

100 score på Google PageSpeed Insights

100 score på Google PageSpeed Insights

100/100 i Google PageSpeed Insights med Delt Vært

På vores første testsite, har vi WordPress 4.7 med Twenty Seventeen Theme, der kører på en populær lavbudget delt vært (Apache). SSL er konfigureret, og følgende plugins er installeret.

  • Yoast SEO
  • Akismet

Vi har også Google Analytics, der kører i <body> af vores header.php-fil. Den eneste ændring, vi har lavet, er, at vi tilføjede et featured billede til standard dummy “Hello world!” Blogindlæg. Vi kører vores testwebsted gennem Google PageSpeed Insights og ud af kassen får vi en 69/100 desktop score og en 58/100 mobil score. Så vi har helt sikkert nogle forbedringer, der skal gøres her. Lad os grave gennem hver af disse for at se, hvordan vi kan rette dem.

Delt hosting score på Google PageSpeed Insights

Delt hosting score på Google PageSpeed Insights

Aktivér Komprimering

Vi starter med skrivebordet først, da mange af rettelserne også gælder for mobil. Den allerførste Google PageSpeed Insights-anbefaling, som vi skal løse, er advarslen om aktivering af kompression.

Aktivér komprimeringsadvarsel

Aktivér komprimeringsadvarsel

Ifølge Google, for at rette dette skal vi aktivere Gzip-komprimering. Desværre har den delte vært ikke dette automatisk aktiveret allerede på deres servere, så vi skal gøre det manuelt.

Alle moderne browsere understøtter og forhandler automatisk Gzip komprimering til alle HTTP-anmodninger. Aktivering af Gzip-komprimering kan reducere størrelsen af det overførte svar med op til 90%, hvilket kan reducere mængden af tid til at hente ressourcen væsentligt, reducere dataforbruget til klienten og forbedre tiden til først at køre dine sider.

Der er et par måder, du kan gøre ved at gøre dette. Den første og en af de letteste, er ved at bruge et caching-plugin, der understøtter aktivering af Gzip. WP Rocket tilføjer f.eks. Gzip-komprimeringsregler i din .htaccess-fil automatisk ved hjælp af mod_deflate-modulet. W3 Total Cache har også en mulighed for at aktivere dette for dig under dens præstationsafdeling.

Den anden måde at aktivere Gzip-komprimering på er ved at redigere .htaccess-filen. De fleste delte værter bruger Apache, hvor du blot kan tilføje koden nedenfor til din .htaccess-fil. Du kan finde din .htaccess-fil i roden af dit WordPress-websted via FTP.

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  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-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  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

Sørg for, at du føjer det under det nuværende indhold af din .htaccess-fil. Eksempel nedenfor:

Tilføj GZIP kompressionskode

Tilføj GZIP kompressionskode

Hvis du tilfældigvis kører på NGINX, skal du blot tilføje dette til din nginx.conf-fil.

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Et værktøj som Check Gzip Compression kan faktisk vise dig, hvordan mine byte blev gemt ved at aktivere Gzip-komprimering. Her er et eksempel nedenfor for, hvad vi gemte på vores testsite.

GZIP kompressionsbesparelser

GZIP kompressionsbesparelser

Hvis vi kører vores side via Google PageSpeed Insights igen, kan vi se, at Gzip-komprimeringsadvarslen er væk, og den har øget vores desktop score fra 69/100 til 80/100 og vores mobile score fra 58/100 til 67/100.

PageSpeed Indsigter efter GZIP kompression

PageSpeed Indsigter efter GZIP kompression

Optimer billeder

Den næste Google PageSpeed Insights-anbefaling, som vi skal løse, er billedvarslet Optimer billeder. Vores standard “Hello world!” Blogindlæg har et fremhævet billede, der viser denne fejl.

Optimer billedvarsling

Optimer billedvarsling

Dette er en meget vigtig og nyttig advarsel. Ifølge HTTP Archive, pr. November 2016 udgjorde billederne i gennemsnit 65% af en websides samlede vægt. Optimering af dine billeder kan være en af ​​de nemmeste måder at se præstationsforbedringer på din WordPress-hjemmeside.

Der er et par måder, du kan løse dette. Den første er at bruge et billedoptimeringsplugin. Et plugin kan faktisk gå igennem og bulk optimere hele dit WordPress mediebibliotek og optimere dem automatisk automatisk, når du uploader dem. Vi har faktisk en hel guide til, hvordan du optimerer dine WordPress-billeder. Nedenfor er et par populære billedoptimeringsprogrammer:

Disse plugins løser problemet, eller du kan også komprimere dem, før du uploader dem i et værktøj som Adobe Photoshop, Gimp eller Affinity Photo. Nedenfor er det fremhævede billede, der smider den advarsel op. Vi kan komprimere det , ved at både skalere det ned og sænke kvaliteten. Det er bedst at holde dine billeder så små som muligt. Dette billede var oprindeligt 2,32 MB, efter nedskalering og komprimering er det nu 99,38 kB. Husk, det er bedst at uploade billeder i målestok og ikke stole på CSS for at ændre størrelsen på dem. Dette bremser dit websted.

Komprimere billeder med Affinity Photo

Komprimere billeder med Affinity Photo

Hvis vi kører vores side via Google PageSpeed Insights igen, kan vi se, at advarslen om optimering af billeder er væk, og den har øget vores desktop score fra 80/100 til 88/100 og vores mobil score fra 67/100 til 73/100. Vi gør fremskridt!

PageSpeed Insights efter billedkomprimering

PageSpeed Insights efter billedkomprimering

Eliminer Render-blokering JavaScript og CSS i Over-the-fold indhold

Den næste Google PageSpeed Insights-anbefaling, som vi skal rette op på, er Eliminer render-blokering af JavaScript og CSS i overordnet indholdsadvarsel. Vi har faktisk et helt dybtgående indlæg på det render-blokerende JavaScript og CSS-problem.

Eliminer render-blokerende JavaScript og CSS advarsel

Eliminer render-blokerende JavaScript og CSS advarsel

Når en browser indlæser en webside, forhindrer JavaScript og CSS ressourcer normalt websiden i at blive vist, indtil de downloades og behandles af browseren. Nogle ressourcer skal downloades og behandles, før der vises noget. Men mange CSS- og JavaScript-ressourcer er betingede – det er kun anvendt i specifikke tilfælde – eller er simpelthen ikke nødvendigt for at gøre det overordnede indhold. For at producere den hurtigste mulige oplevelse for dine brugere, bør du forsøge at fjerne eventuelle renderingsblokerende ressourcer, der ikke er nødvendige for at vise det overordnede indhold.

Hvad angår Render-blocking Javascript har Google tre anbefalinger:

  •     Hvis du ikke har mange JavaScript, kan du indlejre det for at slippe af med denne advarsel. Du kan inline JavaScript med et plugin som Autoptimize. Dette gælder dog kun for meget små websteder. De fleste WordPress-websteder har nok JavaScript, hvor dette faktisk kan bremse dig ned.
  •     Det andet er at indlæse jeres JavaScript asynkront. Async Javascript downloader i hovedsagen filen under HTML-parsing og vil pause HTML-parseren til at udføre den, når den er færdig med at downloade.
  •     Den tredje er at udsætte dit JavaScript. Udlæsningsattributten henter også filen under HTML-parsning, men den udfører kun den efter, at parsningen er afsluttet. Også scripts med denne attribut udføres som vist på siden. Læs mere om forskellene mellem async og udsættelse.

I vores eksempel skal vi lave vores JavaScript-load asynkront. For at gøre dette skal vi bruge et gratis plugin kaldet Async JavaScript. Du kan downloade det fra WordPress-arkivet eller søge efter det inden for dit WordPress-dashboard under “Plugins> Add New.” Som skrevet af dette, har det i øjeblikket 9.000 + aktive installationer med en 4,2 ud af 5-stjerneklassifikation. I det væsentlige tilføjer plugin attributten “async” eller “defer” til alle JavaScript indlæst af WordPress wp_enqueue_script funktionen. Udvikleren har også en premium version tilgængelig, som giver dig mulighed for at vælge de scripts, du vil asyncere eller udsætte.

Async Eksempel

<script src="file1.js" async></script>

Udsætte Eksempel

<script src="file1.js" defer></script>

Efter installationen skal du blot gå ind i indstillingerne og aktivere Async JavaScript.

async javascript

Async JavaScript

Og for større websteder kan scriptudskydningen komme til nytte. Eller få premium-versionen af pluginet. Vi behøver det ikke i dette eksempel, men hvis du har et websted med en masse JavaScript, vil du sandsynligvis ende med ting, der bryder, hvis du blot indstiller alt til Async eller Defer. I så fald skal du fejlfinding med dem som du kan.

Async eksklusioner

Async eksklusioner

Hvis du ikke vil bruge et plugin til dette, er der et par andre alternativer. Tilføj venligst følgende kode til din functions.php-fil.

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Her er to yderligere indlæg, der diskuterer at tilføje async eller udsætte uden et plugin:

Vi kører vores side gennem Google PageSpeed Insights igen, og som du kan se, er Render-blokering JavaScript nu rettet, og vi er tilbage med Optimer CSS-varsling advarslen.

Optimer CSS Delivery advarsel

Optimer CSS Delivery advarsel

Du kan se, at det første CSS, vi skal optimere, er vores Google-skrifttyper (fonts.googleapis.com). CSS er som standard renderingsblokering, som inkluderer CSS, der kommer fra webskrifttyper. For at løse dette skal vi installere det gratis Deaktiver Google Fonts-plugin. Pluginforfatteren, Milan Dinić, har for nylig opdateret dette for at inkludere den nye Twenty Seventeen Libre Franklin skrifttype. Når du har installeret plugin’et, vil dine Google Fonts naturligvis bryde. Så du vil gå over til Google Fonts og tag indlægningskoden manuelt. Vi vælger de samme skrifttypevægte, der som standard indgår i Twenty Seventeen temaet.

Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
Google Fonts indlejret

Google Fonts indlejret

Derefter skal du tilføje det til din footer.php-fil lige før </ body> -taggen. Bemærk: Hvis du gør det, vil det resultere i FOUT, hvilket er det, de refererer til som flash af uformateret tekst. Men det vil også slippe af med det blokerende problem. Du bør beslutte på dit eget websted, hvis FOUT er en acceptabel brugeroplevelse for dine besøgende. Du kan også bruge Googles web skrifttyper.

Google font i WordPress footer

Google font i WordPress footer

Vi kører vores testwebsted gennem Google PageSpeed Insights igen og nu under Optimer CSS Delivery Warning, og nu har vi kun én ting tilbage, og det er style.css file.

Optimer CSS Delivery query strings advarsel

Optimer CSS Delivery query strings advarsel

En af de nemmeste måder at løse dette på er at bruge et gratis WordPress-plugin kaldet Autoptimize, udviklet af Frank Goossens.

Autoptimize WordPress plugin

Autoptimize WordPress plugin

Dette plugin er ret let, kun 176 KB for at være præcis. Som det skriver, har den for øjeblikket over 400.000 aktive installationer med en 4,5 ud af 5 stjerneklassifikationer. Pluginet hjælper dig med sammenkobling af dine scripts, minedrift, udgående overskrifter og evnen til at flytte stilarter til din overskrift og scripts til din sidefod. Dette plugin er fuldt kompatibelt med det Async JavaScript-plugin, der blev brugt tidligere.

Når du har installeret pluginet, skal du klikke på indstillingerne og vælge “Optimer CSS-kode”. Klik derefter på fanen Avanceret og aktiver også “Ingredient Inline CSS” og “Inline All CSS”.  Bemærk, afhængigt af hvilket tema du gør dette på Det kan ikke anbefales at bruge denne metode. For store sider kan inlining være dårligt, og i så fald ville det faktisk være bedre at bare ignorere den pågældende Google PageSpeed Insights-advarsel. Og husk at sammenkobling med HTTP/2 kan lejlighedsvis sænke dit websted nedad.

Optimer CSS kode

Optimer CSS kode

Vi anbefaler også at aktivere indstillingen HTML-kodeoptimering.

Optimer HTML Kode

Optimer HTML Kode

Hvis vi kører vores websted via Google PageSpeed Insights igen, kan vi se, at Eliminate Render-Blocking JavaScript og CSS i ovenstående indholds advarsel er nu helt væk! Det løser også Minify CSS-advarslen, der var længere undervejs og ikke engang kom til det endnu. Vi har øget vores desktop score fra 88/100 til 92/100 og vores mobil score fra 73/100 til 89/100. Vi er der næsten.

PageSpeed Insights efter JS og CSS optimering

PageSpeed Insights efter JS og CSS optimering

Udnyt Browser Caching

Den næste Google PageSpeed Insights-anbefaling, som vi har brug for at rette, er advarslen til cachelagringsbrowser. Vi har et helhedsdypende indlæg om udnyttelsen af browserens caching-problem, da det påvirker WordPress.

Udnyt browserens caching advarsel

Udnyt browserens caching advarsel

Den mest almindelige årsag til, at gearing for browserens caching-advarsel udløses, er, at din webserver ikke har de relevante overskrifter på plads. I skærmbilledet ovenfor kan du se, at alle vores interne scripts har et udløb, er ikke angivet advarsel. Når det kommer til caching, er der to primære metoder, der bruges, cache kontrolhoveder og udløber overskrifter. Mens Cache-Control-overskriften tænder klientsidens caching og angiver en ressurses maksimal alder, bruges udgangshovedet til at angive et bestemt tidspunkt, hvor ressourcen ikke længere er gyldig.

Du behøver ikke nødvendigvis at tilføje begge overskrifter, da det er lidt overflødigt. Cache-Control er nyere og normalt den anbefalede metode, men nogle webpræstationsværktøjer som GTmetrix kontrollerer stadig for Expires-overskrifter. Dette er alle eksempler, du kan ændre filtyper, udløbe tider osv. baseret på dine behov. Her er nogle muligheder nedenfor. Vi tilføjer tilføjelsesrubrikker til Apache på vores fælles vært for denne vejledning.

Tilføjelse af cache control header i Nginx

Du kan tilføje cache kontrol overskrifter i Nginx ved at tilføje følgende til din server placering eller blok server server.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Tilføjelse udløber overskrifter i Nginx

Du kan tilføje Expires-overskrifter i Nginx ved at tilføje følgende til din serverblok. I dette eksempel kan du se, hvordan du angiver forskellige udløbstider baseret på filtyper.

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Tilføjelse af cache control header i Apache

Du kan tilføje Expires-overskrifter i Nginx ved at tilføje følgende til din serverblok. I dette eksempel kan du se, hvordan du angiver forskellige udløbstider baseret på filtyper.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"

Tilføje Expires-overskrifter i Apache

Du kan tilføje Expires-overskrifter i Apache ved at tilføje følgende til din .htaccess-fil.

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

Husker du at vi aktiverede Gzip-komprimering tidligere? Nedenfor er, hvad vores .htaccess-fil nedenfor ser ud efter at have tilføjet de udløber-overskrifter. Vi placerer det simpelthen under kompressionsblokken.

Expire headers kode

Expire headers kode

Vi kører vores testwebsted via Google PageSpeed Insights igen og nu under advarselsbrowserens caching-advarsel står vi alene med en ting, og dette er vores Google Analytics-script. Dette er lidt ironisk at se, da dette er Googles eget script. Problemet er, at de sætter en lav 2 timers cache-tid på deres aktiver, som det ses i skærmbilledet nedenfor. De gør sandsynligvis det, fordi hvis de af en eller anden grund skal ændre noget på deres ende, ønsker de at alle brugere får ændringen hurtigst muligt. Men der er en måde at omgå dette, og det er ved at hosting Google Analytics script lokalt. Vær opmærksom på, at dette ikke understøttes af Google.

Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Tjek vores funktioner
Udnyt browserens caching med Google Analytics

Udnyt browserens caching med Google Analytics

Der er et stort gratis plugin kaldet Complete Analytics Optimization Suite, oprettet af Daan van den Bergh, som giver dig mulighed for at være vært for Google Analytics lokalt på din WordPress-hjemmeside.

caos-wordpress-plugin

CAOS WordPress plugin

Du kan downloade Complete Analytics Optimerings Suite fra WordPress-depotet eller ved at søge efter det under “Tilføj nyt” plugins i dit WordPress dashboard. Som det skriver, har pluginet i øjeblikket 10.000 + aktive installationer med en 5 ud af 5 stjerneklassifikation. Med plugin kan du være vært for din Google Analytics JavaScript-fil (analytics.js) lokalt og holde den opdateret ved hjælp af wp_cron (). Andre funktioner inkluderer at være i stand til nemt at anonymisere din besøgendes IP-adresse, indstille en tilpasset afvisningshastighed og placering af scriptet (overskrift eller sidefod).

Du skal blot installere pluginet, indtaste dit Google Analytics Tracking ID, og plugin’et tilføjer den nødvendige sporingskode til Google Analytics til din WordPress-hjemmeside, downloader og gemmer filen analytics.js til din server og holder den opdateret ved hjælp af et skemalagt script i wp_cron ). Vi anbefaler også at indstille den til at indlæse i sidefoden. Bemærk: Dette plugin fungerer ikke sammen med andre Google Analytics WordPress-pluginss.

lokal google analytics

Lokal Google Analytics

Hvis vi kører vores websted via Google PageSpeed Insights igen, kan vi se, at advarselbrowserens caching advarsel nu er helt væk! Og vi har hævet vores desktop score fra 92/100 til 97/100 og vores mobile score fra 89/100 til 96/100. Så tæt at vi næsten kan smage det.

PageSpeed Insights efter fastsættelse af gearing browser caching

PageSpeed Insights efter fastsættelse af gearing browser caching

Reducer serverens responstid

Den næste Google PageSpeed Insights-anbefaling, som vi har brug for at rette, er Advarsel om nedsat serverrespons. Mange gange sker dette, når nogen er på en langsom budget delt hosting plan. Serveren er ikke hurtig, og Google ved det. Så for at løse dette skal vi implementere nogle typer caching for at fremskynde tingene. Der er mange gode plugins derude. I vores eksempel bruger vi det gratis Cache Enabler plugin fra teamet over på KeyCDN.

Cache Enabler WordPress plugin

Cache Enabler WordPress plugin

Ved skrivning af denne cache Enabler har 30.000+ aktive installationer været med en 4,6 ud af 5 stjerneklassifikation. Det er et letvægts caching-plugin til WordPress, der gør dit websted hurtigere ved at generere statiske HTML-filer plus WebP-support. Der er ingen indstillinger at skulle aktivere, bare installer og du er kørende. Dette plugin er fuldt kompatibelt med Async JavaScript og Auto Optimize plugins, der tidligere blev brugt. Hvis du vil have endnu mere fart, anbefales det at tilføje det avancerede uddrag til at omgå PHP.

Hvis vi kører vores websted via Google PageSpeed Insights igen, kan vi se, at den reducerede server-responstid er nu helt væk! Og vi har øget vores desktop score fra 97/100 til 99/100 og vores mobil score fra 96/100 til 99/100. Vi er ved at krydse målstregen.

PageSpeed Insights efter responstids fix

PageSpeed Insights efter responstids fix

Typisk vil du ikke se anbefalingen “Sænkning af serverens svartid” her hos Kinsta. Men det er vigtigt at bemærke, at der er snesevis af potentielle faktorer, der kan bremse svaret fra din server: herunder langsom database forespørgsler fra plugins, rammer, biblioteker, ressource CPU sult eller hukommelse sult. Vi bruger New Relic til at hjælpe kunder med at bestemme, hvor dette kan stamme fra.

Minfy JavaScript

Den sidste Google PageSpeed Insights-anbefaling, som vi skal løse, er advarslen om Minify JavaScript.

Minify JavaScript advarsel

Minify JavaScript advarsel

For at løse dette skal vi gå tilbage til Autoptimize plugin-indstillingerne og blot aktivere indstillingen Optimer JavaScript-kode. Da du har et cache-plugin kørende, skal du muligvis også rydde cachen efter at have gjort det for at se resultaterne.

Optimer JavaScript kode’

Optimer JavaScript kode’

Og det er det! Vi har nu med succes taget WordPress Twenty Seventeen tema fra 69/100 til 100/100 på både mobil og desktop på en lavbudget delt vært.

100/100 Google PageSpeed Insights score

100/100 Google PageSpeed Insights score

Her er de mobile scoringer. Vi behøvede ikke at gøre noget særligt for mobil. At få desktop versionen til 100/100 forbedrer automatisk vores mobilversion og brugeroplevelsesresultater til 100/100.

100/100 Google PageSpeed Insights mobil score

100/100 Google PageSpeed Insights mobil score

Vi har også en før og efter med hurtighedstest fra Pingdom.

Forud for PageSpeed Insights Optimizations Speed Test

Her er en hastighedstest fra Pingdom, inden der blev foretaget optimeringer på den delte vært.

Speed test før PageSpeed optimeringer

Speed test før PageSpeed optimeringer

Efter PageSpeed Insights Optimizations Speed Test

Her er en hastighedstest fra Pingdom efter optimeringer blev udført på den delte vært.

Speed test efter PageSpeed optimeringer

Speed test efter PageSpeed optimeringer

100/100 i Google PageSpeed Insights With Kinsta

Vores andet testsite er konfigureret nøjagtig på samme måde som den 1. Det er simpelthen på et andet domæne. Vi har WordPress 4.7 med det Twenty Seventeen tema, der kører på vores Kinsta servere (NGINX). SSL er konfigureret, og følgende plugins er installeret.

  • Yoast SEO
  • Akismet

Vi har Google Analytics, der kører i <body> af vores header.php-fil. Den eneste ændring, vi har lavet, er at tilføje et fremhævet billede til standard dummy “Hej verden!” Blog-indlæg. Vi kører vores testwebsted gennem Google PageSpeed Insights ​​og ud af kassen får vi en 73/100 desktop score og en 63/100 mobil score. Det er vigtigt at bemærke, at i sammenligning med webstedet for delt værtsside er der allerede mange advarsler, der er rettet såsom:

  •     Aktiver kompression (Kinsta har allerede GZip aktiveret på alle servere, ikke nødvendigt at aktivere)
  •     Reducerer serverens responstid (Kinsta springer allerede hurtigt, allerede godt inden for Googles acceptable parametre uden nogen optimeringer)
  •     Udløber overskrifter (Ingen grund til at aktivere, fordi Kinsta har caching overskrifter aktiveret på serverniveau)
PageSpeed Insights med administreret WordPress vært

PageSpeed Insights med administreret WordPress vært

På Kinsta vil du gerne kunne følge nogle få af de samme anbefalinger som før:

Det tog os mindre end halvdelen af tiden at få vores site på Kinsta til en 100/100 score, fordi der var simpelthen færre trin til at begynde med.

100/100 PageSpeed Insights med Kinsta

100/100 PageSpeed Insights med Kinsta

Her er scoren for mobil

100/100 PageSpeed Insights mobil med Kinsta

100/100 PageSpeed Insights mobil med Kinsta

Vi har også en før og efter med hurtighedstest fra Pingdom.

Forud for PageSpeed Insights Optimizations Speed Test

Her er en hastighedstest fra Pingdom, inden der blev foretaget optimeringer på Kinsta. Bemærk, at det uoptimerede websted på Kinsta var over 200 ms hurtigere end den optimerede fælles vært!

Speed test før PageSpeed optimeringer

Speed test før PageSpeed optimeringer

Efter PageSpeed Insights Optimizations Speed Test

Her er en hastighedstest fra Pingdom efter optimeringer blev lavet på Kinsta.

Speed test efter PageSpeed optimeringer

Speed test efter PageSpeed optimeringer

Yderligere PageSpeed forbedringer

Vi optimerer til Google PageSpeed Insights i denne vejledning. Faktisk kunne vi have barberet belastningstider ned yderligt, hvis vi gjorde følgende:

Og selvfølgelig har vi mange gode tips i vores nybegynderguide til websitets hastighedsoptimering.

Opsummering

Pointen med denne vejledning var, at bedre forklare og forstå, hvad advarslerne for Google PageSpeed ​​Insights betyder, og hvad du kan gøre for at rette dem. Når du forstår disse bedre, kan du begynde at anvende nogle af disse strategier til dine større websteder. Selvfølgelig vil du med store sider sikkert ikke score 100/100 perfekt, hvilket er helt OK! Eller hvis du gør det, vil det tage noget arbejde. Vi anbefaler simpelthen at implementere, hvad du kan, og du vil højst sandsynligt se hastighedsforbedringer. Husk at hastigheden på dit websted, sammen med opfattet ydeevne, er det der virkelig betyder noget. Du skal ikke bekymre dig for meget om scoringer.

Det er også vigtigt at bemærke forskellene ovenfor, når det gælder delt hosting og Kinstas finjusterede WordPress-miljø. Vi er hurtigere end de fleste delte værter efter optimering. Du bør spørge dig selv, hvor meget er din tid værd? Hvis du bare vil komme ud af kassen, kan Kinstas administrerede hosting-miljø gøre det for dig.

Næste gang en klient beder dig om at forbedre deres score, har du nu nogle up-to-date tips om, hvordan du gør det. Og hvis vi savnede noget vigtigt, så skriv til os nedenfor i kommentarerne. Hold øje med større case-studier med Google PageSpeed ​​Insights, som vi vil gøre i fremtiden.