Web Design

Få fart på de tregeste sidene dine med forhåndshenting

Å forbedre hastigheten på e-handelssiden din bør være en prioritet for 2020. Selv om ytelsesforbedringer kan være tidkrevende og kostbare, finnes det raske løsninger som utgjør en stor forskjell.

Sidehastighet er viktig, spesielt siden Google Chrome-teamet planlegger å plage nettsteder med sakte lasting i år som beskrevet i november 2019 på Chromium-bloggen sin:

I fremtiden kan Chrome identifisere nettsteder som vanligvis lastes inn raskt eller sakte for brukere med tydelig merke. Dette kan ha en rekke former, og vi planlegger å eksperimentere med forskjellige alternativer for å finne ut hvilke som gir mest verdi for brukerne våre.

Merking er ment å identifisere når nettsteder er forfattet på en måte som gjør dem trege generelt, og ser på historiske lastforsinkelser. Videre kan vi utvide dette til å omfatte identifisering av når en side sannsynligvis vil være treg for en bruker basert på deres enhet og nettverksforhold.

Google sier at de vil identifisere nettsteder med sakte lasting. Kilde: Chromium Blog.

Google sier at de vil identifisere nettsteder med sakte lasting. Kilde: Chromium Blog.

I tidligere artikler har jeg tatt opp ideer for å forbedre ytelsen, for eksempel HTML-bufring og isolering av sakte lastingsressurser. I dette innlegget vil jeg forklare hvordan du bestemmer de tregeste sidene dine og bruker en enkel løsning for å øke hastigheten på dem.

Google Analytics rapporterer de tregeste sidene på et nettsted og hvordan brukere kommer til dem. Vi kan instruere nettlesere til å "forhåndshente" slike sider slik at når brukere klikker på dem, laster de veldig raskt.

Her er prosessen.

Langsomme sider

Gå til Google Analytics Atferd > Nettstedshastighet > Sidetiming. Velg datavisningen (rutenett) og sorter kolonnene etter "Gj.sn. Sideinnlastingstid."

To view slow-loading pages in Google Analytics, go to Behavior > Site Speed > Page Timings.” width=”975″ height=”505″  sizes=”(max-width: 975px) 100vw, 975px” /></p><p id=For å se sider som laster sakte i Google Analytics, gå til Atferd > Nettstedhastighet > Sidetiming. Klikk på bildet for å forstørre.

Dette vil vise de tregeste sidene først. Den siste kolonnen, «Sideverdi», normaliserer inntektene som tilskrives hver side, forutsatt at forbedret netthandel er aktivert. Det er en god beregning for selgere å prioritere sidene de skal fokusere på.

Deretter må vi vite den interne banen som fører besøkende til de tregeste sidene. Vi lager en tilpasset rapport for dette. Men først, la oss observere typiske brukerstier ved Atferd > Atferdsflyt.

Her kan vi se de mest populære stiene til besøkende. (Rapporten kan også hjelpe deg med å forstå hvilke sider som gir de største frafallet av besøkende.)

Go to Behavior > Behavior Flow to view typical user paths.” width=”975″ height=”488″  sizes=”(max-width: 975px) 100vw, 975px” /></p><p id=Gå til Atferd > Atferdsflyt for å se typiske brukerstier. Klikk på bildet for å forstørre.

For å opprette den egendefinerte rapporten, gå til Tilpasning > Egendefinerte rapporter > Ny tilpasset rapport. Tildel en tittel til rapporten - jeg har brukt "Slow Page Paths" i skjermbildet nedenfor - og velg som dimensjoner "Forrige sidebane", "Side" og "Avslutt side." For Beregninger, velg «Sideverdi» og «Gj.sn. Sideinnlastingstid."

Create the custom report at Customization > Custom Reports > New Custom Report.” width=”975″ height=”488″  sizes=”(max-width: 975px) 100vw, 975px” /></p><p id=Opprett den tilpassede rapporten på Tilpasning > Egendefinerte rapporter > Ny tilpasset rapport. Klikk på bildet for å forstørre.

Vi får en rapport som den ovenfor (kl Atferd > Nettstedhastighet > Sidetiming), men denne inkluderer forrige side i en typisk brukerøkt.

Den tilpassede rapporten i Google Analytics inkluderer forrige side i en typisk brukerøkt.

Den tilpassede rapporten i Google Analytics inkluderer forrige side i en typisk brukerøkt. Klikk på bildet for å forstørre.

Det neste trinnet er å bruke et kraftig konsept: nettlesertips.

Nettlesertips

"Tips" er instruksjoner til nettlesere for å laste inn sideressurser og lenker på forhånd. Prosessen forbedrer sidehastigheten betraktelig. Ikke alle nettlesere støtter hvert hint. Tre av de mest populære er "forhåndsinnlasting", "forhåndshenting" og "forhåndsgjengivelse."

Forhåndslasting krever kode i HEAD av HTML-dokumentet, for eksempel:

Forhåndsinnlastingstipset er et direktiv som tvinger nettleseren til å laste ned en ressurs før den oppdager den i dokumentet. Et godt eksempel er en font i skjulte CSS-filer. I stedet for å la nettleseren laste ned og behandle CSS-filene og deretter fontene, laster forhåndslastingsdirektivet ned skriften i bakgrunnen, og gjør den tilgjengelig når den er nødvendig.

For mer om forhåndsinnlasting og nettleserne som støtter det, se innlegget fra CanIUse.com.

Forhåndshenting krever en kode i HEAD av HTML-dokumentet, slik:

Dette hintet gjør det mulig for nettleseren å hente ressurser som kan være nødvendig når brukeren tar neste handling. Nettleseren vil gjøre det bare etter å ha gjengitt gjeldende side forutsatt at det er tilstrekkelig båndbredde.

Jeg vil utvide på forhåndshenting i dette innlegget for å øke hastigheten på trege sider.

Lær mer om forhåndshenting og nettleserne som støtter det her.

Forhåndsgjengivelse pleide å være et kraftig direktiv, men det er nå avviklet. Det gjorde det mulig å forhåndshente ressurser på en målside og også gjengi dem. Det krevde kode som dette i HEAD av HTML-dokumentet:

Forhåndsgjengivelse blir for ressurskrevende når for eksempel Chrome møter et forhåndsgjengivelseshint på en side og utfører en «No State Prefetch», som ligner, men ikke kjører JavaScript eller relatert gjengivelse.

Lær mer om forhåndsgjengivelse og nettleserne som fortsatt støtter det her.

Rask sekvensprediksjon

Vi kan manuelt sette inn et hint for å be nettleseren om å forhåndshente de tregeste kommende sidene. Vi vet hvilke sider vi skal plassere denne koblingen fra Google Analytics-dataene, beskrevet ovenfor.

Min prøverapport identifiserte imidlertid omtrent 20,000 XNUMX potensielle sekvenser. Å sette inn hintene i dem alle ville ta massevis av tid!

I stedet kan vi bygge en modell ved å bruke forrige side og gjeldende side som forutsier neste side brukeren sannsynligvis vil klikke. Da kan vi forhåndshente den.

Vi kunne trene opp et sofistikert nevralt nettverk, som jeg forklarte i min forrige artikkel. Men en raskere og enklere metode er et Compact Prediction Tree, et konsept utviklet av tre informatikkprofessorer. Fra papiret deres:

Gitt et sett med treningssekvenser, består problemet med sekvensprediksjon i å finne det neste elementet i en målsekvens ved kun å observere dens tidligere elementer. Antallet søknader knyttet til dette problemet er omfattende. Det inkluderer applikasjoner som forhåndshenting av nettsider, anbefaling av forbrukerprodukter, værmelding og aksjemarkedsprognose.

For å implementere, vil jeg bruke JavaScript fra et Github-depot.

Det er relativt enkelt. Sett inn treningsdata, spesifiser et mål for prediksjon, og få tilbake de beste kampene.

Et eksempel på opplæringsdata fra vår tilpassede Google Analytics-rapport vil se slik ut:

la data = [ ['/previous-page1', '/current-page1', '/next-slow-page1'], ['/previous-page2', '/current-page2', '/next-slow- side2'], ['/previous-page3', '/current-page3', '/next-slow-page1'], ['/previous-page4', '/current-page1', '/next-slow- side2'], ['/previous-page2', '/current-page3', '/next-slow-page3'], ['/previous-page3', '/current-page2', '/next-slow- side4'], ['/previous-page4', '/current-page1', '/next-slow-page1'], ]

Og her er hvordan vi vil teste en målside:

la target = [ ['/forrige-side2', '/current-page3'] ];

Og til slutt vil en spådom være:

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

Sette det sammen

For å gjøre ting enkelt bør vi inkludere en JavaScript-fil på alle sidene (eller sidene som fører til de vi ønsker å forbedre). Skriptet vil hente gjeldende sidehenvisningsbane, banen til gjeldende URL, og forutsi neste side det er mest sannsynlig at brukeren klikker på.

Så setter vi bare inn ett eller flere nettleserhint med spådommene.

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

Eksempelsiden min på Github har kode som gjør det.

Denne linjen importerer bibliotekfilen.

script src="index.js"

Jeg fikk problemer med den originale koden i depotet, men takket være David Sottimano, en digital markedsføringskonsulent, klarte jeg å endre filene for å få dem til å fungere som et enkelt skript. Her er index.js-filen hans.

Jeg bør også takke Michelle Robbins, en markedsføringsteknolog og ingeniør, som introduserte meg for Compact Prediction Trees i et nylig webinar.

Relaterte artikler

0 kommentarer
Inline tilbakemeldinger
Se alle kommentarer
Tilbake til toppen-knappen