Încărcarea speculativă este disponibilă în WordPress

În timpul webinarului nostru despre „Încărcarea instantanee a paginilor” de la începutul anului 2024, Adam Silverstein de la Google a menționat că echipa WordPress Performance lucrează la un plugin care va activa API-ul Speculation Rules:

Înaintați rapid până în aprilie 2024, când WordPress a lansat oficial Speculative Loading, un plugin de performanță care acceptă API-ul Speculation Rules.

Dar înainte de a intra în ea, iată o scurtă prezentare generală a API-ului Speculation Rules.

API-ul pentru regulile de speculație explicat

Următoarele paragrafe sunt o explicație concisă a API-ului Google Speculation Rules. Dacă doriți să aprofundați,citiți articolul nostru dedicat.

Speculation Rules API este o tehnologie experimentală dezvoltată de Google pentru a îmbunătăți performanța navigațiilor viitoare ale paginilor. Pe baza sugestiilor de resurse disponibile pe scară largă link rel=prefetchșil ink rel=prerender, acest API definit de JSON oferă dezvoltatorilor și proprietarilor de site-uri o modalitate mai flexibilă și mai expresivă de a specifica ce documente ar trebui preluate sau randate în prealabil.

Puteți seta cu ușurință tipul de încărcare speculativă (preprelevare sau pre-rendare) în interiorul inline elemente și fișiere text externe la care se face referire de antetul de răspuns Speculation-Rules.

Aveți două opțiuni pentru a activa API-ul Speculation Rules:

1. Utilizați modele de adrese URL: definiți ce adrese URL sunt eligibile pentru preluare anticipată sau randare preliminară.
   
2. Specificați nivelul „dorinței”: Folosiți setarea „dornicii”pentru a indica când ar trebui să se declanșeze speculațiile – „dornic” declanșează regulile de speculație de îndată ce acestea sunt respectate; „moderat” efectuează speculații dacă treci cu mouse-ul peste un link timp de 200 de milisecunde; „conservatorul” speculează cu indicatorul sau atingerea

Cum se specifică nivelul „dorinței”

Indiferent dacă preluați sau predați o pagină depinde de îmbunătățirile de performanță pe care doriți să le realizați:

Preluare solicită browserului să descarce corpul de răspuns al paginilor la care se face referire, dar nu și subresursele la care face referire pagină. Când un utilizator navighează la o pagină preîncărcată, aceasta se încarcă mai repede decât de obicei.

Prerender, pe de altă parte, instruiește browserul să preia, să redea și să încarce tot conținutul, inclusiv subresursele și JavaScript, într-o filă invizibilă. Această preîncărcare a resurselor duce la o experiență aproape instantanee atunci când utilizatorul navighează la pagină.

Deși beneficiile de performanță ale prerandării sunt mai semnificative, ar trebui să utilizați această tehnologie de încărcare cu moderație. Prerendarea utilizează multă memorie și lățime de bandă a rețelei, ceea ce poate duce la irosirea resurselor dacă utilizatorul nu navighează la pagină.

Dimpotrivă, costul inițial al unei preluări este mult mai mic decât cel al unei pre-rendare, așa că puteți adopta prefatch-ul mai larg.

Pre-rendarea și preîncărcarea în WordPress

Utilizatorii WordPress au reușit să insereze etichete de link pentru preîncărcarea sau prerendarea resurselor în documente HTML de ani de zile, datorită API-ului Resource Hints.

Cu toate acestea, utilizarea etichetelor nu are flexibilitate, deoarece adresele URL trebuie specificate din timp, ceea ce duce la o potențială risipă de resurse sau la pierderea câștigurilor de performanță. În plus, soluțiile dinamice care inserează etichete de link bazate pe vizibilitatea ferestrei de vizualizare oferă mai multă flexibilitate, dar pot duce totuși la preîncărcarea excesivă.

Având în vedere toate aceste limitări, echipa de performanță a fost foarte motivată să găsească o soluție mai bună...

Încărcare speculativă: Noul plugin de performanță WordPress

Încărcarea speculativă permite redarea sau preluarea prealabilă a altor adrese URL de tip frontend legate de pagină.

Odată activat, pluginul inserează automat un script JSON și redă în prealabil orice URL-uri de pe pagină cu o dorință „moderată”.

Puteți modifica cu ușurință acest comportament implicit și îl puteți modifica prin secțiunea „Încărcare speculativă” din ecranul Setări > Citire :

Sursa:WordPress

În plus, puteți personaliza ce adrese URL să preîncărcați în mod speculativ folosind un filtru numit „plsr_speculation_rules_href_exclude_paths”. De exemplu, paginile modificate pe baza acțiunilor utilizatorului (de exemplu, coșul de cumpărături) pot fi excluse de la randarea sau preluarea prealabilă.

Iată un exemplu de cod al filtrului:

Sursa:WordPress

Cum să testați și să trimiteți feedback

Echipa WordPress Performance încurajează mai mulți oameni să testeze noul plugin, deoarece se gândesc să includă funcția în nucleul WordPress în viitor.

Iată cum îi puteți ajuta:

• Instalați și activați pluginul de încărcare speculativă pe site-ul dvs. prin WP Admin sau pluginul Performance Lab.
• Încercați diferite configurații prin secțiunea „Încărcare speculativă” din Setări > Citire.
• Depanați modul în care regulile adăugate de plugin declanșează încărcarea speculativă pentru a înțelege mai bine funcția și pentru a găsi erori potențiale.
• Raportați feedback sau erori în depozitul GitHub sau forumurile de asistență ale pluginului.
• Integrați- vă pluginurile cu filtrul „plsr_speculation_rules_href_exclude_paths” pentru a exclude anumite adrese URL de la preluare anticipată și/sau randare preliminară.
  

Navigation AI by NitroPack: Soluția automatizată pentru experiențe de pagină instantanee

Navigation AI by NitroPack este un optimizator de performanță web bazat pe inteligență artificială, care prezice și analizează automat comportamentul utilizatorului pentru a reda pagini întregi în timpul călătoriei clientului.

Pe baza API-ului Speculation Rules, soluția fără atingere permite dezvoltatorilor și proprietarilor de site-uri să ofere o experiență instantanee de navigare prin:

1. Aplicarea predicțiilor inițiale îmbunătățite de AI la încărcarea paginii pe baza datelor fără a le trece la API-ul Reguli de speculație (încă);
2. Analizând comportamentul utilizatorului, ajustând predicțiile și instruind API-ul Regulilor de speculație să predare (sau să prelueze) o pagină după ce suntem siguri care va fi următoarea acțiune.

Această combinație de inteligență artificială și API-ul Google Speculation Rules duce inevitabil la rezultate impresionante de performanță:

• Timpi de încărcare sub 3 secunde.
• Îmbunătățiri masive în LCP (Largest Contentful Paint) și CLS (Cumulative Layout Shift)
• Better Core Web Vitals pentru întregul site web

Așadar, dacă doriți să vă lăsați uimiți vizitatorii de cât de repede se încarcă paginile dvs....

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

Întrebări frecvente

Pluginul de încărcare speculativă din WordPress folosește AI?

Nu, pluginul de încărcare speculativă nu este alimentat de inteligență artificială (AI). Utilizează API-ul Google Speculation Rules, inserând un script JSON în orice URL-uri conectate pe pagină și redându-le înainte cu o configurație „moderată”.

Ce pagini sunt eligibile pentru încărcare speculativă?

Puteți aplica strategii de încărcare speculative tuturor paginilor care nu sunt modificate de acțiunile utilizatorului. O regulă generală bună este să evitați redarea în avans sau preluarea în avans a paginilor de plată și de coș, deoarece acest lucru poate duce la o experiență slabă a utilizatorului. În plus, Google sfătuiește numai paginile pretendente atunci când există o probabilitate mare (mai mare de 80% din timp) ca utilizatorii să le încarce.

Ce browsere acceptă API-ul Speculation Rules?

În timp ce API-ul Speculation Rules este disponibil în Chrome și Edge începând cu versiunea 109, subfuncția specială „reguli de document” care permite browserului să obțină lista de adrese URL pentru încărcare speculativă din elemente dintr-o pagină este disponibilă din Chrome 121. Cu alte cuvinte, utilizatorii vor trebui să folosească fie Chrome 121+, fie Edge 121+ pentru a beneficia de toate beneficiile API-ului Speculation Rules.

Cum gestionează Google Analytics preîncărcarea speculativă?

Dacă utilizați Google Analytics, nu trebuie să faceți nimic, deoarece GA se ocupă de pre-rendarea amânând până la activare în mod implicit. Cu alte instrumente, totuși, paginile prestate în prealabil pot avea un impact asupra analizei, iar proprietarii de site-uri ar putea fi nevoiți să adauge cod suplimentar pentru a activa numai analizele pentru paginile prestate în prealabil la activare. Acest lucru ar putea fi realizat prin utilizarea unei Promise, care așteaptă evenimentul de preranderingchange dacă un document este prerandar.