Det er en myte at raske nettsider må se ut som et tekstdokument fra 1998. Du kan absolutt ha lekre animasjoner, myke overganger og moderne designelementer som "Glass UI" på HubSpot-siden din. Hemmeligheten er å vite hvordan du animerer, slik at nettleseren slipper å jobbe seg i hjel. Her er oppskriften på premium design som ikke dreper hastigheten.
Performant webdesign handler om å skape visuelt tiltalende nettsider ved hjelp av kode som krever minimal prosessorkraft. Det betyr å unngå tunge CSS-egenskaper som utløser layout-hopp, og i stedet bruke animasjoner som grafikkortet (GPU) kan håndtere effektivt.
Når en knapp endrer farge idet du holder musen over den, skjer det ved hjelp av CSS-animasjoner. En vanlig (og lat) måte å kode dette på, er å bruke kommandoen transition: all.
Problemet er at nettleseren da må sjekke alle mulige egenskaper for å se om noe har endret seg. Dette krever unødvendig mye regnekraft. Løsningen er å være spesifikk. I stedet for all, forteller vi nettleseren nøyaktig hva som skal skje: transition: background-color 0.3s ease. Det er en liten endring i koden, men en stor seier for ytelsen.
Noen animasjoner er mye tyngre enn andre. Hvis du animerer bredde, høyde eller marger, må nettleseren tegne opp hele siden på nytt for hvert bilde i animasjonen. Det fører til en hakkete opplevelse.
Hvis du derimot animerer egenskapene transform (for å flytte eller skalere ting) og opacity (for å gjøre ting gjennomsiktige), sendes jobben direkte til grafikkortet (GPU). Resultatet er silkemyke animasjoner på 60 bilder i sekundet, uten at nettsiden blir treg.
Ikke alle elsker animasjoner. For noen brukere kan for mye bevegelse på skjermen forårsake svimmelhet eller ubehag.
Derfor la vi inn støtte for prefers-reduced-motion i alle animerte moduler. Hvis brukeren har stilt inn operativsystemet sitt til å redusere bevegelse, vil nettsiden automatisk skru av unødvendige animasjoner. Dette er ikke bare god ytelse; det er god og inkluderende brukeropplevelse.
Godt design bygger tillit, spesielt i B2B. Du skal ikke trenge å ofre merkevaren din for å tilfredsstille Googles hastighetskrav. Ved å kode animasjoner og moderne UI-elementer på riktig måte, får du i pose og sekk: En nettside som ser dyr ut, men som laster billig og raskt.
→ optimalisere HubSpot-ytelsen.
→ HubSpot-implementering når plattformen skal støtte salg og marketing.
→ Slik optimaliserte vi bilder i et HubSpot CMS-tema
→ Tredjepartsscripts dreper hastigheten på landingssiden din
Animasjoner gjør nettsiden tregere bare hvis de er kodet feil. Hvis du animerer layout-egenskaper (som bredde og marger), blir siden treg. Hvis du bruker GPU-vennlige egenskaper (som transform og opacity), påvirkes ikke hastigheten nevneverdig.
prefers-reduced-motion er en innstilling i operativsystemet (som Windows eller macOS) der brukere kan be om mindre bevegelse på skjermen. Gode nettsider respekterer dette og slår automatisk av tunge animasjoner.
Du unngår hakkete animasjoner ved å bruke CSS-egenskapene transform og opacity. Da tar grafikkortet seg av jobben, noe som gir en jevn og myk opplevelse for brukeren.