Google oficiāli izmanto Core Web Vitals kā daļu no saviem ranžēšanas signāliem. Tomēr daudzi uzņēmēji joprojām saskaras ar situāciju, kurā mājaslapa datorā veras vaļā ātri, bet Google PageSpeed Insights mobilajā testā iedegas sarkanā zona ar vērtējumu zem 50 punktiem. Galvenais vaininieks gandrīz vienmēr ir viens un tas pats: milzīgi, neoptimizēti attēlu faili un no ārējiem resursiem ielādēti fonti, kas bloķē lapas renderēšanu un liek elementiem lēkāt pa ekrānu. Pareizi sakārtojot šos divus elementus, mobilās veiktspējas rādītājus iespējams pacelt zaļajā zonā (90+ punkti) bez nepieciešamības pārrakstīt visu vietni.
🎯 Īsumā par svarīgāko
- Lielākā daļa lapas svara nāk no neoptimizētiem medijiem: Attēli un pielāgotie tīmekļa fonti vidēji veido 70 līdz 80% no visas tīmekļa lapas datu apjoma.
- Pāreja uz AVIF un WebP formātiem: Mūsdienīgie formāti samazina failu svaru par 50 līdz 80%, salīdzinot ar tradicionālajiem JPEG un PNG, saglabājot nevainojamu asumu.
- LCP kandidātam aizliegts lietot slinko ielādi (Lazy Loading): Pirmā ekrāna galvenajam attēlam ir jāpievieno fetchpriority='high', lai tas ielādētos nekavējoties.
- Lokāli mitināti WOFF2 fonti novērš CLS un aiztures: Google Fonts lejupielāde no ārējiem serveriem rada papildu DNS pieprasījumus un aizkavē teksta parādīšanos ekrānā.
Attēlu optimizācija: no JPEG uz modernajiem AVIF un WebP
Tradicionālie JPEG un PNG formāti tika radīti laikā, kad interneta ātrumi un ekrānu izšķirtspējas bija nesalīdzināmi mazākas. Mūsdienās vietņu izstrādē standarts ir WebP un vēl efektīvākais AVIF formāts. AVIF spēj sasniegt līdz pat 30% augstāku kompresiju nekā WebP, nodrošinot augstāku asumu pie identiska faila izmēra.
Taču ar formāta maiņu vien nepietiek. Kritiski svarīgi ir servēt atbilstoša izmēra attēlus. Nav pieļaujams, ka mobilajā tālrunī ar ekrāna platumu 400 pikseļi pārlūks lejupielādē 2500 pikseļu platas fotogrāfijas. Šeit talkā nāk HTML responsive atribūti srcset un sizes, kas automātiski piedāvā lietotāja ierīcei piemērotāko izmēru.
LCP (Largest Contentful Paint) glābšanas plāns
Visbiežākā kļūda, ko pieļauj WordPress spraudņi, ir slinkās ielādes (Lazy Loading) nekritiska piemērošana visiem lapas attēliem pēc kārtas. Ja galvenais virsraksta fona attēls vai produkta bilde tiek ielādēta ar aizturi, lapas LCP rādītājs dramatiski pasliktinās.
| Elements | Novecojusi prakse | Mūsdienīgs risinājums | Rezultāts testā |
|---|---|---|---|
| Galvenais ekrāna attēls (LCP) | loading='lazy' visiem attēliem | fetchpriority='high' un preload galvenē | LCP laiks samazinās par 1.5 - 2.5 sekundēm |
| Satura attēli zemāk lapā | Smagi oriģinālie JPEG faili | Automātiska AVIF/WebP ģenerēšana | Lapu svars samazinās no 4MB līdz 800KB |
| Tīmekļa fonti | Google Fonts CDN ar ārējiem pieprasījumiem | Lokāli WOFF2 faili ar font-display: swap | Likvidēts renderēšanas bloķēšanas laiks |
| Izkārtojuma stabilitāte | Nav norādīti width/height atribūti | Fiksētas proporcijas (aspect-ratio) | CLS rādītājs nokrītas līdz 0.00 (ideāli) |
Pareiza veiktspējas konfigurācija ir neatņemama sastāvdaļa, ko ietver ikviena mūsdienīga mājaslapu izstrāde. Lai pārliecinātos, ka visi tehniskie parametri atbilst meklētāju prasībām, palīdz regulārs tehniskais SEO audits.
Fontu lokālā mitināšana un CLS novēršana
Kad vietne izmanto Google Fonts caur ārējo saiti (fonts.googleapis.com), pārlūkam ir jāveic papildu savienojumi ar ārējiem serveriem. Tas rada aizturi, kuras laikā teksts vai nu vispār netiek rādīts (FOIT - Flash of Invisible Text), vai arī pēkšņi nomainās, izraisot satura lēkāšanu (CLS - Cumulative Layout Shift).
Risinājums ir pavisam vienkāršs:
1. Lejupielādējiet fontus WOFF2 formātā: WOFF2 ir mūsdienīgākais un kompaktākais fontu formāts, ko atbalsta visi modernie pārlūki.
2. Mitiniet tos savā serverī: Ielādējiet fontus tieši no sava domēna un izmantojiet CSS direktīvu 'font-display: swap;', lai sistēmas rezerves fonts nekavējoties parādītu tekstu, kamēr lādējas pielāgotais dizains.
Kā jau analizējām mūsu pavasara rakstā par to, kā INP oficiāli nomaina FID kā Core Web Vitals metriku, pārlūka atsaucība un vienmērīga mijiedarbība ir tieši atkarīga no tā, cik viegls un sakārtots ir lapas bāzes kods.
Ja vēlaties uzlabot savas WordPress vietnes ielādes ātrumu un novērst kļūdas, sazinieties ar mūsu programmētājiem lapā MarketMeNow tehniskais atbalsts.
Biežāk uzdotie jautājumi
Vai visi pārlūki atbalsta AVIF attēlu formātu?
Šobrīd AVIF atbalsta vairāk nekā 93% no visiem pasaules pārlūkiem (Chrome, Safari, Firefox, Edge). Vecākiem pārlūkiem izmanto HTML
Kāpēc spraudņi, kas sola 'paātrināt mājaslapu ar 1 klikšķi', bieži vien sabojā dizainu?
Agresīva JavaScript apvienošana un CSS aizkavēšana var izjaukt skriptu izpildes secību. Optimālam rezultātam iestatījumi ir jāpielāgo manuāli konkrētajai tēmai.
Cik lielam vajadzētu būt optimālam mājaslapas attēla svaram?
Galvenajam hero attēlam nevajadzētu pārsniegt 120 līdz 180 KB, bet satura ilustrācijām un ikonām būtu jāiekļaujas 30 līdz 70 KB robežās.
Secinājumi
Mājaslapas ātrums nav tikai tehnisks skaitlis izstrādātāju atskaitēs - tā ir tieša ietekme uz jūsu uzņēmuma ieņēmumiem. Katra ietaupītā sekunde uzlabo lietotāju apmierinātību, samazina atteikumu skaitu un palīdz sasniegt augstākas pozīcijas meklēšanas rezultātos.
