Iṣapeye Iyara oju-iwe — Ṣe oju opo wẹẹbu rẹ yara ni 2026

Kí Nìdí Iyara Ṣe Ẹya Igbimọ

Google ti jẹrisi pe iyara oju-iwe ni ipa lori igbimọ. Awọn oju-iwe ti o lọra n bẹrẹ awọn olumulo, ati Google fẹ lati funni ni iriri ti o dara julọ. Awọn data lati Google fihan pe awọn iṣeeṣe ti olumulo kan fi oju-iwe silẹ pọ si 32% nigbati akoko ikojọpọ ba lọ lati 1 si 3 iṣẹju-aaya.

Ṣugbọn kii ṣe nipa igbimọ nikan. Iyara ni ipa taara lori owo ti o n wọle:

Iyipada — Ẹka iṣẹju-aaya afikun kọọkan ti ikojọpọ dinku iyipada nipasẹ to 7%
Iye bouncing — 53% ti awọn olumulo alagbeka n fi oju-iwe silẹ ti o ba gba ju 3 iṣẹju-aaya lọ lati load
Iriri olumulo — Awọn oju-iwe ti o yara ni iwoye ọjọgbọn ati igbẹkẹle

Awọn ẹya ara ẹrọ wẹẹbu pataki — Awọn ipinnu Iyara Google

Google n ṣe iwọn iyara nipasẹ mẹta ninu awọn ọna abawọle Wẹẹbu Pataki:

LCP — Largest Contentful Paint

Ṣe iwọn nigbati akoonu ti o tobi julọ ti o han (ni igbagbogbo$image$ tabi akọle) pari ikojọpọ.

Daradara: Ni isalẹ 2.5 iṣẹju-aaya
Nilo ilọsiwaju: 2.5 — 4.0 iṣẹju-aaya
Buru: Loke 4.0 iṣẹju-aaya

INP — Interaction to Next Paint

Ṣe iwọn bi yarayara oju-iwe ṣe fesi nigba ti olumulo ba ni ibaraenisọrọ (tite, kikọ, yiyi).

Daradara: Ni isalẹ 200ms
Nilo ilọsiwaju: 200 — 500ms
Buru: Loke 500ms

CLS — Cumulative Layout Shift

Ṣe iwọn bi ọpọlọpọ ipo ti o wa ni ikojọpọ. O mọ bi o ṣe lero — o fẹ lati tẹ nkan kan, ṣugbọn lojiji akoonu naa n gbe ki o si fi nkan miran to.

Daradara: Ni isalẹ 0.1
Nilo ilọsiwaju: 0.1 — 0.25
Buru: Loke 0.25

10 Awọn imọran Iṣapeye Tó dájú

1. Ṣe Iṣapeye Aworan

Awọn aworan jẹ igbagbogbo aṣoju ti o tobi ju. Lo awọn apẹrẹ ode oni bi WebP tabi AVIF, eyiti o le dinku iwọn faili nipasẹ 30-50% laisi pipadanu didara ti o han.

Dinku gbogbo awọn aworan ṣaaju ikojọpọ
Lo loading="lazy" lori awọn aworan ti ko han ni ikojọpọ akọkọ
Maa ṣe sọ width ati height lati yago fun CLS
Lo awọn aworan ti o dahùn pẹlu srcset fun awọn iwọn iboju oriṣiriṣi

2. Minify CSS ati JavaScript

Yọ awọn koodu ti a ko lo, aaye funfun, ati awọn asọye lati CSS ati JS rẹ. Pupọ awọn irinṣẹ ikole ṣe eyi laifọwọyi, ṣugbọn jọwọ rii daju pe o ṣẹlẹ ni iṣelọpọ.

3. Mu Iṣagbe Ẹrọ ṣiṣẹ

Jẹ ki server rẹ ran awọn faili pẹlu Gzip tabi Brotli compression. Eyi le dinku iwọn awọn faili nipasẹ to 70%.

4. Lo Ibi ipamọ aṣawakiri

Ṣeto awọn akọle Cache-Control ki aṣawakiri naa le fi awọn faili alailowaya (CSS, JS, awọn aworan) pamọ ni agbegbe. Ni igba ti olumulo ba ṣe abẹwo, awọn faili wọnyi ko nilo lati gba lati ayelujara lẹẹkansi.

5. Dinku Akoko Idahun Server

Akoko idahun server rẹ (Akoko si Byte akọkọ, TTFB) yẹ ki o wa ni isalẹ 200ms. Awọn ipinnu:

Lo olupese ohun elo ti o yara
Mu ibi ipamọ ile-iṣẹ ṣiṣẹ
Ṣe ilọsiwaju awọn ìbeere database
Lo CDN lati pese awọn faili alailowaya lati awọn olupin ti o sunmọ olumulo

6. Da iṣẹ JavaScript ti ko ṣe pataki

JavaScript ti ko nilo fun wiwo akọkọ yẹ ki o gba iwulo laifọwọyi pẹlu async tabi defer. Eyi pẹlu ojoojumọ awọn iwuri, awọn ohun elo ibaraẹnisọrọ, ati awọn ṣiṣẹda media awujọ.

7. Preload Awọn orisun Pataki

Lo fun awọn fonti, CSS, ati awọn aworan ti o nilo fun wiwo akọkọ. Eyi sọ fun aṣawakiri naa lati fi awọn faili wọnyi si akojọ.

8. Yọ awọn orisun ti o da idasilẹ

CSS ati JavaScript ninu n da àyẹ ọja oju-iwe duro. Gbe CSS ti ko ṣe pataki si isalẹ, ki o si inline CSS ti a nilo fun wiwo akọkọ (CSS pataki).

9. Lo CDN

Nẹtiwọki Pinpin Akọsilẹ n pin awọn faili rẹ lori awọn olupin kakiri agbaye. Awọn olumulo gba lati ọdọ olupin ti o sunmọ julọ, ti o dinku idaduro ni pataki.

10. Ṣe Iṣapeye Awọn fonti wẹẹbu

Awọn fonti aṣa le fa idaduro ninu ifihan ọrọ:

Lo font-display: swap ki ọrọ han pẹlu fonti afiwe nigba ti fonti aṣa ba n gba
Yan awọn karakteri to wa ninu awọn fonti rẹ nikan
Preload awọn fonti pataki julọ
Ronu awọn fonti eto fun ọrọ ara

Bawo ni Lati Dan Iyara Rẹ

Google PageSpeed Insights

Ọpa osise lati ọdọ Google. Fun ọ ni data lab (simulated) ati data aaye (awọn olumulo gidi) pẹlu awọn imọran ilọsiwaju to daju.

Chrome DevTools

Ṣii DevTools (F12), lọ si panẹli "Iṣe" ki o si gba igbasilẹ oju-iwe kan. O le rii ohun ti n gba akoko gangan ati ni iru aṣẹ wo ni awọn faili ṣe ikojọpọ.

WebPageTest

Ọpa idanwo to ti ni ilọsiwaju ti o fun laaye lati ṣe idanwo lati awọn ipo oriṣiriṣi ati awọn iwọn asopọ. Pese awọn aworan waterfalls ti o ni alaye.

Igbimọ — Bẹrẹ Nibi

Ti o ba nilo lati yan awọn nkan mẹta lati dojukọ:

Aworan — Dinku ati ṣe iyipada si WebP. Ikolu ti o tobi julọ pẹlu ẹgbẹ ti o kere julọ.
Ibi ipamọ — Ṣeto awọn akọle Cache-Control ti o tọ. Iṣeto akoko kan.
JavaScript — Da gbogbo nkan ti ko ṣe pataki duro. Dinku awọn iwe afọwọkọ ẹgbẹ kẹta.

Ṣe o fẹ lati mọ gangan bi aaye rẹ ṣe n ṣiṣẹ? Ṣiṣẹda iṣiro ọfẹ ki o si wo awọn ẹya ara wẹẹbu pataki rẹ ati ipele iyara.