Külastaja ei mõtle kunagi „see leht on aeglane“. Ta ei mõtle üldse midagi. Ta vaatab valget ekraani poolteist sekundit, tunneb ebamäärast tüdimust ja vajutab tagasi-nuppu.
Ja sina ei saa sellest kunagi teada. Sinu analüütikas ei ole rida „37 inimest läks ära, sest oli aeglane“. Sellepärast on kiirus ainus turundusprobleem, mis endast ise ei teata, ja sellepärast on ta enamikul lehtedel aastaid katki.
Mis aeglus sulle maksab
Üks asi kohe ära. Me ei tea, mida aeglus sinu ettevõttes maksab, ja keegi teine ka ei tea. Slaid „üks sekund viivitust tähendab X protsenti müügist“ on kellegi teise pood ja kellegi teise aasta.
Oma numbri saad ise kokku panna, nelja rea pealt: külastajaid kuus, päringuid kuus (kõned, kirjad ja vormid kokku), kui suur osa päringutest saab kliendiks, ja kui palju on klient sulle väärt kogu koostöö peale.
Väljamõeldud näide, et käik oleks näha. Tuhat külastajat kuus, 20 päringut, igast viiest saab klient, klient on aasta peale 1500 eurot: neli klienti kuus. Liiguta ainult keskmist numbrit: 22 päringut 20 asemel teeb umbes viis klienti aastas juurde, ehk 7500 eurot. Kaks päringut kuus, mitte rohkem.
Me ei luba, et kiirem leht seda numbrit liigutab. Arvutus näitab sulle ainult seda, kas sul on 200-eurone või 7000-eurone probleem. Vastus võib tulla ka teistpidi: kui lehel käib 30 inimest kuus ja tellimused tulevad niikuinii telefoni teel, siis pane see nimekiri käest.
Kust aeg kaob
Me oleme viimastel aastatel vaadanud päris palju aeglasi lehti ja põhjused korduvad nii täpselt, et neid võib peaaegu järjekorras ennustada.
Pildid, peaaegu alati
Kaamerast või telefonist tulnud pilt on kolm kuni viis megabaiti ja umbes 6000 pikslit lai. Lehel on teda vaja äkki 1600 pikslit lai ja 200 kilobaiti raske.
Kui keegi laadis avalehele kaheksa sellist pilti otse kaustast, siis laeb iga külastaja alla umbes 30 megabaiti selleks, et näha midagi, mis mahub ühte ekraani. Telefonis, kehva levi peal, on see katastroof.
See on ülekaalukalt kõige sagedasem põhjus ja ka kõige odavam parandada. Tavaliselt saab siit poole ajast tagasi, ilma et lehel midagi muutuks.
Liiga palju skripte
Analüütika. Teine analüütika, sest esimene ei näidanud seda, mida vaja. Facebooki piksel. Vestlusaken. Küpsiseriba. Fondilaadija. Hüpikaken, mis pakub uudiskirja. Kaardimoodul jaluses, mis laeb ka siis, kui keegi jaluseni ei keri.
Igaüks neist lisati eraldi. Igaüks tundus lisamise hetkel tühine. Kokku on see tihti pool laadimisajast.
Küsimus, mida tasub endale ausalt esitada: millal sa viimati avasid selle teise analüütika aruande?
Majutus
Kui server on odav ja jagatud, siis on su leht kiire ainult siis, kui naabritel on parasjagu vaikne. Sa ei näe seda ise, sest sinu brauser hoiab lehte vahemälus. Uus külastaja näeb.
Seda ei paranda ükski pildi kokkupakkimine ja ükski pistikprogramm, mille nimes on sõna „speed“. See on ainus punkt selles nimekirjas, mille lahendus on kolimine.
Fondid
Neli fondiperekonda, igaüks nelja paksusega, kõik välisest allikast. Tekst ei ilmu enne, kui need on kohal, seega inimene vaatab tühja kohta seal, kus peaks olema pealkiri.
Kaks perekonda on peaaegu alati piisav. Ja kui need on sinu enda serverist, siis on üks väline päring vähem.
Kuidas kiirena valminud leht aeglaseks läheb
Peaaegu ükski neist lehtedest ei olnud alguses aeglane. Nad tehti kiireks, mõõdeti üle ja anti üle. Aeglus tuli hiljem ja tuli vaikselt.
- Kolleeg pani uudise juurde pildid otse telefonist. Pilt on ilus ja lehel näeb hea välja.
- Kevadise kampaania jaoks lisati pistikprogramm. Kampaania sai läbi, pistikprogramm jäi: maha võtmine tundub alati riskantsem kui alles jätmine.
- Reklaame tegev agentuur lisas jälgimisskripti. Sellest räägiti ühel koosolekul ja too inimene on vahepeal töökohta vahetanud.
- Avalehele pandi video. Video toob kaasa mängija ja mängija ei ole väike.
Ükski neist sammudest ei olnud viga ja igaüks oli eraldi võttes tühine. Kiirus ei ole projekt, mis saab valmis. Ta triivib. Sellepärast on kõige kasulikum asi ka kõige igavam: võta kord aastas ette pistikprogrammide nimekiri ja avaleht ning küsi iga rea kohta, kes seda praegu vajab.
Mida mõõta
Google vaatab kolme asja ja need on samad kolm, mida külastaja päriselt tunneb. Nimed on inetud, aga mõte on lihtne.
- LCP - kui kiiresti ilmub lehe suurim asi. Tavaliselt pealkiri või suur pilt. See on „kas leht üldse laeb“.
- CLS - kui palju sisu hüppab laadimise ajal paigast. See on see, mille pärast sa vajutad valele nupule, sest reklaam laadis end sinu klikile ette.
- INP - kui kaua läheb, enne kui leht sinu vajutusele reageerib. Nupp, mis ei tee kohe midagi, on nupp, mida vajutatakse kolm korda.
Ja nüüd asi, mida me ütleme peaaegu igal koosolekul: üks number kolme asemel ei ütle midagi. „Meie leht sai 92 punkti“ on lause, mille taga võib olla väga aeglane leht. Enamik kiirustesti tööriistu mõõdab vaikimisi laua-arvutit kiire ühendusega. Sinu klient on telefonis, bussis, keskmise levi peal.
Kui sa testid, siis testi telefoni-režiimis. Erinevus on tihti kahe- kuni kolmekordne.
Kõige ausam mõõteriist on telefon ja stopper
Võta telefon, lülita WiFi välja ja jää mobiilse interneti peale. Mine kontorist välja, sest kontoris on levi hea. Kirjuta aadress käsitsi, mitte järjehoidjast. Käivita stopper ja märgi kaks hetke: millal ilmub tekst, mida saab lugeda, ja millal saab nupule vajutada nii, et miski enam paigast ei liigu.
Kirjuta need kaks sekundinumbrit üles ja tee sama kord kvartalis. Punktisumma sajast on keskmine, mille masin arvutas ühe katse pealt ühenduse peal, mida sinu kliendil ei ole. Stopper mõõdab seda, mis päriselt juhtub.
Sinu enda sülearvuti valetab kolmel põhjusel korraga: vahemälu (pooled failid on sul juba olemas), ühendus (kaabel ei ole buss) ja see, et sa tead, kuhu sa lähed. Su silm on nupu kohal enne, kui leht valmis saab.
Kiired võidud, mida saab teha sel nädalal
- Pane kõik pildid õigesse mõõtu ja kaasaegsesse vormingusse. See üksi annab tihti poole ajast tagasi. Kui su lehesüsteem oskab seda automaatselt, siis lülita see sisse ja lase vanad pildid uuesti läbi.
- Võta maha iga skript, mida keegi ei vaata. Vaata nimekiri üle ja küsi iga rea kohta, kes seda kasutab. Tavaliselt kaob kaks kuni neli.
- Lae see, mis on ekraanist väljas, alles siis, kui sinna keritakse. Enamik lehesüsteeme oskab seda, aga see ei ole alati vaikimisi sees.
- Vähenda fonte kahe perekonnani ja majuta need oma serverist.
- Anna piltidele mõõdud kaasa. See on väike tehniline detail, mis lõpetab sisu hüppamise, ehk parandab CLS-i peaaegu tasuta.
Kui su leht on WordPressis
Enamik Eesti väikeettevõtete lehti on. Siin loeb järjekord rohkem kui üksik samm. Varukoopia enne kõike muud. Siis pildid, sest pildid on põhjus ja pistikprogramm on plaaster. Alles siis üks optimeerimise pistikprogramm, ja mõõtmine iga muudatuse vahel.
Kolm optimeerimise pistikprogrammi ei liitu, nad võistlevad. Iga järgmine paneb vahemällu eelmise väljundi, kaks neist muudavad sama faili, ja kui midagi katki läheb, ei ole enam võimalik öelda, milline neist süüdi on.
Üks koht meedia seadetes tasub lahti võtta: „Seaded“, siis „Meedia“. Seal on mõõdud, mida WordPress igast üleslaetud pildist teeb. Kui kujundus näitab fotot 1600 piksli laiuselt, aga suurim tehtud mõõt on 1024, siis antakse brauserile originaal: see kuue tuhande piksli laiune fail telefonist.
Kaks parandust, mis näevad välja nagu parandused
Vahemälu korrastamata lehe peale. Vahemälu-pistikprogramm salvestab valmis lehe ära, et server ei peaks seda iga kord uuesti kokku panema. Kasulik. Aga ta ei tee su pilte väiksemaks: need 30 megabaiti liiguvad ikka iga uue külastaja telefoni. Vahemälu jätab vahele kokkupaneku, mitte kohaletoimetamise. Tööriistas paraneb number, sest tööriist mõõdab teist korda, soojalt.
Suurem server, kui probleem on piltides. Suurem server mõtleb kiiremini, aga mõtlemine ei olnud see aeglane osa. Kolmkümmend megabaiti on keskmise leviga telefoni poole teel ikka kolmkümmend megabaiti. Sa maksad iga kuu selle eest, et parandada osa, mis ei olnud katki.
Kumbki ei ole iseenesest vale. Vahemälu on õige siis, kui pildid on korras, ja suurem server siis, kui majutus ongi põhjus. Vahe on järjekorras: esmalt põhjus, siis ost. Vastupidi ostad sa ainult ilusama mõõtmise.
Millal on vaja päris tööd
Kui pildid on korras, skriptid on kärbitud, fondid on kahandatud ja leht on ikka aeglane, siis on põhjus sügavamal: majutus, andmebaas, või see, kuidas leht ise on ehitatud.
Siin ei aita enam pistikprogramm. Ja ausalt öeldes ei tasu seda ka ise proovida, sest just selles kohas läheb tavaliselt midagi katki. Vahetatakse vahemälu-pistikprogramm, leht läheb kaks korda kiiremaks ja kontaktivorm lakkab töötamast, ilma et keegi kolm nädalat märkaks.
Meie enda reegel on lihtne: kõik, mis on nimekirjas ülal, on tagasi keeratav, kui sul on enne varukoopia. Kõik, mis on sellest allpool, tehakse koos varukoopiaga ja kontrollitakse pärast üle. Ja kui leht on ehitatud nii, et ta kiireks ei saagi, siis on aus vastus uus leht, mitte veel üks parandus.
Kiirus on viigimurdja, mitte eesmärk
Üks lause Google'i kohta, sest seda lubatakse valepidi. Kiirus on viigimurdja, mitte võluvits: kui kaks lehte vastavad küsimusele ühtviisi hästi, võidab kiirem, aga kiire leht, millel ei ole midagi öelda, kaotab aeglasele lehele, mis vastab küsimusele. Otsingut tasub vaadata eraldi tööna, mitte kiiruse kõrvalsaadusena.
Kiirus ei ole eesmärk. Keegi ei osta sinult midagi sellepärast, et leht laeb 1,2 sekundiga. Kiirus on lihtsalt see, mis lubab kõigel muul üldse tööle hakata: sisul, pakkumisel, kontaktivormil.
Sellepärast me ei soovita kunagi teha kiiruse-projekti enne, kui sisu on paigas. Väga kiiresti laadiv leht, millel ei ole vastust kliendi küsimusele, on lihtsalt kiiresti kasutu. Kui häda on pigem seal, alusta sisust.
Kust alustada
Kõige odavam samm on telefon ja stopper. Meie tasuta otsingumootori audit ütleb sama ilma, et sa peaksid tööriistade nimesid teadma.
Pidev hoidmine, ehk see, et keegi märkab, kui asi jälle aeglaseks läheb, käib veebihalduse alla. Ja kui probleem on serveris, siis on vastus majutuse lehel: seda ei ole võimalik koodiga ära lahendada.
Ja kui ülemine arvutus andis piisavalt suure numbri, siis küsi pakkumist ja pane need kaks sekundinumbrit kirja sisse. Nendega saab tööd alustada, lausega „leht tundub aeglane“ mitte.
Korduma kippuvad küsimused
Kõige sagedasem põhjus on pildid: kaamerast või telefonist tulnud fail on kolm kuni viis megabaiti ja umbes 6000 pikslit lai, kuigi lehel on teda vaja ehk 1600 pikslit lai. Teine põhjus on skriptid - analüütika, piksel, vestlusaken, küpsiseriba, fondilaadija - millest igaüks tundus lisamise hetkel tühine ja mis kokku on tihti pool laadimisajast. Kolmas on odav jagatud majutus, ainus neist, mille lahendus on kolimine. Neljas on fondid: neli perekonda välisest allikast hoiavad teksti kinni, kuni need on kohal.
LCP näitab, kui kiiresti ilmub lehe suurim asi, tavaliselt pealkiri või suur pilt. CLS näitab, kui palju sisu laadimise ajal paigast hüppab, ja see on põhjus, miks sa vajutad valele nupule. INP näitab, kui kaua läheb, enne kui leht sinu vajutusele reageerib. Üks number kolme asemel ei ütle midagi, sest enamik kiirustesti tööriistu mõõdab vaikimisi laua-arvutit kiire ühendusega, sinu klient on aga telefonis keskmise levi peal. Kui testid, testi telefoni-režiimis: vahe on tihti kahe- kuni kolmekordne.
Võta telefon, lülita WiFi välja ja jää mobiilse interneti peale, mine kontorist välja, sest kontoris on levi hea, ja kirjuta aadress käsitsi, mitte järjehoidjast. Käivita stopper ja märgi kaks hetke: millal ilmub tekst, mida saab lugeda, ja millal saab nupule vajutada nii, et miski enam paigast ei liigu. Kirjuta need kaks sekundinumbrit üles ja tee sama kord kvartalis. Sinu enda sülearvuti valetab kolmel põhjusel korraga: vahemälu, ühendus ja see, et sa tead, kuhu sa lähed.
Vahemälu-pistikprogramm salvestab valmis lehe ära, et server ei peaks seda iga külastaja jaoks uuesti kokku panema, aga ta ei tee sinu pilte väiksemaks: vahemälu jätab vahele kokkupaneku, mitte kohaletoimetamise. Suurem server mõtleb kiiremini, aga kui aeglane osa olid pildid, siis maksad iga kuu selle eest, et parandada osa, mis ei olnud katki. Kumbki ei ole iseenesest vale: vahemälu on õige siis, kui pildid on korras, ja suurem server siis, kui majutus ongi põhjus. Vahe on järjekorras: esmalt põhjus, siis ost.
Kiirus on viigimurdja, mitte võluvits. Kui kaks lehte vastavad küsimusele ühtviisi hästi, võidab kiirem, aga kiire leht, millel ei ole midagi öelda, kaotab aeglasele lehele, mis vastab küsimusele. Kiirus ei ole eesmärk: keegi ei osta sinult midagi sellepärast, et leht laeb kiiresti, vaid kiirus on see, mis lubab sisul, pakkumisel ja kontaktivormil üldse tööle hakata. Sellepärast ei tasu kiiruse-projekti ette võtta enne, kui sisu on paigas.
Loe ka
Sa noogutasid koosolekul, kus keegi rääkis A-kirjest ja TTL-ist. Arvel seisab „piiramatu“, aruandes on LCP punane. Siin on need sõnad tagasi, rühmiti ja ühe lausega kaupa, iga lühend sulgudes lahti kirjutatud. Ja kolm neist, mille valesti minek päriselt raha maksab.