hvis du er nybegynder og ny hjemmesideejer, vil du i de fleste tilfælde ikke bekymre dig om hjemmesidens hastighed.
når du har bygget din hjemmeside eller starter din blog, kan det føles som om alt er på plads. Din hjemmeside er smuk, så det må betyde, at folk ikke har noget problem med at vente et par sekunder mere for at lade det indlæse korrekt, ikke?
Nej, Det er ikke tilfældet.
ifølge Google research, jo længere tid det tager for en side at indlæse flere mennesker ville opgive en hjemmeside.
også, Google har indført Internet Core Vitals (der tæller som en ranking faktor for hjemmesider), der går i endnu flere detaljer, når det kommer til hastigheden af lastning hjemmesider. Jo hurtigere din hjemmeside er, jo bedre er dine chancer for at komme til den første side med Googles søgeresultater.
Hej, mit navn er Artem.
jeg deler vores erfaring, viden om vores udviklingsteam og teknikker, vi brugte til at forbedre indlæsningshastigheden på vores egen hjemmeside (FirstSiteGuide.com).
ved at følge denne tutorial vil du forstå de elementer, der påvirker hastigheden på din hjemmeside. Med hvert element vil jeg vise dig et værktøj, der hjælper dig med at fremskynde hjemmesiden eller løse et bestemt problem. Hvor det er muligt, vil jeg også nævne tjenester, som du sikkert kan bruge uden at skulle bruge timer på forskning.
P. S. Nogle trin i denne vejledning er specifikke for hjemmesider, der er bygget med
14 trin til forbedring af hjemmesidens hastighed
- Trin 1: Kør en hastighedstest
- Trin 2: Få hurtig og pålidelig hosting
- Trin 3: Implementer et indholdsleveringsnetværk (CDN) service
- Trin 4: Komprimer CSS-og JavaScript-filer
- Trin 5:
- Trin 6: Optimer og rengør databasen
- Trin 7: Brug optimerede/premium og enkle temaer
- Trin 8: Optimer alle billeder på din hjemmeside
- trin 9: doven Indlæs billeder og videoer
- Trin 10: undgå hotlinking af billeder
- trin 11: host videoer på 3. parts tjenester og offload store medier
- trin 12: hold plugins på et minimum/find de plugins, der bremser dig
- trin 13: kontrol omdirigeringer på din hjemmeside
- trin 14: Optimer indhold (Brug uddrag, del lange artikler og kommentarer osv)
Trin 1: Kør en hastighedstest
før du gør noget, er det vigtigt, at du udfører en ordentlig test. Selvom du kan gøre meget selv uden en, foreslår jeg kraftigt at køre mindst en hastighedstest, så du har et benchmark, der hjælper dig med at forstå, hvor godt din side fungerer, og hvor godt resultatet er, når du er færdig med alle forbedringstrinnene.
gratis værktøjer
heldigvis er der gratis hastighedstest tilgængelige for alle. Du skal bare vælge en, indtaste din URL og lade værktøjet udføre sin magi.
Googles PageSpeed Insights
da de fleste mennesker optimerer deres side til Google, er det første værktøj, jeg vil nævne, Googles PageSpeed Insights. Det er ret ligetil, og du kan få resultatet i løbet af få sekunder.
- Åbn Googles PageSpeed Insights.
- Indtast URL ‘ en til din hjemmeside.
- Klik på knappen “Analyser”.
i mit tilfælde tog det så lidt som 10-15sec for testen at fuldføre og vise mig de resultater, der blev delt i skærmbilledet nedenfor.
efter at have set det grønne nummer på toppen, hvor du sigter mod at få en score på 100, vil der være flere andre segmenter, du vil undersøge. De er:
- første Indholdsmaling (FCP)
- største Indholdsmaling (LCP)
- kumulativ Layoutskift (CLS)
alle tre elementer er en del af Vitals, som nu er inkluderet i Googles vigtigste målinger, der viser, hvor hurtigt eller langsomt din hjemmeside er. Du kan lære mere om Internetvitaler i vores guide til, hvordan du optimerer din mobilside.
Gtmetrik
en af de mest populære hjemmeside hastighedstest er Gtmetrik. Det er helt gratis, og kan gøres på mindre end et minut:
- gå til Gtmetrik.
- Indtast din hjemmesides fulde URL.
- tryk på knappen “Kør Test” og vent i cirka 30 sekunder.
derefter får du en karakter, der viser dig, hvor hurtigt din hjemmeside er. Testen vil også vise dig detaljer som effektiviteten af din hjemmeside, dens struktur, samt internet vitals, der nu er en kerne ranking faktor for Google.
hvis du ikke allerede har arbejdet aktivt på at optimere din hjemmeside for hastighed, så er chancerne for, at du ikke får en perfekt score. Men rolig, du kan arbejde hen imod det, hvis du begynder at følge alle trin.
Trin 2: Få hurtig og pålidelig hosting
en hurtig hjemmeside starter med god hosting. Uanset hvor hårdt du forsøger at levere den bedste brugeroplevelse, hvis din hosting suger, vil hastigheden på din hjemmeside lide.
de bedste hostingfirmaer tager sig af alt, og det er ikke nødvendigt, at du forstår, hvad der går bag lukkede døre. Fra kvalitet og velholdt udstyr til regelmæssigt opdaterede programmelkomponenter er der meget, som en hostingtjeneste kan gøre for at forbedre hastigheden på din hjemmeside.
for at starte den rigtige måde, få din side hostet med Bluehost, et af de sjældne hostingfirmaer, der officielt anbefales af WordPress.org. års erfaring og millioner af hostede hjemmesider gør dette hostingfirma til et af de bedste inden for deres felt – noget der let kan oversættes til at have en robust hjemmeside.
Trin 3: Implementere en indholdsleveringsnetværk (CDN) service
vores verden er et stort sted. Selvom internethastighederne er forbedret drastisk gennem årene, spiller den fysiske afstand mellem computere og servere stadig en vigtig rolle i onlinehastigheden. Det betyder, at indlæsning af oplysninger fra en server fra dit land generelt vil være hurtigere end indlæsning af data fra hele verden, ligesom det er lettere for dig at købe et sofabord fra IKEA i din hjemby i stedet for at skulle køre for at få et i et andet land.
det er her indholdsleveringsnetværk kommer ind. De giver dig mulighed for at have din hjemmeside hostet på flere servere over hele kloden. CDN kan genkende den nærmeste placering til hver enkelt indlæser din hjemmeside, og indlæse indholdet fra den nærmeste server. Så hvis en besøgende forsøger at indlæse din hjemmeside fra USA, vil de få indholdet fra en af USA-serverne, mens en person, der kommer fra Europa, vil indlæse din hjemmeside via en server i nærheden af dem, for eksempel i London.
hvis du er vært for siden på Bluehost, kan du finde deres TrueSpeed CDN inde i kontrolpanelet. Bare ved at sætte det op, vil din hjemmeside blive global og indlæse hurtigere til folk fra hele verden.
du kan også få 3.parts CDN-tjenester. De mest populære CDN ‘ er er:
- Cloudflare
- KeyCDN
- StackPath
- Google Cloud CDN
- Rackspace
- CacheFly
Trin 4: Minify CSS og JavaScript filer
moderne hjemmesider er fyldt med CSS og JavaScript-filer, der arbejder sammen for at holde hjemmesider ser pæn og arbejder i brugernes favør. Linje efter linje kode gør disse filer unødigt store, som hurtigt kan bremse din hjemmeside.
Internetdesignere (de samme mennesker, der bygger de skabeloner, som du ender med at købe) kan lide at holde deres kode pæn. Det betyder, at de holder koden ser pæn og let forståelig. At have disse hvide mellemrum, ekstra linjer og tegn øger dog kun filvægten, som let kan reduceres ved at minificere.
her er et eksempel på simpel CSS-kode:
krop {
polstring: 10ph;
farve: # f35123;
baggrund:# f22f12;
}
det kan minificeres til dette:
krop{polstring: 10ph; farve: # f35123; baggrund:#f22f12}
selvom denne enkle forskel ikke vil have nogen væsentlig indflydelse på din hjemmeside, kan du forestille dig, hvad der sker, når du har tusinder og atter tusinder af unødvendige hvide rum og linjer.
heldigvis behøver du ikke at gennemgå koden og foretage ændringerne selv for at minificere dine CSS-og JavaScript-filer. Der er plugins, der gør dette automatisk for dig og sikrer, at alt fungerer korrekt:
- gå til “Plugins > Tilføj nyt”.
- Søg efter “Autoptimere”.
- Installer og aktiver “Autoptimere”.
- gå til “Indstillinger -> Autoptimere”.
- Tjek ” Optimer JavaScript-Kode?”og” samlede JS-filer?”.
- Tjek ” Optimer CSS-kode?”og” samlede CSS-filer?”.
Trin 5: Aktiver cachelagring
ved at aktivere cachelagring tillader du, at indholdet gemmes i folks bro.sere. Det betyder, at hvis en besøgende beslutter at vende tilbage til din hjemmeside, vil de ikke nødt til at hente alle filerne fra serveren igen, som de allerede har dem gemt i deres bro.ser.
caching kan forbedre hastigheden på din hjemmeside betydeligt for tilbagevendende brugere.
for at aktivere dette på din side er alt hvad du behøver et gratis:
- H3 Total Cache
- HV hurtigste Cache
- HV Super Cache
hvis du f. eks. bruger HV3 Total Cache, skal du blot installere plugin ‘ et:
- gå til Plugins -> Tilføj nyt.
- Søg efter “V3 Total Cache”.
- Installer og aktiver plugin ‘ et.
- gå gennem opsætningen ved at lade plugin teste dine site-og serverindstillinger.
dette plugin vil automatisk oprette dine caching indstillinger, og de vil straks begynde at arbejde i din favør. Hvis du beslutter dig for at gå ind i flere detaljer, kan du åbne fanen Ydeevne, der nu er synlig i venstre side af menuen, hvor alle plugin-indstillingerne er synlige. Her kan du ændre andre muligheder, hvis det er nødvendigt.
Trin 6: Optimer og rengør databasen
din hjemmeside kan ikke fungere uden en database. Alt, hvad du gør og har på hjemmesiden er gemt der. Som du kan forestille dig, holder temaer og plugins det ikke altid rent, så selvom du afinstallerer et specifikt plugin, vil det efterlade nogle data i din database. Over tid vil databasen blive rodet og ineffektiv, hvilket vil resultere i en langsom hjemmeside.
selvom det er muligt at rydde op i databasen manuelt, ville det betyde, at du skal forstå, hvordan det fungerer. Og selvom du gør det, er chancerne for, at du stadig kan ødelægge det.
heldigvis er der gratis plugins til rådighed, der optimerer og renser databasen for dig. Men før du gør noget, sørg for at oprette en fuld backup af din hjemmeside eller har en måde at fortryde ændringer. Selvom Optimer er et velkendt og sikkert plugin, kan direkte redigering af en database undertiden gå galt.
så hvis noget går galt, foreslår jeg nulstilling. Dette plugin vil skabe et øjebliksbillede af din hjemmeside og giver dig mulighed for hurtigt at rulle tilbage eventuelle ændringer gjort. Så hvis noget går galt, kan du gendanne din database om et par minutter i modsætning til at gendanne en fuld sikkerhedskopi, der kan tage mere tid.
- gå til Plugins -> Tilføj nyt.
- Optimer, Installer og aktiver det.
- Vælg de ønskede indstillinger, og klik på knappen for at starte optimeringen.
Trin 7: Brug optimerede/premium og enkle temaer
skabeloner og temaer er ikke kun visuelle. For at oprette dem skal internetdesignere kode i Funktioner, Indstillinger og indsætte billeder, der alle kombineres til et enkelt arbejdstema.
som du kan forestille dig, vil en skabelon, der indlæser fem filer og tre billeder, for eksempel indlæse meget hurtigere end den, der kommer pakket med ti filer og tyve billeder. Det store antal er ikke den eneste vigtige faktor, men hvor godt alt er optimeret kommer også i betragtning.
da der er så mange temaer og skabeloner til rådighed, er det svært at bestemme de bedste. Her er nogle af de populære temaer, der er designet til at se godt ud og indlæse hurtigt:
- Hej Elementor
- Astra
- GeneratePress
- Oceanvp
- Sydney
Trin 8: Optimer alle billeder på din hjemmeside
billeder kan nemt blive en af de vigtigste hastighed spørgsmål af din hjemmeside. Ikke-optimerede billeder forbliver unødigt store og svære at hente. Hvis du bruger for mange af dem, vil brugerne have svært ved at indlæse hele siden på din hjemmeside og sandsynligvis ende med at forlade, før de ser indholdet.
heldigvis er det ikke så svært at holde billeder optimeret. Det er vigtigt, at du undersøger dit tema/skabelon for at lære, hvilke billedstørrelser du har brug for. Du kan derefter tage sig af billedet, før du uploader det ved at ændre størrelsen på dets størrelse og ændre dets kvalitetsindstillinger.
hvis du kun har brug for at optimere et par billeder, kan du bruge en 3.partstjeneste som TinyPNG. Dette billedoptimeringsværktøj giver dig mulighed for at uploade dine kildebilleder og optimeres derefter automatisk. Bare træk & slip billederne, og lad pandaen arbejde sin magi. Du vil derefter komme til at hente de optimerede versioner af dine billeder, som du trygt kan sætte på din hjemmeside.
hvis du allerede har en aktiv hjemmeside og ikke har tid til at optimere billeder en ad gangen, er der et freemium-plugin, der løser alle dine problemer. Shortpiksel billedoptimering vil tage sig af alle dine billeder, der er tilgængelige i dit mediebibliotek. Det fungerer også godt med næste, Foo galleri, samt andre galleri og slider plugins.
den gratis version kan du håndtere op til hundrede billeder. Nogle af funktionerne omfatter:
- optimering af billedernes størrelse og kvalitet.
- konvertering af formater til en anden.
- arbejder med AVIF.
alt hvad du skal gøre er at installere pluginet og tilpasse indstillingerne til den måde, du ønsker. Vælg den komprimering, du har brug for, indstil størrelsen på billederne, og tryk på knappen, når du er klar til plugin til at starte optimeringsprocessen.
trin 9: dovne load billeder og videoer
normalt, når en bruger åbner en hjemmeside, hele indholdet, der skal vises starter indlæses automatisk. Så selvom en bruger kun har brug for ovenstående fold-indhold, vil de stadig have alt tilgængeligt på den side indlæst.
i stedet for ved doven indlæsning af billeder og videoer kan du kun få brugere til at indlæse indhold, der er synligt på skærmen. Når brugeren begynder at rulle, begynder billeder og videoer, der bevæger sig ind i det synlige område på skærmen, at indlæses. På denne måde indlæses hele siden hurtigere og giver en bedre brugeroplevelse.
Sådan aktiveres doven indlæsning:
- gå til Plugins -> Tilføj nyt.
- Søg efter doven belastning.
- Installer og aktiver plugin ‘ et.
- kontroller indhold, som du vil doven indlæse og gemme indstillinger.
Trin 10: undgå billede hotlinking
Hotlinking er en handling, der involverer kopiering af kilden til et billede fra en hjemmeside for at bruge det på en anden. Mens billedet vises uden problemer, indlæses det faktisk ikke fra din server. I stedet bruger den alle ressourcerne på det oprindelige sted, og det betragtes faktisk som ulovligt.
ved at forhindre hotlinking kan du forhindre andre i at stjæle dine billeder. På denne måde sparer du ressourcer på din egen hostingtjeneste, hvilket betyder, at din side vil være den eneste, der bruger disse ressourcer, hvilket resulterer i en hurtigere hjemmeside for dine besøgende.
der er flere måder at forhindre hotlinking på:
- brug af en CDN: de mest populære CDN ‘ er som Cloudflare og KeyCDN har allerede aktiveret hotlinking-beskyttelse.
- brug af sikkerhedsplugins: alt i en SIKKERHEDSLINKING &
- deaktivering af Højreklik på dine billeder: Brug et plugin som forhindre Indholdstyveri .
- ændring .htaccess-fil: mere avancerede brugere kan deaktivere hotlinking direkte ved at ændre kode i .htaccess-fil.
trin 11: Host videoer på 3.parts tjenester og offload store medier
når du starter en hjemmeside, giver det mening at have alle dine videoer og store mediefiler på din egen server. Men hvad du måske mangler er, at lagring og gengivelse af store filer optager serverressourcer. Når det kommer til hastigheden på din side, er det meget mere praktisk at aflaste videoer og store mediefiler på 3.parts tjenester for at spare båndbredde.
en video indlæst fra YouTube fungerer lige så godt (hvis ikke bedre) end indlæst fra din server. Og hvis du har højere trafik, betyder det den mindre indvirkning på din båndbredde, hvilket resulterer i et hurtigere sted.
når det kommer til videoer, kan du være vært for dem på:
- YouTube;
- Vimeo; eller
- Vistia.
trin 12: hold plugins på et minimum/find de plugins, der bremser dig
hvert plugin forbedrer din hjemmeside. Men hver ny funktion betyder også nye filer, der optager plads og båndbredde. Også, ikke alle plugins er kodet det samme, så chancerne er, at du har et plugin, der sinker din hjemmeside ved at indlæse unødvendige elementer, som du måske ikke engang være klar over.
før du begynder at deaktivere alle plugins, foreslår jeg at lave en hastighedstest.
- gå til Plugins -> Tilføj nyt.
- Søg efter P3 (Plugin Performance Profiler).
- Installer og aktiver plugin ‘ et.
- gå til værktøjer- > P3 Plugin Profiler.
- start scanning.
dette plugin vil køre nogle tests på din hjemmeside og vise dig en graf og detaljer. Hvad du er interesseret i her er fanen” Runtime by Plugin”, der tegner en graf, der viser dig alle dine aktive plugins og deres indflydelse på siden.
kontroller for de største “stykker kage” på din graf, der viser de plugins, der er de langsomste på din side. Bemærk, at dette ikke betyder, at du skal slippe af med det specifikke plugin.
denne test giver dig mulighed for at analysere alle dine tilføjelser, så du kan afveje fordele og ulemper og beslutte, hvilke langsomme plugins du kan afinstallere eller finde et alternativ til.
trin 13: kontrol omdirigeringer på din hjemmeside
under omdirigeringer forbedrer brugeroplevelsen, og kan endda forbedre din SEO, hvis det gøres korrekt. At have aktive omdirigeringer vil ikke have en negativ indvirkning på din hjemmeside. Men med hver omdirigering bliver din hjemmeside lidt langsommere. Så hvis du ender med at have for mange omdirigeringer (oprette en såkaldt omdirigeringskæde), vil millisekunder tilføje op, og din side bliver langsommere.
et af de mest populære værktøjer til håndtering af omdirigeringer er Screaming Frog. Du kan også tjekke ud:
- Redirect Checker
- Sitebulb
- Deepcrave
ved at installere programmet eller køre en online scanning (afhængigt af det valgte værktøj), vil du være i stand til at scanne din hjemmeside. Det vil vise dig en detaljeret analyse af hjemmesiden, og hurtigt vise dig omdirigeret URL ‘ er. Da kun at vide, at en URL omdirigeres, ikke giver meget mening, vil du elske den funktion, der viser dig kilden til en omdirigering. Dette vil hjælpe dig med at forstå din hjemmeside, og tillade dig at handle på omdirigeringer ved at fjerne dem, der ikke er nødvendige.
hvis du finder en omdirigeringskæde, der bremser din side, er løsningen enkel – i stedet for at omdirigere fra link A til link B, der går til link C, skal du bare ændre omdirigeringen til det sidste link i kæden.
til håndtering af omdirigeringer kan du bruge et gratis plugin til omdirigering af 301-omdirigeringer, der hjælper dig med at administrere alle dine omdirigeringer.
trin 14: Optimer indhold (Brug uddrag, del lange artikler og kommentarer osv.)
nogle gange kan du gøre meget ved at ændre små ting. Hvis du skriver en blog, kan du opnå et hurtigere sted ved at kontrollere indholdet. Når du viser de nyeste artikler fra bloggen, skal du bruge uddrag i stedet for at indlæse hele artiklen.
hvis du bruger en klassisk editor, er det relativt nemt at vise et brugerdefineret uddrag:
- gå til Dashboard -> indlæg -> Tilføj nyt.
- Klik på knappen ‘skærmindstillinger’.
- aktiver uddrag boks mulighed.
- Rul ned, find uddragboksen og skriv en brugerdefineret oversigt.
nu, viser uddrag på din hjemmeside afhænger af dit tema. Det er muligvis allerede tændt, eller du skal muligvis kontrollere indstillingen et eller andet sted i dit tema. Jeg foreslår at kontrollere dokumentationen eller kontakte support, fordi hvert tema er anderledes.
hvis du har tendens til at skrive lange artikler, kan du hurtigt opdele dem i to eller flere dele. Hvis du bruger en Blokeditor, har du ikke brug for eksterne plugins. Du skal blot redigere et langt indlæg, klikke på symbolet “plus” og finde blokken “sideskift”, der deler din artikel i halvdelen.
hvis du bruger en klassisk editor, skal du blot tilføje <!–- Næste side – > tag, der vil gøre det samme.
endelig, for dem, der har mange kommentarer, kan du vælge at paginere kommentarer i stedet for at indlæse dem alle på en gang:
- gå til Indstillinger -> Diskussion.
- Find indstillingen “Bryd kommentarer til sider”.
- Indtast antallet af kommentarer, der skal vises på en enkelt side.
- Gem indstillinger.
fortsæt med at teste hastigheden på din hjemmeside
selvom du gør hvert trin fra denne tutorial og med succes fremskynder din hjemmeside, betyder det ikke, at du er færdig. Ting kan hurtigt ændre sig, og du ved aldrig, hvor godt din hjemmeside vil opføre sig i morgen eller om en måned. Derfor er det vigtigt, at du foretager regelmæssige hastighedstests og forbedrer din hjemmeside regelmæssigt.
du kan bogmærke denne tutorial, hvis du glemmer, hvor og hvordan du tester din side, samt at huske, hvilke trin du skal gennemgå for at fremskynde det.
hvordan en langsom hjemmeside kan skade dig
selvom du ikke har noget imod at vente på, at sider indlæses, har de fleste et problem med det. Og hvis du forsømmer problemet, kan det skade dig i det lange løb. Hvordan?
- højere afvisningsprocent – selvom din besøgende beslutter at vente på, at en side indlæses, betyder det ikke, at de vil være tålmodige gennem hele deres besøg. Du risikerer højere afvisningsprocenter, der får folk til at forlade din side, når de besøger den første side.
- tab af penge – hvis du sælger produkter eller tjenester på din hjemmeside, vil et langsomt sted afvise potentielle købere og fremtidige kunder.
- tab af trafik – vil du have mere trafik, der vil drive din hjemmeside fremad? I så fald har du ikke råd til at miste en besøgende, fordi din hjemmeside ikke er korrekt optimeret.
- lavere SERP – placering-Google og andre søgemaskiner tager hensyn til belastningshastigheden. En langsommere side kan resultere i at blive skubbet længere ned på søgemaskinens resultatside, selvom dit indhold er godt.
tror du stadig ikke, at hastighed er vigtig? Jeg håber, at disse fire grunde vil overbevise dig om, hvordan hastigheden på en hjemmeside er afgørende, og at du er klar til at gøre din bedre.
konklusion
alle elsker smukke og veldesignede sites. Men hvis det betyder at vente på et par ekstra sekunder for hjemmesiden at indlæse, er chancerne for, at du vil miste en vis procentdel af besøgende.
så uanset hvad du gør, skal du ikke ofre hastighed for æstetik. Det er muligt at have begge dele; du skal bare være tålmodig og arbejde på din hjemmeside for at forbedre den.