Bild baserad på fotot Speedometer av Kevin Krejci
I mitten av juni skrev CNN om att hemsidor har blivit långsammare att ladda de senaste åren. En genomsnittlig sida är idag enligt HTTP archive 2.1 MB stor, vilket är dubbelt så stort som genomsnittet för tre år sedan. I artikeln nämns bland annat ökad och användning av videos, bilder och tracking scripts från tredjepart som bidragande orsaker.
Förutom att en långsam sida är frustrerande för dina besökare så är hastighet likt att en hemsida är mobilvänlig, något som Google värderar i deras rakning i sökresultaten.
Idag tar vi en titt på hur du som webbansvarig för en hemsida kan göra hemsidan snabbare att ladda på 7 olika sätt. Det är lite varierande svårighetsgrad på dessa beroende på om du är mer en webbredaktör som mest skriver och laddar upp bilder eller en webbutvecklare som utvecklar hemsidor från grunden, men jag har försökt hålla mig främst till lite enklare knep som har flera bra verktyg som kan hjälpa dig på traven.
OBS! Innan du sätter igång med ändringar som dessa: Se till att genomföra en backup av hela din hemsidas filer och databas(er), samt din sidas .htaccess-fil! Läs gärna en detaljerad guide om hur du gör innan du sätter igång.
Jag har själv testat de flesta metoderna och verktygen i det här inlägget och använder flera av metoderna på den här sidan dagligen i mitt arbete, men jag har inte testat alla de verktyg jag länkar till här. Så skriv gärna en kommentar om dina erfarenheter av dem eller om det är något du rekommenderar istället!
1. Ladda in stilmallar i toppen och script i botten av koden
Att se till att ladda stilmallar (.CSS) i toppen inom <head>-taggen på en hemsida och script (.JS) i botten av sidan före </body>-taggen är något som lätt kan glömmas bort även av erfarna webbutvecklare.
Vad som sker när ett tungt script ligger i toppen av koden istället för i botten, är att webbläsaren då försöker ladda in innehållet i den före det som kommer under, vilket skapar en blockering och gör laddningstiden för hemsidan långsammare. Är scriptet istället placerat i botten så kan all information på resten av sidan som HTML-formatering och bilder börjas laddas samtidigt som scriptet laddar i bakgrunden vilket ger en trevligare upplevelse för användaren.
Om man laddar stilmallen i botten istället för i toppen av hemsidan så finns det en risk att besökaren hinner se en del fult, oformaterat innehåll innan webbläsaren hinner dit och laddar in CSS-reglerna för sidan.
Script i botten i WordPress och jQuery
Ett problem i WordPress är att många teman och plugin laddar in .JS-filer i toppen och även filer för Javascript-biblioteket jQuery laddas i sidhuvudet som standard i WordPress. När det kommer till plugins så erbjuder flera välgjorda plugins numera möjligheten att ställa in så scripten laddas i sidfoten och ibland även att de bara laddas in på de sidor där plugin:et faktiskt används, så att till exempel script för en slider inte laddas på varenda undersida.
Eftersom jQuery laddas i sidhuvudet som standard i WordPress så kan tyvärr en del teman och plugins ger felmeddelanden eller slutar fundera som de ska om du laddar in jQuery i sidfoten, då utvecklaren har skrivit koden med det i åtanke. Om det nu inte är fallet för de teman och plugins du använder, så är det ändå viktigt att se till så att jQuery laddas in före alla andra plugins script som kan tänkas behöva biblioteket för att fundera.
Plugins för WordPress:
- Autoptimize: Autoptimize är ett plugin jag använder ofta då det på ett väldigt smidigt sätt komprimerar och kombinerar JS-filer och placerad dem i hemsidans sidfot som en eller ett par få filer med attributet defer påkopplat. Defer är ett attribut till
<script>-taggen vilket innebär att scriptet väntas med att köras tills att webbläsaren har gått igenom resten av sidans innehåll. Nya filer genereras automatiskt och laddas in från en cache-mapp på din server och om du har olika script på olika sidor så genererar den flera kombinerade filer.
2. Minifiering av HTML, script och stilmallar
Om du tittar i källkoden på en modern hemsida idag så ser du ofta att en mängd olika Javascript och CSS-stilmallar läses in. Används flera tunga sådana filer så finns det risken att sidan laddar långsamt på en sämre uppkoppling och att delar av sidan buggar ur eller ser konstig ut tills allt är färdigladdat. Ett sätt att minska risken för detta är genom så kallad minifiering av script och CSS.
Vid minifiering så går ett verktyg genom din kod och tar automatiskt bort sådant som radbrytningar, blanksteg och kommentarer ur koden så att den ofta blir en enda lång rad. Det är inte särskilt enkelt att läsa sen som kodare men för webbläsaren gör det inget och minifieringen gör att filerna kan minska en del i storlek. Du kan fortfarande arbeta med din normala kod men sen se till att minifiera den och se till att hemsidan läser in den minifierade versionen av scriptet och/eller stilmallen när det är dags för sidan att publiceras.
När du laddar ner script för till exempel sliders eller liknande så kommer de ofta i en version i full storlek likt ”scriptet.js”, ”style.css” och en mindre, minifierad uppsättning likt ”scriptet.min.js”, ”style.min.css” – på samma sätt kan du göra för ditt eget innehåll och läsa in de filerna istället.
WordPress-plugin för minifiering:
- WP Rocket: WP Rocket är ett betal-plugin jag själv använder för just caching, men det har även stöd för minifiering av HTML, CSS och JS med olika val av metoder för att låta plugin:et utföra detta automatiskt. Letar du efter ett gratis alternativ finns t.ex. W3 Total Cache
- Autoptimize: Förutom att kombinera JS-filer och placera dem i footern, så komprimerar Autoptimize även JS-filer. Plugin:et kombinerar och komprimerar även CSS-filer och komprimerar HTML-kod så att den visas utan radbrytningar etc. Allt detta innebär en mindre storlek på sidan och färre requests vilket också ger snabbare inladdning. Autoptimize har funktioner som gör att du kan exkludera JS-filer du inte vill ta med att skicka kombinerade och komprimerade till sidfoten- till exempel jQuery eller om det är något script som slutar fungera korrekt med detta plugin eller som av någon anledning måste vara i sidhuvudet. Nackdelen med Autoptimize är att det kan kräva en del testande för att få det att fungera men om du inte har massor med olika plugins och egna script så är det nog inga konstigheter.
Hemsidor för minifiering online:
Mjukvara för minifiering:
- Grunt: Körs i terminalen, kanske inte något jag skulle rekommendera för en nybörjare- men effektivt när man fått det att rulla.
- Codekit 2: Endast till Mac, kostar 32$ men har gratis provversion. Minifierar dock endast Javascript, ej CSS.
3. Användning av CDN för innehåll
CDN står för Content Delivery Network och innebär förenklat att ett system med sammankopplade servrar i olika datacenters runt om i världen levererar data till användare, ofta från det datacenter som ligger närmast användaren geografiskt för snabbast åtkomst. Många populära script och ramverk finns idag uppladdade hos olika gratis CDN:s som du kan använda i din kod istället för att ladda in innehållet från din server så att det går snabbare.
Fördelar med användning av CDN:
- När ett script laddas från en CDN så ökar chansen att samma fil redan har laddats från samma server av användaren på en annan hemsida (t.ex. jQuery), vilket gör att den inte behöver laddas ner igen inne på din då filen redan finns i webbläsarens cache.
- Med CDN så laddar din hemsida innehåll från flera olika servrar parallellt, vilket är särskild bra om din sida har mycket innehåll då webbläsare begränsar antalet parallella uppkopplingar för en värd.
- Har du en högtrafikerad hemsida så kan inladdning av innehåll med CDN minska användningen av bandbredd på din server för övriga innehållet och i längden hålla nere dina kostnader för webhotell.
- Användning av CDN sprider ut risken för att filer inte ska svara: Skulle en datacentral vara nere så laddas filen från en annan istället, jämför detta med om du har alla filer på ett vanligt webbhotell där det bara finns en plats som alla filer kan laddas från och sidan blir väldigt beroende av webbhotellets upptid. Om du är bekväm med en del kodande kan du även lägga till så kallade ”fallbacks” som gör att filer först försöker laddas genom CDN, men om det inte skulle fungera så försöker den ladda från din egna server istället.
Exempel på hur det kan se ut med cookie-scriptet jQuery Cookie i din kod med användning av CDN:
Före:
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
Efter:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
Vill du läsa in ett populärt script i WordPress från CDN istället för det som följer med i t.ex. det plugin som använder det så kan antingen använda ett plugin som W3 Cache:s CDN-funktion eller leta upp ID för scriptet och gå in och redigera i functions.php och ta bort scriptet ur den kö med script som läses in av sidan. Till exempel wp_dequeue_script( 'jquery-cookie' ); där ”jquery-cookie” är scriptets ID. Sedan kör du enqueue det på nytt igen fast med adressen till CDN. Läs mer i WordPress Codex.
Skaffa en eget CDN:
Du kan även sätta upp en egen CDN-tjänst för att ladda upp exakt de filer du vill nå från den och alltså inte bara populära bibliotek eller stilmallar som många andra har användning av. Att starta och använda en eget CDN hos någon stor leverantör är inte mycket svårare än att ladda upp filer via FTP och det finns idag även flera program för tjänster som Amazon S3 där du kan dra in filer på precis samma enkla sätt. Några av dessa är S3 Browser för Windows och Cyberduck för Mac, där den sistnämnda också fungerar för FTP och SFTP.
Ladda in bilder och videoklipp med CDN:
Det är inte bara mindre filer som Javascript och CSS-filer som du kan använda CDN för. Särskilt lite tyngre filer som bilder och videoklipp är extra passande för att slänga upp på ett eget CDN. Idag finns det hela företag backade med miljontals dollar i investeringar som bygger på användning av CDN för stora filer, så som filuppladdningstjänsten WeTransfer. Högupplöst, tunga bilder som annars kan vara en av de stora bovarna för långsamma sidor (mer om detta längre ner), kan plötsligt laddas snabbt med användning av CDN och skillnaden kan bli särskilt stor om du inte har världens snabbaste webbhotell.
Exempel på gratis CDN-bibliotek:
Tjänster för att starta ditt eget CDN
WordPress-plugin för användning av CDN
- WP Rocket: Plugin:et låter dig byta ut sökvägar till alla filer eller utvalda filer på hemsidan från valfri CDN-adress. Du kan även välja att exkludera vissa filer från denna hantering och istället ladda dem från ditt webbhotell.
- W3 Total Cache: Plugin:et är förberett för att koppla ihop med MaxCDN men du kan även ställa in användning för andra som Amazon CloudFront, Amazon S3, Microsoft Azure Storage och egen FTP.
- WP Offload S3: Ett plugin som på ett smidigt sätt låter dig koppla Amazon S3 till ditt mediabibliotek i WordPress så att filer laddas upp till Amazon istället för lokalt. Detta plugin kostar pengar, men det billigaste alternativet låter dig använda plugin:et för ett obegränsat antal hemsidor och max 2 000 mediauppladdningar.
4. Undvik brutet innehåll
Brutet innehåll i form av länkar, bilder och videos som ger svarskoden 404 ej funnen i webbläsaren, innebär onödiga begäran av webbläsaren och försämrar användarupplevelsen. Försök ta reda på varför innehållet är brutet, beror det på en felstavning i koden, en bugg eller innehåll på den egna eller en extern server som har tagits bort? Om du har en hemsida med mycket innehåll med många gamla sidor kan det vara väldigt tidskrävande att försöka lösa det här manuellt, men som tur är finns det flera olika bra verktyg för att söka igenom ditt innehåll och se om något är brutet och behöver hanteras.
Verktyg online:
- BrokenLinkChecker.com: Det finns en del olika gratis verktyg på nätet för att analysera efter brutet innehåll på en sida, som BrokenLinkChecker.com som dock endast letar efter länkar. Som oftast med bra verktyg så kostar de bästa tjänsterna och funktionerna pengar.
Verktyg för WordPress:
- Broken Link Checker: Ett gratis plugin som låter dig scanna igenom din hemsida efter brutna länkar, bilder och videos. Efter en scanning så får du sedan en sammanställning över innehållet och att tillämpa lämplig åtgärd för det som att ta bort, byta ut eller ignorera.
Mjukvara:
För hemsidor som inte använder WordPress finns det crawlers i form av program du installerar i din dator som scannar igenom hemsidans innehåll, t.ex. Xenu och Screaming Frog.
5. Dra ner på bildstorlekar och optimera bilder
Senaste åren har det exploderat med användning av många och stora bilder på hemsidor. Det brukar sägas att en bild säger mer än tusen ord men tyvärr för din webbläsaren så säger den även ofta mer än flera tusen kilobytes om bilden inte är optimerad. Särskilt i en mobiltelefon med sämre uppkoppling så kan problemet ofta uppstå att en bild som annars skulle fylla upp en stor datorskärm laddas i sin fulla storlek fast den nu bara behöver visas i en bråkdel av sin originalstorlek på mobilskärmen. Just detta med att ladda in bilder i olika stora format beroende på plattform är lite mer komplicerat, men vad du som mer vanlig användare kan göra är att försöka tänka på bildstorleken från att du sparar ner bilden i ett bildbehandlingsprogram till hur du infogar den på din hemsida eller i t.ex. WordPress.
Spara ner i mindre storlek i bildbehandlingsprogram
Populära bildbehandlingsprogram som Photoshop har en funktion som heter ”Save for web” vilket låter dig komprimera och ställa in dina bilder så de tar mindre storlek. För bildformatet JPEGs så brukar jag se liten märkbar skillnad uppe vid 80% komprimering men det beror mycket på vad bilden innehåller och hur känslig du är med att den ska vara i toppkvalitet. Driver du en fotosida är du kanske mer känslig att bilderna ska vara i toppkvalitet men om det bara är en enkel bild i ett blogginlägg är det nog inte lika viktigt.
Infoga bilder på rätt sätt i WordPress
När du laddar upp en bild i WordPress så sparas den utan att du riktigt ser det, ner i flera olika storlekar på din server. Dessa är sedan de bilder du kan välja bland ”Small”, ”Large”, ”Full Size” osv. när du infogar en bild senare. Ett vanligt misstag är att välja ”Full Size” när man lägger in en bild fast bilden är betydligt större än ytan den läggs in i, t.ex. att det är ett fullstort fotografi på flera Megapixlar som läggs in i ett inlägg på en blogg med en sidebar.
Komprimering av redan sparade bilder med plugins & verktyg
Så vad gör man om man har en hel sida med mer än hundratals tunga bilder som skulle ta otaliga timmar att gå in och spara om i ett bildbehandlingsprogram och infoga på nytt? Det finns en mängd olika plugins och verktyg för att lösa detta.
Verktyg online:
- Kraken: Från 5$/månad men de har gratis provversion
- GTmetrix: Förutom att ge dig en rapport med råd om förbättringar för din hemsida, så kan får du länkar direkt till optimerade versioner av dina bilder som kan behöva det.
Plugin för WordPress:
- EWWW Image Optimizer: Detta plugin komprimera bilder allt eftersom de laddas upp i ditt mediabibliotek. Du kan även utföra en ”bulk optimize”, vilket gör att den automatiskt komprimerar alla bilder i biblioteket. Du kan även låta plugin:et optimera bilder utanför mediabiblioteket, så som bilder som följer med i plugins och liknande. Med standardinställningarna så utför EWWW Image Optimizer komprimering utan någon synbar kvalitetsförlust och det handlar ofta om några få procents mindre storlek, men du kan även gå in och rota i inställningarna för att till exempel ersätta transparens i PNG-bilder till en bakgrundsfärg, komprimera JPEG-bilder med kvalitetsförlust och konvertera olika bildformat. Ibland kan det ta en bra stund för en bulk-optimering, särskilt om du har många filer och servern är lite trött och jag har upplevt att plugin:et drar en del prestanda även när det inte är i aktiv användning. Därför kan det vara en idé att kanske ha det avaktiverat när du inte använder det och manuellt göra körningar för nya bilder och ta definitivt backup på dina bilder innan ifall de skulle se för fula ut efter en optimering!
Mjukvara:
- ImageOptim – Gratis, endast till Mac
- Codekit 2: Codekit 2 har förutom en mängd smidiga funktioner som minifiering jag nämnt tidigare, även inbyggt stöd för optimering av bilder i din hemsida.
6. Håll nere med avancerat innehåll
Många moderna hemsidor har idag betydligt fler animationer, script och häftigt innehåll idag än för några år sedan. Problemet är att om man har lite väl mycket av detta så krävs det att mer innehåll laddas in och även att det kräver mer av webbläsaren och enhetens prestanda för att visa sidan korrekt. Framförallt i mobilen märker jag själv på många sidor jag besöker som har animationer och slideshows att det tar en stund att ladda och inte riktigt flyter på så bra som i en dator. Är du mån om att användaren snabbt ska kunna ta del av ditt innehåll och att det inte ska kännas trögt med interaktionen, så kan det vara en bra idé att hålla nere på vad jag kallar ”avancerat innehåll”. Med det tänker jag bland annat på:
- Animationer genom Javascript: Animerade sliders och parallax-bakgrunder ser häftiga ut men de laddar ofta in tunga bilder och script och ger lätt en hackig känsla vid scroll.
- CSS3-animationer: Även detta är bra att spara med om du är ute efter hög hastiget och vill ha en sida som fungerar även för de stackare som fortfarande dras med föråldrade webbläsare.
- Videoklipp: Videos är ett effektivt sätt att berätta om din produkt eller tjänst, men särskilt i mobila enheter kan det vara bra att hålla nere antalet videos eller åtminstone tänka på storleken då tyvärr inte alla har 4G-uppkoppling med perfekt täckning.
- Flash: Jag har skrivit ett separat inlägg tidigare om varför du bör sluta använda Flash och storlek på filerna är en faktor i det hela. Ja det och att det inte fungerar alls på enheter med iOS förstås.
7. Använd caching och rätt inställningar i .htaccess
Caching för en hemsida innebär förenklat att det genereras filer som säger ”det här det senaste materialet i form av script, stilmallar, bilder och HTML-innehåll – du behöver inte göra körningar med PHP eller andra serverspråk eller leta i databasen för att få fram innehållet”. Så till exempel i WordPress, istället för att en besökare går in och det körs ett antal frågor till servern med PHP och som letar i sidans MySQL-databas, så presenteras en redan förberedd HTML-sida med resultatet som finns på sidans server, då de redan är fastställt att det är så det senaste innehållet ser ut. Detta sparar en hel del i bandbredd och prestanda för din server och caching är särskilt användbart för högtrafikerade hemsidor.
Med caching så kan du även ange att filer som script och stilmallar kan lagras och hämtas lokalt i besökarens webbläsare under en längre tid och inte behöver läsas in på nytt varje gång vid ett återbesök då de inte uppdateras så ofta, utan de läses bara in på nytt om filerna skiljer sig från de som redan finns lokalt hos besökaren.
Inställningarna för detta görs i hemsidans .htaccess-fil, vilket använder ett språk som jag inte tycker är super-pedagogiskt, därför är det väldigt smidigt med CMS:er som WordPress där det finns kraftfulla plugins som genererar den koden åt dig med inställningar istället.
WordPress-plugin för caching:
- GZip Ninja Speed Compression: Om du inte har tid och kunskap att grotta ner dig så mycket om hur caching fungerar och vad olika inställningar i andra mer avancerade plugin gör så är detta ett alternativ. Det ger dig en enda checkbox vilket aktiverar GZip i din .htaccess-fil.
- W3 Total Cache: W3 Total Cache, plugin:et jag nämnt tidigare här i inlägget – har förutom inbyggt stöd för GZip, även en stor mängd med inställningar för caching av HTML, CSS, JS och databas. Det kan vara lite invecklat att förstå vad allt gör till en början och det kan krävas en del trixande och testande om du till exempel använder en sida som använder cookies och dynamiskt innehåll. Jag har även märkt att beroende på serverkonfiguration och hur din sida fungerar så kan W3 Total Cache ibland göra vissa delar av det besökaren ser eller WordPress admin-del lite långsammare än vad det borde vara med de inställningarna – dock har jag inte upplevt långsammare för besökare än vad det var innan! Detta kan då kan kräva lite extra meckande för att få till det precis rätt, men i övrigt är det mitt favorit-plugin för caching i WordPress då det är så heltäckande.
- WP Rocket: Detta betal-plugin är lättare att sätta sig in i än W3 Total Cache och har färre alternativ att gå vilse bland. För en avancerad användare finns det lite färre alternativ att finjustera, men jag upplever att det oftast fungerar bättre och är mer snabbt i admin än W3 Total cache. För en nyare användare och om du har en enklare WordPress-hemsida så är det här ett kanonval då grundinställningarna täcker majoriteten av alla behov väldigt snabbt för de flesta.
Verktyg för att testa och utvärdera din hemsidas hastighet
- Webpage Speed Test
- Pingdom Website Speed Test
- Google PageSpeed Insights
- YSlow: extension för Firefox
- GTmetrix: Testar både PageSpeed och YSlow
Du har väl inte missat mina andra guider från tidigare som:
7 sätt att testa mobil responsiv design i din dator
5 verktyg för att testa din hemsida i Internet Explorer 6 och andra webbläsare
Lämna ett svar