Greitesnė svetainė per vieną vakarą: 9 žingsniai su matavimu prieš ir po

Lankytojas nelaukia: jei puslapis atsidaro lėtai, jis išeina, o paieškos sistemos atsižvelgia į greitį. Gera žinia ta, kad daugumoje mažų svetainių puslapį lėtina tie patys dalykai, ir juos galima sutvarkyti per vieną vakarą nekeičiant nei temos, nei talpinimo. Toliau – devyni žingsniai. Kiekvienas turi tris eilutes: ką daryti, kaip patikrinti (ekranas, komanda ar skaičius) ir kas nutiks, jei jį praleisite. Pradedame ir baigiame matavimu, kad matytumėte, kas padėjo.

Žingsniai nepriklausomi, imkitės bet kurio. Iškart vienas perspėjimas: toliau pateikti skaičiai gauti mūsų pačių bandomajame stende, o ne jūsų svetainėje. Jūsų bus kitokie, svarbi kryptis.

Jūsų pultas: „Ką pagerinti“ ir „Sistemos būklė“ #

Atidarykite „Svetainės valdymas → SEO ir prieinamumas → Ką pagerinti“ ir pasirinkite skirtuką „Greitis“: jame išvardyta, kas jūsų svetainėje dar neįjungta. O skiltyje „Sistema → Diagnostika → Sistemos būklė“ apačioje yra blokas „Rekomendacijos“: jis pataria dėl podėlio, tvarkaraščio ir OPcache.

1 žingsnis. Pirmiausia išmatuokite #

Ką daryti. Atidarykite PageSpeed Insights, įklijuokite pagrindinio puslapio adresą ir paleiskite patikrą telefonui. Arba naršyklėje „Chrome“: kūrėjo įrankiai, skirtukas „Lighthouse“, „Analizuoti puslapio įkėlimą“. Užsirašykite tris skaičius: LCP (kada pasirodė pagrindinė puslapio dalis), CLS (kiek puslapis „šokinėja“) ir INP (kaip greitai svetainė reaguoja į palietimą). Tikslai pagal web.dev: LCP ne daugiau kaip 2,5 sekundės, INP ne daugiau kaip 200 milisekundžių, CLS ne daugiau kaip 0,1, ir tai trims lankytojams iš keturių (75-asis procentilis). Kaip patikrinti. Turite tris užrašytus skaičius ir matavimo datą. Jei praleisite. Nežinosite, ar pakeitimai padėjo. Įsiminkite dar du dalykus. „Lighthouse“ rezultatas kinta nuo paleidimo iki paleidimo: paleiskite tris kartus ir imkite vidurinį. O 100 balų nėra tikslas: „Chrome“ dokumentacijoje rašoma, kad juos pasiekti itin sunku ir to nesitikima, o žalioji zona prasideda nuo 90.

2 žingsnis. Paruošti puslapiai svečiams #

Ką daryti. Skiltyje „Svetainės nustatymai → Greitis ir priežiūra“ įjunkite „Svečiams rodyti paruoštus puslapius“. Vienam svečiui sukurtas puslapis kitiems pateikiamas toks, koks yra, be darbo su duomenų baze. Prisijungę žmonės, kaip įprasta, gauna savo puslapius, o podėlis išsivalo pats po bet kokio pakeitimo valdymo skydelyje. „Kiek sekundžių laikyti“ galite nekeisti: penkių minučių (300) pakanka. Kaip patikrinti. Du kartus užklauskite pagrindinio puslapio:

curl -I https://example.com/
curl -I https://example.com/

Antrame atsakyme turi būti eilutė X-Nex1on-Cache: hit. Mūsų bandomajame stende iš naujo kuriamas puslapis buvo pateikiamas per 0,6–0,8 sekundės, o paruoštas – per 0,12–0,17.

Jei praleisite. Kiekvienas svečias verčia serverį vėl kurti puslapį iš duomenų bazės. Lankomoje svetainėje tai nuima didžiąją dalį serverio darbo.

3 žingsnis. Suglaudinkite HTML #

Ką daryti. Ten pat įjunkite „Spausti HTML puslapius“: iš puslapių dingsta nereikalingi tarpai, eilučių lūžiai ir komentarai. Išvaizda nesikeičia, valdymo skydelis neliečiamas. Jei įjungus kuris nors puslapis atrodo netvarkingai, išjunkite. Kaip patikrinti. Palyginkite atsakymo dydį prieš ir po:

curl -s https://example.com/ | wc -c

Mūsų bandomajame pagrindiniame puslapyje atsakymas sumažėjo nuo 157 iki 138 KB, maždaug 12 procentų. HTML glaudinimas naudingesnis kartu su paruoštais puslapiais (2 žingsnis): be jų serveris kiekvieną puslapį kiekvienam svečiui glaudina iš naujo, ir „Sistemos būklė“ jums tai primins. Jei praleisite. Puslapiai sveria daugiau nei reikia. Niekas nesuges, tiesiog kiekvienam lankytojui mokate papildomais kilobaitais.

4 žingsnis. Tik puslapiui reikalingi stiliai #

Ką daryti. Įjunkite „Tik puslapiui reikalingi stiliai“: vietoj kelių pilnų stilių failų puslapis gauna vieną, tik su taisyklėmis, kurios jam gali būti taikomos. Išvaizda nesikeičia. Kaip patikrinti. Atidarykite puslapio kodą (Ctrl+U) ir raskite rel="stylesheet". Mūsų bandomajame stende trys stilių failai (apie 634 KB be glaudinimo) buvo pakeisti vienu (157 KB). Jei praleisite. Telefonas atsisiunčia taisykles puslapiams, kurių neatidarė: pagrindinis puslapis atsidaro pastebimai lėčiau, ypač mobiliajame tinkle.

5 žingsnis. Paveikslėliai #

Ką daryti. Skiltyje „Svetainės nustatymai → Paveikslai ir vaizdo įrašai“ patikrinkite tris dalykus. Pirma: „Didžiausias paveikslėlio plotis, taškai“ numatytai yra 0, o tai reiškia jokios ribos. Nustatykite skaičių, kurio jums tikrai reikia (pavyzdžiui, 2000): dideli paveikslėliai įkeliant sumažinami išlaikant proporcijas. Šešių tūkstančių taškų pločio nuotrauka per didelė tūkstančio pločio stulpeliui. Antra: „Paveikslėlių glaudinimas“: numatytai pasirinkta „Vietoje“, ir niekas neišeina už svetainės ribų; išorinė paslauga TinyPNG grąžina lengvesnius failus, bet tada jūsų paveikslėlis siunčiamas į svetimą serverį. Trečia: įjunkite „Paveikslėliai ir WebP formatu“: svetainė papildomai saugo lengvesnę kopiją ir pateikia ją naršyklėms, kurios jos prašo. Kopijos daromos tik naujiems įkėlimams; jau įkeltiems paveikslėliams serveryje paleiskite komandą php nex1on media:webp. „Paveikslėlių užuominos naršyklei“ palikite įjungtas: dydžius, atidėtą įkėlimą žemiau pirmo ekrano ir prioritetą pagrindiniam paveikslėliui sistema prideda pati.

Kaip patikrinti. Pažiūrėkite, ką sistema įrašė į puslapį:

curl -s https://example.com/ | grep -o '<img[^>]*>' | head -3

Paveikslėliai turi turėti width ir height (puslapis kraunantis nešokinėja), srcset ir decoding="async". Pagrindinis paveikslėlis pirmame ekrane turi fetchpriority="high" ir neturi loading="lazy"; esantys žemiau puslapyje turi loading="lazy". Taip sumanyta: web.dev tiesiai perspėja neatidėti iškart matomo paveikslėlio įkėlimo, kitaip puslapis atsidaro lėčiau.
Jei praleisite. Paveikslėliai paprastai yra sunkiausia puslapio dalis, ir viena netinkama nuotrauka gali nusverti visa kita.

6 žingsnis. Šriftai #

Ką daryti. Kartu su sistema pateikiamos temos nekrauna šriftų iš serverio: tekstui naudojami šriftai, jau esantys lankytojo įrenginyje, todėl nieko nesiunčiama. Jei vis dėlto pridedate savo šriftą, laikykitės web.dev taisyklių: WOFF2 formatas, tik reikalingi stiliai, font-display: swap (arba optional) ir neįkelkite visko iš anksto. Kaip patikrinti. Kūrėjo įrankiuose, skirtuke „Network“, filtras „Font“: svetainėje be įkeliamų šriftų sąrašas tuščias. Jei praleisite. Kiekvienas pridėtas šriftas – papildomas failas, kuris blokuoja tekstą arba priverčia puslapį „šoktelėti“, kai šriftas pakeičiamas.

7 žingsnis. Tvarkaraštis ir OPcache #

Ką daryti. Atidarykite „Sistema → Diagnostika → Sistemos būklė“ ir pažiūrėkite į bloką „Rekomendacijos“. Jei ten yra „Laiškai siunčiami lankytojams užėjus“, talpinimo paslaugoje pridėkite tvarkaraštį (cron) kartą per minutę: pati rekomendacija rodo paruoštą komandą. Tada paštas ir foniniai darbai apdorojami be lankytojų, o puslapiai nelaukia pašto. Jei ten yra „PHP OPcache nepasiekiamas“, paprašykite talpinimo pagalbos tarnybos jį įjungti: OPcache laiko išnagrinėtą PHP atmintyje, ir serveris nenagrinėja tų pačių failų kiekvieno apsilankymo metu. Kaip patikrinti. Atitinkamos eilutės bloke „Rekomendacijos“ išnyksta. Jei praleisite. Svetainė kiekvieno apsilankymo metu dirba papildomą darbą, ir tai pastebite tik piko valandomis.

8 žingsnis. Momentiniai perėjimai (nebūtina) #

Ką daryti. Įjunkite „Momentiniai perėjimai“: kai lankytojas užveda žymeklį ant nuorodos, naršyklė („Chrome“ ir panašios) iš anksto parsisiunčia puslapį, ir paspaudus jis atsidaro beveik akimirksniu. Tai veikia svečiams ir puslapiams, kurie jau yra paruoštų puslapių podėlyje, todėl pirmiausia įjunkite 2 žingsnį. Peržiūros ir skaitikliai nuo išankstinio įkėlimo neauga. Valdymo skydelis, prisijungimas, failų atsisiuntimai, el. pašto patvirtinimo nuorodos ir adresai su klaustuku iš anksto niekada neįkeliami. Kaip patikrinti. Kūrėjo įrankiuose, skirtuke „Network“: užvedus žymeklį ant nuorodos, sąraše atsiranda to puslapio užklausa. Jei praleisite. Nieko baisaus: tai priedas, o ne būtinybė.

9 žingsnis. Išmatuokite po #

Ką daryti. Pakartokite 1 žingsnį ir palyginkite tris skaičius. Norėdami žiūrėti ne į laboratorinius duomenis, o į tikrus lankytojus, įjunkite „Tikrasis greitis lankytojams“: lankytojo naršyklė matuoja LCP, CLS ir INP ir išeidama siunčia tik skaičius. IP adresai, slapukai ir naršyklės duomenys nesaugomi, robotai ir žmonės, įjungę „do not track“, neskaičiuojami, lankytojo sutikimo paprastai nereikia, nes asmens duomenų nėra, tačiau pasitikrinkite pas savo šalies teisininką. Rezultatai atsiranda skiltyje „SEO ir prieinamumas → Greitis“. Kaip patikrinti. Trys nauji skaičiai šalia senųjų. Laboratorinis matavimas rodo vieną įrenginį ir vieną tinklą, o tikrasis vaizdas – tai, ką mato jūsų lankytojai, tad kai jie nesutampa, tikėkite antruoju. Jei praleisite. Spėliosite, užuot žinoję.

Ko šis sąrašas nedaro #

Jis pašalina nereikalingą darbą, bet nepadarys greito to, kas sunku iš prigimties: labai sunkios temos, dešimčių išorinių valdiklių ir skaitiklių ar perkrautos talpinimo paslaugos. Jei po visų žingsnių svetainė vis dar lėta, skirtuke „Network“ pažiūrėkite, kas kraunasi ilgiausiai, ir pradėkite nuo to.