WP Rocket-tutorial til at optimere hastigheden på dit website

Hvad er WP Rocket?

WP Rocket er et plugin, der startede som en løsning på de forskellige cache-optimeringer i WordPress. I dag er det meget mere, og vi kan ikke bare optimere cache, men stort set alt, der har med optimering af indlæsningshastighed at gøre.

Som bevis på effekten kan du kigge på performance på vores eget site MED og UDEN WP Rocket:

Hvorfor bruge WP Rocket?

Vi har sagt, at der findes andre alternativer til WPO-optimering, og alle må bruge det, de finder bedst, men i vores tilfælde har vi en særlig forkærlighed for WP Rocket. Den intuitive brugerflade, der virker med et klik i et felt, og de mange muligheder for at sætte cache op og styre indlæsningen af ressourcer gør WP Rocket til vores favorit blandt alle mulighederne.

Hovedmenuen i WP Rocket

Lad os antage, at vi har fået installeret WP Rocket uden problemer, og gå i gang med at forklare brugerfladen og de forskellige muligheder for optimering. Klikker du på dashboard-fanen, dukker følgende skærm op:

En velkomstbesked og nogle muligheder, som vi til at begynde med kan lade være, men som vi forklarer her.

My Account

Har du købt WP Rocket, fører feltet "View my account" dig til brugersiden hos WP Rocket, så du derinde kan udfylde og tjekke alt omkring din brugerprofil: data, fakturering og så videre.

RocketCDN

RocketCDN er en CDN-tjeneste, som WP Rocket har tilbudt i forholdsvis kort tid. Formålet er at give de nødvendige værktøjer til den bedste performance, uden at du skal lede efter løsninger uden for pluginnet. Der findes andre meget udbredte og lige så effektive CDN-tjenester som Cloudflare og Amazon CloudFront.

My Status

Under den mulighed har vi to kontakter, vi kan slå til:

• ›

  Rocket Tester: det er WP Rockets forbedringsprogram til at teste deres BETA-versioner. Du skal kontakte dem på mail.

• ›

  Rocket Analytics: du accepterer at dele dine performance-data fra WordPress anonymt med udviklingsteamet for at hjælpe med at forbedre WP Rocket.

Der er ikke meget at sige her. Det er en personlig beslutning, som ikke burde påvirke performance.

Cache-opsætning i WP Rocket

Så er det tid til at gå i gang med indstillingerne, og vi starter med cachen:

I pluginnets anden fane kan vi se, hvilke cache-muligheder det giver os. Husk, at vi i WP Rocket optimerer sidens cache, og at vi, som vi ser nu, også har en mulighed for indloggede brugere — men den mulighed skal vi passe på med.

Mobilcache

Normalt tæller vi tablets med, når vi taler mobil, men denne gang taler vi kun om mobiltelefoner. WP Rocket ser via user agent, at vi surfer fra en smartphone.

Vi slår altid den mulighed til, for som hovedregel er design til desktop og mobil forskelligt, og medmindre vi ikke har en responsiv version, vil muligheden altid være slået til. For at gøre det klart: hvorfor skulle vi have 2 cachede versioner leveret, hvis designet var det samme? Med andre ord: havde vi ikke en mobilversion, ville vi ikke have den cache behandlet anderledes, vel?

Her kommer der en undtagelse. Har vi en mobilversion med ressourcer eller elementer, der kun bliver hentet i den version, gemmer vi filerne hver for sig.

Eksempel:

• ›Vi har en annonce, der på mobil henter en JS, som desktopversionen ikke har.

I det tilfælde ville vi netop gemme separate filer til mobil.

Brugercache

Brugercache er en mulighed, WP Rocket giver til de brugere, der surfer, mens de er logget ind.

Slår vi muligheden til, kan vi give hver bruger en individuel cache-version. Det bedste er at slå den til, hvis brugerne logger ind, men du skal være ekstra opmærksom på, hvilke sider der bliver cachet og hvilke ikke, for hvis brugeren indtaster personlige data (for eksempel bankoplysninger), kan det give os juridiske problemer at gemme dem i cachen.

Hvordan holder du en side ude af cachen?

Vil du undgå den slags problemer, er det bedste at gå direkte til den side, du vil holde udenfor, og i WP Rocket-mulighederne (i sidebaren eller nederst) vælge "never cache this page".

Cache-levetid

I den her del skal vi bare angive, hvor længe vi vil have, at de cache-filer, der bliver lavet, skal leve. WP Rocket laver nemlig en fil, der gemmer versionen af din side, og den fil er den, brugeren får leveret, når de går ind på websitet.

Via en procesmanager (CRON) bliver filer, der er ældre end den angivne levetid, slettet, og der bliver lavet nye.

Ting, du skal huske

WP Rocket tager allerede højde for visse processer, når den skal slette og lave nye cache-filer:

• ›

  Oprettelse af nye indlæg, sider, kategorier, taksonomier eller redigeringer

• ›

  Oprettelse og redigering af nye moduler, widgets eller andre elementer på websitet

• ›

  Når WP Rocket-indstillinger, der påvirker frontend, bliver ændret.

Ellers skal du huske, at cache-filer fylder plads på din server, og den plads er begrænset. Det er også en god idé at rydde cachen fra WP Rocket, så den bliver opdateret, og der ikke ligger filer tilbage, som ikke bliver brugt længere.

Hvad angår tiden, kan du lade standardværdien stå.

Filoptimering i WP Rocket

Efter den korte gennemgang af cache-opsætningen er det tid til at arbejde med filoptimering. Filoptimering går ud på at lette indlæsningen og renderingen af HTML. Hvordan gør vi det?

På flere måder:

• ›

  Ved at skære vægten af filerne ned

• ›

  Ved at fjerne unødvendige filer, og

• ›

  Ved at køre filerne løbende, efterhånden som der er brug for dem.

CSS-filer

CSS-filer står for den visuelle del af websitet. Stilarkene, der giver vores WordPress form, farve og stil. Her gælder det, at et flot design ikke nødvendigvis er et optimeret design, for designeren har måske ikke fulgt en række grundlæggende optimeringsregler, da CSS'en blev bygget.

Blandt de mest almindelige problemer, vi støder på med stilark, er:

• ›

  Tunge CSS-filer

• ›

  CSS-filer, der bliver hentet på sider, som ikke bruger de styles

• ›

  Dårligt byggede CSS-filer

• ›

  For mange eksterne CSS-filer, der bliver hentet

• ›

  Brug af @import til at hente eksterne stilark

Kort sagt findes der en verden af udbredte vaner, som ikke kan anbefales, hvis man vil optimere et godt design, men lad os komme til det, WP Rocket giver os.

Minificér CSS-filer

Muligheden går ud på at skære vægten af CSS-filerne ned ved at fjerne mellemrum og linjeskift. WP Rocket gør det, når du sætter flueben i feltet.

SEO Alive-tip: Hver gang vi laver noget, er det en god idé at prøve at indlæse websitet for at se, om alt er i orden. Gør det i browserens inkognitotilstand.

Processen er vist på følgende billede, der er taget fra værktøjet minifier.org.

Læg CSS-filer sammen

Funktionen laver en slags "kopiér og indsæt" af koden fra én CSS ind i en anden, så man undgår at hente flere CSS-filer og kun har én.

Det kan anbefales at blive ved med at teste, for det afhænger meget af, hvordan temaet er udviklet. Har jeg en CSS-fil, der kun bliver hentet på en bestemt type side, vil jeg jo netop ikke have den kode lagt ind i én enkelt fil på alle sider.

Det ideelle er at hente den kode, den enkelte URL bruger. Sæt flueben, og test med et værktøj som GTMETRIX for at se, om du har fået bedre indlæsningshastighed.

Fordelen ved at lægge CSS-filer sammen er færre forespørgsler til serveren.

Optimér indlæsning af CSS

WP Rocket er blevet opdateret ud fra de anbefalinger, forskellige Google-værktøjer giver om optimering af indlæsningshastighed. Har vi allerede erfaring med de værktøjer, har vi med sikkerhed mødt advarslen "Eliminate render-blocking resources". Sætter vi flueben her, forhindrer vi CSS i at blokere indlæsningen, ved at den bliver hentet asynkront.

Renderingen af HTML stopper altså ikke, når CSS-filen skal hentes. Filen bliver hentet i baggrunden, så indlæsningen ikke går i stå. Så det er værd at slå til.

JS-filer (JavaScript)

JavaScript har været et af de store problemer, Google har haft med at behandle HTML. Uden at gå for dybt ned i den slags sprog har WP Rocket lavet 5 grundlæggende handlinger til at optimere den type filer. Lad os se på dem!

Fjern jQuery Migrate

jQuery Migrate er et JavaScript-bibliotek, der giver kompatibilitet med jQuery-kode, der er udviklet til jQuery-versioner før 1.9. Biblioteket følger med WordPress, men bliver stort set ikke brugt (nogle plugins kan have brug for det).

Med handlingen vil vi gerne undgå en unødvendig forespørgsel og indlæsningen af en JS, der ikke bliver brugt. Slå den fra, og klik rundt på dit website for at se, om alt virker!

Minificér JavaScript-filer

Ligesom det, der blev forklaret om CSS-filer, gælder handlingen JS-filer og skærer størrelsen på JS-filerne lidt ned.

Læg JavaScript-filer sammen

Endnu en handling, der minder om modulet til CSS-optimering. Husk, at vi hver gang, vi sætter flueben, skal tjekke, om alt virker som før.

Hent JavaScript-filer udskudt

Fluebenet ved den handling giver to forbedringer i performance:

• ›

  Det lægger "defer"-attributten på JS'en, så renderingen af HTML ikke stopper på grund af en JS-indlæsning. Dermed bliver den hentet parallelt og kørt til sidst i behandlingen af HTML.

• ›

  Det flytter den JS, der blokerer den første rendering.

WP Rocket advarer os om, at den type aktivering kan give problemer, og derfor er der en sikker tilstand, som forhindrer indlæsningsproblemer med elementer, der er nødvendige for, at siden bliver vist rigtigt.

Forsink kørsel af JavaScript

Endnu en mulighed for at udskyde kørslen af JavaScript, der ikke er nødvendig, indtil brugeren gør noget på siden. Handlingen virker ikke særlig vigtig, men den giver os tid, så indlæsningen sker hurtigere. Interaktionen kan være et klik, en scroll, en musebevægelse...

Medieoptimering

I den her fane tager vi fat på optimeringen af nøgleelementer i de første skridt af WPO-optimeringen. Vi taler om billeder, videoer, iframes og elementer, der er indbygget i WordPress, og hvis nytte i det mindste er tvivlsom.

Lazyload

En helt nødvendig handling i enhver optimering af indlæsningshastighed. Funktionen Lazyload gør, at elementer som billeder, videoer og iframes ikke bliver hentet, før de skal vises.

Lad mig give et eksempel. Efterhånden som vi scroller, bliver billederne hentet. Forestil dig, hvordan indlæsningen af siden ville være, hvis 30 billeder blev hentet på én gang, især hvis brugeren slet ikke ser dem til at begynde med.

Emoji

Browserne har allerede deres egne emojis, så vi kan spare den forespørgsel, der bliver lavet, hvis vi ikke sætter flueben her. Min anbefaling er, at du sætter flueben.

Indlejret indhold

Forhindrer andre i at indlejre indhold fra dit site og forhindrer også dig i at indlejre indhold fra andre sites uden tilladelse. Forespørgslerne med den JS bliver færre.

WebP-kompatibilitet

WebP er et forholdsvis nyt format, som Google indførte omkring 2010 til komprimering med tab af 24-bit grafik på nettet, så ressourcerne bliver leveret hurtigere.

Lige nu understøtter ikke alle browsere det, så du skal passe på og vide, hvilken browser dine brugere bruger, når du arbejder med formatet. Slå muligheden til, hvis du arbejder med WebP-billeder.

Opsætning af forudindlæsning af cache

Vi skal forstå, hvordan WP Rockets cache-filer bliver lavet, for at forstå Preload-funktionen.

Når en bruger besøger en side på vores site første gang, er det der, siden bliver cachet, og der bliver lavet en cache-fil, som bliver leveret til de næste brugere. Det samme sker, når cachen udløber (den tid, vi har bestemt), og den cachede version bliver fjernet, eller når vi selv rydder cachen på alle vores URL'er.

Preload Cache

Slår vi Preload til, henter vi en allerede cachet version, så selv den første bruger får en hurtigere version af vores site. Handlingen sker via sitemap-linkene, så vi får brug for et sitemap.

Sitemappet er en fil, hvor URL'erne på vores site bliver vist. Med plugins som "Rank Math" eller "Yoast" kan vi let lave det. Vil du se, hvordan du laver et sitemap med Rank Math, så viser vi det her.

Preload Links

Det er en funktion, WP Rocket har fået med i de seneste versioner. Formålet er at foregribe indlæsningen af "de næste sider, brugeren vil besøge". Når markøren holdes over, bliver siden forudindlæst, hvis brugeren nu klikker på linket.

WP Rocket har taget funktionen til sig, efter at specifikke plugins som "Flying Pages" allerede havde den, for at gøre navigationen på sitet mere flydende (brugeroplevelse). Når det er sagt, er det ikke en faktor, der forbedrer indlæsningstiden, og du kommer ikke til at se forbedringen i tallene fra værktøjer til WPO-audits.

Forudindlæsning af DNS-forespørgsler

Forudindlæsning af DNS-forespørgsler er meget nyttigt, når vi bruger tredjepartsressourcer som YouTube, Facebook, skrifttyper eller iframes, som vi henter ofte.

Når vi laver en forbindelse på internettet, bliver der lavet en DNS-forespørgsel, som skal slås op og sendes til serveren. Det tager tid, som vi kan forbedre, hvis vi lægger URL'erne på de nødvendige ressourcer ind i det felt, WP Rocket giver os.

Som vi kan se i eksemplet, skal vi kun bruge domænenavnet //youtube.com //facebook.com

DNS-opslaget tager cirka 20 til 120 millisekunder, og som GTMETRIX gør opmærksom på, henter browseren ikke noget fra værten, før processen er færdig.

Forudindlæsning af skrifttyper

Forudindlæsning af skrifttyper kræver et trin først, nemlig at hente skrifttyperne ned og have dem på vores egen server. Derefter kan vi gøre det samme, som vi gjorde med forudindlæsning af cache, og lave en meget hurtigere version af skrifttypefilen og give den til brugeren, når de kommer ind på vores side.

Når skrifttyperne ligger hos os, fortæller vi WP Rocket den præcise sti til de skrifttyper, der bliver brugt. Det anbefales ikke at overdrive med forskellige skrifttyper på vores sider, for de kræver hver sin hentning. Bemærk også, at der bliver lavet forespørgsler til serveren for hver variant af skrifttypen. Lad mig forklare:

• ›

  Fed skrift --> 1 forespørgsel

• ›

  Understreget skrift --> 1 forespørgsel

• ›

  Skrift med versaler --> 1 forespørgsel

Opsætning af avancerede regler i WP Rocket

Cach aldrig disse URL'er

Der findes URL'er, som er så særlige, at vi ikke vil have en cachet version gemt. Fra den fane lader WP Rocket os skrive en liste over URL'er, vi aldrig vil have cachet.

Cach aldrig disse cookies

WP Rocket giver os endnu et redskab ud over at styre det på URL'er. Mange plugins arbejder med deres egne cookies, eller vi kan selv lægge vores egne ind for at genkende bestemte brugere. Der er mange måder at bruge de små filer på.

Med WP Rocket kan vi lade være med at cache URL'er, der bliver genkendt på cookie-ID'et, når det først ligger i brugerens browser, og på den måde finjustere yderligere, hvilken type URL'er vi vil have cachet.

Cach aldrig disse user agents

User agent er et beskrivende felt i HTTP-protokollen, der bliver brugt til at give information om den enhed, der laver en forespørgsel. Med den viden kan vi undgå, at cachede sider bliver leveret til bestemte user agents.

En af Googles user agents er for eksempel Googlebot, så hvis vi angiver den her, leverer vi siderne uden cache, hver gang den kommer ind på vores website.

Ryd altid disse URL'er

Muligheden er meget interessant for en type URL, hvor du for eksempel gerne vil have cache-filen slettet, hver gang den bliver opdateret.

Jeg har for eksempel URL'er med sportsresultater, og der vil jeg netop ikke levere en cachet version til brugeren, for resultaterne bliver opdateret meget ofte.

Cach disse query strings

Query strings er data, der bliver sendt med i URL'en, når man laver en forespørgsel til en webside.

De bliver som regel kendt på spørgsmålstegnet "?", og som hovedregel cacher WP Rocket ikke den type URL'er. Med den her mulighed kan vi tvinge den til det.

Opsætning af databasen med WP Rocket

Som vi har sagt igen og igen i artiklen, er WP Rocket holdt op med kun at være et cache-plugin og er blevet et plugin til at optimere vores websites indlæsningshastighed. I den her del af opsætningen kan vi gå dybere ned i optimering af databasen.

Efterhånden som vi arbejder med vores indhold i WordPress, skaber vi andre typer information, der ikke er til nogen nytte og skader vores websites performance. Til det giver WP Rocket os værktøjet her til en mere eller mindre grundig oprydning.

Oprydning i indlæg

Som vi kan se på billedet, er der 3 elementer, der kan fylde i databasen, uden at vi har brug for dem. Når vi opdaterer indhold, bliver en tidligere version gemt, der bliver også lavet en automatisk kladde af det, vi redigerer, og så er der kasserede indlæg.

Fjerner vi de elementer, frigør vi plads i vores database.

Oprydning i kommentarer

Den del er vigtig, for nogle gange bliver vores database fyldt med "spam"-kommentarer, og derfor har WP Rocket lagt muligheden ind for at rydde op i den slags.

Oprydning i transients

Når vi arbejder i WordPress, bliver der lavet visse midlertidige elementer, som vi roligt kan slette, for de bliver lavet igen.

Oprydning i databasen

Både her og i næste punkt anbefaler jeg at tage en backup af databasen, for selvom der ikke burde ske noget, er der altid en risiko ved at gå dybere ned i databasen, så det er ikke nogen dårlig idé at tage en backup.

Sætter du flueben her, bliver der ryddet op i databasens tabeller. Processen kan automatiseres.

Opsætning af CDN med WP Rocket

Før vi går dybere ned i, hvordan man sætter CDN'er op med WP Rocket, vil jeg gerne forklare, hvad et CDN er, og hvorfor det bliver brugt.

Hvad er et CDN?

Et CDN (Content Delivery Network) er en tjeneste, hvis formål er at gøre overførslen af indhold til brugeren hurtigere. Det gør den ved at lave et netværk til distribution af indhold på forskellige servere rundt om i verden, så tiden bliver kortere, når brugeren beder om en ressource. Er brugeren i Brasilien, leverer et CDN altså indholdet fra en server tættere på end det egentlige webhotel.

Billeder taget fra WP Rockets side

Hvordan virker et CDN?

Det kører via de andre servere, der gemmer en cachet kopi af websitet, og når brugeren beder om det indhold eller de ressourcer, klarer en nærmere server overførslen.

Den slags tjenester er meget nyttige, når du har tungt indhold som billeder, lyd, video og/eller mange besøg. Har du i begyndelsen et website med få besøg, skal du ikke bekymre dig om det.

RocketCDN

WP Rocket giver os mulighed for at tegne deres CDN til en pris på 7,99 dollar om måneden, under 7 euro.

CDN

Når vi tegner et CDN, får vi information til at bruge det. Et af de elementer, vi får, er CNAME, men får vi det ikke, kan vi selv finde det.

CNAME er en type DNS-record, der peger et kildedomænenavn hen på et måldomænenavn

For at bruge funktionen skal vi bare angive det CNAME og fortælle, hvilke filer vi vil have det til.

Hold filer uden for CDN'et

Den næste mulighed er, som man kunne forvente, at holde de filer udenfor, som vi ikke vil have gennem CDN'et.

Optimering af WordPress' heartbeat-funktion

WordPress heartbeat er en overførsel af kontroldata, der skaber kommunikation mellem WordPress' backend og frontend og serveren. Den slags processer kan være en af grundene til, at du oplever, at dit WordPress er langsomt.

Blandt det, der kan begrænses, er:

• ›

  Automatisk lagring og revisioner i indlægseditoren.

• ›

  Notifikationer i WordPress' administrationspanel.

• ›

  Information om, hvem der redigerer.

• ›

  Data i realtid.

Kører vores WordPress, som det skal, anbefaler jeg ikke at gøre noget her, men mærker vi, at det er langsomt, kan vi prøve at begrænse aktiviteten i de forskellige muligheder.

Opsætning af add-ons i WP Rocket

Der er elementer som scripts fra Google Analytics og Facebook, hvor vi bare ved at slå dem til her i opsætningen kan få en cache-version og bedre performance. Handlingen svarer direkte på et af de punkter, der som regel bliver nævnt i audits af indlæsningshastighed, som Pagespeeds "Leverage browser caching".

Billedoptimering

Billedoptimering er en proces, der er så kompleks, at den kunne have sin egen guide. WP Rocket tilbyder et selvstændigt plugin til at arbejde med de ressourcer. Fra WP Rocket kan vi komme til at hente "Free"-versionen.

Værktøjer i WP Rocket

WP Rockets indstillinger kan gemmes og importeres, så du ikke behøver bruge tid på processen igen. Det giver os også mulighed for at lave et "Rollback", altså at gå tilbage til en tidligere installeret version.

WP Rocket-tutorials

Som afslutning på denne WP Rocket-guide leverer pluginnet selv en række videoer med information om de forskellige handlinger, og hvordan man udfører dem.

Konklusioner

Som du har set, er WP Rocket mere end et cache-plugin. Vi har en komplet pakke til rådighed til at optimere hastigheden og performance på vores website, så nu skal vi bare prøve de forskellige muligheder af. Hvad venter du på? Få dit WordPress til at flyve!

Kendte du WP Rocket? Har du fået bedre performance med denne guide? Har du spørgsmål? Vi venter på dig i kommentarerne!