Prestanda på webben
Men prestanda menar vi en webbplats som laddar blixtsnabbt och ger bästa möjliga upplevelse, både på mobil och desktop. Vi vill helt enkelt fixa de delar som påverkar prestandan negativt.
Prestanda på webben
Men prestanda menar vi en webbplats som laddar blixtsnabbt och ger bästa möjliga upplevelse, både på mobil och desktop. Vi vill helt enkelt fixa de delar som påverkar prestandan negativt.
Besökare och söktjänster – alla gillar de en snabb hemsida. Med ökad hastighet kommer också färre avhopp, ökad konvertering och högre position i sökresultaten. Här följer några tips för att öka prestandan.
En snabbare webbplats
Långsamma webbsidor gör lätt att besökare tröttnar och går någon annanstans. Kanske till din konkurrent. Sega sidor påverkar också din rankning negativt hos sökmotorer som Google.
Du kan kolla din prestanda och se hur du ligger till med verktyg som Lighthouse i webbläsaren Chrome.
Att få betyget 100 i olika prestandatester är inte alltid så lätt, speciellt inte på mobil. Men det är inte omöjligt.
Fundera på ditt innehåll och dina funktioner
Börja med att göra en genomlysning av din webbplats och fundera på om alla delar verkligen behövs. Måste du ha tunga widgets som laddas in från en extern server? Behövs alla stora tunga bilder? Kan vissa funktioner lösas på ett effektivare sätt, kanske med CSS istället för javascript?
Använd moderna bildformat och rätt bildstorlek
Bilder är något som har stor inverkan på laddtid.
JPG och PNG i all ära, men idag finns även modernare bildformat som t.ex. WEBP eller AVIF. Här komprimeras bilderna effektivare till en mindre filstorlek utan att tappa så mycket i kvalitet. Detta är guld värt när det gäller att snabba upp din webbplats.
Tänk också på att göra dina bilder i rätt storlek. Om bilden aldrig kommer visas större än 900 pixlar så finns ingen anledning att spara bilden i 2000 pixlars storlek. Mobila bilder ska så klart vara gjorda i passande mindre format.
Använd lazy-loading
Med loading-attributet kan du tala om för webbläsaren när en bild (eller video eller iframe) ska laddas in på sidan.
Lägger du till loading="lazy" till bild-taggen så väntar webbläsaren med att ladda in bilden tills den närmar sig eller är i viewporten (den synliga delen av skärmen).
På så sätt behöver inte tunga element laddas in i onödan om man t.ex. inte scrollar ner så långt på sidan.
Tänk dock på att ange bredd och höjd på bild-elementen då vi också vill undvika så kallad layout shift.
Undvik layout shift
Att innehåll på en webbsida ändrar position, eller "hoppar", när olika element laddas in kallas för "Cumulative Layout Shift (CLS)". Det är ett viktigt mätvärde för visuell stabilitet som påverkar användar-upplevelsen. Det är även en rankningsfaktor hos söktjänster som Google.
Layout shift sker exempelvis om man använder bilder utan angiven bredd och höjd i HTML (width="600" height="400"). Webbläsaren kan då inte beräkna utrymme för bilden när sidan laddas, så när bilden väl laddas in trycker den undan övrigt innehåll i höjd- eller sidled.
Detta gäller även andra element som tar upp plats på sidan, t.ex. videos, iframes, formulär och knappar.
Typsnitt
Nedladdade typsnitt kan också resultera i layout shift om rubriker och text använder ett default-typsnitt, eller inget typsnitt alls, innan "ditt" typsnitt hunnit laddas in.
Ett sätt att undvika detta är att använda CSS-egenskapen "font-display" när du laddar in typsnittet, t.ex:
@font-face font-family: 'Inter-Light';src: url('../css/fonts/inter/Inter-Light.woff2') format('woff2'); font-display: swap;
Typsnitt kan vara väldigt tunga att ladda in så fundera på om och vilka typsnitt du verkligen behöver eller vill använda. Att ladda ner alla varianter av ett typsnitt (thin, regular, bold, extraBold, black, thinItalic, regularItalic, etc) kanske inte är nödvändigt. Kanske funkar det med systemets default-typsnitt (t.ex. sans-serif, arial, helvetica)?
Förbered inladdningen genom att använda rel="preload" i sidans <head>-element:
<link rel="preload" href="/css/fonts/inter/Inter-Light.woff2" as="font" type="font/woff2" crossorigin>
Minska HTTP-förfrågningar
När webbläsaren laddar in en resurs från servern så görs en HTTP-förfrågning. Alltså när du hämtar till exempel en bild eller en CSS-fil. Vi vill helst ha så få förfrågningar och anslutningar som möjligt för att öka sidans prestanda, i alla fall om du använder protokollet HTTP/1.1.
Med det nya protokollet HTTP/2 kan många fler förfrågningar göras parallellt i samma anslutning utan samma påverkan på prestanda. Men alla resurser bidrar förstås till tyngden på sidan.
- Ta bort onödiga bilder och filmer.
- Se över script- och CSS-filer (se nedan).
- Externa tjänster som t.ex. Facebook kan skicka många förfrågningar till en extern server. Behöver du verkligen tjänsten på din webbplats?
Rensa och kombinera javascript- och CSS-filer
Något som kan ha stor påverkan på prestandan är javascript- och CSS-filer. Vissa sajter laddar in obscena mängder av dessa filer.
Det kan förstås vara en god tanke att läsa in mindre filer bara när de behövs (om du använder HTTP/2), men har du koll på vad alla filer verkligen innehåller?
- Försök att samla ihop din CSS-kod i en eller så få filer som möjligt. Men undvik att filerna blir för tunga. Då kan det vara bättre att dela upp dem.
- Samma som ovan gäller din javascript-kod.
- Passa även på att gå igenom all din kod och rensa bort det du inte behöver. Jag är nästan säker på att dina filer innehåller kod och funktioner som inte används eller som kan optimeras.
- Du kan med fördel använda verktyg för att minifiera (ta bort alla onödiga tecken som t.ex. mellanslag) dina javascript- och CSS-filer.
- Använd attribut som "defer" eller "async" när du laddar in dina filer för att undvika att de hamnar i kö och fördröjer användandet av sidan. Till exempel:
<script defer src="/js/javascript.js"></script>
Caching och komprimering
Komprimering gör filerna mindre och därmed snabbare att ladda ner för webbläsaren.
Caching sparar filerna i webbläsarens cache-minne under en viss tid så att samma filer inte behöver laddas ner gång på gång utan kan läsas direkt från minnet.
Det finns olika sätt att gå till väga på och mycket information om hur du gör på nätet, beroende på vilken setup du har gällande system, server, etc.
Förbered anslutning till externa servrar
Använd så kallade Resource Hints för att hjälpa till att snabba upp dina sidor. Exempel:
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://cdn.example.com">
Läs mer om Resource Hints här
Kommentarer
qqqqqq says:
qqqqq qqq qqqqq
wwwwww says:
123456wwww wwww wwwww
Lämna en kommentar