WordPress Optimer: Sådan analyserer du din hjemmeside på 7 sekunder

Jan Hornung Senest opdateret den 12.
9 Min.
Med disse tips og vores snyde ark, kan du analysere din WordPress sider på bare 7 sekunder og endnu bedre end Google PageSpeed Insights
Senest opdateret den 12.

Vil du have WordPress nogle foranstaltninger er krystalklare, velkendte og dokumenterede effektive. Men selv angiveligt godt optimerede sider har ofte stadig potentiale. Det er derfor, det er det værd ud over Googles PageSpeed Insights og Co. Fordi mange ydelsesværktøjer giver ægte data guldgruben, som giver mulighed for en meget omfattende analyse - hvis du ved hvad du skal kigge efter. I dag vil jeg vise dig 7 tips til at gøre analys epå bare 7 sekunder.

Enkle ydelsesværktøjer som Googles Test Mit websted ellerGoogle PageSpeed Insights som følge heraf en liste over anbefalinger til handling. Det kan være fint for starten. Hvis du vil WordPress overvåge projekter effektivt og WordPress Hvis du vil optimere meningsfuldt, skal du før eller senere ty til et ydelsesværktøj, der også udskriver indlæsningstiden på din side og viser dig nøjagtigt, hvordan din blog, din butik, din virksomhedsside opfører sig, når du handler.

Disse omfatter f.eks. Disse giver ofte et såkaldt vandfaldsdiagram. Disse noget voluminøse datasæt bemærkes næppe af mange brugere. Men hvis du er professionel med WordPress du skal forstå, hvordan de fungerer. Fordi: Der er ingen anden datakilde, der viser dig, hvor hurtigt din side indlæses, hvor god din hoster er, hvor effektivt din side indlæses, og hvor dit websteds byggepladser er placeret.

Og med lidt øvelse kan du analysere hver side på et øjeblik og i (hånd-stoppet) 7 sekunder hver side 😉

Hvordan skal det fungere? Jeg vil vise dig dette trin for trin i dag!

WordPress optimere: Uden vandfald diagram, du kun ridse overfladen

Måske undrer du dig nu: Hvorfor hele indsatsen? Der er gode ydelsesværktøjer, der allerede viser mig alle de vigtige optimeringsmål. Derudover er det normalt begrænset til følgende punkter alligevel:

Sikker på, når du har afklaret og optimeret disse punkter, har du oprettet et meget godt fundament for en virkelig hurtig side. Derfor er disse grunde (med rette) dækket af alle gode præstationsguider.

F.eks.

Og også med de mest almindelige Opladningstidsbremser fra WordPress sider, ender disse grunde altid på de forreste steder.

Men vores erfaring fra hundredvis af systematiske præstationsanalyser med webside test og omfattende site kontrol viser: Selv i angiveligt "optimeret" WordPress Sider findes altid ydelsesgruber. Og det er her vandfaldskortet hjælper. Fordi det kan gøre noget særligt: det viser dig, hvordan din side indlæses, hvilke elementer der indlæses, og hvor hurtigt det hele sker.

Sådan kommer du til dataskatten

Alle gode præstationsanalyser udskriver også vandfaldsdiagrammer. For eksempel, hvis du bruger Pingdom-værktøjerne, skal du bare rulle ned langt nok.

WordPress optimere Pingdom-vandfaldet
Med Pingdom-værktøjerne skal du rulle lidt for at nå vandfaldsdiagrammet. Den tilsvarende sektion kaldes Filanmodninger. Websidetest og GT-Metrix har hver deres faner til diagrammerne.

Men for at fange alle disse oplysninger korrekt, skal du forstå, hvordan du læser vandfaldskort korrekt.

Sådan læses vandfaldsdiagrammer korrekt

Den koncentrerede informationstæthed betyder, at vandfaldsdiagrammer ikke ligefrem er kendt for deres klarhed. Faktisk behøver du kun at vide fire ting for at forstå posterne:

  1. Tiden fjernes på X-aksen.
    Vandfaldsdiagrammer er struktureret kronologisk: X-aksen giver dig mulighed for at se nøjagtigt, hvornår et element begynder at indlæse, og hvor lang tid det tager at indlæse. Det er netop denne kronologiske struktur, der gør et vandfaldsdiagram så værdifuldt. På denne måde kan du se nøjagtigt, hvor opladningstiden går tabt, og hvilke processer du skal begynde at optimere din opladningshastighed.
  2. Hver HTTP-anmodning registreres på Y-aksen.
    For de fleste vandfaldsdiagrammer kan du klikke på elementerne på Y-aksen for at få yderligere oplysninger om dem.
  3. En forklaring angiver, hvilken type ressource der indlæses.
    Websidetest farver HTML, CSS, billeder, flash osv., Pingdom bruger symboler til dette formål.
  4. Et ekstra kodningssystem indeholder oplysninger om, hvordan individuelle anmodninger udføres, f.eks.
WordPress Optimer: Sådan analyserer du din hjemmeside på 7 sekunder
WordPress optimere områder i et vandfaldsdiagram
I denne illustration finder du de fire områder, der er beskrevet ovenfor.

WordPress optimere med 7 sekunders analyse

Så nu er det klart, hvordan du læser et vandfald diagram - men hvad indsigt kan du trække fra det?

I vores præstationsanalyse har den 7 sekunders analyse bevist sit værd: Diagrammet giver dig oplysninger om syv vigtige faktorer for opladningshastigheden på et øjeblik. Disse syv hacks hjælper dig med at forstå nøjagtigt, hvordan og hvor hurtigt dit websted gengives. Og de viser, hvor der er potentiale til at gøre dem hurtigere, løse problemer eller forbedre dem yderligere.

Bemærk

I vores eksempler vil vi forresten altid henvise til vandfaldsdiagrammerne for Webpagetest, fordi vi altid bruger dette værktøj, hvad enten det er manuelt eller automatisk.

Tip #1: Størrelse betyder noget

Jo længere vandfaldet er (dvs. jo flere elementer fjernes på Y-aksen), jo flere anmodninger skal behandles, og jo langsommere indlæses siden. Ikke desto mindre behøver et langt vandfald ikke nødvendigvis at være dårligt. Der er funktioner og eksterne ressourcer, som du simpelthen ikke kan eller ikke ønsker at undvære. For eksempel er live chat et sådant værktøj. Indlæsningen af chat-programmet naturligvis bremser vores hjemmeside. Hurtig chatsupport er dog en vigtig del af vores hosting. Vi kan undvære Plugin så ikke.

HTTP/2 sikrer også, at det store antal anmodninger ikke længere er så vigtigt, som det var for et par år siden.

Med den nye webstandard kan anmodninger behandles samtidigt i stedet for den ene efter den anden. Derudover sender serveren allerede HTML-filer til browseren under HTTP/2 som en sikkerhedsforanstaltning. Den nye standard kompenserer for ulemper, som du kan opleve fra et stort antal HTTP-anmodninger. For at drage fordel af HTTP/2 skal dit websted dog indlæses via HTTPS, dvs. have et SSL-certifikat.

Under alle omstændigheder har erfaringen vist, at der ikke er nogen direkte sammenhæng mellem længden af et vandfald og den faktiske lastehastighed. Mindst op til en vis grænse: Med langt over 100 henvendelser er der i de fleste tilfælde absolut mulighed forbesparelser.

Hvis dit websted overskrider denne grænse, bør du se nærmere på dine HTTP-anmodninger. Vores hjemmeside indlæses f.eks. med over 130 HTTP-anmodninger. Så der er potentiale for optimering her.

Hvis dit vandfald indeholder mere end 100 anmodninger, skal du se nærmere på, hvilke du kan undvære.

Tip #2: Registrer opladningstid

Den maksimale værdi på din X-akse er afgørende for at analysere indlæsningshastigheden: Her kan du se, hvor lang tid der går, før dit websted er helt gengivet. Jo mindre denne værdi er, jo bedre.

Hvis den maksimale værdi af din X-akse er over 10, skal du helt sikkert håndtere din sides opladningshastighed.

Sidens samlede indlæsningstid skal være mindre end 10 sekunder

Tip #3: Registrer filtopladningstid

De fleste brugere er ligeglade med, hvilke værdier der spytter analyseværktøjer ud. Det eneste, der tæller for dem, er: hvor hurtigt sidebelastningerne føltes.

For dig som webstedsoperatør er det derfor vigtigt at forbedre denne følelse af hastighed så meget som muligt. Du kan opnå dette, for eksempel gennem optimal cachelagring, over-the-fold optimering eller – hvis dine kunder er baseret i udlandet – brugen af et Content Delivery Network (CDN).

Heldigvis følte dette dog, at indlæsningstid via vandfaldsdiagrammer også er meget god for krybet. Så vidt vi ved, er Webpagetest det eneste gratis værktøj, der skelner mellem den teknisk målte indlæsningstid og den indlæsningstid, som brugeren opfatter.

Hele diagrammet viser den mindre vigtige tekniske belastningstid. Filtbelastningstiden er skjult mellem de blå og grønne linjer i diagrammet.

Den grønne linje angiver, hvornår det første visuelle element på websiden indlæses (her kaldes punktet "Start gengivelse"). Den blå linje angiver, hvornår brugeren opfatter siden som fuldt indlæst – fra dette tidspunkt øges sandsynligheden for at interagere med siden betydeligt. Disse to linjer skal være så langt til venstre og så tæt på hinanden som muligt.

WordPress optimere kortlægning af filtopladningstiden
Det orange område viser den fase, hvor der ikke gengives synligt indhold. Indtil slutningen af denne fase ser den besøgende kun en hvid side. Det blå område markerer tidsrumlet mellem Startgengivelse og Indlæsningstid, hvor den besøgende kan opfatte en synlig gengivelsesproces (f.eks. et timeglas). Begge danner sammen filtbelastningstiden.

Websidetest er det eneste værktøj, der giver dig disse data. Vi er ikke opmærksomme på dette fra Pingdom Tools eller GTMetrix. Denne regel gælder derfor kun, hvis du bruger Websidetest:

Den grønne linje skal vises efter ca. 2 til 3 sekunder, senest den blå linje efter 7 sekunder.

Tip #4: HTTP/2 vs. HTTP/1

Sammenlignet med HTTP/1 giver HTTP/2 en afgørende fordel: Med den nyere webstandard indlæses siderne meget hurtigere. Men ud over et SSL-certifikat skal du også bruge din hoster til at give dig denne service. Mange webstedsoperatører er imidlertid uklare med hensyn til, om dette faktisk er tilfældet med dem eller ej.

En af de største fordele ved HTTP/2 er samtidig behandling af flere anmodninger. Og du kan tydeligt se disse i dit vandfaldsdiagram. Da anmodningerne fjernes kronologisk, starter flere søjler på samme sted som X-aksen, når HTTP/2 bruges.

WordPress optimere opladningsfunktionsmåden for en WordPress side med og uden HTTP/2
Til venstre er den typiske opladningsfunktionsmåde for en WordPress uden HTTP/2. De enkelte HTTP-anmodninger udføres sekventielt. Til højre kan du se, hvordan den samme side fungerer med HTTP/2: De enkelte anmodninger indlæses her på samme tid.

Indlæs individuelle anmodninger parallelt, og siden kører med HTTP/2.

Tip #5: Registrering af for store billeder

Med omkring 30 procent af de websteder, vi analyserer, finder vi stadig potentiale med hensyn til billedstørrelse. Dette til trods for, at de fleste webmastere antager, at de allerede har fået mest muligt ud af dette.

Det er vores erfaring, at billeder er den vigtigste faktor for sideindlæsningstid efter cachelagring. For hvert billede, du uploader i backend, WordPress viser automatisk en lang række andre filer, miniaturebilleder eller fremhævede billeder. Korrekt komprimering af disse filer er en af de mest effektive måder at reducere størrelsen og derfor indlæsningshastigheden på din side.

Sådan optimerer du billederne fornuftigt, f.eks.:

I vandfaldsdiagrammet kan billeder hurtigt identificeres ved hjælp af forklaringen: Websidetest viser dem med violette søjler, Pingdom med et ikon. Kun GTMetrix skelner ikke mellem billeder separat. Under alle omstændigheder, hvis de tilsvarende søjler er meget længere end søjlerne i de resterende anmodninger, indikerer dette en lang billedindlæsningstid.

WordPress Optimer dette er, hvad det ser ud, når billederne er virkelig for store
Et ekstremt, men meget levende eksempel på ukomprimerede billeder. Nogle af filerne alene tager over 8 sekunder at indlæse, hvilket bremser hele siden.

I et sådant tilfælde som ovenfor skal du se nærmere på dine billeder. Ved at klikke på den tilsvarende anmodning kan du normalt se nøjagtigt, hvilke filer de er i et vandfaldsdiagram. Dette gør det meget lettere at søge efter opladningstidsbremser.

Lange belastningslinjer for billedressourcer angiver komprimeringsspotez.

Tip #6: Finde omdirigeringer

Et vandfaldsdiagram hjælper dig med at forstå ikke kun, hvilke elementer der indlæses, hvornår og hvor hurtigt, men også hvor mange omdirigeringer der er konfigureret, og hvor de peger.

Anmodninger med speditører fremhæves normalt med farve. Diagrammet fortæller dig også, hvilken videresendelse der er konfigureret, og hvor den fører hen.

WordPress optimere identifikation af videresendelse
Denne side har flere 302 speditører i træk.

Med et vandfaldsdiagram kan du hurtigt se, hvor mange og hvilke omdirigeringer der er indstillet. Dette hjælper også med at registrere forwardloops efter en DNS-ændring. Takket være de gule markeringer har vi været i stand til at opdage unødvendigt eller endda skadeligt videresendelsessand flere gange.

Gule linjer markerer fremad.

Tip 7: Hurtigt overblik over fejl

Det kan ske, at elementer på en webside ikke gengives korrekt. Dette kan f.eks. påvirke AdSense-rammer, men også integrerede kort og skrifttyper.

WordPress optimere i vandfald diagram fejl identificeres med røde linjer
Denne side kaster en 404 fejl.

I dette tilfælde smider vandfaldsdiagrammet en fejlmeddelelse og markerer linjen med anmodningen med rødt. Diagrammet angiver også, hvilken fejl der er involveret, og hvilken ressource der frembringer fejlen.

Røde linjer angiver fejl, når siden gengives.

Med snyde ark alle tips i betragtning

Et vandfald diagram er nok den mest værdifulde evaluering, du kan bruge til din WordPress sider kan fås. Dette kombinerer forskellige data, som du som sideoperatør skal huske på: indlæsningstider, gengivelsesrækkefølge og fejlmeddelelser. Bevæbnet med tipene fra denne artikel kan du hurtigt og effektivt se, hvor optimeringspotentialet stadig skal hæves:

  • Er vandfaldet for langt (over 100 anmodninger)?
  • Er den maksimale værdi af X-aksen for stor (større end 10)?
  • Skal anmodninger indlæses parallelt (via HTTP/2)?
  • Er billederne for store (så billederne er dårligt optimeret)?
  • Er de grønne og blå linjer for langt til højre eller for langt fra hinanden (så gør brugeren opfatter siden som langsom)?
  • Er der uventede gule linjer (fremad)?
  • Er der røde linjer (fejl)?

Ganske vist, første gang du kan få brug for endnu længere tid til denne analyse. Med lidt erfaring giver vandfaldsdiagrammer dig dog mulighed for at WordPress meget bedre at forstå og optimere projekter mere dybtgående.

RAIDBOXER fra den første time og supportchef. På Bar og WordCamps, foretrækker han at tale om PageSpeed og hjemmeside ydeevne. Den bedste måde at bestikke ham på er med en espresso – eller bayersk Brezn.

Lignende artikler

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.