Folk gillar snabba webbplatser och det gör Google också.
Faktum är att hastigheten på din webbplats är en rankningsfaktor i Googles sökmotorresultat.
Om din webbplats laddas snabbt är det mer sannolikt att den visas när folk söker efter ditt varumärke. Detta i kombination med vetskapen om att en snabb sajt ger en bättre användarupplevelse (UX) gör att en snabbare hemsida kan leda till högre konverteringar.
Om din webbplats inte laddas så snabbt som du skulle vilja, det är mycket troligt att dina bilder är skyldiga.
Här är några vanliga misstag människor gör när det gäller bildoptimering för sin webbplats.
Bilderna är för stora
Många marknadsförare och publicister gillar att använda stora, högupplösta bilder på sin webbplats, eftersom de tror att dessa bilder kommer att ge en bättre användarupplevelse.
Problemet är att högupplösta bilder vanligtvis har en mycket stor filstorlek och tar lång tid att ladda, speciellt när det finns flera bilder på samma webbsida.
Vi har sett många förlag ladda upp bilder i intervallet 2 Mb till 5 Mb i sina bloggar eller innehållsinlägg. Denna bildstorlek är för stor för webben och är ett av de vanligaste misstagen som saktar ner webbplatser.
Om din bild är större än 500kb kan något vara fel och bilden kan vara komprimerad.
Innan du laddar upp nya bilder till din webbplats eller blogginlägg, kom ihåg dessa tips:
- Innan du laddar upp någon bild, dubbelkolla filstorleken (högerklicka på bilden och välj egenskaper)
- Håll bildfilstorlekar under 500 kb (och under 100 kb om möjligt)
- Det finns många onlineverktyg som kan hjälpa dig att komprimera dina bilder till en mindre filstorlek, som io, CompressJPG och TinyPNG.
- Om du använder Photoshop för att förbereda dina bilder, kontrollera måtten och se till att DPI är inställd på 72 dpi (Bild/Bildstorlek) och kom ihåg att “Spara för webben” för att styra den slutliga utdatafilens storlek.
- Konvertera dina bilder till lämpliga filtyper. I de flesta fall vill du använda JPG. Men om din bild använder genomskinlighet (som en bild med en “transparent” bakgrund), måste du använda PNG. Det finns några sällsynta fall där GIF är bättre, men när du är osäker, använd alltid JPG.
Ett specifikt exempel: Ett exklusivt varumärke för designerskor online använder många stora banners och produktbilder på sin modesajt som reducerade Google PageSpeed-score till bara 20/100.
Vi skapade ett dagligt cron-jobb (automatiserad uppgift som körs dagligen) för att automatiskt ändra storlek på stora bilder till mindre webbstandarder med bibehållen god kvalitet.
I skärmdumpen nedan minskade vi filstorleken på en bild från 1,3 MB till bara 142 KB.
Genom att helt enkelt minska bildfilens storlek ökade vi Googles PageSpeed-poäng från 20/100 till 58/100.
Automatisk bildskalning
Ett annat vanligt misstag med bilder är att automatiskt skala stora bilder för att få dem att se mindre ut än de verkligen är.
Att göra detta är vanligtvis bekvämare för utvecklare och innehållsskapare, men det kan verkligen sakta ner en webbplats.
Till exempel kan en stor fotobanner i ett inlägg också användas som en liten miniatyr på andra ställen på sajten.
Utvecklaren, istället för att skapa flera versioner av bilden (till exempel 1000 × 425 för bannern och 64 × 64 för en sidospalt), använder kod för att automatiskt skala samma stora bild för att visa som en liten miniatyr. Så en stor bild laddas in i onödan. Detta förkortar utvecklingstiden, men sidhastigheten betalar priset.
För att inte tala om att automatiskt skalade bilder kan sluta se förvrängda ut eftersom de har sträckts ut med kod. Till exempel skalas miniatyren nedan automatiskt från 1000 × 425 pixlar till 64 × 64 pixlar och förvrängs.
Håll utkik efter tillfällen då samma bild används många gånger på din sida. Om din webbplats kräver 12 olika storleksvarianter som används på 12 platser (något som 25×25, 40×40, 200×200, 658×258, 56×56, 64×64, 92×92, 150×156, 110 × 110 , 160 × 160 och 180 × 180) är förmodligen för många, och du kanske vill begränsa dem till färre än fyra.
Skapa sedan en separat bild för varje olika storlek och ladda upp bildversionen med rätt storlek istället för att automatiskt skala stora bilder för att få dem att se mindre ut än de verkligen är.
Brist på bildcache
Även om du använder korrekt bildkomprimering och visar korrekt skalade bilder, kan en sida med många bilder ta lång tid att ladda. Eftersom bilder är statiskt innehåll är ett bra sätt att snabba upp laddningstiden att använda CDN-cache.
Cachning (uttalas “cache”) är processen att lagra data i ett temporärt lagringsområde som kallas en cache. Till exempel har du förmodligen märkt att en webbplats som du har besökt tidigare kommer att laddas snabbare än en webbplats du aldrig har besökt. Detta beror på att din dator cachar webbplatsen du besökte.
Ett CDN (Content Delivery Network) är ett nätverk av servrar som levererar cachelagrat innehåll (som bilder) från webbplatser till användare, baserat på användarens geografiska plats.
Om du till exempel är i New York och tittar på en webbplats från Indien kan du ladda bilderna från en server som faktiskt finns i New York, istället för att ladda bilder från den andra delen av världen.
En webbplats som använder CDN-cache kan leverera bilder och annat statiskt innehåll mycket snabbare, speciellt under tider med hög trafik, eftersom bilderna inte laddas direkt från webbservern, utan från en cachad server med mycket snabbare hastighet.
Utöver detta hjälper ett CDN dig också att betjäna fler besökare samtidigt. Om din webbplats upplever en plötslig eller oväntad trafikökning kan ett CDN hålla din webbplats igång effektivt.
Mike Le är medgrundare och COO för CB/I Digital, en New York-baserad digitalbyrå och SEW-bidragsgivare. Du kan få kontakt med Mike på Twitter eller LinkedIn.
