Web Diseinua

Bizkortu zure orririk motelenak aurrez eskuratzearekin

Zure merkataritza elektronikoko gunearen abiadura hobetzea lehentasuna izan beharko litzateke 2020rako. Errendimenduaren hobekuntzak denbora asko eta garestia izan daitezkeen arren, badaude diferentzia handia egiten duten konponketa azkarrak.

Orrialdearen abiadura garrantzitsua da, batez ere Google Chrome taldeak aurten kargatze geldoko guneak lotsatzeko asmoa duelako 2019ko azaroan bere Chromium Blogean azaldu bezala:

Etorkizunean, Chrome-k normalean azkar edo motel kargatzen diren guneak identifikatu ditzake bereizgarri argia duten erabiltzaileentzat. Honek hainbat forma izan ditzake eta aukera ezberdinekin esperimentatzeko asmoa dugu, gure erabiltzaileei balio handiena zeinek ematen dien zehazteko.

Bading-ek webguneak noiz sortzen diren identifikatzea da, oro har, moteltzen diren moduan, karga-latentzia historikoei erreparatuta. Aurrerago, hau zabaldu dezakegu erabiltzaile batentzako orri bat motela noiz izango den identifikatzea bere gailuaren eta sarearen baldintzen arabera.

Google-k dio karga moteleko guneak identifikatuko dituela. Iturria: Chromium Bloga.

Google-k dio karga moteleko guneak identifikatuko dituela. Iturria: Chromium Bloga.

Aurreko artikuluetan, errendimendua hobetzeko ideiak jorratu ditut, hala nola HTML cachea eta karga moteleko baliabideak isolatzea. Argitalpen honetan, zure orrialde motelenak nola zehaztu eta horiek bizkortzeko konponketa sinple bat nola aplikatu azalduko dut.

Google Analytics-ek gune bateko orrialde motelenak eta erabiltzaileak haietara nola iristen diren jakinarazten du. Web arakatzaileei agindu diezaiekegu horrelako orriak "aurrez eskura ditzaten", erabiltzaileek haien gainean klik egiten dutenean oso azkar kargatu daitezen.

Hona hemen prozesua.

Orrialde motelak

Google Analytics-en, joan Portaera > Gunearen abiadura > Orrialdearen denborak. Hautatu datuen (sareta) ikuspegia eta ordenatu zutabeak "Baz. Orria kargatzeko denbora".

Google Analytics-en karga moteleko orriak ikusteko, joan Portaera > Gunearen abiadura > Orrialdeen denborak atalera. width=”975″ height=”505″ tamainak=”(gehienezko zabalera: 975px) 100vw, 975px” />Google Analytics-en karga moteleko orriak ikusteko, joan hona Portaera > Gunearen abiadura > Orrialdearen denborak. Egin klik irudian handitzeko.

Honek orrialde motelenak erakutsiko ditu lehenik. Azken zutabeak, "Orriaren balioa", orrialde bakoitzari egotzitako diru-sarrerak normalizatzen ditu, merkataritza elektroniko hobetua gaituta dagoela suposatuz. Merkatarientzako metrika ona da bideratu beharreko orrialdeei lehentasuna emateko.

Jarraian, bisitariak orri motelenetara eramaten dituen barne-bidea ezagutu behar dugu. Txosten pertsonalizatu bat sortuko dugu horretarako. Baina, lehenik eta behin, beha ditzagun erabiltzaileen ohiko bideak at Portaera > Portaera-fluxua.

Hemen bisitarien biderik ezagunenak ikus ditzakegu. (Txostenak bisitarien jaitsiera handiena zein orrialdek sortzen duten ulertzen ere lagun dezake.)

Joan Portaera > Jokabide Fluxua erabiltzailearen ohiko bideak ikusteko. width=”975″ height=”488″ tamainak=”(gehienezko zabalera: 975px) 100vw, 975px” />Joan Portaera > Portaera-fluxua erabiltzaileen ohiko bideak ikusteko. Egin klik irudian handitzeko.

Txosten pertsonalizatua sortzeko, joan hona Pertsonalizazioa > Txosten pertsonalizatuak > Txosten pertsonalizatu berria. Esleitu izenburu bat txostenari — beheko pantaila-argazkian "Orrialde motelak" erabili dut, eta dimentsio gisa hautatu "Aurreko orriaren bidea", "Orria" eta "Irten orria". Neurrietarako, hautatu "Orrialdearen balioa" eta "Batez. Orria kargatzeko denbora".

Sortu txosten pertsonalizatua Pertsonalizazioa > Txosten pertsonalizatuak > Txosten pertsonalizatu berria atalean. width=”975″ height=”488″ tamainak=”(gehienezko zabalera: 975px) 100vw, 975px” />Sortu txosten pertsonalizatua helbidean Pertsonalizazioa > Txosten pertsonalizatuak > Txosten pertsonalizatu berria. Egin klik irudian handitzeko.

Goikoaren moduko txosten bat jasotzen dugu (at Portaera > Gunearen abiadura > Orrialdearen denborak), baina honek aurreko orria sartzen du erabiltzaileen ohiko saio batean.

Google Analytics-en txosten pertsonalizatuak aurreko orria barne hartzen du erabiltzailearen ohiko saio batean.

Google Analytics-en txosten pertsonalizatuak aurreko orria barne hartzen du erabiltzailearen ohiko saio batean. Egin klik irudian handitzeko.

Hurrengo urratsa kontzeptu indartsu bat aplikatzea da: web arakatzailearen aholkuak.

Web arakatzailearen aholkuak

"Aholkuak" web-arakatzaileentzako argibideak dira orrialdeen baliabideak eta estekak aldez aurretik kargatzeko. Prozesuak orrialdearen abiadura asko hobetzen du. Arakatzaile guztiek ez dute iradokizun guztiak onartzen. Ezagunenetariko hiru dira "aurrekargatzea", "aurretik ateratzea" eta "aurreerrendatzea".

Aurrez kargatzea HTML dokumentuaren HEAD-eko kodea behar du, hala nola:

Aurrekargatzeko aholkua arakatzailea dokumentuan aurkitu aurretik baliabide bat deskargatzera behartzen duen zuzentaraua da. Adibide on bat ezkutuko CSS fitxategietako letra-tipo bat da. Arakatzaileak CSS fitxategiak eta ondoren letra-tipoak deskargatu eta prozesatu beharrean, aurrez kargatzeko zuzentarauak letra-tipoa atzeko planoan deskargatzen du, beharrezkoa denean eskuragarri jarriz.

Aurrekargatzeari eta hori onartzen duten arakatzaileei buruzko informazio gehiago lortzeko, ikusi CanIUse.com-eko argitalpena.

Aurretik ateratzea HTML dokumentuaren HEAD-eko kode bat behar du, honela:

Aholku honek web arakatzaileari erabiltzaileak hurrengo ekintza egiten duenean beharrezkoak izan daitezkeen baliabideak eskura ditzake. Arakatzaileak uneko orria errendatu ondoren bakarrik egingo du banda-zabalera nahikoa bada.

Aurre-eskuratzeari buruz zabalduko dut argitalpen honetan orrialde motelak bizkortzeko.

Lortu informazio gehiago aldez aurretik eskuratzeari eta hori onartzen duten arakatzaileei buruz hemen.

Aurrez errendatzea Zuzentarau indartsua zen lehen, baina gaur egun zaharkituta dago. Xede-orri batean baliabideak aurrez eskuratzea eta, gainera, errendatzea ahalbidetzen zuen. Honelako kodea behar zuen HTML dokumentuaren BURUAN:

Aurre-errendatzeak baliabide handiegia bihurtzen du, adibidez, Chrome-k orrialde batean aurre-errendatze-iradokizun bat aurkitzen duenean eta "Ez da egoeraren aurre-bilketa" bat egiten duenean, antzekoa dena baina JavaScript edo erlazionatutako errendaketa exekutatzen ez duenean.

Lortu informazio gehiago aurrerrendatzeari eta oraindik onartzen duten arakatzaileei buruz hemen.

Sekuentzia azkarraren iragarpena

Eskuz txerta dezakegu iradokizun bat arakatzaileari eskatzeko datozen orrialde motelenak aurrez eskura ditzan. Badakigu zein orrialde jarri behar dugun esteka hori goian deskribatutako Google Analytics datuetatik.

Nire lagin-txostenak, ordea, 20,000 sekuentzia potentzial identifikatu zituen. Guztietan aholkuak txertatzeak denbora asko beharko luke!

Horren ordez, eredu bat eraiki dezakegu aurreko orrialdea eta erabiltzaileak litekeena den hurrengo orrialdea iragartzen duen uneko orrialdea erabiliz. Ondoren, aurrez jaso dezakegu.

Neurona-sare sofistikatu bat entrena genezake, nire azken artikuluan azaldu nuen bezala. Baina metodo azkarragoa eta sinpleagoa Iragarpen Zuhaitz trinkoa da, hiru informatika irakaslek garatutako kontzeptua. Euren paperetik:

Entrenamendu-sekuentzia multzo bat emanda, sekuentzia iragarpenaren arazoa helburu-sekuentzia baten hurrengo elementua aurkitzean datza, aurreko elementuak soilik behatuz. Arazo honekin lotutako aplikazio kopurua zabala da. Web-orrialdeen aurrezaurrea, kontsumo produktuen gomendioa, eguraldiaren iragarpena eta burtsaren iragarpena bezalako aplikazioak barne hartzen ditu.

Ezartzeko, Github biltegi bateko JavaScript erabiliko dut.

Nahiko erraza da. Txertatu entrenamendu-datuak, zehaztu helburu bat iragartzeko eta berreskuratu partida onenak.

Gure Google Analytics-en txosten pertsonalizatuko prestakuntza-datuen adibide bat honakoa litzateke:

utzi datuak = [ ['/previous-page1', '/uneko-orria1', '/next-slow-page1'], ['/previous-page2', '/uneko-orria2', '/next-slow- page2'], ['/previous-page3', '/uneko-orria3', '/next-slow-page1'], ['/previous-page4', '/uneko-orria1', '/next-slow- page2'], ['/previous-page2', '/uneko-orria3', '/next-slow-page3'], ['/previous-page3', '/uneko-orria2', '/next-slow- page4'], ['/previous-page4', '/uneko-orria1', '/next-slow-page1'], ]

Eta hona hemen helburu-orri bat nola probatuko genukeen:

let target = [['/previous-page2', '/uneko-orria3'] ];

Eta azkenik, iragarpena hau izango litzateke:

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

Elkarrekin jarriz

Gauza errazak izateko, JavaScript fitxategi bat sartu beharko genuke orrialde guztietan (edo hobetu nahi ditugun orrietara doazen orrialdeetan). Scriptak uneko orrialdearen erreferentziaren bidea, uneko URLaren bidea lortuko luke eta erabiltzaileak litekeena den hurrengo orrialdea iragartzen du.

Ondoren, arakatzailearen aholku bat edo gehiago txertatuko ditugu iragarpenekin.

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

Github-eko nire adibide-orriak hori egiten duen kodea du.

Lerro honek liburutegiko fitxategia inportatzen du.

script src="index.js"

Biltegian jatorrizko kodearekin arazoak aurkitu nituen, baina David Sottimano marketin digitaleko aholkulariari esker, fitxategiak aldatu ahal izan nituen script bakar gisa funtzionatzeko. Hona hemen bere index.js fitxategia.

Eskerrak eman behar nizkioke Michelle Robbins, marketin teknologo eta ingeniariari, azken webinar batean Compact Prediction Trees-ak aurkeztu ninduenak.

Gaiarekin lotutako artikuluak

0 Comments
Lineako erantzunak
Ikusi iruzkin guztiak
Itzuli gora botoia