Mājaslapas ātrums un Core Web Vitals: ceļvedis mazajiem uzņēmumiem

Apmeklētājs telefonā pieskaras tavai saitei, mobilajos datos, tramvajā. Lapa trīs sekundes rāda tukšu ekrānu, un tad, kamēr viņš mēģina nospiest "Zvanīt", saturs sāk lēkāt. Lielākā daļa aiziet, pirms ir redzējuši tavu piedāvājumu.

Tieši šo pieredzi mēra Google Core Web Vitals. Tie ir trīs skaitļi, kas apraksta, cik ātri lapa ielādējas, cik ātri reaģē un cik stabila ir ielādes laikā. Šajā ceļvedī tos izskaidrojam vienkāršā valodā, parādām, kā bez maksas pārbaudīt savu vietni, un uzskaitām labojumus, kas parasti ir svarīgākie.

Vispirms viens godīgs brīdinājums. Core Web Vitals ir daļa no Google lapas pieredzes signāliem, taču ranžēšanā joprojām daudz svarīgāka ir atbilstība un satura kvalitāte. Domā par ātrumu kā par izšķirošo faktoru līdzīgu lapu starpā meklēšanā un kā par lielu sviru konversijām: ātrāka lapa zaudē mazāk apmeklētāju, pirms viņi kaut ko izdara. Jau tikai šī otrā iemesla dēļ pūles atmaksājas.

Trīs rādītāji vienkāršā valodā

Google šos rādītājus vērtē pēc 75. procentiles no reāliem apmeklējumiem, atsevišķi mobilajām ierīcēm un datoriem. Praksē tas nozīmē: trim no četriem apmeklētājiem jāsaņem laba pieredze, un par mobilo jāuztraucas visvairāk, jo tur ir vairums cilvēku un tur ierīces un tīkli ir vājākie.

INP 2024. gada martā aizstāja vecāko FID rādītāju, tāpēc ceļveži, kas joprojām runā par "First Input Delay", ir novecojuši.

Laboratorijas dati pret reālajiem datiem

Šeit daudzi apjūk.

• Reālie dati (field data) nāk no īstiem Chrome lietotājiem, kas apmeklē tavu vietni. Tos izmanto Google. Tie eksistē tikai tad, ja vietnei ir pietiekami daudz apmeklētāju, tāpēc mazām vietnēm bieži redzams "nepietiek datu".
• Laboratorijas dati (lab data) nāk no simulēta testa (Lighthouse), kas ielādē tavu lapu uz ierobežota virtuāla telefona. Tas ir atkārtojams un lieliski atrod problēmas, taču nav tas, pēc kā Google tevi vērtē.

Ja reālo datu nav, izmanto laboratorijas datus kā ceļvedi un labo norādītās problēmas. Ja ir abi, vērtējumam uzticies reālajiem datiem, bet diagnostikai laboratorijas datiem.

Kā bez maksas pārbaudīt savu vietni

1. PageSpeed Insights (pagespeed.web.dev): ievadi adresi un vispirms lasi mobilos rezultātus. Skaties reālo datu sadaļu augšā, tad diagnostiku zem tās.
2. Google Search Console: Core Web Vitals pārskats sagrupē tavas lapas un parāda, kuras ir lēnas. Tas ir labākais veids, kā atrast likumsakarības visā vietnē.
3. Chrome DevTools, Lighthouse cilne: palaid inkognito logā, lai paplašinājumi nesagrozītu rezultātu.
4. Testē īstas lapas, ne tikai sākumlapu. Tavas pakalpojumu lapas un bloga ieraksti ir tas, kur cilvēki nonāk no meklēšanas.
5. Katru testu palaid divas trīs reizes. Rezultāti svārstās, tāpēc skaties tendenci, nevis vienu skaitli.

LCP labošana: liec galvenajam saturam parādīties ātrāk

Noskaidro, kas ir tavs LCP elements (PageSpeed Insights to nosauc). Gandrīz vienmēr tas ir galvenais attēls, liels virsraksts vai fona attēls.

• Saspied un samazini attēlus. 4000 pikseļu fotogrāfija tieši no telefona kameras, kas parādīta 400 pikseļu vietā, ir visbiežākais ātruma slepkava, ko redzam. Eksportē tādā izmērā, kādā to rāda, un lieto modernos formātus, piemēram, WebP vai AVIF.
• Neizmanto slinko ielādi galvenajam attēlam. Slinkā ielāde (lazy loading) der attēliem zem redzamā ekrāna un ir nepareiza pirmajam lielajam elementam lapā. Atzīmē galveno attēlu kā augstas prioritātes (piemēram, ar fetchpriority="high") un vajadzības gadījumā iepriekš ielādē.
• Uzlabo servera atbildes laiku. Ja serveris atbild veselu sekundi, nekas cits nevar būt ātrs. Parasti vaino lēts pārslogots hostings, kešatmiņas trūkums un smagi datubāzes vaicājumi. Statiskas vai iepriekš uzģenerētas lapas, kas tiek sniegtas no CDN, pēc dizaina ir ļoti ātras.
• Novērs renderēšanu bloķējošos resursus. Lieli CSS vai JavaScript faili galvā aizkavē visu. Ielādē tikai to, kas vajadzīgs pirmajam ekrānam, pārējo atliec.
• Izlaid smagus galvenā attēla slīdņus un automātiski atskaņotus fona video, ja tie neattaisno savas izmaksas. Viens spēcīgs attēls parasti konvertē tikpat labi un ielādējas daudz ātrāk.

INP labošana: panāc, lai lapa reaģē uzreiz

Lēna reakcija gandrīz vienmēr nozīmē, ka telefona procesoram jāsacenšas ar pārāk daudz JavaScript.

• Auditē trešo pušu skriptus. Čata logrīki, tagu pārvaldnieki, siltuma kartes, sociālo tīklu plūsmas, atsauksmju karuseļi un reklāmas pikseļi katrs pievieno svaru. Noņem tos, uz kuriem neviens neskatās.
• Ielādē nebūtiskus skriptus pēc tam, kad lapa jau ir lietojama. Čata logrīkam nav jāielādējas pirms satura.
• Uzmanies no smagiem lapu veidotājiem un spraudņu kaudzēm. Katrs papildu spraudnis vai efekts mēdz pievienot skriptu, kas apmeklētājam jālejupielādē un jāizpilda.
• Uztur vieglu sīkdatņu paziņojumu. Uzpūsts piekrišanas rīks var likt visai lapai justies gausai. Izvēlies vieglu.
• Dod priekšroku vienkāršām darbībām. Izvēlnēm, akordeoniem un formām nav jāprasa megabaiti koda.

CLS labošana: pārtrauc lapas lēkāšanu

Izkārtojuma nobīde rodas, kad kaut kas ielādējas vēlu un pastumj saturu.

• Katram attēlam, video un iegultajam elementam norādi platumu un augstumu, lai pārlūks rezervē vietu, pirms fails ir ieradies.
• Rezervē vietu joslām. Sīkdatņu paziņojumiem, akciju joslām un paziņojumu strēmelēm nevajadzētu pēc parādīšanās uzgrūst lapu uz leju. Izvieto tos pāri saturam vai rezervē to augstumu.
• Rūpīgi apstrādā fontus. Kad tīmekļa fonts ielādējas un maina teksta izmēru, rindas pārplūst. Lieto font-display: swap ar labi piemērotu rezerves fontu un iepriekš ielādē galveno fontu.
• Nekad neievieto jaunu saturu virs tā, ko apmeklētājs jau lasa, ja vien viņš to nav izraisījis.
• Animē ar transformācijām un caurspīdīgumu, nevis ar īpašībām, kas maina izkārtojumu.

Latvijai raksturīgs fontu slazds

Daudzas vietnes ielādē tīmekļa fonta "Latin" apakškopu, lai faili būtu mazi. Šajā apakškopā nav rakstzīmju, kas vajadzīgas latviešu valodai (ā, č, ē, ģ, ī, ķ, ļ, ņ, š, ū, ž). Pārlūks šiem burtiem izmanto citu fontu, kas izskatās nevienmērīgi un var izraisīt izkārtojuma nobīdi. Ja lieto Google Fonts vai fontus hostē pats, pārliecinies, ka iekļauta Latin Extended apakškopa. Tā ir viena no sīkām detaļām, ko universāla sagatave ignorē.

Hostings, kešatmiņa un servera atrašanās vieta

Laiks līdz pirmajam baitam (TTFB) nosaka griestus visam pārējam.

• Hostē ES vai tās tuvumā, ja tavi apmeklētāji ir Latvijā un Baltijā.
• Izmanto kešatmiņu un CDN statiskajiem failiem.
• Neizmanto pārslogotu kopīgo hostingu nekam, no kā atkarīgs bizness.
• Iepriekš uzģenerētas vai statiskas lapas ir labākas par lapām, kas katram pieprasījumam tiek veidotas no jauna. Modernie ietvari, piemēram, Next.js, var lapas uzģenerēt iepriekš, un tas ir viens no iemesliem, kāpēc mūsu veidotās vietnes ielādējas ātri.

Ko sagaidīt no savas platformas

• WordPress: ļoti spējīgs, taču ātrums ir atkarīgs no tēmas, spraudņu skaita, lapu veidotāja, hostinga un kešatmiņas. Viegla tēma ar kešošanas spraudni un optimizētiem attēliem var būt ātra. Tēma ar divdesmit spraudņiem parasti nav.
• Wix, Squarespace un līdzīgi konstruktori: vari samazināt lietotnes, animācijas un attēlu izmērus, taču pašu platformu mainīt nevar, tāpēc pastāv griesti. Vairāk par to mūsu salīdzinājumā Wix, WordPress vai individuāli izstrādāta mājaslapa.
• Individuāli izstrādātas vietnes: visvairāk kontroles un parasti labākie griesti, bet tikai tad, ja izstrādātājam patiešām rūp ātrums.

Labošanas secība

Vispirms dari lielākos uzlabojumus:

1. Attēli: samazini, saspied, moderns formāts, pareiza prioritāte.
2. Trešo pušu skripti: noņem vai atliec, ko vien vari.
3. Fonti: mazāk biezumu, pareizas apakškopas, iepriekš ielādē galveno.
4. Hostings un kešatmiņa: izlabo lēno servera atbildi.
5. Kods un izkārtojums: tikai tad ķeries pie smalkākas optimizācijas.

Nedzenies pēc ideālajiem 100 punktiem Lighthouse. Tiecies pēc "labi" visiem trim Core Web Vitals rādītājiem mobilajā un apstājies. Tālāk pūles labāk veltīt saturam un tam, ko apmeklētāji patiešām dara lapā.

Ātrums ir daļa no labas mājaslapas cenas

Vietne, kas veidota ar ātrumu prātā, prasa vairāk uzmanības nekā tāda, kas vienkārši labi izskatās, taču šis darbs atmaksājas ar labāku redzamību meklēšanā un vairāk pieprasījumiem. Pārējās budžeta pozīcijas aplūkojam ceļvedī cik maksā mājaslapa Latvijā.

Ja vēlies, lai mēs pārbaudām tavu vietni un godīgi pasakām, kas to bremzē, atsūti mums adresi, un 24 stundu laikā atbildēsim.

Biežāk uzdotie jautājumi

Vai Core Web Vitals ietekmē Google ranžēšanu?

Jā, tie ir daļa no Google lapas pieredzes signāliem, taču ietekme ir mērena, salīdzinot ar satura atbilstību un saitēm. Uztver tos kā izšķirošo faktoru meklēšanā un kā reālu konversiju dzinēju, jo lēnas lapas zaudē apmeklētājus.

Kāds ir labs PageSpeed Insights vērtējums?

Mazāk uzmanības velti kopējam vērtējumam un vairāk tam, vai LCP, INP un CLS mobilajā ir zaļajā zonā. Lighthouse 0–100 vērtējums ir laboratorijas aplēse, kas testu starpā svārstās.

Kāpēc mans mobilais vērtējums ir daudz zemāks nekā datoram?

Laboratorijas testi simulē vidējas klases telefonu ar lēnāku savienojumu, tāpēc jebkurš papildu svars lapā kaitē daudz vairāk. Tas ir reālistiski: daudzi tavi apmeklētāji izmanto līdzīgas ierīces.

Kāpēc Search Console raksta "nepietiek datu"?

Reālajiem datiem vajadzīgs noteikts minimāls Chrome apmeklējumu apjoms. Mazām vai jaunām vietnēm tā bieži vēl nav. Izmanto laboratorijas testus labojumu virzīšanai un pārbaudi vēlreiz, kad apmeklētība pieaug.

Vai man vajag jaunu mājaslapu, lai izietu Core Web Vitals?

Bieži vien nē. Pārāk lieli attēli un nevajadzīgi trešo pušu skripti ir visbiežākie cēloņi, un tos parasti var izlabot esošajā vietnē. Pārbūve ir pamatota, kad ierobežojums ir pati platforma, piemēram, smags lapu veidotājs, ko nevar atslogot, vai hostings, ko nevar uzlabot.