Web Design

Zrychlete své nejpomalejší stránky pomocí předběžného načítání

Prioritou pro rok 2020 by mělo být zvýšení rychlosti vašeho webu elektronického obchodu. I když vylepšení výkonu může být časově náročné a drahé, existují rychlá řešení, která mají velký význam.

Rychlost stránky je důležitá, zejména proto, že tým Google Chrome plánuje letos ztrapnit pomalé načítání stránek, jak je popsáno v listopadu 2019 na blogu Chromium:

V budoucnu může Chrome identifikovat stránky, které se uživatelům obvykle načítají rychle nebo pomalu, s jasným označením. To může mít řadu podob a my plánujeme experimentovat s různými možnostmi, abychom určili, která poskytuje našim uživatelům největší hodnotu.

Označení je určeno k identifikaci, kdy jsou weby napsány způsobem, který je obecně zpomaluje, s ohledem na historické latence načítání. Dále to můžeme rozšířit tak, aby zahrnovalo identifikaci, kdy bude stránka pravděpodobně pomalá pro uživatele na základě jejich zařízení a podmínek sítě.

Google říká, že identifikuje stránky s pomalým načítáním. Zdroj: Chromium Blog.

Google říká, že identifikuje stránky s pomalým načítáním. Zdroj: Chromium Blog.

V předchozích článcích jsem se zabýval nápady na zlepšení výkonu, jako je ukládání do mezipaměti HTML a izolace zdrojů s pomalým načítáním. V tomto příspěvku vysvětlím, jak určit vaše nejpomalejší stránky a použít jednoduchou opravu k jejich zrychlení.

Google Analytics hlásí nejpomalejší stránky na webu a způsob, jak se k nim uživatelé dostanou. Webovým prohlížečům můžeme dát pokyn, aby takové stránky „předem načetly“, takže když na ně uživatel klikne, načtou se opravdu rychle.

Zde je postup.

Pomalé stránky

V Google Analytics přejděte na Chování > Rychlost webu > Časování stránek. Vyberte zobrazení dat (mřížka) a seřaďte sloupce podle „Prům. Doba načítání stránky.“

Chcete-li v Google Analytics zobrazit pomalu se načítající stránky, přejděte na Chování > Rychlost webu > Časování stránek.“ width=”975″ height=”505″ size=”(max-width: 975px) 100vw, 975px” />Chcete-li zobrazit pomalu se načítající stránky v Google Analytics, přejděte na Chování > Rychlost webu > Časování stránek. Kliknutím na obrázek zvětšíte.

Tím se nejprve zobrazí nejpomalejší stránky. Poslední sloupec „Hodnota stránky“ normalizuje tržby přiřazené každé stránce za předpokladu, že je povolen rozšířený elektronický obchod. Je to dobrá metrika pro obchodníky, kteří upřednostňují stránky, na které se mají zaměřit.

Dále potřebujeme znát vnitřní cestu, která návštěvníky vede na nejpomalejší stránky. K tomu vytvoříme vlastní zprávu. Nejprve se však podívejme na typické uživatelské cesty na Chování > Chování Tok.

Zde můžeme vidět nejoblíbenější cesty návštěvníků. (Přehled může také pomoci pochopit, které stránky vedou k největšímu poklesu návštěvníků.)

Přejděte na Chování > Tok chování a zobrazte typické uživatelské cesty.“ width=”975″ height=”488″ size=”(max-width: 975px) 100vw, 975px” />Jít do Chování > Chování Tok pro zobrazení typických uživatelských cest. Kliknutím na obrázek zvětšíte.

Chcete-li vytvořit vlastní přehled, přejděte na Přizpůsobení > Vlastní přehledy > Nový vlastní přehled. Přiřaďte přehledu název – na níže uvedeném snímku obrazovky jsem použil „Pomalé cesty stránek“ – a jako dimenze vyberte „Cesta k předchozí stránce“, „Stránka“ a „Výstupní stránka“. Pro metriky vyberte „Hodnota stránky“ a „Prům. Doba načítání stránky.“

Vytvořte vlastní přehled v části Přizpůsobení > Vlastní přehledy > Nový vlastní přehled.“ width=”975″ height=”488″ size=”(max-width: 975px) 100vw, 975px” />Vytvořte vlastní přehled na Přizpůsobení > Vlastní přehledy > Nový vlastní přehled. Kliknutím obrázek zvětšíte.

Dostaneme zprávu podobnou té výše (at Chování > Rychlost webu > Časování stránek), ale tato zahrnuje předchozí stránku v typické uživatelské relaci.

Vlastní přehled v Google Analytics zahrnuje předchozí stránku v typické uživatelské relaci.

Vlastní přehled v Google Analytics zahrnuje předchozí stránku v typické uživatelské relaci. Kliknutím na obrázek zvětšíte.

Dalším krokem je použití výkonného konceptu: rady webového prohlížeče.

Tipy pro webový prohlížeč

„Rady“ jsou pokyny pro webové prohlížeče, aby načetly zdroje stránky a odkazy s předstihem. Tento proces výrazně zvyšuje rychlost stránky. Ne každý prohlížeč podporuje každou nápovědu. Tři z nejpopulárnějších jsou „předběžné načítání“, „předběžné načítání“ a „předběžné vykreslování“.

Předběžné načítání vyžaduje kód v HEAD dokumentu HTML, například:

Preloading hint je direktiva, která nutí prohlížeč stáhnout zdroj dříve, než jej objeví v dokumentu. Dobrým příkladem je písmo ve skrytých souborech CSS. Namísto toho, aby prohlížeč stahoval a zpracovával soubory CSS a poté písma, direktiva preloading stahuje písmo na pozadí a zpřístupňuje je, když je potřeba.

Další informace o předběžném načítání a prohlížečích, které jej podporují, naleznete v příspěvku od CanIUse.com.

Předběžné načítání vyžaduje kód v HEAD dokumentu HTML, jako je tento:

Tato nápověda umožňuje webovému prohlížeči načíst zdroje, které mohou být potřeba, když uživatel provede další akci. Prohlížeč to provede až po vykreslení aktuální stránky za předpokladu, že je k dispozici dostatečná šířka pásma.

V tomto příspěvku se budu věnovat předběžnému načítání, abych urychlil pomalé stránky.

Další informace o předběžném načítání a prohlížečích, které jej podporují, najdete zde.

Předběžné vykreslování bývala výkonná směrnice, ale nyní je zastaralá. Umožnil předběžné načtení zdrojů na cílové stránce a také jejich vykreslení. Vyžadovalo to kód, jako je tento v HEAD dokumentu HTML:

Předběžné vykreslování je příliš náročné na zdroje, když například Chrome narazí na nápovědu k předběžnému vykreslování na stránce a provede „No State Prefetch“, což je podobné, ale nespouští JavaScript ani související vykreslování.

Další informace o předběžném vykreslování a prohlížečích, které jej stále podporují, najdete zde.

Predikce rychlé sekvence

Můžeme ručně vložit nápovědu a požádat prohlížeč, aby přednačetl nejpomalejší nadcházející stránky. Z údajů Google Analytics popsaných výše víme, na které stránky umístit tento odkaz.

Moje ukázková zpráva však identifikovala zhruba 20,000 XNUMX potenciálních sekvencí. Vložení nápověd do všech z nich by zabralo spoustu času!

Místo toho můžeme vytvořit model pomocí předchozí stránky a aktuální stránky, která předpovídá další stránku, na kterou uživatel pravděpodobně klikne. Pak to můžeme předběžně načíst.

Mohli bychom trénovat sofistikovanou neuronovou síť, jak jsem vysvětlil ve svém minulém článku. Ale rychlejší a jednodušší metodou je Compact Prediction Tree, koncept vyvinutý třemi profesory informatiky. Z jejich papíru:

Vzhledem k množině trénovacích sekvencí spočívá problém predikce sekvencí v nalezení dalšího prvku cílové sekvence pouhým pozorováním jejích předchozích položek. Počet aplikací spojených s tímto problémem je rozsáhlý. Zahrnuje aplikace, jako je předběžné načítání webových stránek, doporučení spotřebitelských produktů, předpověď počasí a předpověď akciového trhu.

K implementaci použiji JavaScript z úložiště Github.

Je to poměrně snadné. Vložte tréninková data, určete cíl pro předpověď a získejte zpět nejlepší zápasy.

Příklad tréninkových dat z našeho vlastního přehledu Google Analytics by vypadal takto:

let data = [ ['/předchozí-stránka1', '/aktuální-stránka1', '/další-pomalá-stránka1'], ['/předchozí-stránka2', '/aktuální-stránka2', '/další-pomalá- strana2'], ['/předchozí-stránka3', '/aktuální-stránka3', '/další-pomalá-stránka1'], ['/předchozí-stránka4', '/aktuální-stránka1', '/další-pomalá- strana2'], ['/předchozí-stránka2', '/aktuální-stránka3', '/další-pomalá-stránka3'], ['/předchozí-stránka3', '/aktuální-stránka2', '/další-pomalá- strana4'], ['/předchozí-stránka4', '/aktuální-stránka1', '/další-pomalá-stránka1'], ]

A takto bychom testovali cílovou stránku:

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

A nakonec předpověď by byla:

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

Dát to dohromady

Aby to bylo jednoduché, měli bychom na všechny stránky (nebo stránky vedoucí na stránky, které chceme vylepšit) zahrnout soubor JavaScript. Skript by získal cestu aktuálního odkazu stránky, cestu aktuální adresy URL a předpověděl další stránku, na kterou uživatel s největší pravděpodobností klikne.

Pak jednoduše vložíme jeden nebo více tipů prohlížeče s předpovědi.

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

Moje ukázková stránka na Github má kód, který to dělá.

Tento řádek importuje soubor knihovny.

skript src="index.js"

Narazil jsem na problémy s původním kódem v úložišti, ale díky Davidu Sottimanovi, konzultantovi digitálního marketingu, jsem mohl upravit soubory tak, aby fungovaly jako jeden skript. Zde je jeho soubor index.js.

Také bych měl poděkovat Michelle Robbins, marketingové technologi a inženýrce, která mě na nedávném webináři seznámila s Compact Prediction Trees.

Související články

0 Komentáře
Vložené zpětné vazby
Zobrazit všechny komentáře
Tlačítko Nahoru