Den ultimative megaguide til hastigheds optimering af WordPress

Det siger sig selv, at det er vigtigt at have et websted, der er hurtigt og pålideligt – især når praktisk talt alt, hvad vi gør online, kan gøres på et øjeblik. I disse dage er der ingen tålmodighed til langsomme websteder.

Heldigvis, når det kommer til at forbedre webstedshastigheden til WordPress, er der masser du kan gøre for at øge hastigheden og holde dine brugere, kunder og søgemaskiner glade.

I denne artikel dækker vi 29 rettelser, der dramatisk vil forbedre dit eget websteds indlæsningstid, inklusive både generelle hastigheder og udviklingsrelaterede forbedringer.

Dette er ikke bare endnu et “X-tip til at fremskynde WordPress”-tutorial. I denne definitive trin-for-trin guide gennemgår vi alle aspekter af at optimere og fremskynde dit WordPress-websted.

Vi vil se på:

Sådan begynder du

Jeg deler denne artikel op i tre dele. Indledningsvis vil jeg tale om nogle generelle overvejelser og forsøge at få nuancerne af hastighedsproblemerne ud i det fri.

De næste to afsnit vil fokusere på forbedringer, som enhver bruger kan foretage, og forbedringer, som kodere kan foretage. Der vil være en vis overlapning i disse to sidste afsnit. Jeg opfordrer ikke-kodere til at se på begge sektioner, mange hastighedsforøgende taktikker kan implementeres ved at følge simple vejledninger, selvom de kan have noget relateret kode.

Til sidst håber jeg, at alle vil være i stand til at tage mindst et par af ideerne og anvende dem med det samme for at gøre nettet til et hurtigere sted for os alle!

1 – Hvorfor Page Speed betyder noget

Hvis du lever af dit websted, er sidehastighed noget, du ikke har råd til at ignorere. For et stykke tid tilbage fusionerede Loadstorm et par forskningsresultater til en flot infografik, som viser, at et enkelt sekunds stigning i sideindlæsningstider fører til et tab på 7 % i konverteringer, 11 % færre sidevisninger og et fald på 16 % i kundetilfredshed.

Drej denne statistik til sidst, og for alt i verden kan en formindskelse af din hjemmesides indlæsningstid med 1 sekund give dig en nem stigning på 7 % i overskud.

Folk ser også ud til at glemme, at kvaliteten af internettjenester ikke er ensartet over hele verden, selvom du bruger et CDN og optimerer alt.

Din side kan indlæses på 2 sekunder for dig i New York, 2,3 sekunder for din ven i Dublin, men den indlæses muligvis kun på 4-5 sekunder i Indien.

Ved at optimere yderligere kan du muligvis kun sænke din indlæsningstid i USA med 0,3 sekunder, men du kan reducere den med 1,8 i Indien, hvilket ville føre til mere salg. Glem ikke, at nettet er enormt, og ethvert tal, du ser citeret, er et gennemsnit, og ethvert tal, du oplever, er et enkelt udsnit af et meget varieret sæt.

Udover alle de direkte fordele er det en velkendt sag, at sidehastigheden har stor indflydelse på din SEO. Denne artikel fra Yoast belyser sammenhænge mellem Google og et hurtigt websted. En ting er sikker: bedre hastighed = højere placering i Googles øjne.

Hvis du er miljøbevidst, kan du tænke på dette som en øvelse i at reducere dit CO2-fodaftryk. En hurtigere hjemmeside er normalt resultatet af mindre behandling, færre anmodninger og færre data, hvilket betyder, at de computere, der håndterer dit websted, arbejder mindre, hvilket reducerer deres varmeproduktion, hvilket igen betyder, at der er mindre behov for afkøling. Effekten er sandsynligvis ikke mærkbar på et enkelt serverniveau, men ville være målbar i skala.

2 – Hvorfor er en hjemmeside langsom?

At forstå dette er nøglen til at træffe smarte beslutninger senere. Der er en enorm forskel mellem et websted, der kører langsomt, fordi det er på en lavprisserver, og at være langsom på grund af ineffektiv kode eller massive billeder, der indlæses.

Bemærk, at den følgende liste ikke indeholder elementer, der altid kan “rettes”. Jeg vil liste alle de separate lag, der tilføjer til din hastighed. Vores opgave – senere hen – bliver at optimere denne hastighed. Lad os indtil videre lære om alle komponenterne.

Den grundlæggende teknologi

Sproget og den grundlæggende teknologi, du bruger til at køre din hjemmeside, afgør, hvor hurtigt koden behandles på serveren. Hvis du kun bruger HTML, er dette mindre af et problem, men de fleste websteder bruger server-side programmering.

Du kan bruge ASP.net, PHP eller måske HHVM til at udføre PHP-kode. Der er ikke meget, blot en dødelig kan gøre for at øge hastigheden på de grundlæggende sprog.

Selvom jeg ikke er ekspert, tror jeg, at ASP.net teknisk set har evnen til at være hurtigere end PHP, men forskellene er ubetydelige.

HHVM begyndte at overgå PHP, da det blev udgivet, men de to teknologier begyndte at engagere sig i en (venlig) krig, og nu ser det ud til, at den nye PHP 7 vil overgå HHVM, hvilket forhåbentlig vil inducere en præstationsforøgende loop fra disse teknologier, hvilket gør os slutbrugere meget lykkelig.

Et område, hvor du kan gøre en forskel, er hvordan din server er konfigureret. For eksempel kan servere konfigureres til at sende data i et komprimeret format, kendt som gzip-komprimering. Dette er en simpel indstilling, du kan slå til eller fra, og det vil naturligvis øge din hastighed, hvis du tænder for den. Vi vil se på nogle af disse teknikker længere nede.

CMS (Content Management System)

Som en generel regel vil ethvert CMS-system være langsommere end et korrekt lavet statisk HTML-websted. Selvom det er rigtigt, at samlet sidecaching kan minimere hastighedsforskelle, skal caches nogle gange renses, loggede brugere får normalt ikke cachelagrede versioner, og administration af indhold fylder altid flere ressourcer.

Når det er sagt, vil et velbygget CMS-system gøre meget mere gavn end skade. Det vil være mere sikkert, du vil være i stand til at tilføje indhold meget nemmere, og de tilbyder et væld af funktioner, du kan implementere til enhver tid. Alle de velkendte CMS-systemer falder ind under kategorien “vellavet”, så WordPress, Joomla, Drupal og andre er helt fint set ud fra et hastighedssynspunkt.

Hastighedsproblemer kan være mere almindelige i nogle systemer end andre, men dette har normalt at gøre med, at der bruges ekstra kode, såsom temaer, plugins, udvidelser og sådan. Vi tager et kig på disse længere nede.

Grunden til, at indholdsstyringssystemer er langsommere end statiske websteder, er, at de skal oprette forbindelse til en server, serveren skal behandle en anmodning, generere HTML-kode og sende den tilbage til din browser, under behandlingen kan der være mange databaseforespørgsler, der skal skal køres, hvilket også øger læssetiden.

De fleste systemer har mekanismer til at optimere denne proces, hvilket er grunden til, at hjemmesider har en tendens til at indlæse på et par sekunder – hvilket gør disse systemer til en levedygtig løsning.

Udvidelser, Tema og plugins

Jeg mener udvidelser i en fuldstændig generel forstand her: enhver kode, der bruges oven på dit CMS. For WordPress betyder det temaer og plugins, for Joomla og Drupal kan de kaldes skabeloner og udvidelser.

Oftere end ikke er temaer og plugins ikke skabt af de samme personer, som lavede selve CMS’et. Dette betyder, at hvis udviklerne ikke er helt opdateret på nuværende bedste praksis, laver de fejl.

Mens du koder, er der adskillige måder, hvorpå du kan lave suboptimal kode uden faktisk at udløse en fejl.

For eksempel: Hvis du tænker på dine databehov, kan du slippe afsted med at forespørge databasen én gang under en operation.

Hvis du ikke har tænkt over tingene, kan du bruge tre. Afhængigt af dine behov kan tre forespørgsler nogle gange være hurtigere end én, så det er meget vigtigt at vælge dine metoder omhyggeligt.

Det er nogenlunde sådan, det går meget hurtigt ned ad bakke. Vi tager et kig på nogle af de specifikke kodningsteknikker, der sænker din kode nedenfor. For nu er takeaway, at udvidelser tilføjer et lag af indlæsningstid til dit websted.

Med WordPress forstørres negativerne noget af, at fællesskabet er så åbent. Dette er et vidunderligt aspekt af WordPress, som aldrig bør ændres, men det har sine ulemper. Det gør det ekstremt nemt at bidrage med dårlig kode. Intet kan stoppe dig (det burde det heller ikke) fra at skabe et frygteligt kodet tema og derefter sælge det, hvis du vil.

Servere & Hosting

Din server er en stor komponent i at bestemme dit websteds hastighed, især under høje trafiktider. Lad os først adskille disse to udtryk og lære noget mere om, hvordan de påvirker hastigheden.

Din server er en fysisk computer et sted, der har lignende egenskaber som din computer derhjemme. Den har hukommelse, CPU’er, harddiskplads og andre parametre, der dikterer, hvordan den yder.

Din hostingplan er i bund og grund et bundt tjenester knyttet til en server. Dette vil omfatte ting som automatisk sikkerhedskopiering, serverstyring og så videre.

Til vores formål er den vigtigste faktor ved en hostingplan, om du er på en delt plan, en VPS eller en dedikeret server. For nye kunder hos Simply.com kan følgende rabatkode benyttes, der giver ekstra 3 måneders hosting, uanset produkt valget.: R5FZDH

Delte, VPS og dedikerede servere

Disse tre valg repræsenterer forskellige typer af hostingmetoder. Noget forenklet: de bestemmer, hvor mange mennesker der bruger den samme server til deres hjemmeside som dig.

På en delt hosting kan du få hundredvis af mennesker på den samme server. Det betyder, at hundrede mennesker deler den samme harddiskplads, hukommelse, CPU-hastighed og båndbredde. Ressourcer deles ikke ligeligt, et defekt websted kan bruge op til 80 % af en servers ressourcer, hvilket efterlader 99 andre brugere med de resterende 20 % eller dårligere.
En VPS (Virtual Private Server) deles stadig, men normalt mellem færre brugere, og ressourcerne er jævnt fordelt. Hvis der er 5 brugere på den samme server, vil de hver f.eks. få 20 % af hukommelsen. Hvis en bruger forsøger at gå over det, kan deres websted mislykkes, men andre brugeres websteder vil være fint.
På en dedikeret server er du den eneste bruger af serveren og alle dens ressourcer. Dette ophæver fuldstændig den “dårlige nabo”-effekt, som delte tjenester medbringer, og du har flere ressourcer til din rådighed end med en VPS (normalt).

Der tilbydes fuldt dedikeret administreret WordPress-hosting hos Simply.com. Deres hostingplaner kommer alle med dedikeret IP, automatiserede opdateringer, WAF, malware-scanning og meget mere for at sikre, at dit websted forbliver opdateret.

Server parametre

Som jeg nævnte, har den server, dit websted er på, nogle nøgleegenskaber, som bestemmer dens hastighed. Grundlæggende: Jo højere ydeevne din server har, jo bedre vil dit websted præstere.

Det er der selvfølgelig en grænse for. Hvis du har et mindre WordPress-websted med et antal visninger på omkring titusind om måneden, er det lige meget, om din server har 1 GB RAM eller 8 GB. Længere nede, når vi ser på, hvad du kan gøre for at øge din hastighed, vil jeg tale om, hvornår du skal skifte værter og servere, vi vil uddybe dette problem der.

En anden egenskab, der vil gøre en forskel, er din serverplacering. Dette er ret logisk. Hvis serveren er i Danmark, vil du modtage data fra den hurtigere, hvis du er i Danmark, end hvis du er i Melbourne, Australien.

Data har en tendens til at ryste et ben, når de kommer i gang i fiberoptiske kabler – når de nærmer sig lyshastigheder – men når de først kommer tæt på dit hus, sænkes de ned til de hastigheder, som din internetudbyder giver. Det skal også passere gennem firewalls, routere og andre magiske ting, der har en tendens til at bremse tingene.

Afstand har en tendens til at påvirke den hastighed, hvormed du fremsætter anmodninger mest. Hvad jeg mener med dette er, at download af en 1GB fil fra Melbourne ville tage næsten samme tid, som det gør, hvis du downloader den samme fil fra Danmark. Det vil dog tage meget længere tid at downloade 1.024 filer, der er 1 MB, hvis du er længere væk.

Hvorfor betyder det noget? Når en hjemmeside indlæses, kan den lave et stort antal foespørgsler. Dette inkluderer CSS stylesheets, billeder, javascript-filer og mange andre. Ved at minimere forespørgsler kan vi maksimere hastighed / loadspeed.

Bruger computer

Alderen på den computer, du bruger, kan også i høj grad påvirke din opfattede forbindelseshastighed. Jeg har en lidt ødelagt iPad hjemme, og min forbindelse virker meget langsommere på den enhed, end den gør på min iMac.

Der kan være en række årsager til dette, men jeg tror, at den vigtigste er alder. Nedbrydningen af komponenter har fået iPad til at bruge hukommelsen mindre effektivt – den behandler indhold langsommere og er generelt mindre responsiv.

Indtil for nylig var dette ikke et stort problem, da det meste af computeren blev udført på serveren. Med fremkomsten af mere magtfulde klienter og – endnu vigtigere – nye webteknologier, udnytter websteder processorkraft på klientsiden.

Det vil for eksempel betyde meget hurtigere og mere jævne animationer, men det vil også betyde, at langsommere enheder lider.

Som konklusion bestemmes hastigheden af et givet websted af den grundlæggende teknologi på webstedet, dit CMS, din server og din hosting, samt bruger computer.

3 – Sådan øger du din hjemmesides hastighed

Jeg lovede to sider af dette: metoder til udviklere og metoder til ikke-udviklere. Bemærk, at dette ikke betyder, at alle tips til ikke-udviklere er nemme at konfigurere. Jeg vil skelne ud fra, hvor kode-orienteret metoden er.

Grundlæggende: alt, hvad du skal gøre i koden til et tema eller plugin, vil gå ind i udviklersektionen, alt andet går ind i den generelle sektion.

Lad os begynde.

4 – Generelle hastighedsforøgelser

Med generelle hastighedsstigninger henvises til alle de metoder, tips og tricks, du kan udføre uden at røre webstedskode (temaer og plugins). Du skal muligvis redigere nogle serverfiler og bruge terminalkommandoer, men generelt vil disse hastighedsstigninger ikke blive foretaget af din udvikler, medmindre du har nogen internt, som også ved en ting eller to om servere.

Her er en lang liste af ting at gøre. Jeg prøver at følge listen, vi lagde ud med “hvorfor er en hjemmeside langsom?” sektion for at gøre tingene lettere for dig.

5 – Opdater dine kerneteknologier

99,99999999 % af os vil ikke være i stand til at optimere vores PHP, men vi kan sørge for, at det er opdateret. Det er min erfaring, at jo dyrere din vært er, jo mere strengt opdaterer de PHP for dig i et administreret miljø. Mange billige hosting platforme vil først opdatere din PHP-version, hvis du spørger, men vil ikke gøre det automatisk.

Hvis du for eksempel tager et kig på nogle PHP-benchmarks, kan du se, hvorfor dette er vigtigt.

Som du kan se, kan forskellige opdateringer til selve PHP gøre en enorm indflydelse.

Din webudvikler ved, hvor stærkt PHP er

Hvordan du opdaterer din PHP-version, vil være forskellig – afhængigt af din hosting. Hvis du logger ind på dit hosting kontrolpanel, skal du søge efter “PHP Configuration”. Du kan finde en valgboks, der giver dig mulighed for at skifte til forskellige versioner.

Før du skifter, er der nogle farer ved at opdatere PHP. Koden til dit websted og dine filer forsvinder ikke uventet, men hvis du har meget gammel kode kørende, kan du støde ind i uventede problemer. Hvis du er usikker, så sørg for at spørge dit hosting firma, om du kan nedgradere, hvis det ikke går, som forventet.

For mere om PHP og brug af cPanel til at opdatere det, tjek denne korte video.

6 – Opdater dit CMS

Denne burde være en selvfølge nu, men jeg ser stadig nogle websteder, der kører gamle WordPress-versioner. CMS-opdateringer giver generelt ikke en enorm hastighedsstigning fra den ene version til den næste, men de retter sikkerhedsproblemer.

Huller i din sikkerhed kan føre til, at ondsindet kode sprøjtes ind på dit websted, hvilket kan få tingene til at gå langsomt i stå over tid.

Derudover har CMS-opdateringer en tendens til at optimere systemet, så der kan skrives bedre kode til det. Som et resultat heraf vil din database være mindre overfyldt, dine forespørgsler vil være hurtigere, hvilket kan oversættes til en gennemsnitlig hastighedsstigning over tid.

Hvad du kan forvente, hvis du er flittig med dine opdateringer, er en meget længere tid mellem hastighedsfald på grund af f.eks. simpel overbelastning af databasen.

For at se den bedste praksis i at opdatere din WordPress og holde den mindre sårbar, skal du sørge for at læse vores artikel, 7 hurtige og nemme WordPress-sikkerhedsrettelser.

7 – Reducer forespørgsler / anmodninger

Dette er noget, vi vil se nærmere på i udviklersektionen, fordi det er meget nemmere at rette, mens du skriver et tema eller et plugin. Der er dog nogle ting, du kan gøre som bruger for at gøre tingene bedre.

Først og fremmest, for at finde ud af, hvor mange anmodninger dit websted fremsætter, kan du bruge en masse værktøjer. Du kan se alle anmodninger i din browsers udviklerværktøjer, eller du kan bruge et webbaseret værktøj som Pingdom for at få et godt overblik.

Når du tilføjer indhold til dit websted, øger du antallet af anmodninger ved at tilføje billeder eller andre medieelementer. Du tilføjer som udgangspunkt én anmodning pr. vare.

Hvis du tilføjer gallerier til dine indlæg, og de første 5 billeder også vises på dine arkivsider, kan du se på så mange som 60-70 anmodninger på en enkelt side.

Hvis du er fotograf, kunstner eller en billedelskende person, vil du sandsynligvis ikke tilføje færre billeder. I disse tilfælde kan det være en godt valg at reducere dine indstillinger pr. side eller vise færre billeder på dine arkivlister.

For at reducere dine indlæg pr. side skal du gå til læseindstillingerne i WordPress og sænke den til 8 eller 6.

Overvej at skære ned på plugins, der påvirker frontenden af webstedet. Mange plugins tilføjer deres egne stilarter og scripts, hvis du deaktiverer dem, sparer du 1-2 anmodninger, hvis plugin’et er godt kodet, eller så mange som 7-8, hvis det er et spildprodukt.

At skifte tema kan også spare dig for mange anmodninger, selvom dette i mange tilfælde ikke er en holdbar mulighed. Jeg har bemærket, at især premium-temaer – dem, der tilbyder absolut alle funktioner – har en tendens til at indlæse alt for mange scripts og stilarter unødigt.

Lazy loading billeder er et kraftfuldt værktøj, der kan få dit websted til at virke hurtigere. I virkeligheden mindsker du ikke anmodningerne, men du forsinker behovet for at indlæse dem. Ideen bag lazy loading er, at billeder, der vises længere nede på siden, egentlig ikke skal vises, før brugeren ruller i nærheden af dem.

Der er en god artikel, der sammenligner 6 Lazy loading-plugins, tag et kig der for mere info.

En af de bedste metoder til at mindske anmodninger er sammenkædning. Dette er, hvad vi vil tale om i detaljer i kodernes sektion. I stedet for at indlæse 10 JavaScript-filer, kan du i det væsentlige kopiere og indsætte dem en efter en i en enkelt fil. Dette ville betyde, at du i stedet for at downloade 10 filer på 20 kb i gennemsnit kunne downloade en enkelt 200 kb fil, som er meget hurtigere. Dette er nemt nok at gøre, når du koder webstedet, men meget mere vanskeligt bagefter.

Et plugin som Merge + Minify + Refresh automatiserer processen noget, men jeg har haft blandede resultater. Giv det en chance, hvis de virker, vil du muligvis se en betydelig reduktion i antallet af forespørgsler.

Når alt dette er sagt, anbefaler vi at bruge dette lazy load plugin, Smush.

Smush er en perfekt løsning for lazy load od billed optimering.

Smush er en perfekt løsning til lazy loading af billeder.
Smush er det mest populære alt-i-et billedoptimeringsplugin, fordi alt det nødvendige for at få dine billeder til at indlæses hurtigere, er inkluderet.

Aktivering af lazy loading med Smush sker med et enkelt klik. Derudover kan du justere dine indstillinger, når lazy loading er aktiveret (selvom det ikke er nødvendigt i de fleste tilfælde).

Derudover er det et gratis plugin.

Selvom jeg især hader indlæg, der indeholder paginering i dem, kan det i nogle tilfælde give mening at opdele et indlæg i flere sider. Gør det ikke for at øge sidevisningerne, men hvis du har en hyper-mega-super-ressource, der viser dine foretrukne 500 hoteller med billeder, kan det være en god idé at opdele den i sektioner på 25 – 50.

8 – Fjern unødvendige og spildte plugins

Plugins øger ikke kun dine anmodninger, men kan forårsage alle mulige andre problemer som hukommelse eller endda sikkerhedslækager. Et fantastisk plugin kaldet P3 (Plugin Performance Profiler) kan hjælpe dig med at identificere de mest problematiske syndere.

Du kan også deaktivere alt, du sjældent bruger. Jeg bruger ofte værktøjer som Regenerate Thumbnails, Theme Check, eller især P3. Selvom disse er uvurderlige, når de er i brug, har jeg brug for dem cirka en gang om måneden. Når jeg ikke bruger dem, deaktiverer jeg dem for at sikre, at de har absolut ingen effekt på ydeevnen.

9 – Fjern unødvendigt eye-Candy

Der er mange – primært JavaScript-drevne – designelementer og moduler på websteder, der kan se pæne ud, men som ikke rigtig giver mening. Lad mig give dig to eksempler.

Det første eksempel omhandler frustrerende elementer. Lad os antage, at du har en brugermenu, der foldes ud med en fed animation, når du svæver over den. Når en bruger først ser det, vil de synes, at det er ret fedt. Men efter den tredje brug vil de blive mere og mere irriterede – hvorfor skulle de vente et sekund på, at den forbandede menu vises?

Dette skyldes normalt, at programmører og webstedsejere ikke bruger webstedet på samme måde som deres brugere. Brugere vil højst sandsynligt bruge login-linket eller formularen i overskriften. Sørg for at give dine brugere en flydende oplevelse, ikke en, der bare ser cool ud, men som er frustrerende i det lange løb.

Bortset fra det rent visuelle UX-aspekt, vil din hjemmeside få nogle hastighedsfordele. Der vil være færre elementer at animere, mindre Javascript i alt, som alle vil opleve en hjemmeside, der faktisk er hurtigere eller en, der virker hurtigere – hvilket er det samme.

Det andet eksempel handler om effektivitet og konvertering. Mit yndlingseksempel her er “sliders”. Næsten hver eneste forskningsartikel peger på den samme konklusion: “slides” er simpelthen forfærdelige. Ingen bruger dem, de fylder for meget, de mindsker din SEO og tager en enorm vejafgift på dit websteds hastighed.

Jeg vil gerne understrege, at for en virksomhed er målet med din hjemmeside ikke at se smuk ud. At se smuk ud er et værktøj, der bruges til at nå det virkelige mål: at tjene penge. Hvis al forskning peger på, at du bør slette den “slider”. Hvis dette øger din omsætning, er du så ligeglad?

I en ideel verden bør du se på alle elementer på dit websted og tage nogle beslutninger eller i det mindste kvalificerede gæt. Læs op om emnet, lav din research, og mål mest af alt resultatet.

Husk også, at i nogle tilfælde er total fjernelse fint, i andre tilfælde vil du gerne udskifte et element. Blot at fjerne din skyder kan føre til lavere konverteringsrater, men måske at erstatte den med simpel tekst og links ville øge den langt over niveauet for skyderens effekt.

10 – Brug et CDN

For mig er CDN’er webstedets magiske punkt, de gør alting meget enklere og hurtigere. Der er to grunde til, at jeg elsker at bruge CDN’er: de giver mig mulighed for at hoste billeder uden for serveren, og de reducerer billedindlæsningstider.

Til denne artikel er sidstnævnte grund det, vi vil fokusere på, dog kun kort – jeg kan godt lide at hoste billeder off-server, fordi det frigør mit indhold fra mine medier. Jeg kan ændre mit domæne. Jeg kan flytte fra vært til vært. mine medier er altid det samme sted. En gennemsnitlig hjemmesides database og tema ville fylde måske 10-25 Mb. Der kan dog også være 2 Gb billeder, der skal overføres. Hvis disse alle er hostet off-server, behøver du kun at bekymre dig om de 25 Mb, hvilket ikke er meget.

Tilbage til farten! Ideen bag et CDN (Content Delivery Network) er at placere efterspurgte ressourcer geografisk tættere på brugeren.

Jeg selv benytter CDN via Woocommerce og Jetpack, der udnytter StackPath-serverne. Det fungerer ekstremt godt på de fleste vigtige steder.

Hvis du gerne vil omsætte dette til praksis, læs vores opsummering af de bedste CDN-tjenester for at hjælpe dig i gang. Mange – såsom Amazon Cloudfront – har WordPress integration plugins, hvilket betyder, at du kan indstille og glemme.

11 – Aktiver cachelagring

Caching er sandsynligvis den bedste metode at bruge, fordi det kan føre til de mest drastiske forbedringer. Ideen bag caching kan forstås med en simpel analogi. Kan du huske, da du første gang lærte addition i skolen? Du skulle regne 5+4 ud. Du brugte dine fingre eller hvad der var lige ved hånden (min mor lærte mig med sukkerterninger) til at regne det ud.

I dag vil jeg vædde på, at du bare husker svaret og automatisk ved, at det er 9. Din hjerne har i det væsentlige cachet resultatet for dig, du behøver ikke længere at tælle fingre til det.

Med hjemmesider er der et problem- resultatet af ligningen er ikke altid det samme! Her er hvorfor. Forestil dig en hjemmeside, der ikke har andet end dit navn og det aktuelle årstal. Indholdet på denne hjemmeside ændres kun én gang om året. Men hver gang du indlæser webstedet, beregner serveren, hvad det aktuelle år er.

Hvad caching kan gøre, er i det væsentlige at gemme en HTML-kopi af webstedet i en given tid. I vores eksempel ovenfor kunne vi indstille cachen til at udløbe en gang om dagen. Dette betyder, at en gang om dagen vil hjemmesiden indlæses normalt: den vil registrere en anmodning, få serveren til at behandle koden og spytte resultatet tilbage som HTML. Det ville også gemme den resulterende HTML i hukommelsen.

Næste gang nogen indlæser webstedet, vil cachen indlæse HTML’en fra hukommelsen i stedet for at få serveren til at behandle den. Dette er måske ikke meget for et eksempel så simpelt som dette, men for et gennemsnitligt websted kan dette barbere sekunder fra indlæsningstiden.

Det, jeg lige har beskrevet, var en helsides cache, der er mange andre typer – caching er en profession i sig selv. Heldigvis kan du meget nemt komme i gang, hvis du arbejder med WordPress.

Der er en artikel om de bedste WordPress Caching-plugins sammenlignet på wpmudev – læs artiklen og vælg! Men det kan også gøres uden plugins.

Et af valgene i denne artikel er Hummingbird-plugin.

Hummingbird er her for dine cachingbehov.
Hummingbird er gratis at bruge og har en effektiv browsercache til cachelagring af ethvert websted. Hun indlæser sider hurtigere med sit helsides-, Gravatar- og browsercacheværktøj.

Der er en bazillion indstillinger for hvert plugin, jeg anbefaler at læse om hver indstilling for at få den bedste ydeevne.

Når det er sagt, og efter min erfaring, kun bruger de grundlæggende indstillinger, vil du opnå mindst 80% af de maksimale hastighedsstigninger, så det er værd at komme i gang, selvom du er en relativ nybegynder.

Du skal også være opmærksom på, at der kan opnås bedre caching på serverniveau. Nogle administrerede WordPress-løsninger tilbyder caching på serverniveau, som altid vil være hurtigere. Mange af disse hosts tillader dig ikke at installere caching-plugins, simpelthen fordi det bare ville føre til et langsommere websted.

12 – Optimer din database

Over tid vil din database få en vis dødvægt, dette er stort set uundgåeligt. Der er to hoveddele til denne ligning: ubrugte data og overhead på databaseniveau.

Ubrugte data kan komme fra en række steder. Hvis du har nogle tilpassede løsninger til at slette brugere, sletter de anvendte metoder måske ikke tilknyttede brugermetadata. Dette kan efterlade hundredvis af rækker i databasen, som ikke er knyttet til nogen.

Du kunne også have brugt en række brugerdefinerede felter i databasen, som ikke længere er nødvendige. Da disse brugerdefinerede felter kan være blevet tilføjet til hundredvis af indlæg, taler vi om hundredvis – hvis ikke tusindvis – af rækker.

At rydde op i dette er ikke enormt svært. Jenni McKinnon skrev en fantastisk artikel om at holde din database ren, og der tales længe om dette i afsnittet “Ryd op og migrér databasen” i artiklen om hvordan du genopbygger dit websted på wpmudev bloggen.

Til hjælp på databaseniveau kan du bruge et værktøj indbygget i MySQL, som tager sig af det automatisk for dig – det kaldes tabeloptimering. Det minder meget om diskdefragmentering for harddiske. Tag et kig på afsnittet “Optimer dine tabeller” i Jennis indlæg for at se, hvordan dette gøres.

13 – Optimer dine billeder

Vi har allerede talt om at bruge færre billeder, lad os vende vores opmærksomhed mod dem, du faktisk skal bruge. Komprimering af billeder kan gøre dem mindre med 30 % – 80 % uden nogen mærkbar forskel.

Et af de bedste værktøjer at bruge er naturligvis WP Smush, som bruges af over 1 million WordPress-installationer. Du kan endda ændre størrelsen på billeder automatisk.

Jeg bruger personligt Adobe PhotoShop, eller du kan bruge Imageoptim til OS X til at masseoptimere billeder, eller den populære RIOT på Windows.

14 – Aktiver Gzip-komprimering

Dette kan være endnu en potentielt stor hastighedsgevinst. Gzip-komprimering komprimerer forskellige aktiver, før de sendes til din browser til fortolkning. Dette er noget, der skal sættes op på din server. Tag et kig på denne GTmetrix-artikel for en hurtig tutorial om, hvordan du får dette til at ske.

Grunden til at dette hjælper så meget er, at CSS og HTML bruger meget gentaget indhold. Jo flere mønstre du har i dit indhold, jo bedre kan det komprimeres. Et meget rudimentært eksempel:

Hvis du har “Michael og A3-Seo.dk er fantastisk” 100 gange i dit websteds kode (og hvorfor ville du ikke?!), kan du erstatte den tekst med “12d”, hvilket sparer masser af plads. Dette er essensen af enhver kompression, og jo flere (og længere) mønstre du har, jo højere kompression kan du opnå.

Hummingbird kan hjælpe med Gzip-komprimering – gratis. Sørg for at læse artiklen om, hvordan du optimerer Hummingbird for mere information.

15 – Deaktiver Hotlinking

Dette kan ikke fremskynde dit websted direkte, men det tager en belastning af din server, især hvis du har et populært websted. Hotlinking er, når et billede vises på et andet websted end din server.

Med andre ord, i stedet for at gemme dit billede og uploade det til min egen server, linker jeg bare til det på din server, og stjæler effektivt din båndbredde. Dette er ligesom at stjæle en andens Wifi.

Heldigvis kan dette forhindres med noget .htaccess-magi. Læs hvordan du får dette gjort i denne korte artikel fra JavascriptKit.

16 – Vælg en god host

Der er meget at overveje med dette. Selvfølgelig, som nævnt tidligere, tilbyder simply.com hosting, der burde fungere godt til dine behov. Du har dog muligheder.

Min korte, oversimplificerede guide er følgende: Brug ikke delt hosting, medmindre du absolut er nødt til det, eller du har en masse sider, du slet ikke bruger. Disse koster omkring 38,- DKK/måned, og det er omtrent, hvad du får. Upålidelig service er tilbøjelig til at gå ned på grund af overforbrug af ressourcer.

En anden mulighed er administreret WordPress-hosting ( simply.com har). Denne type hosting tilbyder en mere WordPress-centreret tilgang. På en VPS kan du køre et hvilket som helst program, du kan lide, administreret WP-hosting tillader naturligvis kun WordPress.

Som et resultat er serverne bygget specifikt med WordPress i tankerne, tilbyder caching på serverniveau og andre godbidder, der får dit WordPress-websted til at køre som flammerne.

På bagsiden kan der være nogle begrænsninger for, hvad du kan og ikke må. Værten kan deaktivere nogle plugins og temaer på grund af hastigheds- eller sikkerhedsproblemer. I slutningen af dagen tjener disse alle et godt formål, men kan være afskrækkende for nogle.

17 – Overvåg dit websted

Dette vil ikke fremskynde dit websted, men vil advare dig, når noget går galt, og du vil være i stand til at fange en nedadgående tendens med tiden. At reagere på et hastighedsproblem, før det bliver bemærket, er en fantastisk måde at fastholde glade brugere på!

Domæneovervågningstjenester som Jetpack, Pingdom og andre kan automatisk teste dit websted regelmæssigt og automatisk.

18 – Temaer

En række WordPress-temaer giver en temaoptimeringssektion (f.eks. Avada).

Temaer som Avada giver muligheder for justering af ydeevne.

Konfiguration af disse muligheder i dit tema kan gøre en enorm forskel for din overordnede webstedshastighed, især temaer, der bruges med populære sidebygger-plugins som Elementor, WPBakery, Divi osv., som tilføjer ekstra kode, der kan sænke dine sideindlæsningshastigheder.

19 – Skrifttyper

Det er ikke noget, du måske nogensinde har overvejet, men tro det eller ej, skrifttyper kan tynge dit WordPress-websted og forårsage forlængede indlæsningstider.

Når det kommer til Google-fonts, skal de også anmodes om og indlæses. Det gælder for hver skrifttype på siden – hvilket kan få dit websted til at halte.

WP Rocket har en funktion til optimering af Google-fonts. En anden mulighed er Swap Google Fonts Display, som også kan hjælpe.

Derudover anbefales det at bruge én skrifttype til hele dit websted.

20 – Udviklingsrelaterede hastighedsstigninger

Udviklere kan lide at sige, at faldende hjemmesidehastigheder – oftere end ikke – er brugerens skyld. Der er selvfølgelig en vis sandhed i dette, men jeg tror, at mange udviklere skriver kode, hvilket er beslægtet med at lyve ved udeladelser.

Teknisk set er koden ikke defekt, den indeholder ikke fejl, den forsøger ikke aktivt at bremse dit websted. Det gør dog ikke meget for at øge hastigheden eller sikre, at den forbliver hurtig i et stykke tid. Der er absolut ingen ondskab bag dette, det er bare sådan meget af vores kode har udviklet sig.

Her er nogle af de ting, vi udviklere kan gøre for at sikre, at vores produkter kører problemfrit og hjælper med at holde den faldende ydeevne på afstand så længe som muligt.

21 – Kend dine værktøjer

Dette virker som sådan en simpel lille opgave, men få udviklere ser ud til virkelig at forstå, hvad det betyder. Der er ingen måde, du kommer til at vide alt om noget så stort som WordPress. Hvad du kan gøre, er at opfange tegn på, hvornår du bør lave research. Med andre ord: Kend dit håndværk og lær mere løbende.

Lad mig give dig mit yndlingseksempel. Har du nogensinde været nødt til at trække et stort antal metafelter til et indlæg? Bruger du måske get_post_meta() 20 gange på siden, synes du måske, det er spild, det ser ud til, at vi laver 20 databaseanmodninger.

Jeg har set folk bruge WPDB-klassen til direkte at fange al post-meta og bruge array-funktioner til at omarrangere og få den post-meta, de har brug for. Selvom jeg værdsætter intentionen bag det, er den fuldstændig malplaceret.

Første gang du bruger get_post_meta() fanger den faktisk al post-meta helt af sig selv og cacher resultatet. Alle efterfølgende opkald til det samme indlæg vil bruge de cachelagrede data, ikke databasen direkte.

Før du træffer nogen beslutninger som den ovenfor, skal du sørge for at konsultere WordPress Codex og læse op på relevante materialer.

22 – Reducer anmodninger

Her går jeg igen omkring forespørgsler … Som udvikler er dette dit ansvar. Hvis dit tema eller plugin bruger tonsvis af Javascript og CSS, skal du sammenkæde dem! Jeg kan personligt godt lide at sprede mine scripts og stilarter i masser af filer, fordi dette er bedre til udvikling.

Her kan Hummingbird igen hjælpe med at håndtere forespørgsler.

Et andet kraftfuldt værktøj, du har til din rådighed, er sprites. Sprites er sammenkædede billeder. I stedet for at indlæse alle dine sociale ikoner separat, kan du kombinere dem til et enkelt billede og bruge det billede som baggrund og placere det helt rigtigt, så kun det område, du har brug for, er synligt. Twitter bruger sprites, ligesom mange, mange andre store hjemmesider på grund af deres anmodningsvenlige egenskaber.

Når jeg har brug for en sprite, bruger jeg normalt det fremragende onlineværktøj Stitches. Dette værktøj giver dig mulighed for at uploade billeder og arrangerer disse optimalt for dig, og genererer automatisk de stilarter, du har brug for.

23 – Formindsk filer

Sammenkædning og minificering går normalt hånd i hånd. Når du har lavet dine endelige filer, er det på høje tid at gøre dem så små som muligt. Når alt kommer til alt, har din browser ikke brug for alle dine søde kommentarer, mellemrum, linjeskift, fordybninger – den er helt tilfreds med en masse ulæselig kode.

Jeg bruger også Hummingbird til dette, men der er andre byggeværktøjer som Grunt og webbaserede værktøjer til specifikke opgaver som fnug, billedoptimering, modifikation og så videre.

24 – Indlæs scripts i sidefoden

Hummingbird kan tage sig af dette for dig i området Asset Optimization.

Med Hummingbirds aktivoptimering kan du fremskynde dit websted på ingen tid.

Når det er aktiveret, vil dette øge webstedets tilsyneladende hastighed. Det mindsker ikke anmodninger eller filstørrelser, men det sørger for, at væsentligt indhold indlæses først. Derudover, hvis et script sætter sig fast, forhindrer det ikke indholdet i at blive indlæst.

25 – Prioriter indhold

Andet indhold kan også prioriteres, ligesom at placere scripts i sidefoden. Hvis din sidebjælke indeholder relateret information og ikke-essentielt indhold (som det nok burde), kan du sørge for, at det indlæses senere end hovedindholdet.

Dette er selvfølgelig ikke altid en mulighed, men hvis du prøver at indlæse vigtigt indhold så hurtigt som muligt, ender du med et websted, der virker hurtigere og muligvis også rangerer højere fra et SEO-synspunkt.

26 – Brug korrekte billedstørrelser

Når du udskriver billeder i WordPress, kan du angive den billedstørrelse, der skal bruges. Oftest ved du, hvor store disse billeder vil være: fremhævede billeder, små opslagsikoner, avatarer og så videre.

Ved at bruge funktionen add_image_size() kan du angive disse billedstørrelser. Dette betyder, at når et billede uploades, vil WordPress faktisk oprette en kopi af det uploadede billede i den størrelse.

Ideen her er, at hvis vi har brug for et 600×320 billede, skal vi tage et billede af den nøjagtige størrelse af to grunde:

Hvis vi tager et større billede, spilder vi båndbredde og reducerer hastigheden
Ændring af størrelsen på et billede – uanset om vi skal ned eller op i størrelsen – tager processorkraft på bruger siden, og vil også reducere billedkvaliteten

Smush kan selvfølgelig også hjælpe, når det kommer til korrekte billedstørrelser. Sørg for at lære mere her.

27 – Reducer og optimer forespørgsler

Databaseforespørgsler kan føre til betydelige hastighedsfald, primært på grund af hukommelsesbrug. Jeg har arbejdet på et projekt, hvor serveren gik ned så mange gange på grund af defekte forespørgsler, at værten midlertidigt deaktiverede webstedet.

Der er to taktikker at bruge her. Reducering og optimering af forespørgsler. Ikke at som jeg diskuterede ovenfor, kan optimering faktisk betyde, at øge antallet af forespørgsler for at erstatte en særlig ressourceslugende forespørgsel.

Først og fremmest skal du undgå rå databaseforespørgsler i WordPress. Der er legioner af funktioner til din rådighed for at få alt fra indlæg til kommentarer, tilpassede taksonomier og metadata.

Hvis du selv har brug for at skrive en forespørgsel, skal du sørge for at bruge WPDB-klassen for maksimal sikkerhed og effektivitet. Prøv at undgå at forbinde tabeller eller andre komplekse ting, i mange tilfælde er det bedre at bruge to separate, men langt hurtigere forespørgsler.

Der er tonsvis af værktøjer til at finde ud af, om dine forespørgsler er velskrevet, og til at se alle forespørgsler køre under en anmodning.

Du kan bruge Query Monitor-plugin’et eller bruge define(‘SAVEQUERIES’, true) i din konfigurationsfil og udskrive alle forespørgsler via $wpdb->queries.

Du har også mulighed for at logge langsomme MySQL-forespørgsler. Dette er slået til for mange værter, eller du kan selv slå det til, eller bede din vært om at gøre det for dig. Du kan finde mere information om dette emne på MySQL-webstedet.

28 – Brug aktiverings-, deaktiverings- og afinstallation af hooks

Mange ting, et plugin opnår, behøver faktisk ikke at blive gjort på hver forespørgsel. Oprettelse af yderligere roller, genskabelse af omskrivningsregler, tilføjelse af brugerdefinerede databasetabeller og så videre er blot et par af dem.

Du bør pakke disse ind i en aktiveringsfunktion, som kun kører, når plugin’et er aktiveret. Dette skærer ned på behandlingen og fremskynder dermed tingene.

På den anden side bør du sørge for at fjerne nogle af disse ved deaktivering og fjerne nogle af dine komponenter helt ved hjælp af deaktiverings- og afinstallation af hooks.

Dette hjælper WordPress-databasen med at forblive uberørt, hvilket forsinker den tid, den vil bremse på grund af overload. Når dette uundgåeligt sker, vil en simpel optimering være nok til at få tingene tilbage på sporet igen.

29 – Uddan dine kunder

Ja, det er rigtigt, at kunder og almindelige brugere laver deres egne hjemmesider langsomme i mange tilfælde, men dette er i høj grad en faktor for bedre at uddanne dem. Oprettelse af slutbrugerdokumentation vil hjælpe webstedet med at forblive hurtigt, øge kundetilfredsheden og endda sænke din arbejdsbyrde i det lange løb.

Fokuser specifikt på de aspekter, der kan forårsage problemer såsom korrekt brug af plugin, ikke at installere 24 analyseværktøjer på én gang og så videre.

30 – Konklusion: Hastighed er ikke alt

Jeg vil gerne understrege, at selvom hastighed er ekstremt vigtig, er det ikke alt. Taget til det ekstreme, kan du deaktivere billeder helt og næsten ikke bruge styling og JavaScript. Dette kunne sænke din sideindlæsningstid til 345 ms, men ville det virkelig tjene noget andet formål end et meningsløst kapløb? Husk altid, hvad målet med din hjemmeside er.

Hvis det skal tjene penge, bør du sætte alt ind for at nå det mål. Et mål opnås normalt gennem den smarte balancering af flere værktøjer, hjemmesidehastighed er blot et af disse værktøjer.

Du skal gøre webstedet visuelt tiltalende, du skal gøre det brugervenligt, og du skal give de nødvendige oplysninger til dine brugere. Dette betyder normalt at indgå et kompromis på andre områder.

Du bør også veje de økonomiske og tidsmæssige omkostninger ved at fremskynde dit websted. At betale en anden $2.000 eller bruge en måned på at sænke din gennemsnitlige indlæsningstid fra 3,4 sekunder til 1,8 sekunder kan være det værd, men jo lavere du går, jo sværere bliver det.

At bruge yderligere 2.000 USD eller en måned for at få det fra 1,8 til 1,2 er måske ikke et godt valg. Du kan bruge disse penge eller tid på at få yderligere salgsemner, på markedsføring eller bare tage dit team med på ferie.

Jeg håber, at denne guide vil hjælpe dig med at gøre dit websted en smule hurtigere – hvis du kun gør en eller to ting, der er nævnt, er det allerede fantastisk. Hver lille smule tæller.

_____________________________________________________________

Mike, en af vores fantastiske læsere, har lavet et casestudie om, hvordan han optimerede sit websted fra 4,23s til 1,33s. Det er især interessant, fordi Mike ikke er en WordPress-guru, han nærmer sig det fra en avanceret brugers synspunkt.

For mere information, sørg for at tjekke denne præstationsoptimeringsvejledning. Det vil vise dig, hvordan du justerer alle dine indstillinger for maksimal ydeevne med plugins som Smush Pro og Hummingbird Pro.

Sørg også for at læse om, hvordan du tjekker dit WordPress-websteds hastighed med den nye GTmetrix.