Web dizainas

Paspartinkite lėčiausius puslapius naudodami išankstinį gavimą

Jūsų el. prekybos svetainės spartos gerinimas turėtų būti prioritetas 2020 m. Nors našumo patobulinimai gali užtrukti ir brangiai užtrukti, yra greitų pataisymų, kurie turi didelį skirtumą.

Puslapio greitis yra svarbus, ypač todėl, kad „Google Chrome“ komanda šiais metais planuoja sugėdinti lėtai įkeliamas svetaines, kaip aprašyta 2019 m. lapkričio mėn. savo „Chromium“ tinklaraštyje:

Ateityje „Chrome“ gali nustatyti svetaines, kurios paprastai įkeliamos greitai arba lėtai naudotojams su aiškiais ženkleliais. Tai gali būti įvairių formų, todėl planuojame eksperimentuoti su įvairiomis parinktimis, kad išsiaiškintume, kuri vartotojams teikia didžiausią vertę.

Ženklinimas skirtas nustatyti, kada svetainės kuriamos taip, kad jos apskritai sulėtėtų, atsižvelgiant į istorinę įkėlimo delsą. Be to, galime tai išplėsti ir nustatyti, kada puslapis gali būti lėtas naudotojui, atsižvelgiant į įrenginio ir tinklo sąlygas.

„Google“ teigia, kad ji nustatys lėtai įkeliamas svetaines. Šaltinis: „Chromium“ tinklaraštis.

„Google“ teigia, kad ji nustatys lėtai įkeliamas svetaines. Šaltinis: „Chromium“ tinklaraštis.

Ankstesniuose straipsniuose aptariau idėjas, kaip pagerinti našumą, pvz., HTML talpyklą ir lėto įkėlimo išteklių izoliavimą. Šiame įraše paaiškinsiu, kaip nustatyti lėčiausius puslapius ir pritaikyti paprastą pataisymą, kad juos paspartintumėte.

„Google Analytics“ praneša apie lėčiausius svetainės puslapius ir tai, kaip vartotojai juos pasiekia. Galime nurodyti interneto naršyklėms „iš anksto gauti“ tokius puslapius, kad naudotojams juos spustelėjus jie būtų įkeliami tikrai greitai.

Štai procesas.

Lėti puslapiai

„Google Analytics“ eikite į Elgsena > Svetainės greitis > Puslapio laikas. Pasirinkite duomenų (tinklelio) rodinį ir rūšiuokite stulpelius pagal „Vid. Puslapio įkėlimo laikas“.

Jei norite peržiūrėti lėtai įkeliamus puslapius „Google Analytics“, eikite į „Elgsena“ > „Svetainės greitis“ > „Puslapio laikas“. plotis=”975″ aukštis=”505″ dydžiai=”(maksimalus plotis: 975 piks.) 100vw, 975px” />Jei norite peržiūrėti lėtai įkeliamus puslapius „Google Analytics“, eikite į Elgsena > Svetainės greitis > Puslapio laikas. Spustelėkite vaizdą, kad padidintumėte.

Pirmiausia bus rodomi lėčiausi puslapiai. Paskutinis stulpelis „Puslapio vertė“ normalizuoja kiekvienam puslapiui priskirtas pajamas, darant prielaidą, kad įgalinta patobulinta el. prekyba. Tai gera metrika prekybininkams, siekiant nustatyti puslapių, į kuriuos reikia sutelkti dėmesį, prioritetą.

Be to, turime žinoti vidinį kelią, kuris nukreipia lankytojus į lėčiausius puslapius. Tam sukursime tinkintą ataskaitą. Bet pirmiausia pažiūrėkime į tipinius vartotojo kelius adresu Elgesys > Elgesio srautas.

Čia matome populiariausius lankytojų takus. (Ataskaita taip pat gali padėti suprasti, kuriuose puslapiuose lankytojų sumažėjo daugiausia.)

Eikite į Elgesys > Elgsenos srautas, kad peržiūrėtumėte tipiškus naudotojų kelius. plotis=”975″ aukštis=”488″ dydžiai=”(maksimalus plotis: 975 piks.) 100vw, 975px” />Eiti į Elgesys > Elgesio srautas norėdami peržiūrėti įprastus vartotojo kelius. Spustelėkite vaizdą, kad padidintumėte.

Norėdami sukurti tinkintą ataskaitą, eikite į Tinkinimas > Tinkintos ataskaitos > Nauja tinkinta ataskaita. Priskirkite ataskaitai pavadinimą – toliau esančioje ekrano kopijoje naudojau „Lėti puslapio keliai“ – ir kaip aspektus pasirinkite „Ankstesnis puslapio kelias“, „Puslapis“ ir „Išeiti iš puslapio“. Metrikoje pasirinkite „Puslapio vertė“ ir „Vid. Puslapio įkėlimo laikas“.

Sukurkite tinkintą ataskaitą apsilankę Tinkinimas > Tinkintos ataskaitos > Nauja tinkinta ataskaita. plotis=”975″ aukštis=”488″ dydžiai=”(maksimalus plotis: 975 piks.) 100vw, 975px” />Sukurkite tinkintą ataskaitą adresu Tinkinimas > Tinkintos ataskaitos > Nauja tinkinta ataskaita. Spustelėkite paveikslėlį, kad padidintumėte.

Gauname tokią ataskaitą kaip aukščiau (at Elgsena > Svetainės greitis > Puslapio laikas), bet šis apima ankstesnį tipinės naudotojo sesijos puslapį.

Į tinkintą „Google Analytics“ ataskaitą įtrauktas ankstesnis puslapis įprasto naudotojo seanso metu.

Į tinkintą „Google Analytics“ ataskaitą įtrauktas ankstesnis puslapis įprasto naudotojo seanso metu. Spustelėkite vaizdą, kad padidintumėte.

Kitas žingsnis yra taikyti galingą koncepciją: žiniatinklio naršyklės patarimus.

Žiniatinklio naršyklės patarimai

„Patarimai“ yra instrukcijos žiniatinklio naršyklėms, kaip iš anksto įkelti puslapio išteklius ir nuorodas. Šis procesas labai pagerina puslapio greitį. Ne kiekviena naršyklė palaiko kiekvieną užuominą. Trys iš populiariausių yra „išankstinis įkėlimas“, „išankstinis gavimas“ ir „išankstinis pateikimas“.

Išankstinis įkėlimas reikalauja kodo HTML dokumento HEAD, pvz.:

Išankstinio įkėlimo užuomina yra direktyva, verčianti naršyklę atsisiųsti išteklius prieš aptinkant jį dokumente. Geras pavyzdys yra šriftas paslėptuose CSS failuose. Vietoj to, kad naršyklė atsisiųstų ir apdorotų CSS failus, o tada šriftus, išankstinio įkėlimo direktyva atsisiunčia šriftą fone, kad jis būtų pasiekiamas, kai jo reikia.

Daugiau apie išankstinį įkėlimą ir jį palaikančias naršykles rasite CanIUse.com įraše.

Išankstinis gavimas reikalauja kodo HTML dokumento HEAD, pavyzdžiui:

Ši užuomina leidžia žiniatinklio naršyklei gauti išteklių, kurių gali prireikti, kai vartotojas atlieka kitą veiksmą. Naršyklė tai padarys tik pateikusi dabartinį puslapį, jei bus pakankamai pralaidumo.

Šiame įraše išplėsiu apie išankstinį gavimą, kad paspartinčiau lėtus puslapius.

Sužinokite daugiau apie išankstinį gavimą ir jį palaikančias naršykles.

Išankstinis pateikimas anksčiau buvo galinga direktyva, bet dabar ji nebenaudojama. Tai leido iš anksto gauti išteklius tiksliniame puslapyje ir taip pat juos pateikti. Tam reikėjo tokio kodo, esančio HTML dokumento HEAD:

Išankstinis pateikimas tampa per daug resursų reikalaujantis, kai, pavyzdžiui, „Chrome“ puslapyje aptinka išankstinio pateikimo užuominą ir atlieka „No State Prefetch“, kuris yra panašus, bet nevykdo „JavaScript“ ar susijusio atvaizdavimo.

Sužinokite daugiau apie išankstinį pateikimą ir naršykles, kurios vis dar palaiko jį.

Greitas sekos numatymas

Galime rankiniu būdu įterpti užuominą, kad prašytume naršyklės iš anksto gauti lėčiausius būsimus puslapius. Iš Google Analytics duomenų, aprašytų aukščiau, žinome, kuriuose puslapiuose įdėti šią nuorodą.

Tačiau mano pavyzdinėje ataskaitoje buvo nustatyta maždaug 20,000 XNUMX galimų sekų. Užuominų įterpimas į visas jas užtruktų daug laiko!

Vietoj to galime sukurti modelį naudodami ankstesnį puslapį ir dabartinį puslapį, kuris numato kitą puslapį, kurį vartotojas gali spustelėti. Tada galime iš anksto jį gauti.

Galėtume išmokyti sudėtingą neuroninį tinklą, kaip paaiškinau paskutiniame savo straipsnyje. Tačiau greitesnis ir paprastesnis metodas yra kompaktiškas numatymo medis, koncepcija, kurią sukūrė trys informatikos profesoriai. Iš jų popieriaus:

Atsižvelgiant į mokymo sekų rinkinį, sekos numatymo problema yra rasti kitą tikslinės sekos elementą stebint tik ankstesnius elementus. Su šia problema susijusių programų skaičius yra didelis. Tai apima tokias programas kaip išankstinis tinklalapio gavimas, vartotojų produktų rekomendacijos, orų prognozės ir akcijų rinkos prognozės.

Norėdami įdiegti, naudosiu „JavaScript“ iš „Github“ saugyklos.

Tai palyginti lengva. Įveskite treniruočių duomenis, nurodykite numatymo tikslą ir susigrąžinkite geriausias rungtynes.

Mokymo duomenų pavyzdys iš mūsų „Google Analytics“ tinkintos ataskaitos atrodytų taip:

tegul duomenys = [ ['/ankstesnis-1 puslapis', '/dabartinis puslapis1', '/kitas-lėtas-1 puslapis'], ['/ankstesnis puslapis2', '/dabartinis puslapis2', '/kitas-lėtas- puslapis2'], ['/ankstesnis-3 puslapis', '/dabartinis-3 puslapis', '/kitas-lėtas-1 puslapis'], ['/ankstesnis puslapis4', '/dabartinis-1 puslapis', '/kitas-lėtas- puslapis2'], ['/ankstesnis-2 puslapis', '/dabartinis-3 puslapis', '/kitas-lėtas-3 puslapis'], ['/ankstesnis puslapis3', '/dabartinis-2 puslapis', '/kitas-lėtas- page4'], ['/previous-page4', '/current-page1', '/ext-slow-page1'], ]

Štai kaip mes išbandytume tikslinį puslapį:

tegul tikslas = [ ['/ankstesnis puslapis2', '/dabartinis puslapis3'] ];

Ir galiausiai, prognozė būtų tokia:

console.log(predictions) // [['/next-slow-page3]']

Sudedam kartu

Kad viskas būtų paprasta, į visus puslapius (arba puslapius, vedančius į tuos, kuriuos norime patobulinti) turėtume įtraukti JavaScript failą. Scenarijus gautų dabartinį puslapio persiuntimo kelią, dabartinio URL kelią ir numatytų kitą puslapį, kurį greičiausiai spustels vartotojas.

Tada mes tiesiog įterpiame vieną ar daugiau naršyklės užuominų su prognozėmis.

nuoroda rel="prefetch" href="https://wp2wp.com/next-slow-page3

Mano pavyzdiniame puslapyje Github yra kodas, kuris tai daro.

Ši eilutė importuoja bibliotekos failą.

scenarijus src="index.js"

Susidūriau su problemomis dėl originalaus kodo saugykloje, tačiau skaitmeninės rinkodaros konsultanto Davido Sottimano dėka man pavyko modifikuoti failus, kad jie veiktų kaip vienas scenarijus. Štai jo index.js failas.

Taip pat turėčiau padėkoti rinkodaros technologei ir inžinierei Michelle Robbins, kuri neseniai vykusiame internetiniame seminare mane supažindino su Compact Prediction Trees.

Susiję straipsniai

0 komentarai
Inline atsiliepimai
Peržiūrėti visus komentarus
Atgal į viršų mygtukas