Webstedshastighedsoptimering: Sådan gør du i 2020 # trin for trin

Webstedshastighedsoptimering: Sådan gør du i 2020 # trin for trin

Webstedshastighedsoptimering: Sådan gør du i 2020 # trin for trin
СОДЕРЖАНИЕ
02 июня 2020

Omkring et årti tilbage meddelte Google, at webstedshastigheden ville have indflydelse på rangeringen af ​​websøgningen. Selvom indlægget ikke afklarede virkningen af ​​hastighed på placeringerne, forstod webmastere, der læste meddelelsen, at webstedshastighedsoptimering skulle være øverst i deres udviklingsplaner.


I tillæg til SEO fordele ved hastighedsoptimering, sideindlæsningstider er vigtige for at bestemme, hvor mange brugere der er tilbage på dit websted. Det rapporterer HubSpot et fald i konvertering er relateret til stigende sideindlæsningstider – en forsinkelse på et sekund i belastningstid kan føre til en reduktion på ~ 20-30% i konvertering!

Vejledning til optimering af webstedets hastighed

I de sidste par år har der været en stigning i den gennemsnitlige sidestørrelse. Faktisk i 2018, i gennemsnit var en sidestørrelse mere end 2 MB! En betydelig del af denne sideindlæsning består af billeder, statiske filer og videoer.

For at sige mildt, størrelsen på dit websted og din samlede hastighed på webstedet betyder meget! Selv med en stadigt stigende sidebelastning er der ting, du kan gøre for at forbedre, hvordan dit websted håndterer ting. Dette indlæg diskuterer det hele.

Webstedshastighedsoptimering: Hvad du har brug for, før vi kommer i gang

Dette indlæg antager, at du allerede har to vigtige ting, der allerede er taget sig af:

  • Du bruger et optimeret tema, der ikke introducerer meget oppustning oven på WordPress selv.
  • Du er på en tilstrækkelig hurtig vært.

Hvis du markerer disse to felter, kan du fortsætte til de følgende sektioner for at udforske en omfattende liste over opgaver, som du kan udføre for at sikre, at dit websteds belastningstider er minimale.

Kom godt i gang med webstedsoptimering

Anatomi af en webside

anatomi

Tricket til at optimere dine websider til hastighed er at forstå, hvad der går ind på en webside. Lad os gennemgå de mest populære komponenter:

  • HTML-koden, der giver struktur og indhold til en webside – selv med WordPress, der kører festen på dit websted, er alt det, det tager, hvad der er i databasen – alt indholdet – og konverterer det til statisk HTML-output
  • Statiske filer, der hjælper med design, funktionalitet og interaktivitet (CSS, JavaScript)
  • Billeder til baggrunde, logoer og indhold

For at gengive en side anmoder browseren om hvert element på en webside – selve siden i form af HTML, statiske filer, billeder, eksternt indhold. Derfor er antallet af HTTP-anmodninger spiller også en afgørende rolle i optimering af webstedets hastighed.

Find ud af, hvor du står: værktøjer til optimering af webstedets hastighed

Inden vi går videre til specifikke teknikker, der hjælper dig med at optimere dit websted, så lad os tage et øjeblik til at gennemse værktøjer, der hjælper med at analysere hastigheden på websider.

Hvis du er nybegynder på udkig efter et afslappet testværktøj, kan du overveje at bruge Pingdom-værktøjerne suite til en hurtig vurdering af dit websted. For en mere komplet løsning kan du gå over til Googles sidehastighedsindsigt.

Pingdom-hastighedstestPingdom-værktøjer til hastighedstest

Derudover kan du prøve, hvis du leder efter en hurtig mulighed i form af et browser-plugin YSlow, der tester websteder og giver forslag fra browseren. Yderligere GTmetrix værktøj bruger YSlows testresultater til rapporter.

�� Hvis du vil have flere muligheder for at teste dit websteds hastighed, vises dette indlæg 5 af de bedste hastighedskontrolværktøjer derude.

Inden du går igennem de teknikker, der er anført i dette indlæg, skal du sørge for at køre dit websted på et af de værktøjer, der er nævnt her for at tjene som benchmark. Så snart du foretager en websidehastighedsoptimering, skal du sørge for at gå tilbage til værktøjet for at kontrollere, om der er hurtige forbedringer.

Trin 1: Optimer statiske filer

Det første trin i denne vejledning fokuserer på optimering af statiske filer – mest populært i form af stilark (CSS-filer) og scripts (JS-filer).

(a) Flyt CSS til hovedet, JS til bunden

Den første optimering, der skal udføres, er at sikre, at stilarkene findes i sektionen af ​​din sidestruktur, mens alle scripts flyttes til lige over det lukkende tag på din side. Logikken bag dette er enkel:

  • Generelt er stilark mindre i størrelse end scripts
  • Når stilark er indlæst i tagget, før browseren gengiver siden på siden, vil alle elementer, der gengives på siden, have korrekt styling
  • Scripts funktionalitet kommer generelt i spil, når først indholdet af siden er indlæst, så manuskripter kan normalt placeres i bunden

Denne praksis sikrer, at besøgende på dit websted ikke forlader en side i frustration, mens de venter på, at den skal indlæses.

For at håndtere scripts-delen hurtigt, kan du installere Scripts to Footer-plugin til WordPress. Det fungerer på autopilot og gør arbejdet godt.


Scripts til sidefod Scripts til sidefod

Forfatter (e): Joshua David Nelson

Nuværende version: 0.6.4.1

Sidst opdateret: 15. april 2020

scripts-to-footerphp.0.6.4.1.zip


94% Vurderinger


20.000 + Installationer


3.1.0Requires

(b) Indstil minifikation

Minificering er processen med at fjerne de dele af en fil, der ikke er nødvendige for dens udførelse. F.eks. Er dine stilark eller scripts ikke nødvendigt for udførelse:

  • whitespaces for indrykket
  • kommentarer
  • lang funktion og variabelnavne
  • ubrugt kode

Minificering hjælper dig meget ved at reducere størrelsen på dine statiske filer. Du kan minimere dine filer ved hjælp af en tjeneste som Minify, eller installere en af ​​disse minifikationsplugins i WordPress.

(c) Brug asynkron belastning

En webbrowser gengiver og anmoder om ressourcer sekventielt, som de vises på en webside. Dette kaldes synkron belastning. Du kan dog ændre denne standardfunktionalitet i browseren ved hjælp af async-attributten at indlæse ressourcer, så snart de er tilgængelige. For eksempel kan du indlæse et script asynkront som følger:

Her er en liste over plugins, der hjælper dig med asynkron indlæsning i WordPress.

(d) Brug GZIP-komprimering

GZip-komprimering er en teknik til at komprimere ressourcer via HTTP-anmodninger. Med GZip-komprimering sender serveren zippede filer med ressourcer, som browseren pakker ud, mens den gengiver en webside.

Tiden og ressourcerne, der kræves for at komprimere og dekomprimere en ressource opvejes af den tid og båndbredde, der er gemt ved overførsel af en mindre fil fra serveren til klienten. Denne teknik indlæser ikke kun sider hurtigere, men sparer også serveromkostninger.

GZip-komprimering er en del af et par WordPress-cache-plugins som WP Fastest Cache.

(e) Brug Google CDN til populære biblioteker

Den endelige optimeringsteknik i dette trin er at bruge enten Google eller Microsoft CDN når hentning af almindelige biblioteker, der bruges på dit websted. Årsagen bag er enkel – på grund af populariteten af ​​disse CDN’er er det sandsynligt, at en besøgende allerede har en cache-version af ressourcen i deres browser.

Trin 2: Optimer billeder

Som omtalt ovenfor er den primære kilde til stigende størrelser på websidene gennem årene billeder.

Selv kig på CodeinWPs egne numre:

billedbelastning

Derfor, håndtering af billeder skal føre til de mest markante forbedringer i dit websteds hastigheder, og det gør det.

Billeder er vigtige for et websted, men brugen af ​​billeder i fuld kvalitet til internettet anbefales ikke rigtig. Du skal komprimere billeder i en grad, der reducerer størrelsen drastisk, samtidig med at du giver en fair visuel kvalitet.

Du kan gøre et par ting for at få det til og have webhastighedsoptimering i tankerne:

(a) Upload billeder i den rigtige størrelse

Dit nuværende tema har sandsynligvis den maksimale størrelse på billedet, som det er i stand til at vise – dimensionelt. Find ud af, hvad det er, og upload derefter kun billeder, der er maksimalt dobbelt så store som det.

Hvorfor to gange? Dette tillader også temaet at vise versioner af netværkskvalitet af billederne.

(b) Brug den korrekte billedtype

De to mest almindeligt anvendte typer billeder på nettet er JPG’er og PNG’er.

De er ikke ens.

  • JPG-billeder er beregnet til fotos og andre komplekse billeder med en masse farveoplysninger
  • PNG-billeder er perfekte til grafik, der har lidt farveinformation, såsom interface-skærmbilleder.

Eksempel på et PNG-billedetemaer

(c) Optimer billeder lokalt før upload

Der er forskellige værktøjer, du kan bruge, inden du uploader billeder til dit websted.

tinypng
imageoptim

(d) Lazy indlæse dine billeder

En anden teknik til at optimere billeder er doven indlæsning, en praksis, hvor et billede ikke downloades, før en besøgende ruller ned for at se det.

lazyload demoLazy loading demonstration på CodeinWP

Her er en komplet guide til dovne indlæsning af billeder på dit websted.

(e) Få et billedeoptimeringsplugin

Sidst men ikke mindst skal du få et plugin for optimering af billedoptimering til dit WordPress-sted. Afhængig af hvilken du ender med at bruge, får du muligvis størstedelen af ​​dine behov for billedoptimering udført på autopilot.

Her er 6 af de bedste billedoptimerings plugins sammenlignet.

Hvis du har brug for en hurtig anbefaling, så tjek vores egen Optimole. Det giver yderst effektiv billedkomprimering ud over et CDN i den gratis plan! Optimole leverer også nogle fremragende resultater, når de modsættes sine største konkurrenter:

Resultater af PNG-optimering

PluginOriginal PNG SizeAfter OptimizationOptimization% Compression
Optimole301 KB34 KB88.7%Tabt og tabt
Imagify301 KB67 KB77,7%lossy
TinyPNG301 KB79,7 KB73,5%lossy
ShortPixel301 KB90,4 KB69,96%lossy
smush301 KB247 KB17,9%Lossless
EWWW301 KB257,4 KB14,6%Lossless

JPG-optimeringsresultater

PluginOriginal JPG SizeAfter OptimizationOptimization% Compression
ShortPixel518 KB169 KB67,36%lossy
TinyPNG518 KB248,6 KB52%lossy
Optimole518 KB274 KB47%Tabt og tabt
Imagify518 KB338,7 KB34,64%lossy
EWWW518 KB488,9 KB5,7%Lossless
smush518 KB493 KB4,9%Lossless


Billedoptimering & Lazy Load af Optimole Billedoptimering & Lazy Load af Optimole

Forfatter (e): Optimole

Nuværende version: 2.3.1

Sidst opdateret: 21. april 2020

optimole-wp.zip


96% Ratings


50.000 + Installationer


WP 4.7 + Kræver

Trin 3: Optimer HTTP-anmodninger

Tidligere i indlægget diskuterede vi, at når en brugerbrowser begynder at indlæse en webside, udføres de faktiske overførsler via individuelle HTTP-anmodninger. En enkelt anmodning henter hver ressource. Derfor øger antallet af sådanne anmodninger belastningen på din webside.

anmodninger om webstedHTTP-anmodninger fra en webside

(a) Kombiner filer

Den første opgave til at minimere belastningen af ​​HTTP-anmodninger er at kombinere lignende ressourcer. Når du minimerer ressourcer, kan du kombinere lignende filer sammen. For eksempel kan alle stilark (CSS-filer) og alle tilpassede JavaScript-filer kombineres til enkeltfiler. Dette reducerer antallet af anmodninger, som en klient skal indgive for at indlæse alle ressourcer.

Igen, disse minifikationsplugins til WordPress kan hjælpe dig med at gøre det.

(b) Minimer DNS-opslag

Når der fremsendes en HTTP-anmodning til et domæne som www.codeinwp.com, udføres der et DNS (domænenavnsystem) til at finde serverens IP-adresse. Derfor bør dit mål også være at minimere antallet af DNS-søgninger på tværs af alle anmodninger for at fremskynde indlæsning af websteder.

Her er en sej guide af Kinsta om, hvordan man gør det.

(c) Aktivér vedligeholdelse

Uden optimering sender browseren en enkelt HTTP-anmodning for hver ressource. Denne forbindelse lukkes, når overførslen er afsluttet. Browsen fremsætter derefter en ny anmodning til serveren om en ny ressource. Keep live er en teknik, der ikke afslutter en anmodning, når en ressource-download er afsluttet.

Du kan aktivere at holde dig i live på følgende måder:

(d) Minimer omdirigeringer

En omdirigering er en instruktion til automatisk at tage en klient fra et sted til et andet sted i en ressource. Hver omdirigering øger belastningstiderne på din webside, og medmindre det er absolut nødvendigt, skal du undgå omdirigeringer i din kode.

(e) Brug en CDN

Et CDN (indholdsleveringsnetværk) er en samling webservere til stede på store geografiske placeringer, der leverer indhold hurtigt og effektivt til klienter.

En klient, der anmoder om en ressource, vil blive serveret ressourcen fra en server, der er geografisk tættest på klientens placering. Dette sikrer, at det ønskede indhold når kunden på kortest mulig tid!

Vi har en separat ressource, der sammenligner de bedste CDN-løsninger til WordPress-websteder sammen med info om, hvordan man bliver stirret.

Trin 4: Cache

Der kan ikke findes nogen guide til optimering af webstedets hastighed uden et afsnit om cache. Nogle teknikker, som vi diskuterede tidligere, såsom GZip-komprimering og minificaiton, er en del af mange cacheløsninger i dag.

Caching henviser til et fænomen med opbevaring af en ressource i et midlertidigt lager for hurtigt at hente den, når det er nødvendigt. Der er forskellige former for cache:

  • Sidecache: En statisk HTML-version af en side, der er gemt på serveren
  • Databasecache: Resultaterne af almindelige databaseforespørgsler (f.eks. Top 10-indlæg på dit websted) gemt på serveren
  • Browsercache: Gemmer dele af din side i browseren

Vi har sammenlignet de mest populære WordPress-cache-plugins i dette indlæg. TL; DR: Gå ud WP-raket hvis du leder efter en komplet løsning. Alternativt, hvis du foretrækker noget, der er gratis, her er en guide til hvordan man konfigurerer W3 Total Cache.

Trin 5: Optimer til mobil

I de tidligere dele af denne artikel diskuterede vi optimeringsteknikker, der er relevante for både desktop og mobil. Imidlertid stiger forbruget af indhold på mobil, og der er nye udfordringer, som en mindre skærm bringer. Dette afsnit diskuterer således webstedshastighedsoptimeringsmetoder til mobile enheder.

Mobiloptimering henviser til praksis for at sikre, at mobile besøgende på din webside oplever den samme funktionalitet og effektivitet som deres desktop-kolleger. Følgende liste indeholder visse hygiejnefaktorer til sammenlægning af webindhold til mobile enheder:

  • Brug responsivt webdesign for at sikre, at forskellige enheder får forskellige versioner af en webside
  • Undgå brug af flash og pop-ups, da mobile enheder muligvis ikke understøtter det
  • Placer ikke interaktioner såsom links for tæt på hinanden

Ud over disse faktorer er AMP (Accelerated Mobile Pages) et projekt, der sigter mod at skabe indhold, der er hurtigt og konsistent på tværs af enheder.

Her er en guide til at komme i gang med AMP i WordPress.


AMP

Forfatter (e): AMP-projektbidragere


74% Ratings


500.000 + Installationer


WP 4.9 + Kræver

Mere info

amp.1.5.3.zip

Nuværende version: 1.5.3

Sidst opdateret: 15. april 2020


74% Ratings


500.000 + Installationer


WP 4.9 + Kræver

WordPress.org-pluginside


AMP

Konklusion

Jeg håber, at denne guide har givet dig nogle tip til, hvad du skal gøre for at forbedre dit websteds samlede niveau af webstedshastighedsoptimering.

Bare for at sammenfatte; vi kiggede først på anatomi på en webside for at tackle specifikke områder, der kan forbedres. Derefter gik vi videre til specifikke trin til optimering:

  • Trin 1 dækkede optimering af statiske filer i form af stilark og scripts
  • Trin 2 tacklede billeder og deres optimering
  • Trin 3 handlede om teknikker til at optimere HTTP-anmodninger
  • Trin 4 diskuterede et par populære cacheteknikker
  • Trin 5 dækkede optimering til mobile enheder

Er der noget, du kæmper med, når det kommer til webstedsoptimering? Lad os vide det i kommentarerne herunder.

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

Layout, præsentation og redigering af Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector