Følgende artikel hjælper dig med: Sådan gør du nemt din hjemmeside hurtigere! – Langsomme websteder dræber konverteringer!!!
Hastighed er en dræber.
Midt i al design, kopiering, test og strategisnak er det nemt at glemme, at der er et problem med møtrikker og bolte, der kan gøre eller ødelægge dit websteds ydeevne. Jeg taler om belastningshastighed.
Belastningshastighed betyder meget mere, end du skulle tro.
Det er en rangeringsfaktor:
Sådan ser effekten af indlæsningshastighed ud med hensyn til placering af søgeresultater:
(Kilde: https://ahrefs.com/blog/on-page-seo/)
Langsommere sted = lavere position. Den ideelle belastningshastighed er så tæt på nul, som du kan få den: De 10 bedste SERP’er indlæses på mindre end et sekund.
Og det betyder også meget for besøgende.
“Globalt betragtes langsomme indlæsningstider som den største frustration blandt moderne mobilbrugere,” sagde Episerve i sin 2015-rapport. Og mobilbrugere er nu størstedelen af webtrafikken.
Effekten på konverteringer er endnu mere drastisk end hvad vi kan observere for SERP’er, og meget mere skarp:
(Kilde: https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/)
Konverteringsraten topper ved 2,4 sekunder; tilføje to sekunder og det halveres. Tilføj et sekund, og det falder med 27%.
Hvorfor er dette stadig et problem? Med hurtigere bredbånd mere udbredt end nogensinde før, og smartphones bliver hurtigere og mere kraftfulde, hvorfor er websider så ikke fulgt med?
Hovedsageligt fordi vi bruger den ekstra båndbredde til at pakke websteder med gimmicks, sporingscookies og enorme billeder.
(Kilde: https://www.cachefly.com/category/faster-websites/)
Billeder er hovedsynderen, de er vokset 3X siden 2011, men scripts har også taget et stort spring. Hvis du havde en ren HTML-side, ville den have samme størrelse nu som i 2011, hvor den gennemsnitlige internethastighed i USA var 3X langsommere.
Men i stedet er sideindlæsningshastigheden ikke bare dårlig.
Det bliver værre.
Web-ydeevnen inden for e-handel falder med et gennemsnit på 23 % årligt ifølge data fra 2014: e-handelswebsteder tog derefter 6,5 sekunder at gengive deres primære indhold – næsten det dobbelte at indlæse fuldt ud.
Den gennemsnitlige topplacerede hjemmeside tager nu omkring 9 sekunder at indlæse.
(Kilde: http://www.seochat.com/c/a/google-optimization-help/average-page-load-time-of-top-ranking-websites-in-google/)
(Dette er hele websteder, ikke individuelle sider.)
Hvem påvirker dette?
Alle sammen. Bounce er temmelig højt på tværs af alle brancher, og det samme gør fejl i at udføre de handlinger, vi ønsker, at brugerne skal udføre, også kaldet manglende konvertering.
(Kilde: https://conversionxl.com/guides/bounce-rate/seo-impact/)
Især e-handelswebsteder lider under høj afvisning og opgivelse af indkøbskurv.
(Kilde: https://www.barilliance.com/measure-cart-abandonment/)
Opgivelse af vogne er faldet fra et 2012-toppunkt på næsten 72 % – men kun til 69,23 %, et ret lille fald. Det store flertal af besøgende på e-handelswebsteder opgiver.
Det er direkte korreleret med indlæsningstiden.
(Kilde: https://bluestout.com/blog/how-to-reduce-mobile-ecommerce-bounce-rate/)
Hvad med bounce?
E-handels afvisningsprocent er også korreleret til indlæsningshastigheden. Denne e-handelssides brugere hoppede med en hastighed på 44 % – i gennemsnit. Opdel dem efter belastningshastighed, og der er en klar forskel:
(Kilde: https://www.linkedin.com/pulse/how-load-time-affects-bounce-rate-across-devices-report-jack-maden)
Husk, hurtiglæssere blev her defineret som ‘under 4 sekunder’! Der er et spring på 24 % i bounce for desktop mellem grupperne med hurtig og langsom indlæsning.
Indholdswebsteder lider af høj bounce, og det er relateret til indlæsningshastigheden.
Det samme gør leadgenereringswebsteder for tjenester.
I sidste ende ser forholdet mellem bounce og belastningshastighed mere eller mindre sådan ud på tværs af brancher:
(Kilde: http://www.ironpaper.com/webintel/articles/web-design-statistics-2017/)
Er du påvirket af langsomme belastningshastigheder?
Hvordan kan du vide, om din hjemmeside er påvirket af langsom indlæsningshastighed? Start med at tjekke din grundlæggende belastningshastighed. Du kan bruge Googles PageSpeed Insights-værktøj til at finde ud af, hvor godt dit websted klarer sig.
(Kilde: https://developers.google.com/speed/pagespeed/insights/)
Kør din URL gennem Googles værktøj, og du får data om, hvor hurtigt dit websted indlæses, og råd om, hvilke elementer der kan forbedres for at accelerere det.
Bemærk, at resultatet kan være væsentligt anderledes for desktop vs mobil:
Men selvom Googles værktøj ikke er en dårlig one-stop-shop til at dække det grundlæggende, sker der en masse under motorhjelmen, som det ikke viser dig.
Så her er fem gode værktøjer til at dykke dybt ned i præcis, hvad der sker med dit websted.
GTmetrix
Tilbyder dig en liste over dit websteds problemer vurderet efter prioritet.
Du kan flytte rundt på din server for at se, hvordan dit websted ser ud rundt omkring i verden, og få både et overblik og en handlingsvenlig liste med karakter fra A til F.
Er du i tvivl om, hvad du skal tage fat på først? Start her.
2. Pingdom
Pingdom giver dig også karakterer. Det tilbyder også en vandfaldsanalyse, så du kan se præcis, hvad der foregår.
Det er dog ikke gratis, i modsætning til de fleste værktøjer på denne liste.
3: Dotcom-monitor
Tilbyder vandfaldsanalyse og en række forskellige servere, så du kan se, hvordan de to interagerer.
I stedet for at flytte rundt på din server, bruger Dotcom-monitor en række forskellige servere samtidigt.
4: Belastningspåvirkning
Load Impact tilbyder browserscenarier og analyserer også dit indhold.
Det er gratis, men du skal oprette en konto, og sammenlignet med de andre værktøjer på denne liste er det meget mere kompliceret.
5: Websidetest
Jeg gemte det bedste til sidst. Webpagetest er det, jeg mest bruger.
Interfacet er en slags 1996 på en dårlig måde, men funktionaliteten er hurtig, nem at få adgang til og giver den helt rigtige mængde detaljer.
Vandfald, indholdsnedbrydning og et par andre værktøjer lader dig gå fra ‘mit websted er for langsomt’ og se visuelt, hvilke elementer der suger indlæsningstiden op.
Overraskelse, overraskelse: det er billeder og javascript.
Så vi har set en masse forskellige belastningshastighedsmålinger. Spørgsmålet er, hvilke er virkelig vigtige?
De vitale belastningshastighedsmålinger er dem, der virkelig betyder noget for dine kunder:
- Tid til at siden bliver synlig
- Tid til at finde det, de vil have
- Tid til at kunne gøre, hvad de vil
Dette er en af grundene til, at e-handelswebsteder er så følsomme for belastningshastighed. En masse billeder og knapper, der indlæses langsomt og med fejl og hop, er meget mere frustrerende end et enkelt, uovervejet superkæmpebillede, der tager for lang tid at indlæse. Og folk kommer til e-handelswebsteder for at træffe beslutninger om, hvad de vil have – det er alle tre på afkrydsningslisten ovenfor, der sker på én gang.
Hvordan retter vi en side med langsom indlæsning?
Sådan accelererer du en langsom hjemmeside
1: Minimer HTTP-anmodninger
Hver gang en fil indlæses på dit websted, sendes en HTTP-anmodning til din server fra browseren. Mens de to computere taler sammen, går tingene langsomt. Yahoo siger, at dette kan tegne sig for op til 80% af indlæsningstiden.
For at se anmodningsrapporten i Websitespeedtest skal du gå til Testresultat>Detaljer og rulle ned; det er den tredje rapport.
(Dette er en meget forenklet forklaring: Hvis du gerne vil have mere under motorhjelmen, så tjek dette indlæg af Yoasts Jimmy Comack.)
Jo flere ressourcer uden for siden, der er gemt andre steder, din webside skal indlæses, jo flere HTTP-anmodninger skal den sende, og jo langsommere indlæses den.
Dette forværres, fordi HTTP oprindeligt blev konfigureret til først at starte en ny anmodning, når den gamle var færdig. For at fremskynde tingene er det nu muligt at lave asynkrone anmodninger (alle sker oven på hinanden). Det er hurtigere – men risikerer, at din side indlæses på en rodet, forvirrende måde. Husk, vi jagter ikke abstrakte belastningshastighedsmålinger. Vi ønsker, at besøgende skal orientere sig og handle hurtigt uden at hoppe.
Hvordan skærer vi ned på antallet af HTTP-anmodninger? Vi skærer ned på antallet af ressourcer, der bliver indlæst.
Start med billeder. Slip af med billeder, der ikke direkte gør noget nyttigt på siden. Det er en god ting at have masser af billeder, men hvis de bare er der for dets skyld, så overvej at fjerne dem.
Video er næste gang. Nogle websteder med omfattende video kan tilføje et eller to sekunder til webstedets indlæsningstid: det er hele den tid, som de fleste mennesker er villige til at vente, brugt på ét aktiv. Er det virkelig det værd?
Javascript er den næststørste forespørgsel efter billeder. Javascript skal være asynkront, hvilket betyder, at det skal indlæses på samme tid, som alt andet gør. Ellers, når din browser kommer til dit Javascript, stopper den med at indlæse alt andet på webstedet, indtil det har indlæst JS. Gør det asynkront eller slip helt af med det. Hvis du ikke kan gøre det, så læg det nederst på siden, så det indlæses sidst.
Endelig CSS. Hver CSS-fil er sin egen separate anmodning. Men en enkelt CSS-fil kan normalt klare alle dine CSS-behov, så kombiner dem til én for at skære ned på antallet af anmodninger.
2: Aktiver komprimering
Store sider tager lang tid at indlæse. Men det er muligt at komprimere dem med open source Gzip-værktøjet.
De fleste webservere kan bruge Gzip til at komprimere filer til .zip-filer, før de sendes. Du har muligvis det samme antal filer, der downloades (hvis du ikke nåede at skære ned på dine anmodningsnumre endnu), men du vil ikke have den samme mængde information, så dine sider indlæses hurtigere.
Yahoo siger, at Gzip kan skære 70 % af din indlæsningstid.
For at aktivere Gzip skal du slippe denne kode i din .htaccess-fil:
# komprimer tekst, html, javascript, css, xml:
AddOutputFilterByType DEFLATE tekst/almindelig
AddOutputFilterByType DEFLATE tekst/html
AddOutputFilterByType DEFLATE tekst/xml
AddOutputFilterByType DEFLATE tekst/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE applikation/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Eller komprimer visse filtyper efter forlængelse:
SetOutputFilter DEFLATE
3: Aktiver browser caching
Browsercaching lader en besøgende gemme en version af dit websted i deres browser. Når de derefter vender tilbage til dit websted, skal de kun åbne størstedelen af de filer, der udgør dit websted, ikke downloade dem.
Det lyder godt, ikke?
Tag et kig i din Google Analytics Oversigtsrapport på dine tilbagevendende kontra nye besøgende.
De nye besøgende vil have tomme caches. Du kan ikke fremskynde deres oplevelse af dit websted med browsercache. Men de tilbagevendende besøgende er en anden historie: du kan barbere størstedelen af webstedets indlæsningstid for disse besøgende.
Hvis du har en høj andel af tilbagevendende besøgende, eller du gerne vil have caching opkaldt til dit websted, er her en fantastisk ressource.
4: Formindsk ressourcer
Mange ‘webstedbyggere’, der ikke er afhængige af traditionelle udviklerfærdigheder – eller overhovedet nogen – kan lave flotte websteder. Men snup under motorhjelmen, og koden ser ikke så fantastisk ud. Oppustet og sjusket, det kan være dette, der gør dit websted langsommere.
Hvad skal man gøre?
Du kan selv rydde op i koden. Fjernelse af unødvendige linjeskift, indrykning og mellemrum i din kode kan fremskynde det.
Men at formindske det er endnu mere effektivt.
Sådan ser det ud:
(Kilde: https://www.wpmyweb.com/how-to/minify-html-css-javascript-autoptimize.html)
I dette eksempel er en simpel sektion af HTML automatisk blevet krympet til den mindste og slankeste, den vil gå og stadig fungere. I processen er 11 % af koden blevet barberet væk.
For at minimere effektivt, prioriter: Start med den kode, der forårsager de fleste problemer. Gå over til Googles PageSpeed Insights og kør en test på dit websteds URL. Under ‘mulige optimeringer’ vil du se muligheder for at formindske CSS, HTML og Javascript.
At formindske disse CSS-elementer alene kan give betydelige databesparelser.
Du kan bruge værktøjer som Minifycode.com til at minificere din kode og derefter erstatte den stødende kode i din HTML, CSS eller Java med den minificerede version.
Hvis du kører WordPress, er der et Auto-optimize plugin, der minimerer al din kode, selvom det kræver lidt opsætning.
5: Optimer billeder
Billeder er de mest båndbredde-sugende elementer på de fleste websteder. Typiske fejl efterlader billeder i båndbreddekrævende formater eller i enorme størrelser. Se, hvor lang tid det tog at indlæse disse billeder:
De lilla linjer er billeder. Den største tog 2,09 sekunder. Stort problem.
De tre ting, du skal koncentrere dig om, når du optimerer billeder, er størrelse, format og src-attributten.
Billedestørrelse
Store billeder optager båndbredde. Hvis din side er 500px bred, hvorfor er dine billeder så 2500px brede?
Denne ekstra størrelse er en unødvendig byrde for dit websteds indlæsningstid.
Sikker på, størrelsen på dette billede vil blive ændret på webstedet, når det gengives – men hele den massive fil vil også blive indlæst hver gang. Tilpas ikke billedernes størrelse: Beskær dem, så de passer til dit websteds maksimale dimensioner, i et billedredigeringsværktøj.
(Hvis du ikke har Photoshop, så prøv Pixlr – browserbaseret og gratis.)
Billedformat
Det bedste billedformat er .jpg, med .png sekund. (Ikke alle browsere vil gengive .png-billeder.) BMP’er, TIFF’er og Gif’er suger alle båndbredde op som vanvittige.
src-attributten
src-attributten fortæller browseren, hvor den skal lede efter billedet. I HTML ser det sådan ud:
Har ikke dem, der ser sådan ud:
6: Optimer CSS-levering
CSS fortæller browsere, hvordan hvert element på din side skal se ud. Du kan gøre det på to måder, eksternt eller inline.
Ekstern CSS findes i overskriften på din side og ser sådan ud:
Al den information, der er nødvendig for at gengive din side (Hubspots side, i dette tilfælde) er i CSS-stilarket.
Dette er langt bedre end at gøre det med inline CSS, hvor du slipper CSS mellem din HTML. Brug af et stylesheet reducerer størrelsen af din kode, mens brug af kun ét stylesheet reducerer antallet af anmodninger og dermed reducerer indlæsningstiden.
For at finde ud af, hvor mange eksterne CSS-ark din side bruger, skal du bruge et værktøj som Varvys CSS Delivery Tool eller GiftofSpeed.
GiftofSpeed hjælper dig med at optimere CSS-levering, men hvis du foretrækker at gøre det selv, har Varvy instruktioner.
En sidste tanke:
Hvad med AMP?
AMP skal gøre alting super hurtigt. Og det gør den. Men det virker ved at tvinge dig til at bruge en strippet version af CSS, HTML og Java, med ikke meget plads til valg. Det tvinger dig til at stole på Googles indholdsleveringsnetværk, som er lynhurtigt, men som ændrer alle dine webadresser til Googles. Og du skal være ret hacky for overhovedet at få simple ting som formularer på en AMP-side.
Hvis du jævnligt udgiver nyheder, kan dette være et godt valg, og nogle mennesker anbefaler at bruge det til landingssider. Men som en måde at fremskynde dit kernewebsted på, er det det forkerte værktøj til jobbet.
Konklusion
Langsom hjemmesideindlæsningshastighed kan knuse både din SEO og dine konverteringer. Løsningen ligger i at trimme og rydde op i grundkoden på din hjemmeside, og mange af rettelserne er ikke engang så komplekse. Når brøkdele af et sekund kan måles i højere bounce, færre salg og kundeemner og endda påvirke SERP’er, giver det mening at tage fat på dem nu.
Hvis jeg har udeladt din foretrukne indlæsningshastighedsfix, eller du vil tilføje noget, så kontakt os i kommentarerne!
De følgende to faner ændrer indholdet nedenfor.
Mit navn er Jamie Spencer, og jeg har brugt de sidste 10 år på at bygge penge på at tjene blogs. Efter at være blevet træt af de 9-5, pendling og aldrig set min familie besluttede jeg, at jeg ville lave nogle ændringer og lancerede min første blog. Siden da har jeg lanceret masser af succesrige nicheblogs, og efter at have solgt min survivalist-blog besluttede jeg at lære andre mennesker, hvordan man gør det samme.
