Lär dig arbeta med optimering av laddningstider i WordPress

Du som surfar med mobilen oavsett om din uppkoppling är snabb eller långsam, vill inte vänta. Du väntar redan på din tur på bussen, spårvagnen eller tunnelbanan. Du väntar på din tur i mataffärens kassa, i rusningstrafikens bilköer, vid laddstationen för din elbil och runt middagsbordet när alla vill säga något före dig.

Webben är ett tacksamt nöje på det viset, du behöver inte vänta även om det är många före dig. Det skulle möjligen kunna vara en webbplats som säljer plats på Sveriges matcher i fotbolls-EM där laddningstiden, eller kötiden, kan vara mer än lovligt lång.

Utvecklare av de webbplatser som får ta emot närmast-krasch-mängder av trafik är dock inte målgruppen för den här guiden om att korta laddningstiderna i WordPress. Min tanke är istället att du som läser är egenföretagare, marknadsförare eller webbansvarig på ett mindre företag.

Sannolikt har du/ni webbplatsen på ett webbhotell och har inte tagit steget över till egen server, utan söker efter vägar att göra något åt de långa laddningstiderna som er webbplats drabbas av. Kunder klagar på att sidorna tar lång tid att ladda. Ni kommer på sikt att tappa kunder.

Så vad innebär laddningstider?
Jo, tiden i millisekunder och sekunder som det tar för er webbplats att laddas in i besökarens webbläsare, oavsett om besökaren använder en mobil eller dator.

Googles skifte mot mobile-first, er egen data i Google Analytics som visar på sannolika 50+ procent andel mobila besökare och kanske dina personliga erfarenheter av att surfa med mobilen – tre faktorer som översiktligt torde tjäna som argument till varför det är relevanta att investera i kortare laddningstider.

Arbete med att korta laddningstiderna kan för mindre sajter ske manuellt i den meningen att du testar en sida i taget. För lite större sajter med låt säga 1-2 dussin eller fler sidor är en rapport i Google Analytics en bra källa till vilka sidor som ska prioriteras.

Gå till menyn till vänster i GA, välj “Beteende” och expandera “Webbplatshastighet”, visa “Sidor” och i andra kolumnen väljer du att lista “Genomsnittlig sidinläsningstid”. När du gjort det får du upp en vy som liknar nedanstående:

Nu är det bara att börja beta av listan. Du kanske väljer att sålla bort sidor som inte får någon trafik, om du har många sidor att optimera. Eller så är det de sidorna som du börjar med, kanske beror den låga trafiken på att sidorna i fråga lider av långa laddningstider?

Optimering med målet att minska laddningstiderna är en balansgång mellan funktion, utseende och höga poäng i testtjänsterna. Du kan behöva försaka höga poäng för att inom en rimlig tidsram och budget möta direktiv om att vissa funktioner måste finnas t.ex. en sökfunktion i den mobila menyn.

Vilka testtjänster är relevanta?

För egen del föredrar jag Lighthouse via webbläsaren Google Chrome, PageSpeed Insights, Pingdom Website Speed Test och GTmetrix.

Lighthouse (Report Viewer) är bra för att det ger förslag på förbättringar inom prestanda, användbarhet, “best practices” och SEO. Lighthouse testar i skrivande stund endast den mobila upplevelsen, vilket iofs inte är dåligt med tanke på att Googles index är mobile-first. Värt att påpeka är att “performance” kan variera stort beroende på om ditt webbhotell mår bra eller inte.

PageSpeed Insights (PSI) är Googles tjänst för att analysera bl.a. laddningstider på din webbplats. Bli inte förvånad om poängen skiljer sig åt mellan Lighthouse via Chrome och PSI. Använd istället förbättringsförslagen från bägge tjänster för att göra din webbplats snabbare/bättre.

Pingdoms tjänst var i många år den bästa (imo) tjänsten för att testa laddningstider på en webbplats. Jag väljer att lista tjänsten här även det ska erkännas att Lighthouse och GTmetrix används mest. Pingdom saknar t.ex. förslag på exakt vad som kan göras bättre.

GTmetrix är en gratis tjänst där du utan att registrera dig kan utvärdera din webbplats avseende laddningstider. Min erfarenhet är att det är lättare att få höga “PageSpeed Scores” än vad det är att få 90-100 “YSlow Scores”. Detta utifrån att YSlow lägger stor vikt vid Expires headers och huruvida ett CDN (Content Delivery Network) används eller inte.

Registrera dig på GTmetrix för att få tillgång till inställningar för plats för test (jag använder London). Ett PRO-konto ger som väntat fler fördelar och funktioner. Du kan t.ex. sätta upp återkommande automatiska analyser som kan sända dig en notis om oväntat långa laddningstider.

Vilka WP-plugin kan vara till hjälp?

Sennbrink Kommunikation producerar och optimerar WordPress-webbplatser med så få plugin som möjligt. Mardröms-setupen som skådats av undertecknad under de dryga 11 år som WordPress-tjänster erbjudits företag och ideell sektor är….*trumvirvel*….40…..när du har 40 olika plugin varav en handfull är sådana som sägs optimera din webbplats, ja då är det som att be om problem. Innan du slänger dig på WP-admin för att fylla din webbplats med massor av optimerings-plugin, fortsätt läsa den här texten.

Börja med att kolla upp utgivaren av ett plugin. Välj med fördel plugin som produceras av större aktörer inom WordPress-sfären. Yoast SEO är t.ex. ett plugin du kan använda för att enkelt uppdatera .htaccess-filen och få massor av bra SEO-funktioner på köpet (eller hur du vill se på det).

Plugin som kanske kan bidra till att din webbplats kan åtnjuta högre poäng i testtjänsterna:

  • Imagify – För att serva webben med “next-gen formats” – körs i bakgrunden via WP-admin och skapar WebP-bilder, kan beskära din uppladdade bilder automatiskt mm. Läs mer på https://imagify.io/wordpress/
  • WP-Optimize – För att trimma databasen och bulk-optimera mediabiblioteket. Tillägget har även ett cache som enligt egna tester ger högre poäng i GTmetrix och Lighthouse än WP-webbplatser som använder tillägget WP Super Cache.
  • Hummingbird – För att mäta ett stort antal parametrar och ett plugin som ger dig massor av data om din webbplats. Var noga med att inte aktivera cache-funktionen i Hummingbird om du redan använder WP-Optimize Cache, WP Total Cache eller WP Super Cache. Tips: Aktivera “Remove query strings from my assets” i Hummingbird-tillägget.

De tre plugin som listas ovan är bara några exempel på plugin som du kan använda för att korta laddningstiderna för din WordPress-webbplats. Andra konsulter eller byråer kan förespråka alternativa plugin för hastighetsoptimering. Du kan rent av få bättre mätvärden om du byter till ett webbhotell som erbjuder tjänster optimerade för WordPress. Ett annat WP-tema kan även göra underverk för laddningstiderna.

Det ska också sägas att en ren WP-installation inte är samma sak som en WP-installation som förädlats år efter år till en webbplats eller en blogg. Du har troligen massor av text, bilder och inbäddad video på din webbplats, mer eller mindre på olika sidor – vilket får till följd att olika sidor kommer att ta olika lång tid att ladda in. Du använder sannolikt även flera externa tjänster för spårning såsom Google Analytics-spårningskod, Google Tag Manager-kod, HotJar-kod, Facebook Pixel etc. Det är funktioner som läses in från servrar bortom din möjlighet att påverka t.ex. utgångstider. Ibland kan spårningskoden för Google Analytics vara det enda som står mellan dig och maxpoäng. Du kan i så fall bli frestad att köra scriptet lokalt, men det rekommenderas inte.

Att nå 100 poäng i alla tester är ett svårt arbete. Det är inte omöjligt men kräver att du är beredd att investera relativt mycket tid och pengar för att nå hela vägen fram. Du bör dessutom finna en balans mellan en fullt ut för testtjänster optimerad webbplats och funktioner samt utseende. Ständiga förbättringar i all ära men du bör överväga att inte få maxpoäng om det sker på bekostnad av funktioner som ger dig pengar i slutändan.

Gå inte vilse bland alla plugin och dess funktioner

Det bästa sättet att förstöra många timmars optimering är att tänka “bara ett plugin till, bara en justering till” och så sitter du snart där med en trasig webbplats. Då är det guld värt att ha en backup redo för återställning – Läs guiden om flytt av en WordPress-webbplats, där du i början får kunskap om hur du tar en backup.

Det nämndes ovan, att fler plugin inte betyder bättre WordPress-webbplatser. Men det är samtidigt frestande att testa om X plugin som lovar Y optimering har någon effekt på laddningstiderna. För att testa nya funktioner behöver du en spegling av den publika webbplatsen. Prova med fördel Local by Flywheel om du vill testa saker i en trygg miljö.