Bilder er ofte den største synderen når en nettside er treg. I HubSpot er det lett å laste opp et bilde på 5 MB og la plattformen håndtere det, men det straffer seg på hastigheten. Her er den nøyaktige tekniske prosessen vi brukte for å sikre at bildene laster lynraskt, uten at det går ut over designet.
Bildeoptimalisering i HubSpot betyr å servere bilder i riktig størrelse, format og til riktig tid. Det innebærer å bruke responsive attributter (srcset og sizes), aktivere "lazy loading" for bilder utenfor skjermen, og sikre at bildene ikke forårsaker layout-hopp (CLS).
Det gir ingen mening å laste ned et desktop-bilde på en mobiltelefon. Vi implementerte srcset og sizes på tvers av alle moduler i HubSpot-temaet.
Dette forteller nettleseren hvilke versjoner av bildet som er tilgjengelige, og lar nettleseren selv velge den minste filen som passer til skjermstørrelsen. Resultatet? Mobilbrukere sparer store mengder data, og siden laster raskere.
Har du lagt merke til at tekst av og til hopper nedover siden mens du leser? Det skjer fordi nettleseren ikke vet hvor stort et bilde er før det er ferdig nedlastet.
Vi løste dette ved å legge til eksplisitte width- og height-attributter på alle bilder, inkludert de som legges inn via HubSpots rich-text-editor. Da reserverer nettleseren riktig plass med én gang. Farvel, layout-hopp.
Ikke alle bilder er like viktige. Hero-bildet på toppen av siden må vises umiddelbart. Bilder lenger ned kan vente.
Vi satte fetchpriority="high" og loading="eager" på de viktigste bildene (for å forbedre LCP). For alle andre bilder aktiverte vi "lazy loading" og asynkron dekoding. Dette betyr at bildene kun lastes ned når brukeren scroller ned mot dem, noe som frigjør kapasitet til å laste inn selve teksten først.
Du kan komprimere bilder til de blir grumsete, men det løser ikke det underliggende problemet. Riktig bildehåndtering krever at koden i bunnen er satt opp riktig. Når temaet ditt automatisk serverer responsive bilder og forhindrer layout-hopp, trenger ikke innholdsprodusentene dine å tenke på teknikk – de kan bare laste opp bildene sine og vite at siden forblir rask.
→ HubSpot-implementering når plattformen skal støtte salg og marketing.
→ Tredjepartsscripts dreper hastigheten på landingssiden din
→ Ytelse uten kjedelig design: Raske animasjoner og Glass UI
Ja, HubSpot komprimerer og endrer størrelse på bilder automatisk, men det fungerer best hvis temaet ditt er kodet med riktige attributter (som srcset) for å utnytte denne funksjonen fullt ut.
Lazy loading er en teknikk der nettleseren venter med å laste ned et bilde til brukeren scroller ned til den delen av siden. Dette gjør at nettsiden laster mye raskere ved første øyekast.
Nettsiden hopper (CLS) fordi bildene mangler bredde- og høyde-attributter i koden. Uten disse dimensjonene vet ikke nettleseren hvor mye plass den skal sette av til bildet før det er lastet ned.
La oss se på hvordan bildene i HubSpot-portalen din påvirker hastigheten, og hvordan vi kan rydde opp i koden.