Få styr på WP Rocket til optimal WordPress-ydelse

Hvorfor optimere WordPress-webstedets hastighed?

Når det handler om brugeroplevelse, er hastighed afgørende. En forbrugerundersøgelse viste, at stress fra hastighedsforsinkelser på mobilen svarer til at se en gyserfilm eller løse matematikopgaver, og det er endda værre end at vente i kø ved kassen i en butik.

Hastighed er nøglen til succes, flere detaljer på web.dev. For eksempel:

• Pinterest reducerede den oplevede ventetid med 40%, hvilket direkte øgede søgemaskinetrafikken og tilmeldingerne med 15%.
• COOK reducerede den gennemsnitlige sideindlæsningstid med 850 millisekunder, øgede konverteringerne med 7%, reducerede afvisningsprocenten med 7% og øgede antallet af viste sider pr. besøgende med 10%.

Langsomme hastigheder kan også påvirke, hvordan Google og andre crawlere indekserer dit websted, hvilket fører til langsomme eller manglende opdateringer. Det kan også medføre, at tests af mobil brugervenlighed mislykkes.

WordPress-plugins varierer i kvalitet, og uden optimering kan sidens hastighed være langsom. WP Rocket er det bedst bedømte WordPress-cache-plugin, der tilbyder mærkbare hastighedsforbedringer, brugervenlighed og stor kompatibilitet.

WP Rocket er meget effektiv til optimering og har mange stærke funktioner. Et plugin kan erstatte tre andre (heartbeat-kontrol, databaseoptimering, CDN-integration, automatisk generering af videominiaturebilleder osv.), hvilket gør det meget anbefalelsesværdigt.

WP Rocket har ikke en gratis version og koster $49 pr. år på den officielle hjemmeside. Du kan downloade den kinesiske version fra vores side.

Værd at bemærke

WordPress har mange plugins, nogle med overlappende funktioner. Der bør kun bruges ét plugin til hver funktion for at undgå konflikter. For eksempel er WP Rockets "Remove Unused CSS" i konflikt med Perfmatters' "Remove Unused CSS"; der bør kun bruges ét.

Bemærk: De følgende indstillinger tager ikke højde for konflikter med andre plugins. Se kompatibilitetsindstillingerne i slutningen af denne artikel for at få flere detaljer.

WP Rocket-indstillinger

1. Cache

1.1 Separat mobil cache

Anbefales ikke. Hvis det aktiveres, oprettes der separate cache-filer for hver mobilside, hvilket øger databasestørrelsen og serverbelastningen. De fleste sider er responsive, så desktop- og mobilindhold (HTML, billeder, CSS, JS, skrifttyper) er normalt det samme, hvilket gør det muligt for mobilen at bruge desktop-cachen.

1.2 Bruger-cache

Generelt ikke anbefalet. WP Rocket cacher som standard ikke indlogget indhold. Hvis du aktiverer dette, oprettes der dedikerede cache-filer for hver indlogget bruger, hvilket øger serverbelastningen.

1.3 Cache-levetid

Indstillet til 24 timer. Hvis "Preload Cache" er aktiveret, genopbygges cachen efter denne periode. De fleste sider opdateres ikke ofte, så 24 timer hjælper med at reducere serverbelastningen. Aktivér dette, hvis dit websted har mange registrerede brugere og indhold, der kun er tilgængeligt for medlemmer.

Aktivér mobilcache for følgende temaer:

• Woodmart-tema - til separate menuer på mobil og desktop
• Avistema - når valgfrit mobiltema er aktiveret
• Avada-tema - brug af forskellige baggrunde eller mobilkategorier (hardcoded)

Tip: Tjek om cachen virker Tjek for cache-filer i wp-content/cache/wp-rocket/dit-domæne.com/. Hvis mappen er tom, kan du prøve indstillingen "Clear and Preload Cache" i menuen i den øverste bjælke.

2. Optimering af filer

Dette er WP Rockets vigtigste funktioner til at øge hjemmesidens hastighed.

2.1 Minimer CSS-filer

Anbefales. Fjerner mellemrum og kommentarer for at reducere filstørrelsen. Hvis du bruger et CDN som Cloudflare med indbyggede minify-funktioner, skal du aktivere dem på CDN'et og deaktivere WP Rockets for at reducere serverbelastningen.

2.2 Kombinér CSS-filer

Anbefales ikke til begyndere, men eksperter kan prøve. Før i tiden (http/1) forbedrede færre filer hastigheden. Moderne sites bruger http/2, der indlæser flere ressourcer hurtigere, så det at kombinere CSS påvirker ikke hastigheden ret meget. Effektiv CSS kombinerer instruktioner i så få elementer som muligt og reducerer DOM-træets noder for hurtigere gengivelse.

Nogle bloggere anbefaler at kombinere CSS til små sider, da det kan give en lille hastighedsforøgelse. Kombinerede CSS-filer er mindre og gengives hurtigere. Men kombination kan give problemer og er ikke kompatibel med "Remove Unused CSS" eller "Preload CSS".

2.3 Optimering af CSS-levering

Afgørende. Øger hastigheden betydeligt og fjerner advarsler om "Remove Render-Blocking Resources" fra Google PageSpeed. Vælg "Fjern ubrugt CSS". Dette prioriterer kritisk CSS til det oprindelige indhold og udskyder indlæsning af ikke-væsentlig CSS, hvilket forbedrer FCP, LCP og TTI.

Ubrugt CSS indlæses, når det ikke er nødvendigt for plugins eller temaer. Udviklere sætter kun stylesheets i kø, når det er nødvendigt, men der tilføjes ofte ekstra styles, som gør WordPress-websteder langsommere og udløser render-blocking-advarsler.

Prioritering af kritisk CSS og udskydelse af ikke-væsentlig CSS reducerer indlæsningstiden betydeligt og forbedrer sidens visningshastighed.

2.4 Fjern ubrugt CSS

Giver den største hastighedsforøgelse, men har den laveste kompatibilitet. Hvis det giver problemer, skal du skifte til "Async CSS".

2.5 Asynkron CSS

Stor hastighedsforøgelse med bedre kompatibilitet. Brugt meget med minimale problemer. Hvis indholdet på den første skærm flimrer eller indlæses langsomt, skal du tjekke fejlfindingstrinnene.

3. JavaScript

3.1 Minimer JS-filer

Ligesom minificering af CSS, anbefales. Hvis du bruger et CDN med minify-funktioner, skal du aktivere dem på CDN'et og deaktivere WP Rockets for at reducere serverbelastningen.

3.2 Kombiner JavaScript-filer

Ligesom ved kombination af CSS er denne mulighed deaktiveret, hvis "Delay JavaScript Execution" er aktiveret.

3.3 Asynkron JavaScript

Anbefales. Øger hastigheden og fjerner "Remove Render-Blocking Resources"-advarsler fra Google PageSpeed. Flytter JS til headeren og tillader HTML-parsing, mens JS downloades, og udfører derefter JS, før man fortsætter med at indlæse HTML.

3.4 Forsink udførelsen af JavaScript

Anbefales. Øger hastigheden og fjerner advarsler fra "Remove Render-Blocking Resources". Forsinker JS-indlæsning indtil brugerinteraktion, hvilket forbedrer Google Lighthouse-scores. Giver bedre hastighedsforøgelse end asynkron indlæsning, men lidt lavere kompatibilitet.

Tip: Hvis du bruger Cloudflare, skal du slå "Rocket Loader" fra under indstillingerne "Hastighed" > "Optimering" for at undgå fejl på siden.

4. Medier

4.1 Lazy Load anbefales. Forsinker indlæsning af billeder/videoer, indtil de kommer ind i eller tæt på visningsporten, hvilket fremskynder sidens indlæsningstid. Aktivér for billeder, CSS-baggrundsbilleder, rammer og videoer. Erstat YouTube-rammer med forhåndsvisningsminiaturer for at få de bedste resultater.

4.2 Lazy Load-billeder og -videoer Reducerer den første sideindlæsningstid, vægt og brug af systemressourcer. Forbedrer ydeevnen, især på mobile enheder med langsommere forbindelser. Flere detaljer på web.dev.

4.3 Aktiver for CSS-baggrundsbilleder Forsinker indlæsning af baggrundsbilleder. Aktivér denne funktion, men ekskluder topbanner-baggrundsbilleder.

4.4 Erstat YouTube Iframes med Preview Thumbnails WP Rocket genererer automatisk thumbnails til YouTube-videoer, indlæser kun thumbnailen i første omgang og fremskynder indlæsningen af siden.

5. Forudindlæsning

5.1 Aktivér Preload Cache Anbefalet. Forhåndsindlæser sideindhold i browseren, hvilket fremskynder andre sider, når besøgende navigerer. WP Rocket 3.12.0 forbedrer preloading, men øger CPU-belastningen betydeligt, hvilket potentielt kan skabe problemer på små servere.

5.2 Prefetch Links Downloader linkede sider, når musen føres hen over links, så siderne indlæses hurtigere, når der klikkes på dem. Lille hastighedsforøgelse, men øger belastningen af server og båndbredde. Aktiver kun, hvis din server og båndbredde kan håndtere det.

5.3 DNS Prefetch Forbereder DNS til eksterne ressourcer (Google Fonts, YouTube-videoer osv.) for at forbedre indlæsningstiderne en smule ved at løse DNS-forbindelser på forhånd.

5.4 Preload Fonts Fremskynder indlæsning af skrifttyper ved at forudindlæse skrifttyper, der henvises til i CSS, hvilket forbedrer indlæsningstiden og den opfattede ydeevne. Virker kun med lokalt hostede skrifttyper.

6. Diverse

Indholdsopdateringer eller produktændringer rydder automatisk cachen, ingen manuel rydning er nødvendig. Opdater cachen efter plugin-opdateringer eller -fjernelser.

6.1 Hvornår skal man rydde cachen manuelt?

• Oprettelse af 301- eller 410-omdirigeringer
• Stylingændringer i CSS-filer med aktiv CSS-minificering eller fletning
• Aktivering, deaktivering eller opdatering af plugins, der viser frontend-indhold
• Udelukkelse af filer fra lazy loading, asynkron indlæsning eller optimering af CSS-levering
• Ændringer uden for WordPress-editoren via (s)FTP/SSH, server, ekstern proxy eller CDN

6.2 Cloudflare-indstillinger

Hvis du bruger Cloudflare, skal du deaktivere "Bot Fight Mode" under Security > Bot for at undgå advarsler om "reduce JavaScript execution time" og "avoid long main thread tasks". Dette script tilføjer CPU-belastning og sænker PageSpeed Insights-scores, hvilket påvirker ydeevnen.

6.3 Problemer med skærmen

Problemer med ikoner, slidere, sektioner eller manglende stilarter er sandsynligvis CSS-problemer. Deaktiver "Optimer CSS-levering", eller ekskluder problematiske CSS-filer.

6.4 Problemer med funktionaliteten

JavaScript styrer de fleste funktioner. Deaktiver "Delay JavaScript Execution" under "File Optimization", hvis funktioner går i stykker, og opdater derefter. Hvis problemerne fortsætter, skal du deaktivere "Async JavaScript" og udelukke problematiske JS-filer.