Kaip padaryti svetainę greitesnę: praktinis kontrolinis sąrašas

Norėdami padaryti svetainę greitesnę, pirmiausia ją išmatuokite su PageSpeed Insights, tada ištaisykite didžiausią priežastį, kurią jis parodo – paprastai per didelius paveikslėlius, per daug JavaScript, sunkius šriftus ar trečiųjų šalių skriptus. Siekite Google Core Web Vitals „geros“ reikšmės: pagrindinis turinys matomas per 2,5 sekundės, atsakas į bakstelėjimus per 200 milisekundžių ir beveik nėra puslapio šokinėjimo. Dauguma svetainių į tai atsiduria keliais pakeitimais, o ne perrašymu.

Matuokite prieš keisdami bet ką

Spėliojimas eikvoja laiką. Du nemokami įrankiai tinka beveik visiems:

• PageSpeed Insights (pagespeed.web.dev) – įklijuokite veikiantį adresą. Jis rodo lauko duomenis iš tikrų Chrome naudotojų (jei svetainė turi pakankamai srauto) ir laboratorinius duomenis iš imituoto įkėlimo, plius konkrečių problemų sąrašą.
• Lighthouse „Chrome DevTools“ – tas pats laboratorinis testas, paleidžiamas bet kuriame puslapyje, kurį galite atidaryti, įskaitant peržiūrą. Testuokite mobiliajame režime; problemos ryškiausios telefonuose su lėtesniu tinklu.

Svarbiausi skaičiai yra Google Core Web Vitals. 2026 m. rugsėjį Google dokumentacija web.dev pateikia šias „geras“ ribas, matuojamas 75 procentilyje puslapių įkėlimų:

INP 2024 m. pakeitė senesnį First Input Delay rodiklį. Jei įrankis vis dar rodo FID, jis pasenęs.

Užsirašykite pradinius skaičius. Po kiekvieno taisymo testuokite iš naujo, kad žinotumėte, kas padėjo.

Kur dingsta laikas: variantai ir kompromisai

Kiekviena dažna priežastis turi taisymą, o kiekvienas taisymas turi kainą. Pradėkite nuo viršuje esančių – jie pigiausi ir dažniausi.

Paveikslėliai

Paveikslėliai yra dažniausia problema ir lengviausiai ištaisoma. 4 000 pikselių nuotrauka, rodoma 800 pikselių pločio, verčia kiekvieną lankytoją atsisiųsti penkis kartus daugiau, nei jis mato.

• Rodykite paveikslėlius jų rodomu dydžiu, su atsakingais srcset dydžiais telefonams ir kompiuteriams.
• Naudokite modernius formatus (WebP ar AVIF) ir protingą suspaudimą.
• Nustatykite width ir height kiekvienam paveikslėliui, kad naršyklė rezervuotų vietą. Vien tai pašalina didžiąją dalį išdėstymo poslinkio.
• Atidėkite paveikslėlius, esančius žemiau sulankstymo linijos, naudodami loading="lazy".
• Niekada neatidėkite pagrindinio paveikslėlio viršuje. Google LCP gairės šiuo klausimu kategoriškos: LCP paveikslėlio atidėjimas visada jį vėlina. Vietoj to suteikite fetchpriority="high".

JavaScript

Daugelis DI sukurtų svetainių yra vieno puslapio programos (SPA): naršyklė atsisiunčia JavaScript paketą ir tik tada nupiešia puslapį. Kuo didesnis paketas, tuo ilgiau tuščias ekranas. Taisymai, pagal pastangas:

1. Pašalinkite tai, ko nenaudojate. Paprašykite priklausomybių sąrašo ir atsisakykite bibliotekų, kurios kartą buvo pridėtos ir pamirštos – datų biblioteka vienai datai, visas piktogramų paketas penkioms piktogramoms.
2. Padalykite pagal maršrutą. Kodą administravimo valdymo skydui įkelkite tik tada, kai kas nors jį atidaro, o ne pagrindiniame puslapyje.
3. Iš anksto atvaizduokite viešus puslapius. Rinkodaros puslapis, pateikiamas kaip tikras HTML, pasirodo dar prieš veikiant bet kokiam JavaScript. Tai padeda ir paieškos sistemoms; žr. SEO DI sukurtoms svetainėms.

Lėtas INP paprastai reiškia vieną ilgą užduotį, blokuojančią puslapį – didelio sąrašo filtravimą kiekvienu klavišo paspaudimu arba visos lentelės perpiešimą, kai pasikeičia viena ląstelė. Chrome DevTools Performance skydelis parodo, kuri.

Šriftai

Kiekviena šriftų šeima ir storis yra dar vienas failas. Dviejų šeimų ir trijų ar keturių storių paprastai pakanka. Iš anksto įkelkite šriftą, naudojamą virš sulankstymo linijos, naudokite font-display: swap, kad tekstas iškart matytųsi, ir talpinkite šriftus patys, jei išorinė šriftų paslauga lėta jūsų lankytojams.

Trečiųjų šalių skriptai

Pokalbių valdikliai, analitika, šilumos žemėlapiai, reklamos pikseliai, įterpti vaizdo įrašai ir socialiniai srautai įkelia kodą iš kitų serverių. Kiekvienas atrodo mažas; kartu jie dažnai yra lėčiausia puslapio dalis. Palikite tuos, kuriuos iš tikrųjų peržiūrite. Likusius įkelkite po to, kai puslapis tampa interaktyvus, o sunkius įterpimus (YouTube grotuvą, žemėlapį) pakeiskite lengva peržiūra, kuri įkelia tikrąjį turinį paspaudus.

Serverio atsakas

Laikas iki pirmojo baito (TTFB) – kiek laiko serveriui prireikia pradėti atsakyti – yra po visais kitais rodikliais. Statiniai puslapiai, teikiami iš CDN (serverių tinklo arčiau jūsų lankytojų; žr. kas yra CDN), yra greiti beveik visur. Puslapiai, kuriuos serveris sukuria kiekvienos užklausos metu, priklauso nuo to serverio ir jo duomenų bazės. Įprasti taisymai – talpinimas pasikartojančiam darbui ir duomenų bazės indeksai lėtoms užklausoms.

Veikiančios užklausos

Būkite konkretūs: nurodykite puslapį, rodiklį ir apribojimą. Jei turite, įklijuokite PageSpeed Insights rezultatus.

PageSpeed Insights rodo, kad pagrindinės svetainės LCP mobiliajame yra 4,8 s, o LCP elementas yra pagrindinis paveikslėlis. Pakeisk pagrindinio paveikslėlio dydį ir konvertuok jį į WebP, pateik atsakingus dydžius, nustatyk width ir height, suteik fetchpriority="high" ir užtikrink, kad jis nebūtų atidėtas. Atidėk visų paveikslėlių, esančių žemiau sulankstymo linijos, įkėlimą. Nekeisk dizaino.

Patikrink šios programėlės priklausomybes. Išvardyk kiekvieną paketą, kas jį naudoja ir maždaug kiek jis prideda prie paketo. Pašalink nenaudojamus ir padalink /admin bei /settings maršrutus į atskiras dalis, kurios įkeliamos tik apsilankius.

Paieškos laukas /products puslapyje atrodo lėtas. Atidėk filtravimą, neperpiešk viso sąrašo kiekvienu klavišo paspaudimu, o jei sąraše daugiau nei 200 elementų, suskirstyk jį į puslapius arba virtualizuok.

Žingsnis po žingsnio

1. Išbandykite veikiantį puslapį PageSpeed Insights mobiliajame režime. Užsirašykite LCP, INP ir CLS bei tris pagrindines išvardytas problemas.
2. Pirmiausia taisykite paveikslėlius: dydžiai, formatai, matmenys, atidėtas įkėlimas žemiau sulankstymo linijos, prioritetas pagrindiniam paveikslėliui.
3. Atjunkite trečiųjų šalių skriptus, kurių nenaudojate, o likusius atidėkite.
4. Sumažinkite šriftus iki to, ko reikia dizainui.
5. Sumažinkite JavaScript: pašalinkite nenaudojamus paketus, padalinkite pagal maršrutą.
6. Iš anksto atvaizduokite viešus puslapius, jei jie vis dar atvaizduojami kliento pusėje ir LCP vis dar lėtas.
7. Patikrinkite serverį: talpykla, duomenų bazės indeksai, statinis talpinimas turiniui, kuris retai keičiasi.
8. Publikuokite iš naujo ir testuokite. PageSpeed Insights lauko duomenys atsinaujina per kelias savaites, kai ateina tikri apsilankymai, todėl ankstyvus rezultatus vertinkite pagal laboratorinius duomenis.

Dažnos klaidos

• Testavimas tik greitame nešiojamajame. Jūsų lankytojai naudojasi vidutinės klasės telefonais ir nestabiliu mobiliuoju duomenų ryšiu. Testuokite mobiliajame režime.
• Siekimas tobulo 100. Laboratorinis rezultatas yra gairė. Kai Core Web Vitals yra geros srities, turinys ir naudojimo patogumas svarbesni nei paskutiniai keli taškai.
• Atidėti viską, įskaitant pagrindinį paveikslėlį. Tada LCP tik blogėja.
• Greičio įskiepio ar bibliotekos pridėjimas virš viso. Svorio mažinimas beveik visada geriau nei pridėti kodo jam valdyti.
• Optimizuojama peržiūra, o ne tiesioginė svetainė. Kūrimo peržiūros naudoja neoptimizuotas versijas. Matuokite publikuotą adresą.
• Greičio taisymas kartą. Kiekvienas naujas valdiklis, paveikslėlis ir funkcija prideda svorio. Po didelių pakeitimų testuokite iš naujo.

Greičio kontrolinis sąrašas

• LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 mobiliajame
• Paveikslėliai pritaikyti dydžiui, suspausti, moderniu formatu, su width ir height
• Pagrindinis paveikslėlis neatidėtas; žemiau sulankstymo linijos esantys paveikslėliai atidėti
• Nėra nenaudojamų JavaScript bibliotekų; sunkūs maršrutai išskirti
• Dvi šriftų šeimos ar mažiau, pagrindinis šriftas iš anksto įkeltas
• Tik tie trečiųjų šalių skriptai, kuriuos iš tikrųjų naudojate, įkeliami vėliau
• Viešieji puslapiai iš anksto atvaizduoti arba statiniai, kur įmanoma
• Po publikavimo patikrinta tiesioginiame adrese

Greitis ir mobilusis išdėstymas eina kartu; žr. kaip padaryti svetainę prisitaikančią mobiliesiems. Visam paleidimo prieš tai patikrinimui kaip perkelti DI prototipą į produkciją aprašo likusią dalį.

Greitis Mythex

Mythex šiuos pakeitimus darote paprašydami pokalbyje arba kodo redaktoriuje Pro plane. Tikrinkite publikuotą adresą, o ne Preview, nes Preview veikia kūrimo serveryje. Statiniai priekiniai sluoksniai publikuojant diegiami kaip statinės svetainės (statinės svetainės), o tai tinka turinio puslapiams. Programėlės su serveriu sumažėja iki nulio: kai nenaudojamos, jos miega ir pabunda kito apsilankymo metu, todėl pirma užklausa po ramaus laikotarpio yra lėtesnė, o prijungta duomenų bazė užmiega po 5 neaktyvių minučių (talpinimo ribos). Jei viešas puslapis lėtas tik pirmą apsilankymą, tai greičiausia priežastis. Rinkodaros puslapių laikymas statiniais padeda. Po pakeitimų publikuokite iš naujo ir atnaujinkite puslapį be talpyklos.

Klausimai