Et dybt dyk ned i GTmetrix Speed Test Tool

Du har muligheder som websiteejer, når det kommer til at køre hastighedstest for at kontrollere ydeevnen. Tidligere tog vi et dybdegående kig på Pingdom-værktøjet. I dag vil vi dykke ned i, hvordan vi bedre kan bruge og forstå dataene fra det populære website speed test tool GTmetrix. Værktøjer som dette er afhængige af klassificeringssystemer og score sammen med advarsler om, hvad der kan være galt på dit websted. Nogle gange kan disse være ligefrem forvirrende, og det kan hjælpe dig med ikke kun at øge dine score, men også ydeevnen på dit websted, hvilket er det, der virkelig betyder noget, hvis det tager lidt tid at fortolke, hvad de faktisk betyder.

GTmetrix blev udviklet af GT.net, et firma med base i Canada, som et værktøj til deres hostingkunder til let at bestemme ydelsen på deres site. Udover Pingdom er det sandsynligvis et af de mest kendte og brugte speed test tools på nettet i dag! Faktisk er årsagen til, at vi skriver dette, at vi har mange Kinsta-kunder, der altid spørger os, hvordan vi skal følge de råd, de ser på deres GTmetrix-rapporter. Sammenlignet med andre udviklerværktøjer er GTmetrix ret nem at bruge, og begynderen kan hente det ret hurtigt. Det bruger en kombination af Google PageSpeed Insights og YSlow til at generere scores og anbefalinger.

Indstillinger for GTmetrix-analyse

Basis versionen af GTmetrix er helt gratis, og du kan få adgang til en række muligheder ved blot at tilmelde dig en konto. De har også premiumplaner, men i dagens indlæg bruger vi den gratis version. Hvis du har en konto, kan du bruge til at angive et antal yderligere analysemuligheder.

Den første er muligheden for at vælge den lokation, hvor du vil teste din URL. Den fysiske placering, du vælger, er faktisk meget vigtig, da den vedrører, hvor dit websted faktisk er hostet. Jo mindre ventetid, jo hurtigere er dine indlæsningstider. Aktuelt tilgængelige placeringer inkluderer:

Dallas, USA
Hong Kong, Kina
London, Storbritannien
Mumbai, Indien
Sydney, Australien
São Paulo, Brasilien
Vancouver, Canada

Du kan vælge, hvilken browser du vil bruge. Du kan teste med Chrome (Desktop) og Firefox (Desktop). Mobilversioner er tilgængelige i deres premiumplaner. De giver dig også mulighed for at ændre forbindelseshastigheden, hvilket betyder, at du kan simulere forskellige forbindelsestyper for at se, hvordan de påvirker dine sidebelastninger.

Yderligere muligheder inkluderer muligheden for at oprette en video. Dette kan hjælpe dig med at fejle problemer, da du kan se, hvordan siden gengives. AdBlock Plus er en god funktion. Hvis du kører et tredjeparts-annoncenetværk såsom Google Adsense, kan du aktivere denne mulighed for at se den fulde indflydelse på annoncer på dine indlæsningstider.

Yderligere muligheder inkluderer stop af test onload (som vi vil dykke ned i senere), at kunne sende en cookie sammen med din anmodning, bruge HTTP-godkendelse, muligheden for at allowliste og blockliste URL’er, skærmopløsning og enhedens device pixel ratio og tilsidesættelse af brugeragent.

Analyse med GTmetrix Speed Test Tool

En webside består af forskellige aktiver, såsom HTML, JavaScript, CSS og billeder. Hver af disse genererer anmodninger om at gengive det, du ser på dit websted. Jo flere anmodninger du har, jo langsommere indlæses dit websted typisk. Det er ikke altid tilfældet, men det er sandt for det meste.

Nedenfor skal vi opdele hver GTmetrix-sektion og forklare mere detaljeret, hvad informationen betyder, da den vedrører din websides overordnede ydeevne, og hvad du skal gøre ved anbefalingerne. Husk ikke at blive for besat på scores, men snarere at foretage faktiske hastighedsforbedringer på dit websted.

GTmetrix-oversigt (præstationsscorer og detaljer)

Når du kører dit WordPress-websted gennem GTmetrix, genererer det en præstationsrapport, der inkluderer din “GTmetrix-karakter” og “Web Vitals”.

GTmetrix-karakteren beregnes ud fra to målinger – Ydeevne og struktur.

GTmetrix Performance er performance score fra Lighthouse site audit tool
GTmetrix Structure er en proprietary performance metric, der måler den samlede præstation for en side.

I 2020 introducerede Google et standardiseret sæt af webpræstationer og brugeroplevelsesmålinger kaldet Web Vitals. Web Vitals består af en række målinger, men dem, som GTmetrix tager højde for, er Largest Contentful Paint (LCP), Total Blocking Time (TBT) og Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP) er den tid, det tager for den største del af din side at indlæse. For nogle websteder kan LCP være et stort hero billede, mens LCP på andre websteder kan henvise til brødteksten.
Total Blocking Time (TBT) er den tid, en side er blokeret, før en bruger kan interagere med den. Render-blokerende CSS og JS kan have en enorm indvirkning på TBT.
Cumulative Layout Shift (CLS) refererer til forskydning af elementer, mens en side indlæses. For eksempel kan layoutet på en side, der indeholder indlejrede tweets, skifte dramatisk, når siden indlæses.

I vores eksempel bruger vi vores case study domæne kinstalife.com, som er hostet på Kinsta. I vores første hastighedstest registrerede vores site følgende statistikker.

GTmetrix klasse – B
GTmetrix Performance – 85%
GTmetrix-struktur – 83%
LCP – 1.0s
TBT – 0 ms
CLS – 0

GTmetrix hastighedstest til kinstalife.com.

Derefter kørte vi en ekstra test, og nu er vores GTmetrix-karakter “A”! Hvad handler det om? Du bemærker måske også dette, hvis du kører dit websted gennem GTmetrix-hastighedstestværktøjet flere gange. En af grundene til, at dette sker, er på grund af caching, både DNS-caching og servercaching. Find ud af hvorfor længere nedenfor i vores vandfaldsanalyse.

GTmetrix-oversigtssiden indeholder også en hastigheds-visualisering, der viser en tidslinje for nøglehændelser under en sideindlæsning. I skærmbilledet nedenfor kan du se TTFB, FCP, LCP, onload-tid, tid til interaktiv og fuldt indlæst tid for kinstalife.com.

Nederst på oversigtssiden er der også sektioner med "Top issues" og "Page details". Under "Top issues" kan du se en liste med højprioritetselementer, der skal rettes, mens "Page details" giver opdeling af procent og filstørrelse på din side. — Nederst på oversigtssiden er der også sektioner med “Top issues” og “Page details”. Under “Top issues” kan du se en liste med højprioritetselementer, der skal rettes, mens “Page details” giver opdeling af procent og filstørrelse på din side.

Performance

Derefter er GTmetrix “Performance” -fanen, der viser et antal nyttige metrics, der kommer fra Lighthouse-præstationsdata. Ud over LCP, TBT og CLS vist på oversigtssiden viser afsnittet “Performance Metrics” også Speed Index (SI), Time to Interactive (TTI) og First Contentful Paint (FCP)

GTmetrix Lighthouse-præstationsmålinger.

Mens afsnittet “Performance Metrics” ikke viser dig nøjagtigt, hvad du skal rette, giver det et godt overblik over, hvilke vigtige user experience metrics du kan forbedre.

Længere ned på siden viser GTmetrix også et par mere traditionelle “Browser Timing” -statistikker inklusive Onload Time, Time to First Byte, Fully Loaded Time og meget mere. Tidligere var disse traditionelle målinger meget vigtige. Da Google baner vejen for standardiserede metrics med Web Vitals, anbefaler vi dog at optimere til dem i stedet. I de fleste tilfælde vil du opdage, at optimering til Web Vitals også vil resultere i gode browser timing metrics.

Structure

Fanen “Struktur” i GTmetrix er hvor du kan se specifikke problemer, der påvirker ydeevnen på dit websted. Denne side er meget nyttig, fordi den giver dig handlingsmæssige oplysninger som “eliminere render-blokerende ressourcer” og “minify CSS” for at begynde at optimere dit websted.

Vi vil forsøge at dække de mest almindelige og populære, som vi ser WordPress-webstedsejere kæmper med. Sørg for også at bogmærke dette indlæg, da vi konstant opdaterer det. Generelt, hvis du forbedrer disse på dit websted, bør du se en stigning i ydeevnen.

Server skalerede billeder

Når det kommer til at arbejde med billeder på dit websted, skal du altid prøve at uploade dem i skala og ikke lade CSS ændre størrelsen på dem. Hvis du ikke gør det, ender du med anbefalingen om serve scaled images. Hvis du bruger WordPress, ændres det som standard dine billeder, når de uploades til mediebiblioteket. Disse indstillinger kan findes under “Indstillinger> Medier.” Du vil sikre dig, at den maksimale bredde er tæt på bredden på dit websted. På denne måde forsøger CSS ikke at ændre størrelsen på dit billede, så det passer ind. Du kan også automatisk ændre størrelsen på dem med et image optimization plugin.

Inline Small CSS

Integrering af din CSS anbefales normalt ikke, da det vil øge den samlede downloadstørrelse på din sideanmodning. Men hvis dit websted er lille med minimale anmodninger, kan det forbedre din præstation.

For nemt at inline din CSS kan du bruge et gratis plugin som Autoptimize. Du skal blot kontrollere “Inline all CSS?” og sørg for, at du har ekskluderet de ekstra CSS-filer, som du ikke integrerer.

Inline lille JavaScript

Ligesom med indlejring af lille CSS gælder den samme for indlejring af lille JavaScript. Det anbefales normalt ikke, da det vil øge den samlede downloadstørrelse på din sideanmodning. Men hvis dit websted er lille med minimale anmodninger, kan det forbedre din præstation. Igen kan du bruge JavaScript-indstillingerne for Autoptimize.

Udnyt browsercaching

Udnyt caching i browseren er en meget almindelig anbefaling, som folk kæmper med. Dette genereres på grund af ikke at have de korrekte HTTP-cache header på din webserver. Se vores dybdegående indlæg om, hvordan du løser advarslen om gearing af browserens caching. Du kan kun rette dette på de ressourcer, du kontrollerer. For eksempel, hvis du ser dette på tredjeparts annoncenetværk, er der intet du kan gøre.

Server ressourcer fra en konsekvent URL

Hvis du ser serverressourcerne fra en ensartet URL, er det mest sandsynligt, at du har identiske ressourcer, der serveres fra den samme URL. Mange gange kan dette ske, når der er forespørgselsstrenge involveret. Tjek, hvordan du fjerner forespørgselsstrenge fra statiske ressourcer. Når de er væk, skal det ikke længere skulle indlæses to gange.

Udskyde parsing af JavaScript

JavaScript og CSS er som standard gengivelsesblokerende. Dette betyder, at de kan forhindre, at websiden vises, indtil de downloades og behandles af browseren. Udskydelsesattributten fortæller browseren at holde ud med at downloade ressourcen, indtil HTML-parsing er afsluttet. Et par nemme måder at løse dette på er at bruge de gratis Autoptimize– eller Async JavaScript plugins. Sørg for at tjekke vores dybdegående indlæg om, hvordan du fjerner render blocking JavaScript og CSS.

For en detaljeret forklaring, læs: Sådan udsættes parsing af Javascript-advarsel i WordPress (4 metoder).

Minimer CSS og JavaScript

Minification fjerner i det væsentlige alle unødvendige tegn fra kildekoden uden at ændre dens funktionalitet. Dette kan omfatte linjeskift, tom plads, indrykninger osv. Ved at gøre dette kan det spare byte data og fremskynde download, parsing og udførelsestid.

Igen er det gratis Autoptimize plugin fantastisk til dette. Du skal blot sikre dig, at “Optimer JavaScript-kode” og “Optimer CSS-kode” begge er markeret. Hvis du har et stort websted, vil du muligvis også lege med de avancerede indstillinger nedenunder, da nogle kan skade ydeevnen på dit websted. Integrering eller kombination af CSS og JavaScript på store websteder anbefales normalt ikke. Det er her, hvor kraften i HTTP/2 spiller ind.

Optimer automatisk minify CSS og JavaScript

Hvis du er Kinsta-kunde, kan du drage fordel af kode minifikationsfunktionen, der er indbygget direkte i MyKinsta-dashboardet. Dette giver kunderne mulighed for hurtigt og nemt at aktivere automatisk CSS- og JavaScript-minifikation med et enkelt klik, hvilket fremskynder deres websteder uden manuel indsats.

Optimer billeder

Ifølge HTTP Archive udgør billeder fra april 2017 i gennemsnit 66% af den samlede websides vægt. Så når det kommer til at optimere dit WordPress-sted, er billeder langt det første sted, du skal starte! Det er vigtigere end scripts og skrifttyper.

I en perfekt verden skal hvert billede komprimeres og optimeres, før det uploades til WordPress. Men desværre er det bare ikke realistisk. På grund af dette anbefaler vi at bruge et godt billede optimerings-plugin. Dette hjælper automatisk med at komprimere dine billeder, ændre størrelsen på dem og sikre, at de er lette og hurtigt indlæses på dit websted. Se vores dybdegående indlæg om, hvordan du optimerer billeder til internettet.

Reducer den oprindelige servers responstid

For WordPress er den største synder for langsomme indledende serverresponstider manglen på sidecaching. Uden sidecaching bruger WordPress PHP til dynamisk at oprette sider til hver enkelt anmodning, hvilket betyder, at det hurtigt kan blive overvældet af anmodninger. Når sidecaching er aktiveret, kan dit websted servere prægenererede HTML-filer, hvilket er meget hurtigere og mere skalerbart end at bruge PHP til at udføre hver sideanmodning.

Hvis du er hosted på Kinsta, behøver du ikke bekymre dig om sidecaching, fordi vi tager os af det for dig med vores Nginx-konfiguration. Hvis din WordPress-vært ikke understøtter sidecaching, kan du installere et caching-plugin som WP Rocket eller W3 Total Cache. For at reducere serverens responstid yderligere anbefaler vi at integrere Cloudflare APO med dit WordPress-websted. Denne innovative optimeringstjeneste fra Cloudflare distribuerer dit websteds HTML-sider over hele verdenen, hvilket kan reducere serverens responstid globalt.

Minimer HTML

Ligesom CSS og JavaScript kan HTML også minimeres for at fjerne unødvendige tegn og spare dig for byte af data for at fremskynde udførelsestiden.

Det gratis Autoptimize-plugin er også fantastisk til dette. Du skal blot aktivere indstillingen “Optimer HTML-kode”.

Aktivér GZIP-komprimering

GZIP er et filformat og en softwareapplikation, der bruges til filkomprimering og dekompression. GZIP-komprimering er aktiveret på serversiden og giver mulighed for yderligere reduktion i størrelsen på dine HTML-, typografiark og JavaScript-filer. Det fungerer ikke på billeder, da disse allerede er komprimeret på en anden måde. Nogle har set op til 70% reduktioner på grund af kompression. Det er sandsynligvis en af de nemmeste optimeringer, du kan foretage, når det kommer til WordPress. Bemærk: GZIP-komprimering er som standard aktiveret på alle Kinsta-servere.

For at aktivere GZIP-komprimering i Apache skal du blot tilføje følgende kode til din .htaccess-fil.

<IfModule mod_deflate.c>
# 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
</IfModule>

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

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Sørg også for at tjekke vores dybdegående indlæg om, hvordan du aktiverer GZIP-komprimering.

Minimer redirects

Minimering af HTTP-redirects fra en URL til en anden skærer ud yderligere RTT’er og ventetid for brugerne. Tjek vores indlæg om WordPress redirections, hvor vi opdagede, at 2 bad redirects øgede webstedets belastningstider med 58%! Almindelig og enkel, WordPress redirects bremser dit websted. Derfor er det værd at tage sig tid til at minimere antallet af omdirigeringer, der er besøgende til din webstedsoplevelse.

Angiv en cache-validator

Angiv en anbefaling om cache-validering vises, når der mangler HTTP caching headers. Disse skal medtages i alle originalserver respons, da de begge validerer og indstiller længden på cachen. Hvis overskrifterne ikke findes, genererer den en ny anmodning om ressourcen hver gang, hvilket øger belastningen på din server. Brug af cache-headere sikrer, at efterfølgende anmodninger ikke behøver at indlæses fra serveren, hvilket sparer båndbredde og forbedrer brugerens ydeevne. Og husk, du kan ikke rette dette på tredjepartsressourcer, som du ikke kontrollerer.

Der er en række forskellige HTTP-caching-headere involveret, der kan bruges til at rette denne anbefaling. Se vores dybdegående indlæg om, hvordan du angiver en cache-validator.

Angiv billeddimensioner

Ligesom du ikke burde lade CSS ændre størrelsen på dine billeder, skal du også angive billeddimensioner. Dette betyder at inkludere bredden og højden i din HTML-kode.

Ukorrekt

<img src="https://domain.com/images/image1.png">

Korrekt

<img src="https://domain.com/images/image1.png" width="200" height="100">

Fjern query strings fra statiske ressourcer

Dine CSS- og JavaScript-filer har normalt filversionen i slutningen af deres URL’er, såsom domain.com/style.css?ver=4.6. Nogle servere og proxyservere kan ikke cache query strings, selvom der findes en cache-kontrol: public header. Så ved at fjerne dem kan du nogle gange forbedre din caching. Dette kan let gøres med kode eller gratis WordPress-plugins.

Se vores dybdegående indlæg om, hvordan du fjerner query strings fra statiske ressourcer. Og husk, du kan ikke rette dette på tredjepartsressourcer, som du ikke kontrollerer.

Fjern query strings, fra statiske ressourcer

Angiv en variant: Accept-kodende header

Dette er en HTTP-header og skal inkluderes i ethvert originalsvarrespons, da det fortæller browseren, om klienten kan håndtere komprimerede versioner af indholdet. Normalt, når GZIP-komprimering er aktiveret, er dette også rettet. Men sørg for at tjekke vores dybdegående indlæg om, hvordan du løser det angiv en variér: accept encoding header. Og igen kan du ikke rette dette på tredjepartsressourcer.

Angiv en variabel: accept encoding header

GTmetrix vandfaldskort

GTmetrix vandfaldsdiagrammet viser alle de individuelle anmodninger på din webside (som vist nedenfor). Du kan derefter analysere hver anmodning for at se, hvad der forårsager forsinkelser og ydeevneproblemer på dit websted. Nedenfor er en mere detaljeret oversigt og / eller definition af, hvad hver af farverne betyder på hver anmodning.

Blokering (brun)

Når en browser indlæser en webside, forhindrer JavaScript og CSS-ressourcer normalt, at websiden vises, indtil de downloades og behandles af browseren. Denne tidsforsinkelse vises som blokering i GTmetrix vandfaldsdiagrammet. Se vores dybdegående indlæg om, hvordan du fjerner render blocking JavaScript og CSS for at få flere oplysninger.

DNS Lookup (Teal)

Du kan tænke på DNS lookup som en telefonbog. Der er servere kaldet Domain Name Servers, der indeholder oplysningerne om dit websted, og hvilken IP den skal dirigeres til. Når du først kører dit websted gennem GTmetrix, udfører det et nyt opslag, og det skal spørge DNS-posterne for at få IP-oplysningerne. Dette resulterer i yderligere ekstra opslagstid.

Når du kører dit websted gennem GTmetrix en anden gang, cachelager det DNS, fordi det allerede kender IP-oplysningerne og ikke behøver at foretage opslag igen. Dette er en af grundene til, at du måske synes, dit websted vises hurtigere efter at have kørt det igennem GTmetrix flere gange. Som du kan se på skærmen nedenfor, på den 2. test, vi kørte, er DNS-opslagstiden på den oprindelige DOC-belastning 0 ms. Dette er et område, som mange mennesker fejlagtigt fortolker! Vi anbefaler at køre din test flere gange og tage gennemsnittet, medmindre du vil have DNS som en del af din rapport, i hvilket tilfælde du kan tage den første test.

Det samme gælder for dine aktiver (JavaScript, CSS, billeder), hvis du bruger et CDN. En CDN-cache fungerer meget som DNS, når den er cache, er den så meget hurtigere ved på hinanden følgende belastninger. Et andet tip til at fremskynde DNS er at bruge DNS-forudindhentning. Dette gør det muligt for browseren at udføre DNS-opslag på en side i baggrunden. Du kan gøre det ved at tilføje nogle linjer med kode til overskriften på dit WordPress-websted. Se nogle eksempler nedenfor.

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

Eller hvis du kører WordPress version 4.6 eller nyere, kan du bruge ressource hints. Udviklere kan bruge filteret wp_resource_hints til at tilføje brugerdefinerede domæner og webadresser til dns-prefetch, prefonnect, prefetch eller prerender.

Tilslutning (grøn)

Forbindelses tiden i GTmetrix henviser til TCP-forbindelsen eller den samlede tid, der kræves for at oprette en TCP-forbindelse. Du behøver ikke rigtig forstå, hvordan dette fungerer, men dette er simpelthen en kommunikationsmetode mellem host/klienten og serveren, der skal finde sted.

Afsendelse (rød)

Sendetiden er simpelthen den tid, det tager for webbrowseren at sende data til serveren.

Venter (lilla)

Ventetiden i GTmetrix refererer faktisk til tiden til første byte, også kendt som TTFB i nogle værktøjer. TTFB er en måling, der bruges som en indikation af, hvordan en webserver eller anden netværksressource reagerer. Generelt er alt under 100 ms acceptabelt og godt TTFB. Hvis du nærmer dig området 300-400 ms, har du muligvis noget forkert konfigureret på din server, eller det er måske tid til at opgradere til en bedre webstak. Som du kan se i vores test nedenfor var det cirka 100 ms, hvilket er fantastisk.

Nogle nemme måder at reducere din TTFB på er at sikre, at din vært har den rette caching på plads og bruger et CDN. Se vores dybdegående indlæg på alle måder at reducere TTFB på dit WordPress-websted.

Modtagelse (grå)

Modtagelsestiden er simpelthen den tid, det tager for webbrowseren at modtage data fra serveren.

Begivenhedstider

Hver gang du anmoder om en side, har den event timing, hvor ting gengives og indlæses.

Første maling (grøn linje): Det første punkt, hvor browseren foretager nogen form for gengivelse på siden, såsom at vise baggrundsfarven.
DOM Loaded (Blue Line): Det punkt, hvor DOM (Document Object Model) er klar.
Onload (rød linje): Når behandlingen af siden er afsluttet, og alle ressourcerne på siden (billeder, CSS osv.) Er downloadet.
Fuldt indlæst (lilla linje): Punktet efter Onload-begivenheden udløses, og der har ikke været nogen netværksaktivitet i 2 sekunder.

HTTP response headers

Du kan også klikke på en individuel anmodning for at se, hvad de kalder HTTP-response headers. Dette giver værdifuld information. På skærmen nedenfor kan vi med det samme se ting som gzip er aktiveret på webserveren, den kører over HHVM, den serveres fra cache (HIT, ville vise MISS ellers), cache-control headers, serverarkitektur (dette er ikke altid synlig), expires headers, browserens brugeragent og mere.

En anden ting at være opmærksom på er, at GTmetrix-værktøjet understøtter HTTP/2, i modsætning til Pingdom, fordi det i øjeblikket bruger Chrome 58+ til at køre sine tests. Chrome tilføjede HTTP/2-understøttelse i version 49. Så husk, når du vælger, hvilket speed test tool der skal bruges.

Video

For at hjælpe dig med at debugge visuelle fejl og frontend-ydelsesproblemer inkluderer den nyeste version af GTmetrix fanen “Video”. Når videofunktionen er aktiveret, optager GTmetrix automatisk en integreret video, der viser, hvordan en side indlæses for hver præstationstest. Denne funktion er meget nyttig til fejlfinding af visuelle problemer, der kun vises i bestemte kombinationer af browser og skærmstørrelse.

Historie

Under fanen Historik kan du se alle dine tidligere hastighedstest. Der er en grænse for, hvor mange der er gemt i gratis konti. Du kan også overvåge en URL, der giver dig mulighed for at holde styr på ydeevnen over tid og se eventuelle ændringer, når de opstår.

En rigtig sej funktion er, at du kan vælge dine tidligere rapporter og sammenligne dem side om side. Dette kan være meget nyttigt, især når du foretager optimeringer på dit websted for at se, om der er forbedringer. Husk, nogle gange kan du også over-optimere.

Case Study Domain Configuration

Hvis du er kommet så langt nede i vores dybdegående GTmetrix-dyk, er du klar til en godbid. Det er altid irriterende at se folk dele tip og casestudier, men derefter ikke dele, hvordan de kom dertil. Så nedenfor er vores nøjagtige konfiguration af casestudie-domænet brugt ovenfor! Du er velkommen til at replikere det.

Arkitektur

Casestudie-domænet (perfmatters.io) er vært med Kinsta på Google Cloud Platform i USA (Central placering). Kinsta bruger HTTP/2, NGINX, MariaDB, som alle bidrager til de hurtige belastningstider.
Webstedet bruger HHVM. PHP 7.3 er nu tilgængelig på Kinsta, som er endnu hurtigere end HHVM! Du kan skifte til PHP-versioner med et tryk på en knap.
Webstedet bruger ikke noget caching-plugin. Kinsta cacher alt på serverniveau, hvilket i høj grad forenkler ting og er i de fleste tilfælde hurtigere!

WordPress-plugins

Og her er en liste over de plugins, der bruges på WordPress-siden.

Det gratis CDN Enabler-plugin bruges til at implementere KeyCDN.
Det gratis CAOS-plugin bruges til at synkronisere Google Analytics lokalt.
Premium perfmatters plugin bruges til at slippe af med unødvendige HTTP-anmodninger og deaktivere ting som Emojis og Embeds.
Premium Gonzalez plugin bruges til at deaktivere indlæsning af visse scripts.
Premium Imagify plugin bruges til at komprimere billeder.

Anbefalede tutorials til yderligere læsning:

Resumé

Som du kan se, at vide, hvordan GTmetrix speed test tool fungerer lidt bedre, og hvad alle diagrammer betyder, kan hjælpe dig med at træffe en mere datadrevet beslutning, når det kommer til ydeevne. En vandfaldsanalyse, som vi kalder det, er afgørende for at vide, hvordan dine individuelle aktiver belastes. Og husk, når det kommer til at sammenligne det med Pingdom, er de forskellige værktøjer, og det er derfor bedre at holde fast ved det ene eller det andet, da de beregner tingene forskelligt. Har du andre gode GTmetrix-tip?

Hvis du gerne vil se flere dybdegående artikler som den ovenfor, så lad os det vide nedenfor i kommentarerne!

Brian Jackson

Brian har en stor lidenskab for WordPress, har brugt det i over et årti og udvikler endda et par premium plugins. Brian kan lide blogging, film og vandreture. Opret forbindelse med Brian på Twitter.