Web Design

Versnel uw langzaamste pagina's met Prefetching

Het verbeteren van de snelheid van uw e-commercesite zou een prioriteit moeten zijn voor 2020. Hoewel prestatieverbeteringen tijdrovend en duur kunnen zijn, zijn er snelle oplossingen die een groot verschil maken.

Paginasnelheid is belangrijk, vooral omdat het Google Chrome-team van plan is dit jaar langzaam ladende sites in verlegenheid te brengen, zoals beschreven in november 2019 op zijn Chromium-blog:

In de toekomst kan Chrome sites identificeren die doorgaans snel of langzaam laden voor gebruikers met duidelijke badges. Dit kan verschillende vormen aannemen en we zijn van plan om met verschillende opties te experimenteren om te bepalen welke de meeste waarde biedt voor onze gebruikers.

Badges zijn bedoeld om te identificeren wanneer sites zijn geschreven op een manier die ze over het algemeen traag maakt, waarbij wordt gekeken naar historische laadlatenties. Verderop kunnen we dit uitbreiden met het identificeren van wanneer een pagina waarschijnlijk traag is voor een gebruiker op basis van hun apparaat en netwerkomstandigheden.

Google zegt dat het langzaam ladende sites zal identificeren. Bron: Chromium-blog.

Google zegt dat het langzaam ladende sites zal identificeren. Bron: Chromium-blog.

In eerdere artikelen heb ik ideeën behandeld om de prestaties te verbeteren, zoals HTML-caching en het isoleren van traag ladende bronnen. In dit bericht leg ik uit hoe u uw langzaamste pagina's kunt bepalen en hoe u een eenvoudige oplossing kunt toepassen om ze te versnellen.

Google Analytics rapporteert de langzaamste pagina's op een site en hoe gebruikers ze bereiken. We kunnen webbrowsers instrueren om dergelijke pagina's te 'prefetchen', zodat wanneer gebruikers erop klikken, ze heel snel laden.

Hier is het proces.

Trage pagina's

Ga in Google Analytics naar Gedrag > Sitesnelheid > Paginatiming. Selecteer de gegevensweergave (raster) en sorteer de kolommen op "Gem. Laadtijd van pagina.”

Om langzaam ladende pagina's in Google Analytics te bekijken, ga je naar Gedrag > Sitesnelheid > Paginatiming.' breedte = "975" hoogte = "505" maten = "(max-breedte: 975px) 100vw, 975px" />Om langzaam ladende pagina's in Google Analytics te bekijken, gaat u naar Gedrag > Sitesnelheid > Paginatiming. Klik op de afbeelding om te vergroten.

Hierdoor worden de langzaamste pagina's als eerste weergegeven. De laatste kolom, 'Paginawaarde', normaliseert de inkomsten die aan elke pagina worden toegeschreven, ervan uitgaande dat verbeterde e-commerce is ingeschakeld. Het is een goede maatstaf voor verkopers om prioriteit te geven aan de pagina's waarop ze zich moeten concentreren.

Vervolgens moeten we het interne pad kennen dat bezoekers naar de langzaamste pagina's leidt. Hiervoor maken we een rapport op maat. Maar laten we eerst eens kijken naar typische gebruikerspaden op Gedrag > Gedragsstroom.

Hier kunnen we de meest populaire paden van bezoekers zien. (Het rapport kan ook helpen te begrijpen welke pagina's de grootste bezoekersuitval veroorzaken.)

Ga naar Gedrag > Gedragsstroom om typische gebruikerspaden te bekijken.” breedte = "975" hoogte = "488" maten = "(max-breedte: 975px) 100vw, 975px" />Ga naar Gedrag > Gedragsstroom om typische gebruikerspaden te bekijken. Klik op de afbeelding om te vergroten.

Om het aangepaste rapport te maken, gaat u naar Aanpassing > Aangepaste rapporten > Nieuw aangepast rapport. Wijs een titel toe aan het rapport - ik heb "Langzame paginapaden" gebruikt in de onderstaande schermafbeelding - en selecteer als Dimensies "Vorige paginapad", "Pagina" en "Pagina afsluiten". Selecteer voor metrische gegevens "Paginawaarde" en "Gem. Laadtijd van pagina.”

Maak het aangepaste rapport bij Customization > Custom Reports > New Custom Report.” breedte = "975" hoogte = "488" maten = "(max-breedte: 975px) 100vw, 975px" />Maak het aangepaste rapport op Aanpassing > Aangepaste rapporten > Nieuw aangepast rapport. Klik op afbeelding om te vergroten.

We krijgen een rapport zoals hierboven (at Gedrag > Sitesnelheid > Paginatiming), maar deze bevat de vorige pagina in een typische gebruikerssessie.

Het aangepaste rapport in Google Analytics bevat de vorige pagina in een typische gebruikerssessie.

Het aangepaste rapport in Google Analytics bevat de vorige pagina in een typische gebruikerssessie. Klik op de afbeelding om te vergroten.

De volgende stap is het toepassen van een krachtig concept: webbrowserhints.

Webbrowsertips

"Hints" zijn instructies voor webbrowsers om paginabronnen en links van tevoren te laden. Het proces verbetert de paginasnelheid aanzienlijk. Niet elke browser ondersteunt elke hint. Drie van de meest populaire zijn 'preloading', 'prefetching' en 'prerendering'.

Vooraf laden vereist code in de HEAD van het HTML-document, zoals:

De hint voor het vooraf laden is een instructie die de browser dwingt een bron te downloaden voordat deze deze in het document ontdekt. Een goed voorbeeld is een lettertype in verborgen CSS-bestanden. In plaats van dat de browser de CSS-bestanden en vervolgens de lettertypen downloadt en verwerkt, downloadt de preloading-richtlijn het lettertype op de achtergrond, zodat het beschikbaar is wanneer het nodig is.

Zie het bericht van CanIUse.com voor meer informatie over voorladen en de browsers die dit ondersteunen.

Vooraf ophalen vereist een code in de HEAD van het HTML-document, zoals deze:

Met deze hint kan de webbrowser bronnen ophalen die nodig kunnen zijn wanneer de gebruiker de volgende actie onderneemt. De browser zal dit alleen doen nadat de huidige pagina is weergegeven, mits er voldoende bandbreedte is.

Ik zal in dit bericht ingaan op prefetching om langzame pagina's te versnellen.

Lees hier meer over prefetching en de browsers die dit ondersteunen.

Pre-rendering was een krachtige richtlijn, maar is nu verouderd. Het maakte het mogelijk om bronnen op een doelpagina vooraf op te halen en ze ook weer te geven. Het vereiste code zoals deze in de HEAD van het HTML-document:

Pre-rendering wordt te arbeidsintensief wanneer Chrome bijvoorbeeld een pre-rendering-hint op een pagina tegenkomt en een "No State Prefetch" uitvoert, die vergelijkbaar is, maar geen JavaScript of verwante weergave uitvoert.

Lees hier meer over pre-rendering en de browsers die dit nog steeds ondersteunen.

Snelle reeksvoorspelling

We kunnen handmatig een hint invoegen om de browser te vragen de langzaamste aankomende pagina's vooraf op te halen. Uit de hierboven beschreven gegevens van Google Analytics weten we welke pagina's we deze link moeten plaatsen.

Mijn voorbeeldrapport identificeerde echter ongeveer 20,000 potentiële sequenties. Het zou veel tijd kosten om de hints in ze allemaal in te voegen!

In plaats daarvan kunnen we een model bouwen met behulp van de vorige pagina en de huidige pagina die de volgende pagina voorspelt waarop de gebruiker waarschijnlijk zal klikken. Dan kunnen we het prefetchen.

We zouden een geavanceerd neuraal netwerk kunnen trainen, zoals ik in mijn laatste artikel heb uitgelegd. Maar een snellere en eenvoudigere methode is een Compact Prediction Tree, een concept ontwikkeld door drie hoogleraren informatica. Uit hun krant:

Gegeven een reeks trainingssequenties, bestaat het probleem van sequentievoorspelling uit het vinden van het volgende element van een doelsequentie door alleen de vorige items te observeren. Het aantal toepassingen dat met dit probleem gepaard gaat, is groot. Het omvat toepassingen zoals het vooraf ophalen van webpagina's, aanbevelingen voor consumentenproducten, weersvoorspellingen en voorspellingen van de aandelenmarkt.

Om te implementeren, gebruik ik JavaScript uit een Github-repository.

Het is relatief eenvoudig. Voer trainingsgegevens in, specificeer een doel voor voorspelling en krijg de beste overeenkomsten terug.

Een voorbeeld van trainingsgegevens uit ons aangepaste Google Analytics-rapport zou er als volgt uitzien:

let data = [ ['/vorige-pagina1', '/huidige-pagina1', '/volgende-langzame-pagina1'], ['/vorige-pagina2', '/huidige-pagina2', '/next-slow- pagina2'], ['/vorige-pagina3', '/huidige-pagina3', '/volgende-langzame-pagina1'], ['/vorige-pagina4', '/huidige-pagina1', '/next-slow- pagina2'], ['/vorige-pagina2', '/huidige-pagina3', '/volgende-langzame-pagina3'], ['/vorige-pagina3', '/huidige-pagina2', '/next-slow- pagina4'], ['/vorige-pagina4', '/huidige-pagina1', '/volgende-langzame-pagina1'], ]

En hier is hoe we een doelpagina zouden testen:

let target = [ ['/vorige-pagina2', '/huidige-pagina3'] ];

En tot slot zou een voorspelling zijn:

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

Putting It Together

Om het eenvoudig te houden, moeten we een JavaScript-bestand opnemen in alle pagina's (of de pagina's die leiden naar de pagina's die we willen verbeteren). Het script zou het huidige paginaverwijzingspad, het pad van de huidige URL, verkrijgen en de volgende pagina voorspellen waarop de gebruiker waarschijnlijk zal klikken.

Dan voegen we eenvoudig een of meer browserhints in bij de voorspellingen.

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

Mijn voorbeeldpagina op Github heeft code die dat doet.

Deze regel importeert het bibliotheekbestand.

script src="index.js"

Ik ondervond problemen met de originele code in de repository, maar dankzij David Sottimano, een digitale marketingconsulent, kon ik de bestanden aanpassen om ze als een enkel script te laten werken. Hier is zijn index.js-bestand.

Ik wil ook Michelle Robbins bedanken, een marketingtechnoloog en ingenieur, die me in een recent webinar kennis heeft laten maken met Compact Prediction Trees.

Gerelateerde artikelen

0 Comments
Inline feedbacks
Bekijk alle reacties
Terug naar boven knop