Vi letar alltid efter nya och innovativa sätt att ytterligare snabba upp och optimera dina webbplatser. Under de senaste månaderna har vårt team arbetat bakom kulisserna med utvecklarna på WP Rocket för att samordna vissa förändringar med deras helt nya pluginversion 3.0 (släppt April 3, 2018). Vi är glada att kunna meddela att WP Rocket 3.0 och Kinsta nu är helt kompatibla och kommer att vara de hädanefter.

Kolla in allt du behöver veta nedan om att använda WP Rocket på Kinsta och hur det kan vara en passande produkt för dig och dina kunder.

Att Använda WP Rocket på Kinsta

För er som inte är bekant med WP Rocket, är det ett populärt allt-i-ett premium cachnings- och optimeringsplugin för WordPress. Normalt tillåter vi inte cachningsplugins i vår miljö eftersom de inte fungerar med vår inbyggda cachningslösning. Men från och med WP Rocket 3.0, kommer deras sidcachnings-funktionalitet automatiskt att inaktiveras när det körs på Kinsta servrar. Som ett resultat tillåter vi WP Rocket på vår plattform eftersom det inte längre finns några kompabilitetsproblem.

Detta gör att du nu kan använda Kinstas cachningslösning men ändå dra nytta av de fantastiska optimeringsfunktioner WP Rocket har att erbjuda (vi kommer att dyka in i dessa nedan).

Varför är cachning viktigt? Cachning är processen med att lagra resurser från en förfrågan och återanvända dessa resurser för efterföljande förfrågningar. I grund och botten minskar det den mängd arbete som krävs för att generera en sidvisning och minskar belastningen på webbservern. Det är det främsta sättet att motverka förseningen från det beroende WordPress har på PHP och en databas (Läs mer om WordPress vs statisk HTML).

WP Rocket 3.0 Funktioner

Om du inte har sett den nya 3.0-versionen av WP Rocket ännu är användargränssnittet vackert; samtidigt som det är lätt att använda och navigera! Nedan dyker vi in i några av de rekommenderade funktionerna som du kan använda från WP Rocket för att snabba på din WordPress-webbplats, liksom hur det synkroniseras med Kinsta-miljön.

Vi kommer också att köra några hastighetstester för att se vilka alternativ som har störst inverkan på en live-webbplats. Kom dock ihåg att resultaten kan variera från webbplats till webbplats, så se till att testa på din egen webbplats eller staging.

Om du använder en staging-sajt på Kinsta har WP Rocket vitlistat vår URL-struktur (staging-sitename.kinsta.cloud) vilket innebär att det inte kommer att räknas som en webbplats mot ditt totala antal licenser. Detsamma gäller för att köra på localhost.

WP Rockets huvudinstrumentpanel.
WP Rockets huvudinstrumentpanel.

Rensa Cache

Även om cachning automatiskt inaktiveras i WP Rocket när du kör på Kinsta, synkroniseras alternativet ”Rensa Cache” i WP Rocket-menyn med Kinsta-miljön. Om du rensar din WP Rocket-cache, rensar det faktiskt rensar hela din webbplats Kinsta-cache istället.  Hur coolt är inte det? Och som alltid kan du rensa Kinsta-cache från den övre högra sidan av admin-panelen.

Rensa cache (2 sätt)
Rensa cache (2 sätt)

”Rensa denna URL” fungerar också på samma sätt, men i stället för att rensa webbplatsens hela cache rensar det cacheminnet för webbadressen du för närvarande är på. Det här är bra om du kanske gjort en manuell uppdatering till en sida eller ett inlägg.

Av prestandaskäl rekommenderar vi inte att du ständigt rensar hela cachen på din webbplats, eftersom den då måste byggas upp cacheminnet igen. Att rensa enskilda webbadresser är ett mycket bättre sätt.

WP Raket rensa cache på enskild URL
WP Raket rensa cache på enskild URL

Om du ändrar något på din WordPress-webbplats, till exempel ett plugin eller ett tema, kan du se en varning från WP Rocket. Knappen Rensa cache här rensar också Kinsta-cachen.

WP Rocket ändringar rensa cache
WP Rocket ändringar rensa cache

Slutligen, om du klickar på knappen ”Rensa Cache” från WP Rocket-panelen, rensar detta också Kinsta-cachen.

Rensa cacheminnet i WP Rocket.
Rensa cacheminnet i WP Rocket.

Cache

Som vi nämnde tidigare inaktiveras WP Rockets sidcache automatiskt för webbplatser som finns på Kinsta. Vi rekommenderar således att du lämnar WP Rockets cacheinställning ”Aktivera cachelagring för mobila enheter” markerad.

Inställningar för WP Rockets sidcache.
Inställningar för WP Rockets sidcache.

Fil-optimering

Under menyn ”Filoptimering” ger de dig möjlighet att optimera dina CSS- och JavaScript-filer. Låt oss dyka in i var och en av dessa lite.

WP Rocket filoptimering
WP Rocket filoptimering

Grundinställningar

  • Minifiera HTML: Att minifiera HTML tar bort blanktecken och kommentarer för att minska storleken. Vi körde hastighetstester och såg en 0,84% minskning av laddningstiden med det här alternativet aktiverat. ⏱ Du kanske inte ser galna förbättringar med den här funktionen, men i allmänhet är mindre blanktecken och kod en bra sak.
  • Kombinera Google Fonts-filer: Att kombinera Google Fonts kommer att minska antalet HTTP-förfrågningar. Om du använder en värd med HTTP/2 aktiverat, är det inte längre rekommenderat att kombinera filer på grund av förbättringar med parallellisering. Kinsta stöder HTTP/2 till fullo. Att ladda dina typsnitt från ditt eget CDN kan också ibland förbättra prestanda. Kolla in vår guide om hur du hostar typsnitt lokalt.
  • Ta bort frågesträngar från statiska resurserDina CSS- och JavaScript-filer har vanligtvis filversionen i slutet av sina webbadresser, till exempel domain.com/style.css?ver=4.6. Vissa servrar och proxyservrar kan inte cacha frågesträngar, även om en cache-control:public-header är närvarande. Så genom att ta bort dem kan du ibland förbättra din cachning. Vi körde hastighetstester och såg en 1.86% minskning av laddningstiden med det här alternativet aktiverat. Observera: Du kan inte använda detta tillsammans med alternativ för att minifiera CSS eller JavaScript.

CSS-filer

  • Minifiera CSS-filer: Att minifiera CSS tar bort blanktecken och kommentarer för att minska filstorleken. Vi körde hastighetstester och såg en 1.69% minskning av laddningstiden med det här alternativet aktiverat. ⏱ På grund av hur CSS fungerar kan detta bryta din webbplats, så se till att testa den. Återigen är i allmänhet mindre blanktecken och kod en bra sak.
  • Kombinera CSS-filer: Att kombinera CSS sammanfogar alla dina filer till en, vilket minskar HTTP-förfrågningar. Om du använder en värd med HTTP/2 aktiverat, är det inte längre rekommendera att kombinera filer eftersom de nu kan laddas parallellt över en enda anslutning. Kinsta stöder HTTP/2 fullt ut. Läs mer om att kombinera extern CSS.
  • Optimera CSS-leverans: Att optimera CSS-leverans eliminerar renderings-blockerande CSS på din webbplats för snabbare uppfattad laddningstid. Läs mer om detta i våra djupgående artiklar om renderingsblockerande CSS och optimera kritisk renderingssökväg. Vi körde hastighetstester och såg en 0,17% minskning av laddningstiden med det här alternativet aktiverat. ⏱ Kom dock ihåg att detta handlar mer om uppfattad laddningstid än faktisk laddningstid.

JavaScript-Filer

  • Minifiera JavaScript-filer: Att minifiera JavaScript tar bort blanktecken och kommentarer för att minska filstorleken. Vi körde hastighetstester och såg en 0,84% minskning av laddningstiden med det här alternativet aktiverat. På grund av hur JavaScript fungerar kan detta bryta funktionalitet med dina plugins eller tema, så se till att testa det ordentligt.
  • Kombinera JavaScript-filer: Att kombinera JavaScript-filer kombinerar webbplatsens JS till färre filer, vilket minskar HTTP-förfrågningar. Om du använder en värd med HTTP/2 aktiverat, är det inte längre rekommenderat att kombinera filer eftersom de nu kan laddas parallellt över en enda anslutning. Kinsta stöder HTTP/2 till fullo.
  • Ladda JavaScript uppskjuten: Att ladda JavaScript uppskjuten eliminerar renderingsblockerande JS på din webbplats och kan förbättra laddningstiden. Läs mer om detta i våra djupgående artiklar om renderingsblockerande JavaScript. Detta kan också bryta din webbplats om du inte är försiktig, så se till att testa. Vi körde hastighetstester och såg en 1,35% minskning av laddningstiden med det här alternativet aktiverat.

Om du är en Kinsta-kund och nyttjar kodminifierings-funktionen som är inbyggd i MyKinsta-instrumentpanelen, dubbelkolla med supporten för att se om det går bra att använda båda alternativen.

Media

Under menyn ”Media” ger de dig möjlighet att latladda dina bilder och video, samt inaktivera ytterligare skript från att laddas som Emojis och inbäddningar. Låt oss dyka in i var och en av dessa lite.

WP Rocket media-optimering
WP Rocket media-optimering

Latladdning

Latladding är en optimeringsteknik som laddar synligt innehåll men försenar nedladdning och rendering av innehåll som visas längre ner. Genom att aktivera alternativet latladdning kan det förbättra faktisk och uppfattad laddningstid eftersom bilder, iframes och videor endast laddas när de kommer in i (eller om de ska komma in) visningsområdet vilket minskar antalet HTTP-förfrågningar.

  • Aktivera för bilder: Vi körde hastighetstester och såg en 3,89% minskning av laddningstiden med det här alternativet aktiverat.
  • Aktivera för iframes och videor: Vi släppte åtta YouTube-videor på en sida och såg en 74,43% minskning av laddningstiden med det här alternativet aktiverat. WP Rocket har ett alternativ för att automatiskt ersätta en YouTube-video med dess förhandsgranskningsbild. Detta är ett otroligt kraftfullt sätt att snabba upp videoklipp på din WordPress-webbplats.

Kolla in vår djupgående handledning om latladdning i WordPress.

Emoji

Med lanseringen av WordPress 4.2 kom integrationen av emojis i kärnan för äldre webbläsare. Det stora problemet med detta är att det genererar en extra HTTP-förfrågan till din WordPress-webbplats för att ladda wp-emoji-release.min.js-filen. Och detta laddas på varje enskild sida.

Inaktivera Emoji: Alternativet Inaktivera emojis kommer att minska antalet HTTP-förfrågningar. Det kommer inte att förstöra dem, det kommer helt enkelt använda användarens webbläsares emojiversion som standard istället. Vi körde hastighetstester och såg en 2,2% minskning av laddningstiden med det här alternativet aktiverat.

Kolla in vår djupgående artikel om att inaktivera emojis.

Inbäddningar

Med lanseringen av WordPress 4.4 kom inbäddningsfunktionen in i kärnan. Du har förmodligen sett eller använt detta tidigare. Detta gör det möjligt för användare att bädda in YouTube-videor, tweets och många andra resurser på sina webbplatser helt enkelt genom att klistra in en URL, som WordPress automatiskt omvandlar till en inbäddning och ger en Live-förhandsvisning i den visuella redigeraren. Om du har Facebook-inbäddning på din webbplats kan du kolla in hur Facebooks nya uppdatering kommer att påverka den och hur du åtgärdar detta.

Men det betyder att det också genererar en extra HTTP-förfrågan på din WordPress-webbplats för att ladda wp-embed.min.js-filen. Och detta laddas på varje enskild sida.

Inaktivera WordPress-inbäddningar. Alternativet Inaktivera inbäddningar kommer att minska antalet HTTP-förfrågningar. Vi körde hastighetstester och såg en 4,9% minskning av laddningstiden med det här alternativet aktiverat. ⏱ Kolla in vår djupgående artikel om att inaktivera inbäddningar.

För-Laddning

Under menyn ”Förinläsning” får du möjlighet att aktivera förinläsning av cacheminne, DNS-förhämtning och teckensnittsförinläsningar. Alla kommer inte att fungera på Kinsta. Men låt oss djupdyka lite i var och en av dessa.

Förinläsningsinställningar i WP Rocket.
Förinläsningsinställningar i WP Rocket.

Förinläs Cache

Vi rekommenderar inte det här alternativet för webbplatser som finns på Kinsta eftersom det faktiskt kan minska prestandan genom att överbelasta PHP-bearbetare.

Prefetch DNS-Förfrågningar

Men DNS-prefetching kan du lösa domännamn (utföra en DNS-sökning i bakgrunden) innan en användare klickar på en länk, vilket i sin tur kan bidra till att förbättra prestanda. Det görs genom att lägga till en rel="dns-prefetch"-tagg i din WordPress-webbplats sidhuvud. Vi rekommenderar att du lägger prefetch till externa förfrågningar från CDN, Google Fonts och Google Analytics. Här är ett exempel nedan:

<link rel="dns-prefetch" href="//cdn.domain.com/">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

Detta är svårare att hastighetstesta, men du kan vara säker på att det kommer att bidra till att snabba på din webbplats.

Förinlästa teckensnitt

Om du hostar teckensnitt på din egen domän och inte på en extern tjänst som Google Fonts rekommenderar vi att du lägger till dem i listan ”Förinlästa teckensnitt” i WP Rocket. Genom att förinläsa teckensnitt i HTML´s <head>-element kan webbläsare börja ladda ned teckensnitt innan de upptäcks i CSS-filen.

Avancerade Regler

På grund av det faktum att WP Rocket synkroniseras till Kinsta-miljöns cache, kan du inte använda de avancerade reglerna. Om du behöver utesluta en URL eller katalog från cachelagring eller tvinga cachelagring för en viss frågesträng kan du alltid kontakta Kinsta´s supportteam.

Databas

Under menyn ”Databas” ger de dig möjlighet att utföra rensningar av inlägg, kommentarer, transienter och tabeller.

Ta bort onödiga efterrevideringar och tillfälliga åtgärder från databasen. I kombination med våra automatiska veckovisa databasoptimeringar kan du då säkerställa att databasen fungerar med högsta möjliga prestanda.

Optimering av WP Rocket-databasen.
Optimering av WP Rocket-databasen.

Inläggsrensning

Det är inte ovanligt att äldre webbplatser har 100+ revideringar på sina huvudsidor. Detta beror helt enkelt på år av redigering och uppdatering av innehåll. Låt oss till exempel säga att en webbplats har 700 sidor eller inlägg med 150 revideringar på varje; detta skulle innebära över 100 000 poster i databasen. Detta tar upp lagringsutrymme, och även med databasindex kan det ibland skada prestanda.

WP Rocket ger dig möjlighet att ta bort följande:

  • Revideringar
  • Automatiska utkast
  • Kastade inlägg

Kolla in vårt djupgående inlägg om hur du optimerar revideringar för snabbare prestanda.

Rensa bland Kommentarer

På samma sätt som revideringar, kan spam och kastade kommentarer helt enkelt läggas ihop till bortkastat utrymme över tiden. WP Rocket ger dig möjlighet att ta bort följande:

  • Spam-kommentarer
  • Kastade kommentarer

Om du inte använder kommentarer på din WordPress webbplats rekommenderar vi att du helt enkelt inaktiverar kommentarer för att förhindra att spam kommer igenom alls. Du behöver då inte oroa dig för att installera spam-plugins.

Rensning av Transienter

Transienter i WordPress kan ibland förbises, men de är mycket viktiga! Faktum är att vi har sett korrupterad transient-cache helt ta ner en WordPress-webbplats. Dessa ska vara tillfälliga så det är säkert att ta bort dem och vi rekommenderar att du gör det. Om de behövs av ett plugin kommer de automatiskt att regenereras. WP Rocket ger dig möjlighet att ta bort följande:

  • Utgångna transienter
  • Alla transienter

Databasrensning

Alternativet databasrensning minskar overhead av databastabeller. Men på Kinsta använder vi InnoDB istället för MyISAM och därför behövs det vanligtvis inte. InnoDB har visat sig fungera bättre och vara mer tillförlitlig. En stor anledning till att använda InnoDB över MyISAM, är att dra nytta av låsning på radnivå. Detta gör att dina förfrågningar bearbetas snabbare. Om du migrerar din WordPress-webbplats till Kinsta, är detta en av de optimeringar som våra ingenjörer gör på din webbplats.

Automatisk Rensning

WP Rocket ger dig också möjlighet att schemalägga automatisk rensning av din databas på en daglig, veckovis eller månatlig basis. Detta schemaläggs med ett cron-jobb bakom kulisserna.

CDN

Under CDN-menyn kan du aktivera ett innehållsleveransnätverk från tredje part. Detta är verkligen ett måste när det gäller prestanda. De avlastar din webbserver samtidigt som det påskyndar leveransen av innehåll till dina besökare vilket gör deras upplevelse bättre. Kolla in varför vi tycker att varje webbplats borde använda ett CDN.

Om du är en Kinsta-klient behövs inte den här menyn eftersom Kinstas CDN automatiskt distribueras på din webbplats bakom kulisserna.

Vi rekommenderar att köra din WordPress webbplats först genom ett testverktyg för webbplatshastighet för att bekräfta att alla dina tillgångar (JS, CSS och bilder) laddas från Kinsta CDN.

Lägg till CDN-inställningarna i WP Rocket.
Lägg till CDN-inställningarna i WP Rocket.

Heartbeat

Heartbeat är ett WordPress Core API för server-polling. Det används av många teman och plugins för att upprätthålla en ström av anslutningar till din server. Detta gör det möjligt för WordPress-utvecklare att bygga in realtidsuppdateringar i sina produkter.

Ändra WordPress heartbeat-inställningar i WP Rocket.
Ändra WordPress heartbeat-inställningar i WP Rocket.

Som standard körs heartbeat-koden på klientsidan var 15-60:e sekund. Beroende på din webbplats- och serverkonfiguration kanske det inte är nödvändigt med frekventa heartbeatserver-pingar.

Med WP Rocket kan du minska Heartbeat´s ping-intervall till 2 minuter eller inaktivera pings helt för webbplatsens backend (WP-instrumentpanel), frontend och inläggsredigerare.

För de flesta webbplatser rekommenderar vi att du använder alternativet ”Minska aktivitet”. Många moderna plugins och teman nyttjar Heartbeat för kärnfunktioner, så att inaktivera det helt kan potentiellt få din webbplats att krascha.

Tillägg

Under ”Tillägg” ger WP Rocket dig möjlighet att lägga till ytterligare tjänster på din webbplats som Cloudflare, Sucuri, Google Analytics och Facebook Pixel. Om du använder någon av dessa tjänster på din webbplats rekommenderar vi att du konfigurerar dem via WP Rocket. Allt för att säkerställa att du drar nytta av den mest optimerade integreringen för dessa tjänster.

Om du redan använder andra plugins för att integrera dessa tjänster på din webbplats kan du ta bort dessa på ett säkert sätt efter att ha konfigurerat tillägget i WP Rocket.

WP Rocket add-ons.
WP Rocket add-ons.

Bildoptimering

Utvecklarna av WP Rocket är samma personer som ligger bakom Imagify, en av våra favorittjänster för bildoptimering. Om du letar efter ett lättanvänt WordPress-plugin för att optimera bilder, ska du ta en titt på Imagify. För att lära dig mer om bildoptimering och andra optimeringsplugins och lösningar, kan du kolla in den här artikeln.

Bildoptimering av Imagify.
Bildoptimering av Imagify.

Slutgiltiga Hastighetstest

Vi körde sedan några sista hastighetstester med allt aktiverat så att du kunde se en före och efter. Obs: denna WordPress-webbplats är hostad på Kinsta.

Innan WP Rocket

Vi körde 5 tester i Pingdom utan WP Rocket och tog genomsnittet.

Innan WP Rocket
Innan WP Rocket

Vi körde sedan ett test i Google PageSpeed Insights utan WP Raket.

Google PageSpeed Insights innan WP Rocket
Google PageSpeed Insights innan WP Rocket

Efter WP Rocket

Vi körde sedan 5 tester i Pingdom med WP Rocket och alternativ aktiverade och tog genomsnittet.

Med WP Rocket
Med WP Rocket

Vi körde sedan ett test i Google PageSpeed Insights med WP Raket.

Google PageSpeed Insights med WP Rocket
Google PageSpeed Insights med WP Rocket

Här är slutsatserna från resultaten ovan:

  • I våra Pingdom-tester såg vi en 9,2% minskning av den totala laddningstiden när vi körde WP Rocket. Även om detta kanske inte verkar galet högt, tog det bara några minuter och mindre än 10 klick att uppnå.
  • Kom ihåg att WP Rocket huvudsyssla är deras cachningslösning. Men här på Kinsta använder vi redan vår inbyggda cache, så vi delar bara med oss av resultaten från deras andra optimeringsfunktioner. Så det är egentligen en 9% förbättring ovanpå Kinstas blixtsnabba cache. ⚡
  • Webbplatsen vi använde för testet är redan ganska optimerad. Större webbplatser och de som inte är så optimerade kommer lätt att se ännu större resultat.
  • Nyfiken på varför det finns ytterligare förfrågningar i den slutliga versionen? Detta beror vanligtvis på latladdning av bilder eftersom det skapar tomma data:image/gif;base64-förfrågningar. Men oroa dig inte, det kommer fortfarande att bli snabbare.
  • Om du hostar videoklipp kan du eventuellt se minskningar i laddningstiden på upp till 50% eller mer. Detta åstadkoms genom att använda WP Rockets funktion som ersätter YouTube-videor med klickbara förhandsgranskningsminiatyrer. Detta är verkligen praktiskt!
  • I våra Google PageSpeed Insights-tester såg vi en ökning av vår poäng från 88/100 till 98/100. Poängen är dock inte lika viktiga som totala laddningstider, så ta dessa med en nypa sal. Vi diskuterar detta i vår artikel om Google PageSpeed Insights.

Som ni kan se ovan, gör WP Rocket det otroligt lätt att snabba upp din webbplats med bara några enkla klick!

Sammanfattning

Teamet på WP Rocket släpper konsekvent nya funktioner som direkt stämmer överens med de webbprestanda-rekommendationer vi delar på Kinsta. Du kan förvänta dig att se en ännu närmare integration med deras plugin under de närmaste månaderna! Vi är glada över att klienter nu kan använda detta plugin utan att några ytterligare ändringar behövs.

Vi vill gärna höra vad du tycker? Använder du WP Rocket? Låt oss veta nedan i kommentarerna.

Brian Jackson

Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.