Četri 100 PageSpeed testā, un kas tieši tam bija vajadzīgs

Ja esat strādājuši e-komercijā, jūs jau zināt, kāpēc tas ir svarīgi, un galvenais iemesls nav SEO. Lapas ātrums parādās konversijā, atlēcienos un tajā, cik daudz cilvēku vispār nonāk līdz otrajam solim. Tas ir viens no retajiem tehniskajiem skaitļiem, kas bez strīdiem pārvēršas ieņēmumos.

Iespaidīgākais, ko esam redzējuši dzīvē, bija e-komercijas platforma ar aptuveni astoņiem miljoniem produktu, kas lapu atdeva aptuveni septiņās desmitdaļās sekundes. Pirms pieciem gadiem godīgais skaidrojums tādam rezultātam būtu pasaules klases inženieru komanda un tai atbilstošs budžets. Tagad tas ir sasniedzamāk - labāki noklusējumi, labāki rīki un krietni mazāk ar roku rakstītas līmes - bet tas joprojām nav par velti un joprojām sastāv no desmitiem sīku lēmumu, nevis no viena gudra trika.

Tātad: PageSpeed Insights, četri simti, dators un telefons. Lūk, kas aiz tiem stāv.

Sāciet ar to, ka nesūtat ietvaru

Šī vietne ir statisks HTML ar vienu stila lapu un vienu skriptu. Nav klienta puses maršrutētāja, nav hidratācijas soļa, nav komponentu izpildvides. Šis lēmums ir vērtīgāks par visām zemāk minētajām optimizācijām kopā, jo ātrākais JavaScript ir tas, kas nekad netika nosūtīts.

Tas nav arguments pret ietvariem vispār - mēs būvējam daudz lietotņu, kurās ietvars nopelna savu vietu. Tas ir arguments pret to, ka pēc tāda ķeras, lai attēlotu vienpadsmit mārketinga lapas, kas starp izvietojumiem nemainās.

Starp HTML un pirmo zīmējumu nestāv nekas

Stila lapa tiek minimizēta būvēšanas laikā un iekļauta katrā lapā kā <style> elements. Atsevišķs CSS fails nozīmētu otru turp un atpakaļ gājienu, pirms kaut ko var uzzīmēt, un lapa ir pietiekami maza, lai baiti maksātu mazāk nekā pieprasījums. Tātad pirmā atbilde satur visu, kas vajadzīgs attēlošanai.

Montserrat tiek mitināts pašu serverī kā mainīgs woff2 fails, latīņu un paplašinātais latīņu, svari no 400 līdz 800 vienā failā. Nekāda trešās puses fontu rokasspiediena, nekādas DNS meklēšanas citā domēnā, pirms teksts var parādīties. Katra lapa iepriekš ielādē latīņu apakškopu.

Trīs lietas, kas agrāk darbojās, kamēr lasītājs gaidīja

Tieši no šejienes nāca lielākā daļa izmērāmā ieguvuma.

• WebGL ēnotājs. Stikla efekts aiz soļu kartēm sākumlapā kompilē fragmentu ēnotāju, un tas bloķēja galveno pavedienu gandrīz veselu sekundi. Sadaļa, ko tas rotā, atrodas krietni zem ekrāna robežas, tāpēc IntersectionObserver to tagad aiztur, līdz lasītājs ir divu ekrānu attālumā.
• Google Tag Manager. Aptuveni 120 KB trešās puses JavaScript, no kura lapā nekas nav atkarīgs. dataLayer joprojām tiek izveidots uzreiz, tāpēc neviens notikums nepazūd, bet pats konteiners tiek ielādēts pēc pirmās mijiedarbības vai kad pārlūks pēc ielādes kļūst dīkstāvē - kurš notiek pirmais.
• Soļu sīktēli. Aptuveni 590 KB animētu GIF failu, kas redzami tikai atvērtā kartē. Tie savu adresi nes data-src atribūtā, un skripts aizpilda src, kad karte tiek atvērta. Uz ierīcēm ar peli visa rinda tiek uzsildīta, kad pār to pārvieto kursoru, tāpēc atklāšana joprojām šķiet acumirklīga.

Attēli: garlaicīgie 400 KB

Lieli dekoratīvie attēli ir AVIF formātā ar oriģinālu kā <picture> rezerves variantu, kas vien sākumlapā ir aptuveni 400 KB vērts.

Viena lamata, ko ir vērts nodot tālāk. CSS fons nesaņem to pašu apstrādi: tas paliek vienkāršs url() formātā, ko lasa katrs pārlūks. image-set() kopā ar type() pareizi parsējas tikai no Safari 17 - vecāks Safari deklarāciju pieņem un pēc tam nezīmē neko. Katrs gadījumu pētījumu fona attēls šiem apmeklētājiem klusi pazuda, lai gan Chrome izskatījās nevainojami. Mūsu būvējums tagad atsakās strādāt, ja stila lapā parādās image-set(. Satura izvēle pieder <picture> elementam, kur katrs pārlūks jau desmit gadus uzvedas pareizi.

Divas lietas, ko pārbaudām pirms jebkā pārkodēšanas:

• Kādā izmērā tas patiesībā tiek attēlots? Viena produkta fotogrāfija bija 3072 × 4096 oriģināls, kas tika rādīts 624 × 680 lielā kastē.
• Gradientam nav vajadzīga izšķirtspēja. Plīvurs pār katru gadījumu pētījuma virsrakstu bija 557 KB pie 2880px. Pie 1440px kā AVIF tas ir 8 KB un atšķiras no oriģināla trīs vienību robežās, jo background-size: cover to tāpat izstiepj.

Katram <img> ir skaidrs width un height, tāpēc ielādes laikā nekas nepārbīdās. Tā ir izkārtojuma nobīdes puse no vērtējuma, un tā ir bez maksas. Plus loading="lazy" un decoding="async".

Video, kur vietnes parasti zaudē

Aiz virsraksta ir cikliska stikla animācija. Tā arī ir pati smagākā lieta lapā, tāpēc pret to izturas kā pret neobligātu.

Plakāta kadru CSS uzzīmē kā sadaļas fonu, tāpēc virsraksts nekad nav tukšs un video nekad nav daļa no pirmā zīmējuma. Katrs cikls ir kodēts četros veidos - 1080p un 720p, katrs kā H.264 un HEVC - un skripts izvēlas mazāko failu, kas nosedz attēloto izmēru, iepriekš pārbaudot, vai pārlūks prot atkodēt HEVC. Telefons nekad nelejupielādē 1080p dekoratīvu fonu.

Tas tiek pilnībā izlaists ar prefers-reduced-motion vai Save-Data, tas gaida load notikumu, un viss, kas atrodas zem ekrāna robežas, gaida, līdz ir viena ekrāna attālumā no redzamības. Atveriet kādu mūsu lapu tās vidū, un virsraksta video netiek ielādēts vispār.

Kešošana, kuras sakārtošana neko nemaksā

Viena gada nemainīgs kešs statiskajiem resursiem, no-cache HTML failiem un saspiešana visam, kas ir teksta formā. Resursu adresēs ir versijas virkne, tāpēc mainīts fails ir mainīta adrese, un garais kešs nekad nav meli.

Pārējie trīs simti nav veiktspēja

Pieejamība, labākā prakse un SEO ir drīzāk disciplīna nekā inženierija, un tos ir daudz lētāk uzturēt nekā pēc tam pielāgot.

• Viens h1 katrā lapā, sadaļas ir h2, kartes ir h3, un neviena sadaļa neizdomā sev savu virsraksta izmēru, lai izskatītos svarīga.
• Izlaišanas saite, īsti orientieri, aria-labelledby katrai sadaļai, redzami fokusa stāvokļi un kontrasts, pārbaudīts pret to fonu, uz kura elements patiešām atrodas, nevis pret to, kuram tas tika zīmēts.
• Kanoniskā saite un hreflang katrā lapā, visās trīs valodās, un katra lapa sevi pieteic starp saviem alternatīvajiem variantiem.
• Strukturētie dati, ģenerēti no tā paša avota, kas redzamā lapa, tāpēc marķējums un saturs nevar nesakrist. Mūsu BUJ lapa un tās FAQPage shēma tiek atveidotas no viena masīva; nav otras kopijas, ko aizmirst atjaunināt.

Ko vērtējums nepasaka

Ir vērts pateikt skaidri: PageSpeed ir laboratorijas mērījums uz simulētas ierīces un savienojuma. Tas ir labs aizstājējs un patiešām noderīgs kontrolsaraksts, bet skaitlis, kam ir nozīme, ir lauka dati no īstiem apmeklētājiem īstos tīklos. Nevainojams laboratorijas rezultāts bez lauka datiem aiz muguras ir jauks ekrānuzņēmums, nevis pabeigts darbs.

Tas arī nav mūžīgs. Pievienojiet vienu trešās puses skriptu, vienu attēlu bez izmēriem, vienu fontu no kāda cita CDN, un tā nav. Noderīgais rezultāts nav četri simti. Tas ir būvējums, kurā ātrā izvēle ir noklusējums, tāpēc vērtējums izdzīvo nākamo cilvēku, kas rediģēs vietni.

Un jā: kad PageSpeed iedod četrus simtus, ekrānuzņēmumu uztaisa, pirms tas pārdomā.