- \n
- 1. Faktorer som p\u00e5verkar laddningstid<\/a><\/li>\n
- 2. H\u00e5ll dig till ett m\u00e4tverktyg<\/a><\/li>\n
- 3. N\u00e5gra ord om po\u00e4ng och ”core web vitals”<\/a><\/li>\n
- 4. V\u00e4lj ett bra webbhotell<\/a>\n
- \n
- 4.1 Klassisk ”shared hosting”<\/a><\/li>\n
- 4.2 VPS<\/a><\/li>\n
- 4.3 Managed hosting<\/a><\/li>\n
- 4.4 S\u00f6kkriterium webbhotell<\/a><\/li>\n<\/ul>\n<\/li>\n
- 5. V\u00e4lj dina plugins noga<\/a><\/li>\n
- 6. St\u00e4da och optimera sidans databas<\/a>\n
- \n
- 6.1 St\u00e4da databas<\/a><\/li>\n
- 6.2 Optimera databas<\/a><\/li>\n<\/ul>\n<\/li>\n
- 7. Optimera WordPress-inst\u00e4llningar<\/a><\/li>\n
- 8. WP Cron<\/a><\/li>\n
- 9. Cache<\/a>\n
- \n
- 9.1 Page cache<\/a><\/li>\n
- 9.2 Object cache<\/a><\/li>\n
- 9.3 Browser cache<\/a><\/li>\n<\/ul>\n<\/li>\n
- 10. Servera bilder i WebP-format<\/a><\/li>\n
- 11. Komprimering med gzip eller brotli<\/a><\/li>\n
- 12. Anv\u00e4nd dig av CDN<\/a><\/li>\n
- Summering<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n
1. Faktorer som p\u00e5verkar laddningstid<\/h3>\n
Innan vi dyker djupare in p\u00e5 olika s\u00e4tt att optimera din WordPress-sida s\u00e5 \u00e4r det viktigt att du f\u00f6rst\u00e5r dig p\u00e5 grunderna och vilka faktorer det \u00e4r som p\u00e5verkar en hemsidas laddningstid.<\/p>\n
Det m\u00e5nga olika faktorer som p\u00e5verkar hur snabbt en hemsida laddas, och n\u00e5gra av de \u00e4r:<\/p>\n
- \n
- Sidans storlek i MB<\/li>\n
- Antal \u201crequests\u201d (eller hur m\u00e5nga filer som laddas hem)<\/li>\n
- Om sidan \u00e4r cachad eller inte<\/li>\n
- Om inte, hur l\u00e5ng tid det tar f\u00f6r servern att generera sidan med hj\u00e4lp av PHP+MySQL<\/li>\n
- M\u00e5nga och avancerade JavasScript p\u00e5 sidan<\/li>\n
- M\u00e4ngden CSS-kod<\/li>\n<\/ul>\n
Med detta i \u00e5tanke s\u00e5 finns det allts\u00e5 olika aspekter man kan jobba med f\u00f6r att snabba upp din hemsida: minska sidans storlek, minska antalet filer som laddas, aktivera cachning samt h\u00e5lla koden s\u00e5 ren som m\u00f6jligt (l\u00e4s: anv\u00e4nd s\u00e5 f\u00e5 plugin som m\u00f6jligt).<\/p>\n
2. H\u00e5ll dig till ett m\u00e4tverktyg<\/h3>\n
Det finns m\u00e5nga olika verktyg f\u00f6r att m\u00e4ta hastigheten p\u00e5 en hemsida. N\u00e5gra av de mest popul\u00e4ra verktygen \u00e4r:<\/p>\n
- \n
- Google PageSpeed Insights<\/a><\/li>\n
- GTmetrix<\/a><\/li>\n
- WebPageTest.org<\/a><\/li>\n
- Pingdom<\/a><\/li>\n<\/ul>\n
Alla dessa verktyg l\u00e5ter dig m\u00e4ta hastigheten p\u00e5 din hemsida p\u00e5 ett kontrollerat s\u00e4tt och alla presenterar ocks\u00e5 \u00e5tg\u00e4rder som du kan utf\u00f6ra f\u00f6r att snabba upp din WordPress-sida.<\/p>\n
Ut\u00f6ver dessa webbaserade verktyg s\u00e5 har \u00e4ven de flesta webbl\u00e4sarna ett inbyggt verktyg f\u00f6r att m\u00e4ta hastighet. V\u00e5rt favoritverktyg \u00e4r Google Chromes Developer Tools, fr\u00e4mst f\u00f6r att det \u00e4r s\u00e5 l\u00e4ttillg\u00e4ngligt och ger en mest kontroll. T\u00e4nk dock p\u00e5 att n\u00e4r du m\u00e4ter hastighet p\u00e5 din egen dator s\u00e5 \u00e4r hastigheten p\u00e5 din internetuppkoppling ytterligare en variabel, medan de webbaserade verktygen m\u00e4ter oberoende av ens egen uppkoppling.<\/p>\n
![\"Hastighetsm\u00e4tare\"](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/hastighetsmatare-300x169.jpg\")
<\/a><\/p>\nAlla ovan n\u00e4mnda verktyg i sig \u00e4r bra, men vi rekommenderar att du h\u00e5ller dig till ett och samma verktyg f\u00f6r att m\u00e4tningarna ska vara s\u00e5 konsekventa som m\u00f6jligt. Alla verktyg m\u00e4ter n\u00e4mligen p\u00e5 lite olika s\u00e4tt och det \u00e4r l\u00e4tt h\u00e4nt att man j\u00e4mf\u00f6r \u00e4pplen och p\u00e4ron om man anv\u00e4nder olika verktyg i sina m\u00e4tningar.<\/p>\n
Ifall du vill \u00f6ka din f\u00f6rst\u00e5else f\u00f6r vad alla olika inv\u00e4ndningar s\u00e5 kan du \u00e4ven l\u00e4sa v\u00e5rt blogginl\u00e4gg om det h\u00e4r<\/a>.<\/p>\n
3. N\u00e5gra ord om po\u00e4ng och ”core web vitals”<\/h3>\n
I tidigare upplagor av denna guide s\u00e5 rekommenderade vi att inte l\u00e4gga s\u00e5 stor vikt vid godtyckliga ”po\u00e4ng” p\u00e5 din sidas hastighet som diverse verktyg presenterar, men idag finns det en typ av po\u00e4ng som inte g\u00e5r att ignorera – n\u00e4mligen ”core web vitals”.<\/p>\n
Core web vitals \u00e4r ett initiativ fr\u00e5n Google och syftar till att f\u00f6rs\u00f6ka siffror p\u00e5 en anv\u00e4ndares upplevelse av en hemsida. Core web vitals best\u00e5r av tre m\u00e5tt:<\/p>\n
- \n
- ”Largest Contentful Paint” (LCP) – M\u00e4ter hur l\u00e5ng tid det tar innan den st\u00f6rsta synliga bilden eller blocket har laddats f\u00e4rdigt. Ett m\u00e5tt p\u00e5 hur l\u00e5ng tid laddningen av sidan tar.<\/li>\n
- ”First Input Delay” (FID) – M\u00e4ter hur l\u00e5ng tid det tar fr\u00e5n dess att en anv\u00e4ndare interagerar med hemsidan tills dess att n\u00e5got h\u00e4nder p\u00e5 sidan.<\/li>\n
- ”Cumulative Layout Shift” (CLS) – M\u00e4ter hur mycket inneh\u00e5llet p\u00e5 sidan r\u00f6r p\u00e5 sig utan att anv\u00e4ndaren interagerar med sidan.<\/li>\n<\/ul>\n
Dessa tre v\u00e4rden \u00e4r allts\u00e5 m\u00e5tt t\u00e4nkta att \u00e5terspegla en anv\u00e4ndares upplevelse av ens hemsida generellt sett och har allts\u00e5 inte bara med hastighet att g\u00f6ra.<\/p>\n
Tyv\u00e4rr s\u00e5 \u00e4r dessa saker ganska s\u00e5 tekniskt komplexa att f\u00f6rs\u00f6ka \u00e5tg\u00e4rda sj\u00e4lva d\u00e5 de till stor del \u00e4r ett resultat av det tema och andra funktioner man lagt in p\u00e5 sin sida. N\u00e5gra grejer man kan g\u00f6ra sj\u00e4lv \u00e4r:<\/p>\n
- \n
- Minimera m\u00e4ngden CSS och JavaScript p\u00e5 sidan, genom att vara selektiv med vilka plugins man installerar och olika funktioner man aktiverar, och ha koll p\u00e5 hur varje tillskott p\u00e5verkar sidans prestanda.<\/li>\n
- Konvertera bilder till WebP och\/eller optimera bilder p\u00e5 andra s\u00e4tt.<\/li>\n
- S\u00e4kerst\u00e4ll s\u00e5 att bilder laddas i anpassade storlekar, s\u00e5 att ex en bild som visas i 200×200 pixlar i sj\u00e4lva verket inte \u00e4r 3000×3000 pixlar stor.<\/li>\n
- Specificera storlek p\u00e5 bilder i dess
<img><\/code>-taggar.<\/li>\n<\/ul>\nUtf\u00f6r man dessa saker p\u00e5 sin sida s\u00e5 kan man p\u00e5 s\u00e5 s\u00e4tt se till att f\u00f6rb\u00e4ttra sin sidas core web vitals, och \u00e4ven om det \u00e4r sv\u00e5rt (l\u00e4s: n\u00e4rap\u00e5 om\u00f6jligt) att f\u00e5 full po\u00e4ng p\u00e5 en anv\u00e4ndbar hemsida s\u00e5 \u00e4r det helt klart v\u00e4rt att utf\u00f6ra eftersom ens po\u00e4ng har p\u00e5 verkan p\u00e5 sidans SEO och hur h\u00f6gt upp man placerar sig p\u00e5 Google.<\/p>\n
\u00c4r du intresserad av vad mer du kan g\u00f6ra p\u00e5 din WordPress-sida f\u00f6r att f\u00f6rb\u00e4ttra dess SEO s\u00e5 kanske du \u00e4r intresserad av v\u00e5r WordPress SEO-checklista<\/a>.<\/p>\n
4. V\u00e4lj ett bra webbhotell<\/h3>\n
Att v\u00e4lja ett bra webbhotell \u00e4r A och O om man vill ha en hemsida som laddar snabbt, \u00e4r tillg\u00e4nglig 99,99% av tiden och som dessutom erbjuder bra support som kan hj\u00e4lpa en n\u00e4r problem uppst\u00e5r.<\/p>\n
De flesta k\u00e4nner till att det finns v\u00e4ldigt m\u00e5nga webbhotell p\u00e5 marknaden, b\u00e5de svenska och utl\u00e4ndska, men vad desto f\u00e4rre kanske k\u00e4nner till \u00e4r att det m\u00e5nga v\u00e4ljer att bara kalla f\u00f6r ”webbhotell” kan faktiskt skilja sig \u00e5t v\u00e4ldigt mycket. D\u00e4rf\u00f6r vill vi g\u00e5 igenom tre olika typer av webbhotell och klarg\u00f6ra f\u00f6r skillnaden mellan dem s\u00e5 att du f\u00f6rhoppningsvis kan g\u00f6ra ett mer v\u00e4lgrundat val och hitta r\u00e4tt typ av webbhotell f\u00f6r just dig.<\/p>\n
M\u00e5nga webbhotell kan i vissa fall ge sken av att vara snabba om man m\u00e4ter hastigheten p\u00e5 startsidan som oftast \u00e4r cachad (vilket vi kommer n\u00e4rmare in p\u00e5 l\u00e4ngre ner) men f\u00f6r att alla sidor p\u00e5 en hemsida ska ladda snabbt, inklusive WP Admin och andra dynamiska sidor s\u00e5 som en varukorg och kassa, s\u00e5 finns det inga genv\u00e4gar utan ett verkligt snabbt webbhotell \u00e4r ett m\u00e5ste.<\/p>\n
4.1 Shared hosting<\/h4>\n
Shared hosting \u00e4r den \u00e4ldsta och vanligaste typen av hosting som webbhotell erbjuder. Vad shared hosting inneb\u00e4r \u00e4r att webbhotellet tar en fysisk server och sedan placerar hundratals hemsidor p\u00e5 den.<\/p>\n
Denna typ av hosting har f\u00f6rdelen att priset kan bli ganska l\u00e5gt, men det inneb\u00e4r ocks\u00e5 ofta olika typer av problem vad det g\u00e4ller prestanda och s\u00e4kerhet eftersom ett v\u00e4ldigt h\u00f6gt antal hemsidor delar resurser och inte \u00e4r s\u00e4rskilt isolerade ifr\u00e5n varandra. Fels\u00e4kerheten \u00e4r ocks\u00e5 ofta den underm\u00e5lig d\u00e5 det r\u00e4cker med att webbhotellet f\u00e5r problem med en enda server f\u00f6r att hundratals kunder eller fler ska drabbas, vilket allts\u00e5 inneb\u00e4r \u00f6kad risk f\u00f6r s.k. ”downtime” (tid d\u00e5 ens hemsida inte g\u00e5r att n\u00e5).<\/p>\n
Tv\u00e5 popul\u00e4ra svenska webbhotell som erbjuder shared hosting \u00e4r\u00a0Loopia<\/a> och Oderland<\/a>, medan GoDaddy<\/a> och Siteground<\/a>\u00a0\u00e4r tv\u00e5 stora internationella alternativ.<\/p>\n
4.2 VPS<\/h4>\n
VPS st\u00e5r f\u00f6r Virtual Private Server och \u00e4r, som du kanske listat ut, en virtuell server, vilket egentligen \u00e4r en eller flera fysiska servrar som delats upp med hj\u00e4lp av mjukvara till m\u00e5nga virtuella servrar.<\/p>\n
VPS kan<\/em> ha f\u00f6rdelar vad det g\u00e4ller prestanda j\u00e4mf\u00f6rt med shared hosting, men det \u00e4r upp till en sj\u00e4lv som kund att konfigurera hela servern och se till s\u00e5 att allt fungerar. Med VPS f\u00e5r man maximalt med h\u00e5rdvara per krona men man st\u00e5r ocks\u00e5 helt ensam och har ingen support n\u00e4r det kommer till mjukvaran p\u00e5 servern, s\u00e5 att placera sin hemsida p\u00e5 en VPS \u00e4r oftast f\u00f6r sv\u00e5rt och tar alldeles f\u00f6r mycket tid f\u00f6r gemene man.<\/p>\n
\u00c4r man intresserad av att sj\u00e4lv placera sin hemsida p\u00e5 en VPS s\u00e5 kan man kolla in Svenska Glesys<\/a>, eller de utl\u00e4ndska gigaterna Amazon AWS<\/a> och Google Cloud<\/a>.<\/p>\n
4.3 Managed hosting<\/h4>\n
Ett relativt nytt alternativ till shared hosting och VPS \u00e4r managed hosting, vilket \u00e4r just den typen av hosting som vi h\u00e4r p\u00e5 Templ erbjuder.<\/p>\n
Denna typ av webbhotell erbjuder modernare infrastruktur \u00e4n shared hosting och d\u00e4rmed kortare laddningstider, f\u00f6rb\u00e4ttrad s\u00e4kerhet och minimal downtime, och eftersom managed hosting fokuserar p\u00e5 enbart WordPress s\u00e5 kan man ocks\u00e5 f\u00f6rv\u00e4nta sig b\u00e4ttre support.<\/p>\n
Managed hosting ger en mycket bra prestanda samtidigt som man slipper sj\u00e4lv h\u00e5lla p\u00e5 och pilla med optimeringar p\u00e5 servern och sk\u00f6ta saker s\u00e5 som backuper sj\u00e4lv.<\/p>\n
Medan vi \u00e4r f\u00f6rst p\u00e5 den svenska marknaden att erbjuda managed WordPress hosting s\u00e5 finns det flera utl\u00e4ndska alternativ s\u00e5 som WPEngine<\/a> och Pagely<\/a>.<\/p>\n
4.4 S\u00f6kkriterium webbhotell<\/h4>\n
Oavsett vilken typ av webbhotell du v\u00e4ljer s\u00e5 tycker vi att du b\u00f6r leta efter dessa funktioner\/specifikationer n\u00e4r du v\u00e4ljer webbhotell:<\/p>\n
- \n
- PHP 7.4:<\/strong> Varje ny version av PHP kommer vanligtvis med hastighetsoptimeringar s\u00e5 ju nyare version du har tillg\u00e5ng till desto b\u00e4ttre. I dagsl\u00e4get \u00e4r det PHP 7.4 som \u00e4r den senaste stabila versionen.<\/li>\n
- HTTP\/2 (eller \u00e4nnu b\u00e4ttre: QUIC eller ”HTTP\/3”):<\/strong> M\u00e5nga k\u00e4nner inte ens till att det finns olika versioner av HTTP-protokollet, men faktum \u00e4r att det \u00e4r en tungt v\u00e4gande faktor f\u00f6r hur snabb din hemsida \u00e4r. HTTP\/2 klarar av att hantera flera parallella nedladdningar \u00e4n dess f\u00f6reg\u00e5ngare, och det finns dessutom ett \u00e4nnu nyare protokoll som heter QUIC och som \u00e4r \u00e4nnu snabbare och kandiderar till att senare komma att kallas HTTP\/3.<\/li>\n
- Nginx eller LiteSpeed \u00f6ver Apache:<\/strong> Alla webbhotell anv\u00e4nder sig av n\u00e5gon bakomliggande programvara p\u00e5 deras webbserver. Apache \u00e4r den \u00e4ldsta och \u00e4n idag den mest popul\u00e4ra, men idag finns det modernare alternativ som har stora f\u00f6rdelar n\u00e4r det kommer till hastighet och skalbarhet, n\u00e4mligen Nginx och LiteSpeed.<\/li>\n
- Server cache:<\/strong> Det \u00e4r alltid m\u00f6jligt att installera olika cache-plugins f\u00f6r att snabba upp WordPress, men ett PHP-baserat cache-plugin kommer aldrig att bli lika snabbt som en cache som k\u00f6rs direkt p\u00e5 servern (mer om detta senare i artikeln), och det finns ocks\u00e5 andra typer av cache f\u00f6r att snabba upp PHP som m\u00e5ste k\u00f6ras p\u00e5 server-niv\u00e5 s\u00e5 som Redis och ElasticSearch.<\/li>\n
- Stagingmilj\u00f6:<\/strong> En funktion f\u00f6r att enkelt kunna s\u00e4tta upp en kopia av sin hemsida att anv\u00e4nda som testmilj\u00f6 underl\u00e4ttar s\u00e5 att man enkelt kan testa nya inst\u00e4llningar, plugins och optimeringar utan att beh\u00f6va riskera att man f\u00f6rst\u00e5r n\u00e5got p\u00e5 sin skarpa hemsida och st\u00f6r ens bes\u00f6kare.<\/li>\n
- Servrar n\u00e4ra dina bes\u00f6kare:<\/strong> F\u00f6r att en hemsida ska ladda s\u00e5 snabbt som m\u00f6jligt s\u00e5 \u00e4r det viktigt att du placerar din hemsida p\u00e5 ett webbhotell vars servrar ligger n\u00e4ra dina bes\u00f6kare. Med andra ord \u00e4r det mycket b\u00e4ttre att du v\u00e4ljer ett webbhotell med servrar i Sverige eller andra n\u00e4rliggande l\u00e4nder, snarare \u00e4n ett webbhotell med sina servrar i ex. USA.<\/li>\n
- CDN:<\/strong> Vi kommer g\u00e5 mer in p\u00e5 djupet med f\u00f6rdelarna med CDN senare i denna guide, men det kan vara bra att k\u00e4nna till redan nu att vissa webbhotell inkluderar CDN i deras priser medan andra g\u00f6r det inte, s\u00e5 du g\u00f6r b\u00e4st i att v\u00e4lja ett webbhotell d\u00e4r det ing\u00e5r ist\u00e4llet f\u00f6r att beh\u00f6va betala extra f\u00f6r det senare.<\/li>\n<\/ul>\n
5. V\u00e4lj dina plugins noga<\/h3>\n
En annan f\u00f6ruts\u00e4ttning f\u00f6r att ha en s\u00e5 snabb sida som m\u00f6jligt \u00e4r att h\u00e5lla antalet plugins som du installerar p\u00e5 din sida till ett minimum. Visst, alla plugins sl\u00f6ar inte n\u00f6dv\u00e4ndigtvis ner din sida, men i regel \u00e4r det s\u00e5 att ju fler plugins man har installerat desto segare kommer ens sida att bli.<\/p>\n
Medan m\u00e5nga WordPress-plugins l\u00e4gger till funktionalitet som vi inte kan vara utan s\u00e5 b\u00f6r man ocks\u00e5 ha de negativa sidorna som m\u00e5nga plugins medf\u00f6r, vilka kan vara:<\/p>\n
- \n
- Tynger ner databasen<\/strong> – M\u00e5nga plugins l\u00e4gger till nya tabeller i databasen och l\u00e4gger till m\u00e5nga nya v\u00e4rden i wp_options vilket kan g\u00f6ra din databas tr\u00f6gare.<\/li>\n
- L\u00e4gger till JavaScript och CSS-filer p\u00e5 samtliga sidor<\/strong> – M\u00e5nga plugins l\u00e4gger inte bara till JS och CSS-filer p\u00e5 sidor d\u00e4r de faktiskt anv\u00e4nds utan p\u00e5 samtliga sidor p\u00e5 din hemsida.<\/li>\n
- Potentiell s\u00e4kerhetsrisk<\/strong> – Plugins fr\u00e5n mindre seri\u00f6sa utvecklare och som dessutom uppdateras s\u00e4llan eller aldrig \u00e4r en potentiell s\u00e4kerhetsrisk f\u00f6r din sida.<\/li>\n<\/ul>\n
Ytterligare ett problem med att installera plugins som man egentligen inte beh\u00f6ver \u00e4r att \u00e4ven om man avinstallerar ett plugin i WP Admin s\u00e5 l\u00e4mnar de typiskt efter sig sp\u00e5r i databasen, vilket f\u00f6rst\u00e5s g\u00f6r databasen st\u00f6rre och kan \u00e4ven g\u00f6ra din sida sl\u00f6are, detta trots att du avinstallerat pluginet.<\/p>\n
Vi rekommenderar att du g\u00e5r igenom de plugins som du redan har installerat p\u00e5 sida idag och ta bort de som du verkligen inte beh\u00f6ver, och undvik i forts\u00e4ttningen att installera n\u00e5got som verkligen inte \u00e4r ett m\u00e5ste.<\/p>\n
6. St\u00e4da och optimera sidans databas<\/h3>\n
Med tiden s\u00e5 tenderar en WordPress-databas att v\u00e4xa i storlek, detta eftersom ju mer man arbetat med sidan och ju mer data ens hemsida lagrar desto st\u00f6rre v\u00e4xer sig databasen. D\u00e4rf\u00f6r \u00e4r det bra att med j\u00e4mna mellanrum st\u00e4da och optimera sin sidas databas.<\/p>\n
Med en v\u00e4lst\u00e4dad och optimerad databas s\u00e5 slipper sidan tyngas ner av en massa lagrad information som inte beh\u00f6vs och sidan kan ladda snabbare.<\/p>\n
6.1 St\u00e4da databas<\/h4>\n
Viss tillv\u00e4xt av ens databas \u00e4r f\u00f6rst\u00e5s helt normalt och n\u00f6dv\u00e4ndigt men ofta finns det v\u00e4ldigt mycket information som inte anv\u00e4nds sparad i ens databas. Genom att rensa s\u00e5dan data med j\u00e4mna mellanrum s\u00e5 kan man h\u00e5lla databasen s\u00e5 liten som m\u00f6jlig och d\u00e4rmed se till att ens hemsida kan laddas snabbare.<\/p>\n
N\u00e5gra exempel p\u00e5 saker som ofta kan tas bort fr\u00e5n ens databas \u00e4r revisioner, automatiska utkast, utg\u00e5ngen tillf\u00e4llig data (transients), inl\u00e4gg i papperskorgen samt \u00f6vergiven metadata.<\/p>\n
N\u00e4r vi p\u00e5 Templ har optimerat hemsidor och st\u00e4dat databasen s\u00e5 \u00e4r det inte ovanligt att vi f\u00e5tt ner databaser i 50-90% av dess ursprungliga storlek, vilket f\u00f6rst\u00e5s kan g\u00f6ra massiv skillnad p\u00e5 hur ens hemsida presterar.<\/p>\n
F\u00f6r att enkelt kunna st\u00e4da sin databas s\u00e5 har vi skapat pluginet Templ Optimizer<\/a>. Pluginet \u00e4r helt kostnadsfritt och g\u00f6r det enkelt att uf\u00f6ra m\u00e5nga av de knep som vi l\u00e4nge anv\u00e4nt f\u00f6r att optimera hemsidor.<\/p>\n
![\"Templ](\"https:\/\/templ.local\/app\/uploads\/2022\/01\/templ-optimizer-1024x883.jpg\")
<\/a>Med v\u00e5rt egna plugin Templ Optimizer \u00e4r det enkelt att st\u00e4da och optimera sin databas<\/figcaption><\/figure>\n Templ Optimizer kan ta bort inneh\u00e5ll i databasen som inte anv\u00e4nds och kan g\u00f6ra underverk p\u00e5 dess storlek.<\/p>\n
Kom ih\u00e5g att innan man g\u00f6r n\u00e5gra \u00e4ndringar p\u00e5 sin databas s\u00e5 \u00e4r det att rekommendera att ta en backup f\u00f6rst.<\/p>\n
6.2 Optimera databas<\/h4>\n
Ut\u00f6ver att st\u00e4da databasen p\u00e5 on\u00f6digt inneh\u00e5ll s\u00e5 finns det \u00e4ven andra optimeringar man kan utf\u00f6ra p\u00e5 sin databas.<\/p>\n
En sak man kan optimera \u00e4r att konvertera databastabeller av typen MyISAM till InnoDB ist\u00e4llet. InnoDB \u00e4r en nyare typ av tabeller och som presterar b\u00e4ttre, i synnerhet n\u00e4r det kommer till multitasking och att klara av att g\u00f6ra fler saker samtidigt.<\/p>\n
Med hj\u00e4lp Templ Optimizer s\u00e5 kan man konvertera MyISAM till InnoDB med ett klick. \u00c4ven h\u00e4r \u00e4r det viktigt att ta en backup f\u00f6rst.<\/p>\n
I v\u00e5rt plugin finns ocks\u00e5 en annan knapp f\u00f6r att optimera sidans databas (som heter ”Optimize tables”) och den omorganiserar den fysiska lagringen av databasens inneh\u00e5ll, vilket kan reducera dess storlek och ocks\u00e5 snabba upp den ytterligare.<\/p>\n
7. Optimera WordPress-inst\u00e4llningar<\/h3>\n
Om man kollar under Network-fliken i Chromes Developer Tools och filtrerar efter JS-filer s\u00e5 kan man d\u00e4r ofta se en hel del saker som man inte k\u00e4nner igen och som verkar on\u00f6diga.<\/p>\n
P\u00e5 en testsida som vi satte upp s\u00e5 kunde vi identifiera flera JS-filer som vi vet att vi inte anv\u00e4nder:<\/p>\n
![\"On\u00f6diga](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/onodiga-javascript-filer-1024x668.jpg\")
<\/a>Ofta kan man se flera JavaScript-filer som inte beh\u00f6vs<\/figcaption><\/figure>\n wp-embed.min.js<\/strong>
\nEtt arkiv som \u00e4r j\u00e4ttebra f\u00f6r bloggar som beh\u00f6ver kunna baka in YouTube-videos i sina inl\u00e4gg, men n\u00e5got som vi inte beh\u00f6ver p\u00e5 v\u00e5r sida.<\/p>\nwp-emoji-release.min.js<\/strong>
\nDetta \u00e4r ett JavaScript som konverterar textsmileys s\u00e5 som:-)<\/code> till bildfiler ist\u00e4llet, n\u00e5got som idag k\u00e4nns ganska on\u00f6digt n\u00e4r v\u00e5ra datorer och mobiler har inbyggt st\u00f6d f\u00f6r emojis.<\/p>\nF\u00f6r att ta bort dessa s\u00e5 lade vi till lite kod i v\u00e5rt temas functions.php:<\/p>\n
\/\/ disable wp-emoji\nremove_action( 'wp_head', 'print_emoji_detection_script', 7 ); \nremove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); \nremove_action( 'wp_print_styles', 'print_emoji_styles' ); \nremove_action( 'admin_print_styles', 'print_emoji_styles' );\n\n\/\/ disable wp-embed\nfunction my_deregister_scripts(){\n wp_dequeue_script( 'wp-embed' );\n}\nadd_action( 'wp_footer', 'my_deregister_scripts' );\n\nEfter att ha inaktiverat de WordPress-funktioner som vi ans\u00e5g som on\u00f6diga p\u00e5 v\u00e5r testsida s\u00e5 s\u00e5g resultatet ut s\u00e5 h\u00e4r:<\/pre>\n![\"Utan](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/utan-onodiga-javascript-1024x669.jpg\")
<\/a>Vi lyckades p\u00e5 v\u00e5r testsida ta bort 7 JS-filer och sparade in \u00f6ver 400KB<\/figcaption><\/figure>\n Vi lyckades allts\u00e5 spara in hela 7 requests och 404KB data bara genom att inaktivera ett par funktioner som vi ans\u00e5g som on\u00f6diga.<\/p>\n
Vilka JavaScript som laddas p\u00e5 din sida beror p\u00e5 vilka plugins du har installerat och att veta vilka som inte anv\u00e4nds \u00e4r inte alltid helt enkelt, s\u00e5 detta \u00e4r n\u00e5got man ibland m\u00e5ste testa noga eller ta hj\u00e4lp av en expert f\u00f6r att \u00e5tg\u00e4rda.<\/p>\n
8. WP Cron<\/h3>\n
Det finns en funktion i WordPress som utf\u00f6ra olika saker med best\u00e4mda intervaller som heter WP Cron. Den \u00e4r exempelvis ansvarig f\u00f6r att kolla efter uppdateringar eller k\u00f6ra synkroniseringar med olika externa tj\u00e4nster.<\/p>\n
Ett ”problem” med denna funktion \u00e4r att den fr\u00e5n b\u00f6rjan k\u00f6rs slumpartat vid varje bes\u00f6k p\u00e5 ens hemsida.<\/p>\n
Hos Templ g\u00f6r vi ist\u00e4llet s\u00e5 att vi \u00e4ndrar detta beteende s\u00e5 att ist\u00e4llet f\u00f6r att k\u00f6ras vid varje bes\u00f6k s\u00e5 \u00e4r det ist\u00e4llet servern som triggar WP Cron med j\u00e4mna mellanrum. Det g\u00f6r s\u00e5 att ens sida alltid kan ladda snabbare.<\/p>\n
Fr\u00e5ga ditt webbhotell om de kan hj\u00e4lpa till med detta, eller om du vill prova att s\u00e4tta upp det sj\u00e4lv s\u00e5 l\u00e4gg in
define('DISABLE_WP_CRON', true);<\/code> i din sidas wp-config.php och s\u00e4tt upp ett cronjob p\u00e5 servern som anropar wp-cron.php med j\u00e4mna mellanrum, exempelvis s\u00e5 h\u00e4r:<\/p>\nwget -q -O - http:\/\/yourwebsite.com\/wp-cron.php?doing_wp_cron >\/dev\/null 2>&1<\/pre>\n
9. Cache<\/h3>\n
Om du tidigare har h\u00f6rt n\u00e5got om hur du snabbar upp WordPress s\u00e5 \u00e4r sannolikheten h\u00f6g att du h\u00f6rt folk prata om cache.<\/p>\n
Men, \u00e4ven om de flesta har h\u00f6rt talas om cachning s\u00e5 r\u00e5der det stor f\u00f6rvirring kring vad en cache egentligen \u00e4r f\u00f6r n\u00e5got och de olika typer av cache som kan anv\u00e4ndas f\u00f6r att minska din hemsidas resursanv\u00e4ndning, skala upp den f\u00f6r att klara av fler bes\u00f6kare och korta ner laddningstider avsev\u00e4rt.<\/p>\n
9.1 Page cache<\/h4>\n
Vad som g\u00f6r WordPress och andra publiceringsverktyg s\u00e5 popul\u00e4ra \u00e4r just att de levererar dynamiskt inneh\u00e5ll som \u00e4r enkelt att \u00e4ndra och som dessutom kan anpassas efter bes\u00f6karen.<\/p>\n
Medan det f\u00f6rst\u00e5s p\u00e5 m\u00e5nga s\u00e4tt \u00e4r suver\u00e4nt att inneh\u00e5llet p\u00e5 en WordPress-sida inte \u00e4r statiskt s\u00e5 \u00e4r det s\u00e5 att det tar l\u00e4ngre tid och mer resurser att generera dynamiska sidor f\u00f6r varje bes\u00f6kare \u00e4n vad det tar att servera statiska HTML-sidor.<\/p>\n
Det \u00e4r h\u00e4r som en page cache kommer in i bilden. Vad en page cache g\u00f6r \u00e4r att den lagrar sidor som genereras som statisk HTML, s\u00e5 att samma sidor slipper att generas p\u00e5 nytt av PHP och MySQL vid varje sidvisning. D\u00e4rf\u00f6r kan anv\u00e4ndandet av cache snabba upp din hemsida avsev\u00e4rt.<\/p>\n
![\"Hur](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/hur-en-sida-genereras-1024x322.jpg\" "\\"Hur")
<\/a>Hur en sida genereras om den inte finns cachad<\/figcaption><\/figure>\n ![\"Hur](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/hur-en-sida-serveras-fran-cache-1024x322.jpg\")
<\/a>Hur en sida serveras fr\u00e5n cache<\/figcaption><\/figure>\n Att anv\u00e4nda sig av en page cache har framf\u00f6rallt tv\u00e5 stora f\u00f6rdelar:<\/p>\n
- \n
- Minskad resursanv\u00e4ndning<\/li>\n
- Sidor kan levereras snabbare till bes\u00f6kare (l\u00e4gre TTFB eller ”time to first byte”)<\/li>\n<\/ul>\n
Page cache med hj\u00e4lp av plugin<\/strong>
\nOm du inte redan anv\u00e4nder dig av n\u00e5gon cache idag s\u00e5 \u00e4r det som tur \u00e4r enkelt fixat i WordPress med hj\u00e4lp av ett plugin. Det finns en hel uppsj\u00f6 av olika cache plugin man kan kan v\u00e4lja mellan, och nedan har vi listat ett par olika alternativ som vi kan rekommendera:<\/p>\n- \n
- W3 Total Cache<\/a> \u2013 Gratis<\/li>\n
- WP Fastest Cache<\/a> \u2013 Gratis & premiumvariant<\/li>\n
- WP Super Cache<\/a> \u2013 Gratis & premiumvariant<\/li>\n
- WP Rocket<\/a> \u2013 Premium<\/li>\n<\/ul>\n
Page cache p\u00e5 server-niv\u00e5
\n<\/strong>Medan alla plugins som vi listade ovan g\u00f6r tricket och l\u00e5ter dig anv\u00e4nda dig av en page cache, s\u00e5 \u00e4r det \u00e4nnu b\u00e4ttre att anv\u00e4nda sig av en cache-l\u00f6sning som k\u00f6rs direkt p\u00e5 servern ist\u00e4llet f\u00f6r som ett WordPress plugin.<\/p>\nEn page cache som k\u00f6rs direkt p\u00e5 servern kommer alltid vara \u00e4nnu snabbare och resurssn\u00e5lare \u00e4n en page cache som k\u00f6rs som ett PHP-baserat plugin. Vi p\u00e5 Templ, likt m\u00e5nga andra premium webbhotell, erbjuder f\u00f6rst\u00e5s page cache p\u00e5 serverniv\u00e5.<\/p>\n
Test av page cache:<\/strong>
\nF\u00f6r att kunna m\u00e4ta hur stor p\u00e5verkan varje optimering har s\u00e5 satte vi upp en testsajt och installerade det popul\u00e4ra temat Flatsome.<\/p>\nF\u00f6rst s\u00e5 testade vi att ladda startsidan utan n\u00e5gon page cache aktiverad och d\u00e5 laddade startsidan p\u00e5 ca 0,7 sekunder och med en TTFB (eller Time To First Byte) p\u00e5 ca 75 millisekunder:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/snabba-upp-wordpress-ingen-page-cache-1-1024x653.jpg\" "\\"Exempel")
<\/a>TTFB (Time To First Byte) utan page cache<\/figcaption><\/figure>\n Sen s\u00e5 aktiverade vi v\u00e5ran serverbaserade page cache och testade igen och d\u00e5 laddade sidan ist\u00e4llet p\u00e5 ca 0,6 sekunder och TTFB p\u00e5 ca 16 millisekunder.<\/p>\n
![\"\"](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/snabba-upp-wordpress-med-page-cache-1024x652.jpg\")
<\/a><\/p>\nTime To First Byte \u00e4r ett m\u00e5tt p\u00e5 tiden det tar fr\u00e5n det att webbl\u00e4saren skickar en request tills dess att servern skickat f\u00f6rsta byten tillbaka. Denna tid inkluderar allts\u00e5 tiden det tar f\u00f6r servern att generera sidan med hj\u00e4lp av PHP och MySQL (s\u00e5 tillvida att man inte anv\u00e4nder en page cache).<\/p>\n
9.2 Object cache<\/h4>\n
En annan typ av cache som vi rekommenderar att anv\u00e4nda \u00e4r object cache. En object cache \u00e4r en annan typ av cache som ist\u00e4llet f\u00f6r att spara hela sidor s\u00e5 sparar den ist\u00e4llet vanligt f\u00f6rekommande databasanrop till minnet och slipper p\u00e5 s\u00e5 s\u00e4tt utf\u00f6ra samma databasanrop upprepade g\u00e5nger.<\/p>\n
Till skillnad fr\u00e5n en page cache s\u00e5 har en object cache \u00e4ven p\u00e5verkan p\u00e5 WP Admin och kan snabba upp din WordPress-sida, speciellt om du har en stor databas inneh\u00e5llandes m\u00e5nga blogginl\u00e4gg, kommentarer, WooCommerce-produkter och ordrar.<\/p>\n
Ett exempel p\u00e5 en popul\u00e4r object cache \u00e4r Redis, vilket m\u00e5nga webbhotell i premiumsegmentet erbjuder, och s\u00e5 \u00e4ven vi h\u00e4r p\u00e5 Templ.<\/p>\n
Test av Redis object cache<\/strong>
\nF\u00f6r att l\u00e4ttare kunna illustrera f\u00f6rdelarna med Redis s\u00e5 installerade vi pluginet Query Monitor<\/a> p\u00e5 v\u00e5r testsida. Det pluginet l\u00e5ter oss se hur l\u00e5ng tid det tar f\u00f6r servern att generera en sida och \u00e4ven antalet databasanrop som kr\u00e4vdes f\u00f6r att generera en sida.<\/p>\nN\u00e4r vi testade att ladda startsidan p\u00e5 v\u00e5r testsida utan Redis, och denna g\u00e5ng inloggad som admin s\u00e5 att vi f\u00e5r tillg\u00e5ng till data fr\u00e5n Query Monitor s\u00e5 genererades sidan p\u00e5 0,25 sekunder och 218 databasanrop utf\u00f6rdes:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/exempel-utan-redis-object-cache-1024x655.jpg\")
<\/a>218 databasanrop utan Redis<\/figcaption><\/figure>\n Efter att vi aktiverade Redis s\u00e5 kunde sidan ist\u00e4llet genereras p\u00e5 0,17 sekunder och med hj\u00e4lp av 72 databasanrop:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/exempel-med-redis-object-cache-1024x653.jpg\")
<\/a>72 databasanrop med Redis<\/figcaption><\/figure>\n Vi sparade allts\u00e5 inte mindre \u00e4n 146 databasanrop p\u00e5 v\u00e5r startsida och sidan kunde genereras 32% snabbare med hj\u00e4lp av Redis. Inte illa!<\/p>\n
9.3 Browser cache<\/h4>\n
En annan typ av cache som du b\u00f6r anv\u00e4nda p\u00e5 din hemsida \u00e4r browser cache.<\/p>\n
Vad en browser cache g\u00f6r \u00e4r att den sparar statiska filer i bes\u00f6karens webbl\u00e4sare och slipper p\u00e5 s\u00e5 s\u00e4tt att ladda om samma filer om och om igen vid varje sidvisning. Detta kan vara b\u00e5de bilder, CSS-, JavaScript-filer och andra resurser som din hemsida \u00e4r beroende av f\u00f6r att kunna visas.<\/p>\n
Detta snabbar f\u00f6rst\u00e5s upp din hemsida avsev\u00e4rt f\u00f6r s\u00e5nna bes\u00f6kare som klickar sig in p\u00e5 flera sidor p\u00e5 din hemsida, och det sparar ocks\u00e5 mycket bandbredd och d\u00e4rmed pengar. Vi rekommenderar alla att se till att anv\u00e4nda sig utav browser cache.<\/p>\n
Precis som med page cache s\u00e5 finns det m\u00e5nga plugins till WordPress som fixar detta \u00e5t dig, om inte redan ditt webbhotell har sk\u00f6tt denna konfigurering \u00e5t dig.<\/p>\n
N\u00e5gra plugins som kan hj\u00e4lpa dig med detta \u00e4r:<\/p>\n
- \n
- Leverage Browser Caching<\/a> – Gratis<\/li>\n
- W3 Total Cache<\/a> – Gratis<\/li>\n
- WP Rocket<\/a> – Premium<\/li>\n<\/ul>\n
Hur vet man ifall man anv\u00e4nder sig av browser cache eller ej?
\n<\/strong>Du kan enkelt kolla ifall du anv\u00e4nder nyttjar browser cache eller ej genom att kolla ifall s.k. ”expiry headers” \u00e4r satta eller inte.<\/p>\nF\u00f6r att kolla det s\u00e5 kan du g\u00e5 in under Network-fliken > klicka p\u00e5 n\u00e5gon av resurserna som h\u00e4mtats > och se ifall du d\u00e4r kan se ”expires” under Response Headers eller inte. Ifall expires \u00e4r satt s\u00e5 kan browser cache nyttjas.<\/p>\n
![\"Kolla](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/kolla-ifall-du-anvander-browser-cache-eller-ej-1024x665.jpg\")
<\/a>Ifall du kan se ”expires” under Response Headers s\u00e5 kan browser cache nyttjas<\/figcaption><\/figure>\n Test av browser cache<\/strong>
\nF\u00f6r att f\u00f6rs\u00e4kra dig om att du testar en sida utan att anv\u00e4nda browser cache s\u00e5 kan du kryssa i ”Disable cache”-rutan under Network-fliken i Chromes Developer Tools och kolla hur stor datam\u00e4ngd som laddas hem vid varje sidvisning.<\/p>\nV\u00e5r testsida laddar totalt 1.9MB data om vi inte nyttjar browser cache:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/exempel-pa-outnyttjad-browser-cache-1024x666.jpg\")
<\/a>Kryssa i ”Disable cache” f\u00f6r att m\u00e4ta utan browser cache<\/figcaption><\/figure>\n Om vi ist\u00e4llet kryssar ur ”Disable Cache” och laddar startsidan igen s\u00e5 ser det ut s\u00e5 h\u00e4r:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/exempel-pa-nyttjande-av-browser-cache-1024x665.jpg\")
<\/a>Med nyttjande av browser cache s\u00e5 laddas bara 0.16MB ist\u00e4llet f\u00f6r 1.9MB<\/figcaption><\/figure>\n Genom nyttjande av browser cache s\u00e5 kan vi se att enbart 163KB l\u00e4ses in ist\u00e4llet, vilket allts\u00e5 \u00e4r 91% mindre data och sidan laddade dessutom p\u00e5 under 0,5 sekunder ist\u00e4llet f\u00f6r \u00f6ver 0,6. Browser cache g\u00f6r allts\u00e5 underverk f\u00f6r bes\u00f6kare som g\u00e5r in p\u00e5 mer \u00e4n en sida.<\/p>\n
10. Servera bilder i WebP-format<\/h3>\n
Det \u00e4r oftast s\u00e5 att bilder utg\u00f6r den st\u00f6rsta delen av den datam\u00e4ngd som h\u00e4mtas n\u00e4r man bes\u00f6ker din hemsida, d\u00e4rf\u00f6r s\u00e5 \u00e4r det v\u00e4ldigt viktigt att man jobbar med sina bilder f\u00f6r att ens hemsida ska ladda s\u00e5 snabbt som m\u00f6jligt.<\/p>\n
H\u00e4r har ocks\u00e5 tekniken utvecklats ganska fort senaste \u00e5ren och det finns numera flera olika (och f\u00f6r m\u00e5nga \u00e4ven nya) bildformat s\u00e5 som WebP. WebP erbjuder effektivare komprimering j\u00e4mf\u00f6rt med de traditionella JPG och PNG och kan minska bilders filstorlek med 25-35% helt utan f\u00f6rs\u00e4mrad bildkvalitet.<\/p>\n
Genom att konvertera dina bilder till WebP s\u00e5 kan du ofta snabba upp din hemsida rej\u00e4lt genom att sidornas totala vikt minskas.<\/p>\n
H\u00e4r p\u00e5 Templ s\u00e5 kan vi konvertera bilder till WebP direkt p\u00e5 v\u00e5ra servrar utan att beh\u00f6va installera n\u00e5got plugin till WordPress, och det \u00e4r n\u00e5got som vi hj\u00e4lper till med kostnadsfritt.<\/p>\n
Har man ett annat webbhotell s\u00e5 finns det ist\u00e4llet m\u00e5nga plugins till WordPress som l\u00e5ter en konvertera bilder till WebP, och de tv\u00e5 mest popul\u00e4ra alternativen \u00e4r i dagsl\u00e4get:<\/p>\n
- \n
- WebP Express<\/a>\u00a0– Gratis<\/li>\n
- WebP Converter for Media<\/a>\u00a0– Gratis<\/li>\n<\/ul>\n
Test av WebP-bilder<\/strong>
\nF\u00f6r att se hur stor del av den totala datam\u00e4ngden av en sida som utg\u00f6rs av bilder s\u00e5 kan man \u00f6ppna ens webbl\u00e4sares Developer Tools och trycka p\u00e5 ”Img” \u00f6ver vattenfallet och se ”resources” p\u00e5 raden l\u00e4ngst ner.<\/p>\nVi lade upp 10st bilder p\u00e5 en testsida och j\u00e4mf\u00f6rde den kombinerade storleken f\u00f6r alla bilder, f\u00f6re och efter WebP-konvertering:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/jpg-example-1024x798.jpg\")
<\/a>V\u00e5ra 10 testbilder utgjorde 3.9MB innan konvertering till WebP<\/figcaption><\/figure>\n ![\"\"](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/webp-example-1024x803.jpg\")
<\/a>Efter konvertering till WebP utgjorde ist\u00e4llet alla bilder 1.9MB<\/figcaption><\/figure>\n Vi kunde allts\u00e5 minska den totala storleken p\u00e5 alla bilder p\u00e5 v\u00e5r testsida fr\u00e5n 3.9MB till 1.9MB, vilket f\u00f6rst\u00e5s kan ha massiv p\u00e5verkan p\u00e5 ens sidas totala laddningstid.<\/p>\n
Ut\u00f6ver att komprimera bilder s\u00e5 \u00e4r det \u00e4ven viktigt att du kontrollerar s\u00e5 att bilderna laddar i rimlig storlek. Ibland h\u00e4nder det att man laddar upp bilder direkt fr\u00e5n sin kamera till WordPress och att de laddas i sin fulla uppl\u00f6sning och d\u00e5 v\u00e4ger 5-10MB eller ibland mer.<\/p>\n
11. Komprimering med gzip eller brotli<\/h3>\n
Gzip \u00e4r en teknik som anv\u00e4nds f\u00f6r att komprimera data innan det skickas fr\u00e5n webbservern till bes\u00f6karen, och p\u00e5 s\u00e5 s\u00e4tt minskar den totala datam\u00e4ngden s\u00e5 att sidor kan laddas snabbare. Komprimering med gzip har v\u00e4ldigt stor p\u00e5verkan p\u00e5 storleken av textfiler s\u00e5 som css och js-filer.<\/p>\n
De flesta seri\u00f6sa webbhotellen aktiverar gzip-komprimering \u00e5t sina kunder redan, men f\u00f6r att vara p\u00e5 den s\u00e4kra sidan s\u00e5 kan du bekr\u00e4fta att resurser p\u00e5 din sida komprimeras med gzip genom att under Network-fliken klicka p\u00e5 en resurs och kolla under Response Headers s\u00e5 att det d\u00e4r ser ut s\u00e5 h\u00e4r:<\/p>\n
![\"Kolla](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/kolla-ifall-du-anvander-gzip-eller-ej-1024x667.jpg\")
<\/a>Bekr\u00e4fta att du nyttjar gzip-komprimering<\/figcaption><\/figure>\n Ifall ditt webbhotell inte har konfigurerat gzip \u00e5t dig redan s\u00e5 kan det vara s\u00e5 att en del cache-plugin l\u00f6ser den saken \u00e5t dig, men det beror p\u00e5 vilket webbhotell du anv\u00e4nder. Ifall du \u00e4r os\u00e4ker s\u00e5 rekommenderar vi att du kontaktar ditt webbhotell.<\/p>\n
J\u00e4mf\u00f6relse, med och utan gzip<\/strong>
\nF\u00f6r att kunna j\u00e4mf\u00f6ra skillnaden med och utan gzip s\u00e5 inaktiverade vi f\u00f6rst gzip-komprimering p\u00e5 v\u00e5r testsida, och resultat s\u00e5g d\u00e5 ut s\u00e5 h\u00e4r:<\/p>\n![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/utan-gzip-1024x665.jpg\")
<\/a>V\u00e5r testsida v\u00e4ger in p\u00e5 1.8MB utan gzip<\/figcaption><\/figure>\n Efter det s\u00e5 aktiverade vi gzip igen och vi kan d\u00e5 se att skillnaden \u00e4r enorm:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/med-gzip-1024x666.jpg\")
<\/a>Med nyttjande av gzip v\u00e4ger sidan ist\u00e4llet in p\u00e5 862KB<\/figcaption><\/figure>\n Att anv\u00e4nda gzip krympte allts\u00e5 den totala storleken p\u00e5 sidan med \u00f6ver 50% vilket f\u00f6rst\u00e5s kan ha stor p\u00e5verkan p\u00e5 laddningstid p\u00e5 sidan.<\/p>\n
F\u00f6r den som vill kunna nyttja \u00e4nnu b\u00e4ttre komprimering \u00e4n gzip s\u00e5 finns det en nyare och \u00e4n mer effektiv komprimeringsteknik – brotli (eller bara br) vilket vi p\u00e5 Templ f\u00f6rst\u00e5s erbjuder.<\/p>\n
12. Anv\u00e4nd CDN<\/h3>\n
CDN \u00e4r en f\u00f6rkortning av Content Delivery Network och \u00e4r ett n\u00e4tverk av servrar placerade p\u00e5 olika platser runt jorden och som serverar statiska filer s\u00e5 som bilder, CSS och JavaScript m.m.<\/p>\n
![\"CDN\"](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/cdn.jpg\")
<\/a><\/p>\nF\u00f6rdelen med detta m\u00e4rks tydligast f\u00f6r bes\u00f6kare fr\u00e5n andra delar av v\u00e4rlden \u00e4n just Sverige, d\u00e5 de kan h\u00e4mta filer fr\u00e5n servrar placerade i n\u00e4rheten av dem ist\u00e4llet f\u00f6r att allt m\u00e5ste h\u00e4mtas fr\u00e5n andra sidan jorden.<\/p>\n
Ifall ditt webbhotell inte har inbyggt st\u00f6d f\u00f6r CDN s\u00e5 finns det n\u00e5gra popul\u00e4ra alternativ fr\u00e5n 3e part som du kan \u00f6verv\u00e4ga:<\/p>\n
- \n
- Cloudflare<\/a> – Gratis & premiumvariant<\/li>\n
- StackPath (tidigare MaxCDN)<\/a> – Premium<\/li>\n
- KeyCDN<\/a> – Premium<\/li>\n<\/ul>\n
Alla CDN-l\u00f6sningar listade ovan \u00e4r enkla att komma ig\u00e5ng med. Det \u00e4r bara registrera sig (och betala, om n\u00f6dv\u00e4ndigt) och sedan konfigurera CDN i WordPress antingen med leverant\u00f6rernas egna plugin eller med pluginet CDN Enabler<\/a>.<\/p>\n
F\u00f6r att testa f\u00f6rdelarna med CDN s\u00e5 anv\u00e4nde vi oss av verktyget Pingdom<\/a> och m\u00e4tte tiden det tog att ladda v\u00e5r testsida fr\u00e5n San Francisco i USA. Utan CDN aktiverat s\u00e5g det ut s\u00e5 h\u00e4r:<\/p>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/utan-cdn-1024x341.jpg\")
<\/a>Det tog 2,13 sekunder att ladda sidan fr\u00e5n San Francisco utan CDN<\/figcaption><\/figure>\n - StackPath (tidigare MaxCDN)<\/a> – Premium<\/li>\n
- WebP Converter for Media<\/a>\u00a0– Gratis<\/li>\n<\/ul>\n
- W3 Total Cache<\/a> – Gratis<\/li>\n
- WP Fastest Cache<\/a> \u2013 Gratis & premiumvariant<\/li>\n
- W3 Total Cache<\/a> \u2013 Gratis<\/li>\n
- L\u00e4gger till JavaScript och CSS-filer p\u00e5 samtliga sidor<\/strong> – M\u00e5nga plugins l\u00e4gger inte bara till JS och CSS-filer p\u00e5 sidor d\u00e4r de faktiskt anv\u00e4nds utan p\u00e5 samtliga sidor p\u00e5 din hemsida.<\/li>\n
- HTTP\/2 (eller \u00e4nnu b\u00e4ttre: QUIC eller ”HTTP\/3”):<\/strong> M\u00e5nga k\u00e4nner inte ens till att det finns olika versioner av HTTP-protokollet, men faktum \u00e4r att det \u00e4r en tungt v\u00e4gande faktor f\u00f6r hur snabb din hemsida \u00e4r. HTTP\/2 klarar av att hantera flera parallella nedladdningar \u00e4n dess f\u00f6reg\u00e5ngare, och det finns dessutom ett \u00e4nnu nyare protokoll som heter QUIC och som \u00e4r \u00e4nnu snabbare och kandiderar till att senare komma att kallas HTTP\/3.<\/li>\n
- PHP 7.4:<\/strong> Varje ny version av PHP kommer vanligtvis med hastighetsoptimeringar s\u00e5 ju nyare version du har tillg\u00e5ng till desto b\u00e4ttre. I dagsl\u00e4get \u00e4r det PHP 7.4 som \u00e4r den senaste stabila versionen.<\/li>\n
- GTmetrix<\/a><\/li>\n
- Google PageSpeed Insights<\/a><\/li>\n
- 9.2 Object cache<\/a><\/li>\n
- 6.2 Optimera databas<\/a><\/li>\n<\/ul>\n<\/li>\n
- 4.2 VPS<\/a><\/li>\n
- 2. H\u00e5ll dig till ett m\u00e4tverktyg<\/a><\/li>\n
![\"Exempel](\"https:\/\/templ.local\/app\/uploads\/2019\/10\/med-cdn-1024x339.jpg\")
<\/a>