Accelereu les vostres pàgines més lentes amb la recuperació prèvia

Millorar la velocitat del vostre lloc de comerç electrònic hauria de ser una prioritat per al 2020. Tot i que les millores de rendiment poden costar molt de temps i ser costoses, hi ha solucions ràpides que marquen una gran diferència.

La velocitat de la pàgina és important, sobretot perquè l'equip de Google Chrome té previst fer vergonya els llocs de càrrega lenta aquest any, tal com es descriu el novembre de 2019 al seu bloc de Chromium:

En el futur, Chrome pot identificar llocs que normalment es carreguen ràpidament o lentament per als usuaris amb insígnies clares. Això pot prendre diverses formes i tenim previst experimentar amb diferents opcions per determinar quina aporta més valor als nostres usuaris.

La insígnia té com a objectiu identificar quan els llocs s'han creat d'una manera que els fa lents en general, tenint en compte les latències de càrrega històriques. Més endavant, podem ampliar això per incloure la identificació de quan és probable que una pàgina sigui lenta per a un usuari en funció del seu dispositiu i de les condicions de la xarxa.

Google diu que identificarà els llocs de càrrega lenta. Font: Chromium Blog.

En articles anteriors, he tractat idees per millorar el rendiment, com ara la memòria cau HTML i aïllar els recursos de càrrega lenta. En aquesta publicació, explicaré com determinar les pàgines més lentes i aplicar una solució senzilla per accelerar-les.

Google Analytics informa de les pàgines més lentes d'un lloc i de com els usuaris hi arriben. Podem indicar als navegadors web que "precarreguin" aquestes pàgines perquè quan els usuaris hi facin clic, es carreguen molt ràpidament.

Aquí teniu el procés.

Pàgines lentes

A Google Analytics, vés a Comportament > Velocitat del lloc > Temps de pàgina. Seleccioneu la visualització de dades (quadrícula) i ordeneu les columnes per "Mitj. Temps de càrrega de la pàgina."

Per veure pàgines de càrrega lenta a Google Analytics, aneu a Comportament > Velocitat del lloc > Temps de pàgina. Feu clic a la imatge per ampliar-la.

Això mostrarà primer les pàgines més lentes. L'última columna, "Valor de la pàgina", normalitza els ingressos atribuïts a cada pàgina suposant que el comerç electrònic millorat està activat. És una bona mètrica perquè els comerciants prioritzin les pàgines a les quals es centren.

A continuació, hem de conèixer el camí intern que condueix els visitants a les pàgines més lentes. Crearem un informe personalitzat per a això. Però, primer, observem els camins típics dels usuaris a Comportament > Flux de comportament.

Aquí podem veure els camins més populars dels visitants. (L'informe també pot ajudar a entendre quines pàgines produeixen la major baixada de visitants.)

Anar a Comportament > Flux de comportament per veure les rutes d'usuari habituals. Feu clic a la imatge per ampliar-la.

Per crear l'informe personalitzat, aneu a Personalització > Informes personalitzats > Nou informe personalitzat. Assigna un títol a l'informe (he utilitzat "Camins de pàgina lents" a la captura de pantalla següent) i selecciona com a dimensions "Camí de la pàgina anterior", "Pàgina" i "Pàgina de sortida". Per a les mètriques, seleccioneu "Valor de la pàgina" i "Mitj. Temps de càrrega de la pàgina."

Creeu l'informe personalitzat a Personalització > Informes personalitzats > Nou informe personalitzat. Feu clic a la imatge per ampliar-la.

Obtenim un informe com el de dalt (a Comportament > Velocitat del lloc > Temps de pàgina), però aquesta inclou la pàgina anterior en una sessió típica d'usuari.

L'informe personalitzat de Google Analytics inclou la pàgina anterior en una sessió d'usuari típica. Feu clic a la imatge per ampliar-la.

El següent pas és aplicar un concepte potent: les pistes del navegador web.

Consells del navegador web

Els "consells" són instruccions per als navegadors web per carregar recursos i enllaços de la pàgina amb antelació. El procés millora molt la velocitat de la pàgina. No tots els navegadors admeten totes les pistes. Tres dels més populars són la "càrrega prèvia", la "obtenció prèvia" i la "prestació prèvia".

Precarrega requereix codi al CAP del document HTML, com ara:

La pista de càrrega prèvia és una directiva que obliga el navegador a descarregar un recurs abans que el descobreixi al document. Un bon exemple és un tipus de lletra en fitxers CSS ocults. En lloc de fer que el navegador descarregui i processi els fitxers CSS i després els tipus de lletra, la directiva de càrrega prèvia descarrega el tipus de lletra en segon pla i el fa disponible quan sigui necessari.

Per obtenir més informació sobre la càrrega prèvia i els navegadors que la admeten, consulteu la publicació de CanIUse.com.

Recollida prèvia requereix un codi al CAP del document HTML, com aquest:

Aquesta pista permet que el navegador web obtingui els recursos que poden ser necessaris quan l'usuari faci la següent acció. El navegador ho farà només després de representar la pàgina actual sempre que hi hagi prou amplada de banda.

Ampliaré la recuperació prèvia en aquesta publicació per accelerar les pàgines lentes.

Obteniu més informació sobre la recuperació prèvia i els navegadors que l'admeten aquí.

Prerendering abans era una directiva potent, però ara està obsoleta. Va permetre la recuperació prèvia de recursos en una pàgina de destinació i, també, renderitzar-los. Necessitava un codi com aquest al CAP del document HTML:

La renderització prèvia es fa massa intensiva en recursos quan, per exemple, Chrome troba una pista de renderització prèvia a una pàgina i realitza una "Captura prèvia sense estat", que és similar però no executa JavaScript ni la representació relacionada.

Obteniu més informació sobre la renderització prèvia i els navegadors que encara ho admeten aquí.

Predicció de seqüències ràpides

Podem inserir manualment una pista per demanar-li al navegador que precarregui les properes pàgines més lentes. Sabem quines pàgines col·locar aquest enllaç a partir de les dades de Google Analytics, descrites anteriorment.

El meu informe de mostra, però, va identificar aproximadament 20,000 seqüències potencials. Inserir les pistes a tots ells trigaria molt de temps!

En comptes d'això, podem crear un model utilitzant la pàgina anterior i la pàgina actual que prediu la pàgina següent que l'usuari probablement farà clic. Llavors el podem recuperar prèviament.

Podríem entrenar una xarxa neuronal sofisticada, tal com vaig explicar al meu darrer article. Però un mètode més ràpid i senzill és un arbre de predicció compacte, un concepte desenvolupat per tres professors d'informàtica. Del seu paper:

Donat un conjunt de seqüències d'entrenament, el problema de la predicció de seqüències consisteix a trobar el següent element d'una seqüència objectiu només observant els seus ítems anteriors. El nombre d'aplicacions associades a aquest problema és extens. Inclou aplicacions com ara la recuperació prèvia de pàgines web, la recomanació de productes de consum, la predicció del temps i la predicció de la borsa.

Per implementar-lo, faré servir JavaScript d'un dipòsit de Github.

És relativament fàcil. Inseriu les dades d'entrenament, especifiqueu un objectiu per a la predicció i recupereu els millors partits.

Un exemple de dades d'entrenament del nostre informe personalitzat de Google Analytics seria el següent:

deixar dades = [ ['/previous-page1', '/current-page1', '/next-slow-page1'], ['/previous-page2', '/current-page2', '/next-slow- pàgina2'], ['/pàgina-anterior3', '/pàgina-actual 3', '/pàgina-següent-lenta-1'], ['/pàgina-anterior-4', '/pàgina-actual-1', '/següent-lenta- pàgina2'], ['/pàgina-anterior2', '/pàgina-actual3', '/pàgina-següent-lenta3'], ['/pàgina-anterior-3', '/pàgina-actual-2', '/següent-lenta- pàgina4'], ['/pàgina-anterior4', '/pàgina-actual1', '/pàgina-següent-lenta1'], ]

I així és com provaríem una pàgina de destinació:

let target = [['/previous-page2', '/current-page3'] ];

I finalment, una predicció seria:

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

Putting It Together

Per simplificar les coses, hauríem d'incloure un fitxer JavaScript a totes les pàgines (o les pàgines que condueixen a les que volem millorar). L'script obtindria la ruta de referència de la pàgina actual, la ruta de l'URL actual i prediria la pàgina següent a la qual l'usuari té més probabilitats de fer clic.

A continuació, simplement inserim una o més pistes de navegador amb les prediccions.

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

La meva pàgina d'exemple a Github té codi que ho fa.

Aquesta línia importa el fitxer de la biblioteca.

script src="index.js"

Vaig trobar problemes amb el codi original al repositori, però gràcies a David Sottimano, un consultor de màrqueting digital, vaig poder modificar els fitxers per fer-los funcionar com un únic script. Aquí teniu el seu fitxer index.js.

També hauria d'agrair a Michelle Robbins, tecnòloga i enginyera de màrqueting, que em va presentar a Compact Prediction Trees en un seminari web recent.