Cum să încărcați paginile web instantaneu (tehnici și instrumente experte)

Rapid. Mai repede. instant.

Pe măsură ce pășim în 2024, o eră inovatoare se așteaptă la orizont - una în care vizitatorii site-ului pot anticipa o schimbare semnificativă către încărcarea instantanee a paginii care va deveni noua normă.

Alăturați-vă nouă în timp ce explorăm evoluția navigării pe web și extindem modurile în care puteți oferi experiențe instantanee vizitatorilor site-ului dvs.

Ce înseamnă să încarci pagini instantaneu?

Încărcarea instantanee a paginilor se referă la afișarea rapidă și fără întreruperi a paginilor web la cererea utilizatorului. Mai simplu spus, obținerea unui timp de încărcare apropiat de 0s atunci când un vizitator al site-ului încarcă o pagină de pe site-ul dvs.

Obținerea încărcării instantanee a paginii implică optimizarea diverselor resurse backend și front-end, cum ar fi reducerea la minimum a dimensiunilor fișierelor, valorificarea stocării în cache a browserului și utilizarea rețelelor de livrare a conținutului (CDN).

Citiți mai departe pentru a afla despre cele mai recente tehnici de adăugat la setul de instrumente de optimizare.

De ce sunt importante încărcările instantanee ale paginilor?

Scopul este de a îmbunătăți experiența utilizatorului, oferind acces rapid și receptiv la informații, care este esențial pentru menținerea angajamentului și a satisfacției utilizatorilor pe site-ul dvs.

Cercetările recente ale utilizatorilor efectuate de NitroPack au arătat că vizitatorii site-ului abandonează o pagină la 2,75 secunde și vor vizita cu 60% mai multe pagini dacă paginile ulterioare se încarcă în mai puțin de 3 secunde.

Oferirea de experiențe instantanee are, de asemenea, un impact pozitiv asupra modului în care utilizatorii reali interacționează cu site-ul dvs. web, ceea ce duce la depășirea Core Web Vitals și în special la cea mai mare vopsea de conținut.

Cunoscută cea mai dificilă măsurătoare de performanță, LCP este un aspect complex de optimizat și, din fericire, este puternic afectat de tehnicile de încărcare instantanee.

Provocările în navigarea web acum

În timp ce inginerii de rețea fac tot posibilul pentru a compensa slăbiciunile inerente ale World Wide Web, 53% dintre utilizatorii de telefonie mobilă se așteaptă la o încărcare rapidă a paginii în 3 secunde sau mai puțin.

Pentru a reduce acest decalaj, proprietarii de site-uri folosesc astăzi o multitudine de strategii pentru a reduce timpul de așteptare și a rămâne competitivi, cum ar fi:

• Configurarea bugetului de performanță web
• Optimizare manuală și automată a încărcării paginilor
• Imagini, media și compresie de cod
• Optimizarea performanței în lumea reală (Core Web Vitals).
• Analiza comportamentului utilizatorilor, optimizarea călătoriei clienților și multe altele!

Cu toate acestea, proprietarii de site-uri nu trebuie să se bazeze doar pe resursele interne.

Browsere precum Google Chrome și instrumente de optimizare precum NitroPack găsesc din ce în ce mai multe modalități de a ajuta la accelerarea timpilor de încărcare, urmărind „experiența instantanee” evazivă.

Alăturați-vă listei de așteptare pentru primul optimizator bazat pe inteligență artificială, Navigation AI by NitroPack, pentru a debloca experiențe instantanee automatizate →

Tehnici manuale de încărcare instantanee a paginii

Utilizarea capacităților browserului și a sugestiilor de resurse

O modalitate de a parcurge experiențele instantanee de navigare este optimizarea site-ului dvs. web pentru navigații viitoare rapide.

Sugestiile de resurse precum link rel=prefetch sunt API-uri ușor de implementat, cu prioritate mai mică în redarea paginii web. Este adăugat la codul HTML al site-ului dvs. și este destul de bine acceptat de browsere (Safari rămâne în urmă).

Introdusă de Barry Pollard însuși, o dezvoltare captivantă recentă în Chromium este API-ul Speculation Rules.

Speculation Rules API este API-ul mai nou, mai bine specificat, pentru preluarea sau randarea în avans a paginilor web întregi. Este un API bazat pe JSON care permite specificarea legăturilor prefectate sau preredate și a cazurilor de utilizare mult mai avansate.

Folosind API-ul Speculation Rules, vă puteți aștepta la timpi inițiali de încărcare a paginii care sunt mult mai rapidi de 2,5 secunde și chiar să se apropie de primele câteva milisecunde. Acest lucru este posibil utilizând API-ul pentru a specifica o listă de adrese URL către paginile web pentru redare anticipată sau preluare preliminară, pe care browserul le va executa în fundal.

De la sfârșitul lunii ianuarie 2024, API-ul Speculation Rules are o îmbunătățire nou-nouță care, practic, ne oferă mai mult control asupra adreselor URL, adăugându-le la un document în loc de o listă. Acest lucru ne permite să specificăm declanșatorii și prioritatea cu care URL-urile incluse pentru pagini și elementele din pagini sunt executate de browser. Apoi puteți specifica un nivel de „dorință”, care reprezintă practic cât de sigur sunteți că un utilizator va face clic pe acele linkuri.

Deblocarea încărcării instantanee a paginii pe WordPress

Adam Silverstein a dezvăluit că echipa WordPress Performance lucrează la implementări mai stabile ale noului API Speculation Rules.

În prezent, accentul rămâne pe a pune la dispoziție o mică parte din funcționalitatea API-ului proprietarilor de site-uri și dezvoltatorilor din ecosistem pentru a testa eficiența și rata de adoptare înainte de a o face parte din nucleu. Iată ce pot folosi utilizatorii WordPress până acum:

• Un modul din pluginul Performance Lab

• Un plugin de sine stătător care implementează doar interfața API-ului Speculation Rules (aplică nivelul conservator de „dorință”, dar dezvoltatorii sunt liberi să modifice comportamentul)

• Rutele WP-admin sunt excluse în mod implicit, dar este la latitudinea dezvoltatorilor WP să identifice rutele pe care ar dori să le evite sau să le prioritizeze (adică, evită redarea și preîncărcarea coșurilor de cumpărături, dar prioritizează navigațiile viitoare evidente)

Echipa WordPress Performance lucrează, de asemenea, la implementări mai sofisticate în cadrul pluginurilor din ecosistem. Acest lucru urmărește să ușureze unele dintre sarcinile grele pe care dezvoltatorii trebuie să le facă atunci când își dau seama care rute sunt prioritare și care sunt interzise.

Cum să încărcați automat paginile pe orice site web

Vă prezentăm Navigation AI de la NitroPack (în versiune beta)

Navigation AI este cel mai recent produs NitroPack. Este un optimizator de navigare web alimentat de inteligență artificială, care prezice și analizează în mod activ comportamentul utilizatorului pentru a pre-rada pagini întregi în timpul călătoriei clientului. Navigation AI le permite proprietarilor de site-uri să ofere experiențe instantanee de navigare atât pe desktop, cât și pe dispozitive mobile, sporind implicarea clienților și ratele de conversie pe parcurs.

Alăturați-vă listei de așteptare pentru Navigation AI și pregătiți-vă site-ul pentru experiențe instantanee ale utilizatorilor →

Cum funcționează Navigation AI?

Navigation AI de la NitroPack se bazează pe API-ul Speculation Rules și oferă o soluție automată pentru a obține un echilibru cu recompensă mare și risc scăzut între paginile pre-radate și cele nepredatate. Este implementat de un fragment JavaScript slab și este complet independent de platformă, deoarece funcționează în browser.

Navigation AI este capabil să rezolve această ecuație complexă împărțind întregul proces în două faze:

• Prima fază: aplicarea predicțiilor inițiale îmbunătățite de AI la încărcarea paginii pe baza datelor, fără a le trece încă la API-ul Speculation Rules (pentru a nu copleși browserul)

• A doua fază: analizarea comportamentului utilizatorului, ajustarea predicțiilor și instruirea API-ului Speculation Rules pentru a preda (sau a prelua în prealabil) o pagină după ce suntem siguri care va fi următoarea acțiune.

Rezultatul este încărcarea instantanee a paginii datorită faptului că această pagină este deja pictată în fundal. Pe dispozitivele mobile, Navigation AI se bazează pe identificarea locului în care se află utilizatorul pe pagină și, având în vedere fereastra mică, poate prezice cu ușurință unde va atinge.

Ce face Navigation AI atât de puternic? (+ Date)

Navigation AI măsoară succesul pe baza a trei valori personalizate:

• Precizia predicției: câte din toate interacțiunile utilizatorului a prezis cu succes Navigation AI

• Precizie risipă: câte din toate interacțiunile utilizatorului nu a reușit să prezică Navigation AI, ceea ce a dus la încordarea browserului

• Raportul de onoare al browserului: semnalează dacă o pagină este de fapt redată/preluată corect (dacă nu, intrăm pentru a verifica eficiența browserului sau puterea rețelei utilizatorului pentru a ajuta Navigation AI să se adapteze la situații similare)

Bazat pe 1.200 de site-uri web, Navigation AI arată deja rezultate spectaculoase.

Navigare AI Rezultate din lumea reală

• Rezultatul #1:paginile web care utilizează Navigation AI arată în mod constant un timp de încărcare de ~2,86 sVS 6,12 s fără Navigation AI

• Rezultatul #2: Cu Navigation AI, paginile preredate arată oîmbunătățire LCP de 85% (de la 3,1 s la 0,4 s) și o îmbunătățire CLS de 80% (de la 0,3 s la 0,06 s). Pentru paginile preîncărcate, Navigation AI mărește LCP cu 52% (de la 3,1 s la 1,5 s).

• Rezultatul #3: Cu Navigation AI, valorile de performanță pentru întregul site web se îmbunătățesc semnificativ: LCP cu 15%, CLS cu 8% și TTFB cu 26%

Timpii de încărcare inițial rapid ai paginii, aspectele stabile și reacția rapidă la interacțiuni îi permit proprietarilor de site-uri să mențină utilizatorii fericiți și implicați mai mult timp și, în cele din urmă, să convertească la rate mai mari.

Tehnici de încărcare instantanee: precizie și compromisuri

Găsirea echilibrului potrivit în a decide ce pagini să predare/preluare este legată de cât de bine înțelegeți comportamentul utilizatorilor dvs. Abordarea manuală necesită o analiză atentă a experiențelor anterioare ale utilizatorilor și a analizei datelor pentru a realiza scenariul „risc mediu, recompensă medie”.

În mod ideal, ați dori să dublați hărțile termice și să explorați ce fac utilizatorii pe paginile dvs. web – unde fac clic, cât de departe derulează și ce tind să ignore.

Deoarece browserele pot gestiona un număr limitat de solicitări de prerendare/preluare, proprietarii de site-uri și dezvoltatorii ar trebui să:

• Excludeți rute precum link-uri cu sigle, pagini deconectate, pagini de achiziție reușită, pagini de adăugare în coș etc.

• Prioritizează rutele, cum ar fi butoanele principale pentru îndemnuri (CTA), aflați mai multe pagini, navigațiile ulterioare logice etc.

Alternativ, puteți delega puterea de analiză și predicție a datelor unui instrument automat, cum ar fi Navigation AI.

Întrebări frecvente

Prezentarea/preluarea paginilor din fundal apare în analiză?

Dacă utilizatorul nu a aterizat pe pagina în cauză, aceasta nu este luată în considerare pentru analize, cum ar fi Google Analytics, de exemplu. Rețineți că API-ul Speculation Rules este încă în faze incipiente și, în funcție de furnizorii de analize pe care îi utilizați, aceștia ar putea decide să includă aceste date într-un fel. Deocamdată, paginile prerandate/preluate sunt luate în considerare pentru Raportul privind experiența utilizatorului Chrome (CrUX) numai dacă utilizatorul a ajuns efectiv la ele.

Cât timp păstrează browser-ul versiunile stocate în cache ale paginilor preredate?

Dezvoltatorii nu au control asupra duratei. Cu toate acestea, Chrome stochează în memoria cache HTTP toate versiunile stocate în cache ale paginilor prestate în prealabil care nu au fost alese de utilizator. În acest fel, ele rămân mai rapide de încărcat dacă utilizatorul decide să revină la ele mai târziu.

Cât de greu este AI din Navigation AI care examinează acțiunile utilizatorului?

AI este gestionat în întregime de serverele NitroPack și nu se execută în browser. Navigation AI JavaScript utilizează numai rezultatele gata făcute care provin de la serverele NitroPack, în loc să ruleze întregul model AI în sine.

Tehnicile de încărcare instantanee funcționează pentru prima pagină pe care aterizează utilizatorii (cum ar fi o pagină de pornire) sau numai pentru navigarea ulterioară?

Tehnicile de predare/preluare nu se aplică în cazul primelor vizite pe site. Cu toate acestea, bara de adrese URL din Chrome începe să folosească pre-rendarea prin recunoașterea adreselor URL pe care le căutăm adesea și încărcându-le din timp

De exemplu, tastarea www.goo va declanșa cel mai probabil ca pagina www.google.com să se încarce în fundal (în funcție de activitatea de căutare individuală a utilizatorului, desigur).

În prezent, există, de asemenea, explorări asupra modului în care bara motorului de căutare Google poate include pre-rendarea.