Kas animatsioon aeglustab veebilehte? Iseenesest mitte. Hästi tehtud hajumine või elemendi ilmumine kerimisel nõuab väga vähe ressursse. Saiti aeglustab see, kuidas liikumine on teostatud: pealkiri peidetakse JavaScripti laadimiseni, 3D-kood blokeerib esmase kuvamise, kerimiskäsitlejad hõivavad põhilõime ja animatsioonid muudavad paigutust. Igaüks neist mõjutab eri Core Web Vitalsi näitajat.
Vaatame, kuidas animatsioon halvendab LCP-d, INP-d ja CLS-i ning kuidas hoida need rohelises alas.
Kolm näitajat, mida Google mõõdab
Google hindab Core Web Vitalsi tegelike lehelaadimiste 75. protsentiili järgi, mobiili ja arvuti puhul eraldi.
| Näitaja | Hea | Halb | Mida mõõdab |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2,5 s | > 4 s | Millal põhisisu nähtavale ilmub |
| INP (Interaction to Next Paint) | ≤ 200 ms | > 500 ms | Kui kiiresti leht reageerib puudutustele, klõpsudele ja klahvivajutustele |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | > 0.25 | Kui palju lehe paigutus hüppab |
Lävendid pärinevad web.dev lehtedelt LCP, INP ja CLS kohta. INP asendas First Input Delay näitaja Core Web Vitalsi koosseisus 2024. aasta märtsis.
Kuidas animatsioon iga näitajat halvendab
LCP: nähtamatu pealkiri
Tüüpiline viga: avavaate pealkiri algab väärtusega opacity: 0 ja ilmub sujuvalt pärast GSAP-i laadimist. Chrome ei arvesta opacity 0 väärtusega elemente LCP kandidaatidena, mistõttu LCP registreeritakse alles ilmumise lõpus. 1,2-sekundiline algusanimatsioon võib LCP-d lükata edasi kuni 1,2 sekundit lisaks skripti laadimise ajale.
3D-avavaade on veel mahukam variant. Utsubo märgib, et Three.js-i avavaates on LCP-element tavaliselt lõuend ning ainuüksi Three.js-i tuum on minimeerituna umbes 600 KB. Koos abiteekide ja .glb-mudeliga ületab maht 3 MB.
INP: hõivatud põhilõim
INP arvestab ainult klõpse, puudutusi ja klahvivajutusi. Kerimist ja kursoriga üle liikumist ei mõõdeta. Seega ei halvenda kerimisanimatsioon INP-d otseselt, küll aga teeb seda animatsiooni käitav JavaScript. Kui kerimiskäsitlejad, sujuva kerimise teek ja WebGL-i renderdustsükkel võistlevad põhilõime pärast, jääb „Lisa ostukorvi” vajutus järjekorda. Hon Tran nimetab INP-d näitajaks, mille nõudeid rohke animatsiooniga saidid kõige sagedamini ei täida.
CLS: vale omaduse animeerimine
Omaduste height, width, top või margin animeerimine liigutab teisi elemente ja läheb arvesse paigutusnihkena. web.dev CLS-i juhendi järgi CSS-i transform seda ei tee. Siin on üks nüanss: 500 ms jooksul pärast puudutust või klõpsu tekkivaid nihkeid ei arvestata, kuid kerimine ei lähe sellise sisendina arvesse. Kerimisel avaneva ja sisu allapoole lükkava akordionploki nihe läheb täies ulatuses CLS-i arvestusse.
Seitse reeglit, et animatsiooniga veebileht püsiks kiire
- Animeeri ainult
transformjaopacity. Kasutatop/leftasemeltranslate,width/heightasemelscalening ilmumisefektide jaoksclip-path. GSAP-ixjayteisendatakse transform-väärtusteks. - Kuva avavaade esmalt HTML-ina. Pealkiri peab olema serveri HTML-is täielikult nähtav. Animeeri teisejärgulisi elemente või alusta nähtavast olekust.
- Laadi mahukas animatsioon hiljem. Laadi Three.js ja suured animatsioonijadad pärast sündmust
loadvõi siis, kui need jõuavad vaatevälja. Seni näita eelvaatepilti. - Jäta elementidele ruumi. Määra piltidele, videotele ja lõuenditele
width/heightvõiaspect-ratio. Ära animeeri üleminekut väärtusestheight: 0väärtuseleauto; varu ruum omadusegamin-height. - Kasuta üht animatsioonitsüklit. Juhi Lenist ja ScrollTriggerit ühest
requestAnimationFramesammust ning tee DOM-i lugemistoimingud ühe rühmana enne kirjutamistoiminguid. - Peata see, mida külastaja ei näe. Peata ekraanilt väljas olevad WebGL-i tsüklid IntersectionObserveri abil. Kasuta
will-changeainult vahetult enne animatsiooni ja lähtesta see pärast. - Testi keskmise hinnaklassi Androidil. Aeglusta DevToolsis CPU-d vähemalt 4 korda ja kontrolli ka päris seadet. M-seeria sülearvuti annab kiirusest eksitava mulje.
Reeglid 2 ja 3 on olulised ka otsingupositsioonide jaoks: loe animeeritud veebilehe SEO-st. Reaalajas 3D jaoks käsitleb meie 3D-veebilehe jõudluse juhend tekstuure, Draco tihendamist ja joonistamiskutseid.
Milline näeb välja animatsiooni audit
Animeeritud saidi auditis kontrollime iga animatsiooni mõju kõigile kolmele näitajale. Ühest Lighthouse'i koondhindest ei piisa.
Kaks märkust mõõtmise kohta:
- Labori- ja päriskasutuse andmed. Nagu Hon Tran märgib, näitab Lighthouse Total Blocking Time'i, mitte tegelikku INP-d. Leia Performance'i paneelilt üle 50 ms kestvad pikad ülesanded ning kontrolli tulemust päriskasutuse andmetega.
- Päriskasutuse andmed hilinevad. Google'i CrUX põhineb päriskasutuse andmete 75. protsentiilil 28-päevase perioodi kohta, nii et parandus kajastub Search Console'is nädalaid hiljem. Kogu enda andmeid teegiga
web-vitals(onLCP,onINP,onCLS).
Kiirus ja ligipääsetavus on seotud
Animatsiooni kiirendavad parandused muudavad selle tavaliselt ka kasutajasõbralikumaks. Kui arvestad prefers-reduced-motion eelistusega ja näitad animatsiooni asemel lõppolekut, vähendad nende kasutajate jaoks põhilõime tööd. Kujunduspoolt selgitab meie ligipääsetava veebianimatsiooni juhend.
