Kiire koduleht: kuidas saada PageSpeed 100

Lühike vastus: PageSpeed 100 saab koduleht, mis laeb alla 1 sekundi, saadab brauserile paarsada kilobaiti andmeid ja ei käivita ühtegi mittevajalikku skripti. Meie tehtud tavalised kodulehed saavad arvutitestis 97-100 punkti, keerukamad platvormid 91-94. Skoor ise ei too raha, aga see on kõige lihtsam viis kontrollida, kas leht avaneb telefonis kiiresti.

Siin näitame, kuidas sinna jõuda. Kui tahad enne teada, miks lehed üldse aeglaseks lähevad ja mis see maksma läheb, loe kõigepealt postitust miks koduleht on aeglane ja kuidas see kliente minema peletab. Selles artiklis räägime tehnilistest võtetest, päris numbritest ja sellest, millal skoori jahtimine on raha tuulde loopimine.

Mida PageSpeed Insights päriselt mõõdab

PageSpeed Insights annab korraga kaks erinevat asja ja neid aetakse pidevalt segi.

Laborandmed ehk Lighthouse skoor

Google laeb su lehe oma serveris ühe korra, simuleerib aeglast 4G ühendust ja nõrka Android-telefoni ning arvutab mõõdetud aegadest kaalutud koondskoori 0 kuni 100. Kõige suurema kaalu saab peamise lõime hõivatus ehk TBT (30 %), LCP ja CLS annavad kumbki 25 %, FCP ja Speed Index kumbki 10 %. Test käivitub iga kord, kui sa aadressi sisestad, ja tulemus kõigub paar punkti üles-alla. Seepärast tee test kolm korda ja võta keskmine.

Väliandmed ehk päris kasutajad

Kui su lehel käib piisavalt Chrome'i kasutajaid, näitab Google ka väliandmeid (CrUX): viimase 28 päeva tegelikke mõõtmisi päris seadmetes. Need on tähtsamad kui skoor, sest skoor on simulatsioon, väliandmed on kogemus. Väiksel Eesti kodulehel neid tihti ei ole ja see on normaalne, siis jääb sulle ainult laboritulemus.

Core Web Vitals: kolm numbrit

• LCP (Largest Contentful Paint): kui kiiresti ilmub lehe suurim element, tavaliselt hero-pilt või pealkiri. Hea on kuni 2,5 sekundit.
• INP (Interaction to Next Paint): kui kiiresti leht kasutaja klikile reageerib. Hea on kuni 200 millisekundit.
• CLS (Cumulative Layout Shift): kui palju leht laadimise ajal hüppab. Hea on kuni 0,1.

Mobiili skoor on peaaegu alati madalam kui arvuti oma ja see ei ole viga. Arvutitestis eeldab Google kiiret ühendust ja tugevat protsessorit, mobiilitestis aeglast võrku ja telefoni, mis on nõrgem kui enamik täna müüdavaid seadmeid. Sama leht saab tihti arvutis 100 ja mobiilis 80. Vaata alati mobiili vahekaarti, sest Google indekseerib mobiiliversiooni ja sealt tuleb ka enamik külastajaid. Kuidas mobiilivaade laiemalt korda teha, on kirjas postituses mobiili optimeerimine.

Kümme võtet, millega meie lehed saavad 97-100 punkti

Ükski neist ei ole trikk ega viimase hetke parandus. Need on otsused, mis tehakse enne esimest rida koodi.

1. Käsitsi kirjutatud HTML ja CSS, ilma raamistikuta. Ei Bootstrapi, ei valmisteemat, ei page builderit. Raamistik toob kaasa sadu kilobaite stiile, millest üks leht kasutab ehk viie protsendi jagu.
2. Üks CSS-fail, minifitseerituna alla 100 KB. Kogu saidi kujundus on ühes failis, mis läheb esimesel laadimisel vahemällu. Iga lisafail on eraldi päring ja mobiilis maksab iga päring aega.
3. Ei jQueryt ega pistikprogramme. jQuery üksi on pakituna umbes 30 KB ja kaasaegne brauser ei vaja seda millekski. Menüü, galerii ja vormi valideerimine mahuvad paarisaja reaga puhtasse JavaScripti.
4. Pildid WebP-vormingus, srcset ja width ning height küljes. WebP on sama kvaliteedi juures 25 kuni 35 protsenti väiksem kui JPG. Atribuudid width ja height ütlevad brauserile pildi mõõdud ette, nii et leht ei hüppa ja CLS jääb nulli lähedale.
5. Hero-pilt saab eesõiguse. Esimese ekraani suurimale pildile paneme fetchpriority="high" ja lisame <link rel="preload">. Brauser hakkab seda laadima kohe, mitte pärast CSS-i. LCP paraneb sellest tihti pool sekundit.
6. Fondid woff2, preload ja font-display: swap. Kaks fondiperekonda ainult vajalike lõigetega, meie enda serverist, mitte Google Fontsist. Swap tähendab, et tekst on ekraanil kohe, ka siis kui font pole veel kohal.
7. Kogu JavaScript defer. Ükski skript ei blokeeri lehe kuvamist. Brauser joonistab sisu valmis ja alles siis käivitab koodi.
8. Kolmandate osapoolte skriptid alles pärast nõusolekut või pärast laadimist. Analüütika, vestlusvidin ja kaardid söövad skoori kõige rohkem. Google Mapsi asemel paneme lehele pildi, mis laeb päris kaardi alles klikil. See üksi tõstab paljudel lehtedel mobiili skoori märgatavalt.
9. Server vastab alla 200 ms. PHP ilma CMS-ita, ei mingit andmebaasipäringut iga menüüpunkti kohta, gzip või brotli sisse lülitatud ja õiged cache-päised paigas. Kui server mõtleb terve sekundi, ei aita ükski pildinipp. Serveri valikust räägime lähemalt postituses domeen ja hosting Eestis.
10. Alla murdejoone pildid loading="lazy". Galerii 20 pilti ei tohi segada esimese ekraani laadimist. Need laetakse siis, kui kasutaja nendeni kerib.

Kokku tähendab see, et tavaline meie tehtud koduleht saadab esimesel laadimisel brauserile paarsada kilobaiti, mitte kolm megabaiti. Sealt tuleb skoor.

Meie tehtud lehtede tulemused

Tabelis on arvutitesti tulemused. Aktiivsete lehtede numbrid saad ise pagespeed.web.dev lehel üle mõõta, link iga mõõtmise juurde on vastava töö lehel.

Aus vahemärkus: kaks viimast on platvormid, mitte tavalised kodulehed. Rivaldaris ja OpiPangas on kasutajakontod, otsing, graafikud ja sisselogitud vaated, seega vajavad need päriselt rohkem JavaScripti. 91 ja 94 on sellises klassis hea tulemus ja me ei hakka neid 100-ni viima, sest see tähendaks funktsioonide kärpimist. Kõiki töid saad vaadata lehel meie tehtud tööd.

Miks WordPressi leht saab harva 100

Seda küsitakse meilt tihti, nii et vastame otse. WordPress ei ole halb tarkvara, aga tüüpiline WordPressi koduleht on ehitatud nii, et 100 punkti jaoks ei ole ruumi:

• Iga pistikprogramm laeb oma CSS- ja JS-faili, ka nendel lehtedel, kus seda ei kasutata. 25 pistikprogrammi tähendab kümneid lisafaile.
• Valmisteema CSS on kirjutatud kõikideks juhtudeks, mitte sinu lehe jaoks. Tüüpiliselt 300 KB ja rohkem, millest kasutusel on murdosa.
• Page builderid (Elementor, WPBakery, Divi) genereerivad sügavalt pesastatud HTML-i ja lisavad oma skriptid. Mugav redigeerimine tuleb kiiruse arvelt.
• Iga uus lisa toob kaasa oma JavaScripti. Vorm, slaider, küpsiseteade, chat: neli lisa, neli skripti.

Ausalt: hästi hooldatud WordPress võib mobiilis saada 80 kuni 90 punkti. Selleks peab olema kerge teema, alla kümne pistikprogrammi, korralik cache-plugin, WebP-pildid ja hea server. See on täiesti kasutuskõlblik tulemus. Kui tahad platvorme omavahel võrrelda, vaata postitust WordPress vs Voog vs custom koduleht.

Millal 100 ei ole tähtis

Siin eksivad paljud kiirusartiklid: 100 punkti ei ole eesmärk omaette.

90 ja rohkem tähendab, et leht on kiire. Vahet 95 ja 100 vahel kasutaja ei märka: laboritestis on see paarsada millisekundit, päris kasutajal kaob see mobiiliühenduse kõikumisse. Kui keegi pakub, et viib su skoori 92-lt 100-le mitme tuhande euro eest, siis maksad numbri, mitte tulemuse eest.

Loevad kaks asja. Esiteks LCP mobiilis: kas sisu on ekraanil enne, kui inimene jõuab tagasi-nupule. Teiseks see, et leht ei hüppa: kui nupp liigub sekund pärast laadimist paigast, klikib kasutaja valele kohale ja lahkub. Need kaks parandad ära piltide mõõtude, hero-pildi eelislaadimise ja skriptide edasilükkamisega. Kui need on korras, on 100 juba enamasti niikuinii käes.

Skoori tasub jahtida siis, kui iga sekund on sulle raha: e-pood, uudisteleht või maandumisleht, kuhu suunad reklaamiraha. Seal maksab iga kümnendik sekundit päriselt.

Mida kiirus päriselt müügile teeb

Kaks avalikku uuringut, mille numbreid saab kontrollida.

Google ja SOASTA analüüsisid 2017. aastal mobiililehtede andmeid ja leidsid, et kui lehe laadimisaeg kasvab 1 sekundilt 3 sekundile, tõuseb põrkamise tõenäosus 32 protsenti. 5 sekundi juures on kasv 90 protsenti. Teisisõnu: iga lisasekund saadab osa külastajaid minema enne, kui nad su pakkumist näinud on.

Deloitte'i 2020. aasta uuring “Milliseconds Make Millions” mõõtis 37 brändi mobiilisaite neli nädalat. Ainult 0,1 sekundi võrra kiirem laadimine tõstis jaekaubanduses konversioone 8,4 protsenti ja keskmist ostukorvi 9,2 protsenti. Reisisektoris oli konversioonide kasv 10,1 protsenti.

Rohkem numbreid me siia ei pane: need kaks on avaldatud koos metoodikaga ja neid saab allikast kontrollida. Neist kahest piisab: kiirus ei ole arendaja uhkuse küsimus, see on müüginumber.

Kuidas oma lehte ise testida

Viis minutit ja sa tead täpselt, kus sa oled.

1. Mine aadressile pagespeed.web.dev ja sisesta oma kodulehe aadress.
2. Vali Mobiil vahekaart. Arvuti skoor on ilus, aga kliendid tulevad telefonist.
3. Käivita test kolm korda ja võta keskmine. Üksik test kõigub paar punkti.
4. Kui lehel on piisavalt liiklust, kuvatakse üleval päris kasutajate väliandmed. Need on tähtsamad kui laboriskoor.
5. Kirjuta üles neli numbrit: skoor, LCP, INP ja CLS. Tee sama oma kahe konkurendi lehega, siis on sul võrdlus.
6. Korda testi kuu pärast, kui oled midagi parandanud.

Teine tasuta tööriist on Google Search Console ja selle Core Web Vitals raport. See näitab päris külastajate andmeid viimase 28 päeva kohta ja jaotab lehed kolme rühma: hea, vajab parandamist, halb. Seal on ka näha, millised konkreetsed aadressid probleemi tekitavad. Kui Search Console'i pole veel seadistatud, on see esimene asi, mida teha.

Kontrollnimekiri arendajale

Kopeeri see nimekiri ja saada oma praegusele arendajale. Iga punkt on kas tehtud või mitte, vahepealset varianti ei ole.

• Kõik pildid on WebP-vormingus ja mitte laiemad, kui neid kuvatakse.
• Igal pildil on width ja height atribuut.
• Esimese ekraani pilt on preload ja fetchpriority="high".
• Ülejäänud pildid on loading="lazy".
• CSS on ühes minifitseeritud failis, alla 100 KB.
• Kasutusel ei ole jQueryt ega raamistikku, mida leht tegelikult ei vaja.
• Kogu JavaScript on defer atribuudiga.
• Fondid on woff2, oma serverist, font-display: swap.
• Analüütika, chat ja kaart laetakse alles pärast nõusolekut või pärast lehe laadimist.
• Server vastab alla 200 ms, gzip või brotli on sees.
• Staatilistel failidel on pikk cache-päis ja versiooninumber aadressis.
• Mobiili PageSpeed skoor on 90 või rohkem ja CLS alla 0,1.

Kokkuvõte

PageSpeed 100 ei sünni pluginast ega ühest ööst. See sünnib sellest, et leht saadab brauserile ainult seda, mida tal päriselt vaja on: üks CSS-fail, paar WebP-pilti, oma serverist tulevad fondid ja natuke JavaScripti, mis ei blokeeri midagi. Meie lehtedel tuleb arvutitestis 97-100 välja seetõttu, et me alustame tühjalt lehelt, mitte teemast, millest peab asju maha võtma.

Kui sul on juba leht olemas, alusta mõõtmisest. Kui skoor on alla 50, on probleem tavaliselt piltides ja skriptides ning selle saab enamasti mõne päevaga korda; täpse mahu ütleme pärast tasuta ülevaatust. Kui ehitad uut lehte, küsi pakkumise juures kohe, millise skoori tegija lubab ja kas ta näitab oma varasemaid tulemusi. Meil on need siin artiklis kirjas ja aktiivsete lehtede omad saad ise üle mõõta.

Üheleheline koduleht maksab meil 290 eurot ja valmib 3-5 tööpäevaga, kuni 7 alamlehega koduleht algab 490 eurost. Kiirus ei ole lisateenus, see on sees: telli kiire koduleht. Olemasoleva lehe hooldus algab 20 eurost kuus, kiirparandus 90 eurost.

Korduma kippuvad küsimused

Mis on hea PageSpeed skoor?

90 või rohkem on hea, 50 kuni 89 vajab parandamist ja alla 50 on halb. Vaata mobiili skoori, mitte arvuti oma. Veelgi tähtsamad on kolm Core Web Vitals numbrit: LCP kuni 2,5 sekundit, INP kuni 200 millisekundit ja CLS kuni 0,1. Meie tehtud tavalised kodulehed saavad arvutitestis 97-100 punkti.

Kas PageSpeed mõjutab Google'i positsiooni?

Jah, aga kaudselt. Google kasutab Core Web Vitals mõõdikuid järjestuse ühe signaalina alates 2021. aastast. Sisu asjakohasus loeb rohkem, kuid kahe muidu võrdse lehe puhul eelistab Google kiiremat. Suurem mõju tuleb kasutajatelt: kui leht avaneb üle 3 sekundi, lahkub suur osa külastajaid enne sisu nägemist.

Miks mobiili skoor on madalam kui arvuti oma?

Google testib mobiili aeglase 4G ühenduse ja nõrga telefoniga, arvutit kiire ühenduse ja tugeva protsessoriga. Sama leht saab tihti arvutis 100 ja mobiilis 80. See ei ole viga, vaid erinev test. Kuna Google indekseerib mobiiliversiooni ja enamik külastajaid tuleb telefonist, on mobiili number see, mida jälgida.

Kas WordPressi leht saab PageSpeed 100?

Harva. Tüüpilisel WordPressi lehel laeb iga pistikprogramm oma CSS- ja JS-faili ning valmisteema stiilifail on sadu kilobaite, seega jääb mobiili skoor 100-st kaugele. Hästi hooldatud WordPress kerge teema, alla kümne pistikprogrammi ja cache-pluginaga võib jõuda 80 kuni 90 punktini, mis on täiesti kasutuskõlblik.

Palju kiire koduleht maksab?

Stardipakett 290 eurot (üheleheline, valmis 3-5 tööpäevaga), Standard 490 eurot (kuni 7 alamlehte, valmis 7-14 tööpäevaga) ja e-pood või eriprojekt alates 790 eurost. Kiirus on hinna sees, seda ei müüda eraldi. Olemasoleva lehe hooldus algab 20 eurost kuus ja kiirparandus 90 eurost. Käibemaksu ei lisandu.

Allikad

• web.dev: Web Vitals (lävendid LCP, INP, CLS)
• Chrome for Developers: Lighthouse performance scoring (kuidas skoor arvutatakse)
• PageSpeed Insights (testitööriist)
• Google Search Central: Core Web Vitals (kiirus otsingus)
• Think with Google: Google/SOASTA Research, 2017 (1 s kuni 3 s: põrkamise tõenäosus +32 %)
• Deloitte: Milliseconds Make Millions, 2020 (0,1 s kiirem: jaekaubanduse konversioonid +8,4 %)