Web Design

Flýttu hægustu síðunum þínum með forsöfnun

Að bæta hraða netverslunarsíðunnar þinnar ætti að vera forgangsverkefni fyrir árið 2020. Þó að frammistöðuaukar geti verið tímafrekar og dýrar eru til skyndilausnir sem skipta miklu.

Síðuhraði er mikilvægur, sérstaklega þar sem Google Chrome teymið ætlar að skammast sín fyrir hæghleðslusíður á þessu ári eins og lýst er í nóvember 2019 á Chromium blogginu sínu:

Í framtíðinni gæti Chrome borið kennsl á síður sem hlaðast venjulega hratt eða hægt fyrir notendur með skýrar merkingar. Þetta getur tekið á sig ýmsar myndir og við ætlum að gera tilraunir með mismunandi valkosti til að ákvarða hver veitir notendum okkar mest gildi.

Merki er ætlað að bera kennsl á hvenær vefsvæði eru höfundar á þann hátt að þær hægja á þeim almennt, með hliðsjón af sögulegum hleðslutöfum. Í framhaldinu gætum við stækkað þetta til að fela í sér að bera kennsl á hvenær síða er líkleg til að vera hæg fyrir notanda miðað við tæki hans og netaðstæður.

Google segir að það muni bera kennsl á hæghleðslusíður. Heimild: Chromium Blog.

Google segir að það muni bera kennsl á hæghleðslusíður. Heimild: Chromium Blog.

Í fyrri greinum hef ég fjallað um hugmyndir til að bæta árangur, svo sem HTML skyndiminni og einangrun hægfara hleðsluauðlinda. Í þessari færslu mun ég útskýra hvernig á að ákvarða hægustu síðurnar þínar og beita einfaldri lagfæringu til að flýta fyrir þeim.

Google Analytics greinir frá hægustu síðunum á síðu og hvernig notendur komast á þær. Við getum gefið vöfrum fyrirmæli um að „forsækja“ slíkar síður þannig að þegar notendur smella á þær hleðst þær mjög hratt.

Hér er ferlið.

Hægar síður

Í Google Analytics, farðu í Hegðun > Vefhraði > Tímasetningar síðu. Veldu gagnaskjáinn (net) og flokkaðu dálkana eftir „Avg. Hleðslutími síðu.”

Til að skoða síður sem hlaðast hægt í Google Analytics, farðu í Hegðun > Vefhraði > Tímasetningar síðu. width=”975″ hæð=”505″ stærðir=”(hámarksbreidd: 975px) 100vw, 975px” />Til að skoða síður sem hlaðast hægt í Google Analytics skaltu fara á Hegðun > Vefhraði > Tímasetningar síðu. Smelltu á myndina til að stækka hana.

Þetta mun sýna hægustu síðurnar fyrst. Síðasti dálkurinn, „Síðugildi“, staðlar tekjur sem rekjaðar eru til hverrar síðu að því gefnu að aukin rafræn viðskipti séu virkjuð. Það er góður mælikvarði fyrir kaupmenn að forgangsraða þeim síðum sem þeir einbeita sér að.

Næst þurfum við að þekkja innri leiðina sem leiðir gesti á hægustu síðurnar. Við munum búa til sérsniðna skýrslu fyrir þetta. En fyrst skulum við fylgjast með dæmigerðum notendaleiðum á Hegðun > Hegðunarflæði.

Hér sjáum við vinsælustu slóðir gesta. (Skýrslan getur líka hjálpað til við að skilja hvaða síður valda mestu fækkun gesta.)

Farðu í Hegðun > Atferlisflæði til að skoða dæmigerðar notendaleiðir. width=”975″ hæð=”488″ stærðir=”(hámarksbreidd: 975px) 100vw, 975px” />Fara á Hegðun > Hegðunarflæði til að skoða dæmigerða notendaleiðir. Smelltu á myndina til að stækka hana.

Til að búa til sérsniðna skýrslu skaltu fara á Sérsnið > Sérsniðnar skýrslur > Ný sérsniðin skýrsla. Gefðu skýrslunni titil - ég hef notað „Hægar síðuleiðir“ á skjámyndinni hér að neðan – og veldu sem vídd „Fyrri síðuslóð,“ „Síða“ og „Hætta síðu“. Fyrir mæligildi skaltu velja „Síðugildi“ og „Meðal. Hleðslutími síðu.”

Búðu til sérsniðnu skýrsluna á Customization > Sérsniðnar skýrslur > Ný sérsniðin skýrsla. width=”975″ hæð=”488″ stærðir=”(hámarksbreidd: 975px) 100vw, 975px” />Búðu til sérsniðna skýrslu á Sérsnið > Sérsniðnar skýrslur > Ný sérsniðin skýrsla. Smelltu á mynd til að stækka.

Við fáum skýrslu eins og þá hér að ofan (kl Hegðun > Vefhraði > Tímasetningar síðu), en þessi inniheldur fyrri síðu í dæmigerðri notendalotu.

Sérsniðna skýrslan í Google Analytics inniheldur fyrri síðu í dæmigerðri notendalotu.

Sérsniðna skýrslan í Google Analytics inniheldur fyrri síðu í dæmigerðri notendalotu. Smelltu á myndina til að stækka hana.

Næsta skref er að beita öflugu hugtaki: vísbendingar um vafra.

Ábendingar um vefvafra

„Ábendingar“ eru leiðbeiningar til vefvafra um að hlaða síðutilföng og tengla fyrirfram. Ferlið bætir síðuhraða til muna. Ekki allir vafrar styðja hverja vísbendingu. Þrjár af þeim vinsælustu eru „forhleðsla“, „forsækja“ og „forflutningur“.

Forhlaða krefst kóða í HEAD HTML skjalsins, eins og:

Forhleðsla vísbendingin er tilskipun sem neyðir vafrann til að hlaða niður tilföngum áður en hann uppgötvar það í skjalinu. Gott dæmi er leturgerð í földum CSS skrám. Í stað þess að láta vafrann hlaða niður og vinna úr CSS skránum og síðan leturgerðir, hleður forhleðslutilskipuninni niður letrinu í bakgrunni og gerir það aðgengilegt þegar þess er þörf.

Fyrir meira um forhleðslu og vafrana sem styðja hana, sjáðu færsluna frá CanIUse.com.

Forsótt krefst kóða í HEAD HTML skjalsins, svona:

Þessi vísbending gerir vafranum kleift að sækja tilföng sem gætu verið nauðsynleg þegar notandinn grípur til næstu aðgerða. Vafrinn gerir það aðeins eftir að núverandi síðu hefur verið birt að því tilskildu að það sé næg bandbreidd.

Ég mun útvíkka forsótt í þessari færslu til að flýta fyrir hægum síðum.

Frekari upplýsingar um forsækni og vafrana sem styðja hana hér.

Forflutningur áður var öflug tilskipun, en hún er nú úrelt. Það gerði kleift að forsækja tilföng á marksíðu og einnig birta þær. Það krafðist kóða eins og þennan í HEAD HTML skjalsins:

Forrendering verður of auðlindafrekt þegar, til dæmis, Chrome rekst á vísbendingu um forútgáfu á síðu og framkvæmir „No State Prefetch“ sem er svipað en keyrir ekki JavaScript eða tengda flutning.

Lærðu meira um forútgáfu og vafrana sem enn styðja hana hér.

Fast Sequence Prediction

Við getum sett inn vísbendingu handvirkt um að biðja vafrann um að forsækja hægustu komandi síður. Við vitum hvaða síður á að setja þennan hlekk frá Google Analytics gögnunum, sem lýst er hér að ofan.

Sýnisskýrslan mín benti hins vegar á um það bil 20,000 hugsanlegar raðir. Að setja vísbendingar í þær allar myndi taka helling af tíma!

Í staðinn getum við smíðað líkan með því að nota fyrri síðu og núverandi síðu sem spáir fyrir um næstu síðu sem notandinn mun líklega smella á. Þá getum við sótt það fyrirfram.

Við gætum þjálfað háþróað taugakerfi eins og ég útskýrði í síðustu grein minni. En hraðari og einfaldari aðferð er Compact Prediction Tree, hugmynd sem þróuð var af þremur tölvunarfræðiprófessorum. Úr blaði þeirra:

Að gefnu mengi þjálfunarraða felst vandamálið við að spá fyrir um röð í því að finna næsta þátt markraðar með því að fylgjast aðeins með fyrri atriðum hennar. Fjöldi umsókna sem tengjast þessu vandamáli er mikill. Það felur í sér forrit eins og forsöfnun vefsíðu, ráðleggingar um neytendavöru, veðurspá og spá um hlutabréfamarkað.

Til að útfæra mun ég nota JavaScript úr Github geymslu.

Það er tiltölulega auðvelt. Settu inn þjálfunargögn, tilgreindu markmið fyrir spá og fáðu bestu leiki til baka.

Dæmi um þjálfunargögn úr sérsniðnu Google Analytics skýrslunni okkar myndi líta svona út:

láta gögn = ['/fyrri-síðu1', '/núverandi-síða1', '/næsta-hæg-síða1'], ['/fyrri-síðu2', '/núverandi-síða2', '/næsta-hægt- page2'], ['/previous-page3', '/current-page3', '/next-slow-page1'], ['/previous-page4', '/current-page1', '/next-slow- page2'], ['/previous-page2', '/current-page3', '/next-slow-page3'], ['/previous-page3', '/current-page2', '/next-slow- page4'], ['/previous-page4', '/current-page1', '/next-slow-page1'], ]

Og hér er hvernig við myndum prófa marksíðu:

láta target = [ ['/fyrri-síðu2', '/núverandi-síðu3'] ];

Og að lokum myndi spá vera:

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

Setja það saman

Til að hafa hlutina einfalda ættum við að setja JavaScript skrá á allar síður (eða síðurnar sem leiða til þeirra sem við viljum bæta). Forskriftin myndi fá núverandi síðutilvísunarslóð, slóð núverandi vefslóðar og spá fyrir um næstu síðu sem líklegast er að notandinn smelli á.

Síðan setjum við einfaldlega inn eina eða fleiri vafravísbendingar með spánum.

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

Dæmi síða mín á Github er með kóða sem gerir það.

Þessi lína flytur inn bókasafnsskrána.

script src="index.js"

Ég lenti í vandræðum með upprunalega kóðann í geymslunni, en þökk sé David Sottimano, stafræna markaðsráðgjafa, gat ég breytt skrám til að fá þær til að virka sem eitt handrit. Hér er index.js skráin hans.

Ég ætti líka að þakka Michelle Robbins, markaðstæknifræðingi og verkfræðingi, sem kynnti mig fyrir Compact Prediction Trees í nýlegu vefnámskeiði.

tengdar greinar

0 Comments
Inline endurgjöf
Skoða allar athugasemdir
Til baka efst á hnappinn