Speculation Rules API

U današnje vreme web sajtovi su prepuni slika, video zapisa i interaktivnih elemenata koji imaju za cilj da poboljšaju korisničko iskustvo posetilaca web sajta. Međutim, ovi elementi mogu usporiti vreme učitavanja sajta. Zato je potrebno da znate kako da optimizujete svoj web sajt.

Kako tehnologija napreduje, sve je više načina koji dolaze kao dobro rešenje za ubrzavanje učitavanja web stranica/web sajtova. Jedan od načina je da se ubrza učitavanje web stranica je prerenderovanje ili prefetching stranica pre nego što korisnik dođe na njih.

Zato ćemo u ovom tekstu predstaviti Speculation Rules API i objasniti na koji način on funkcioniše.

Kratka istorija prerenderovanja

2011. godine Chromium tim je uveo ranu formu prerenderovanja u Chrome browser-ima putem <link rel="prerender"> taga. Ovo je omogućilo web developerima da nagoveste browser-ima koje bi stranice korisnik mogao sledeće da poseti. Browser bi tada preuzeo i renderovao te stranice u pozadini, dramatično smanjujući vreme učitavanja kada korisnik otvara određenu stranicu.

Uprkos svojim prednostima, ova prvobitna implementacija prerenderovanja koristila je mnogo propusnog opsega i CPU resursa i mogla je dovesti do problema sa privatnošću ako korisnik ne poseti prerenderovane stranice. Pored toga, morali ste ručno da birate koje linkove da prerenderujete, što nije uvek bilo ni efikasno ni izvodljivo.

Da bi se rešili neki od ovih problema, Chrome je ukinuo prerenderovanje koristeći link rel=prerender hint u korist NoState Prefetch metode, koja je uključivala preuzimanje resursa za stranicu bez izvršavanja JavaScript-a ili drugih potencijalno invazivnih akcija po privatnost.

NoState Prefetch metoda je poboljšala učitavanje resursa, ali nije mogla da pruži trenutno učitavanje stranice na način kako to radi potpuno prerenderovanje.

Speculation Rules API

Speculation Rules API je novi eksperimentalni JSON-definisan API koji spekulativno preuzima URL-ove pre nego što se oni otvore, što dovodi do bržeg vremena renderovanja i poboljšanog korisničkog iskustva.

Ovaj API omogućava developerima da konfigurišu pravila sa strukturom definisanom u JSON formatu unutar <script type="speculationrules"> koji browser može koristiti da odluči koji URL-ovi treba da budu prerenderovani.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script

Isto važi i za prefetching, što često može biti dobar prvi korak ka prerenderovanju:

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

Gore navedeni delovi koda prikazuju kako je Speculation Rules API radio tako što je naveo listu URL-ova za prefetch ili prerenderovanje.

Nedavno je Google najavio nova poboljšanja Speculation Rules API-ja, koji sada pruža opciju automatskog pronalaženja linkova koristeći pravila dokumenta. Ovo funkcioniše tako što preuzima URL-ove iz dokumenta na osnovu where uslova.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*"
              ]
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

U ovom delu koda, svi URL-ovi na stranici su uzeti u obzir za prerenderovanje osim onih koji vode do WordPress login i admin stranica. Takođe, možete podesiti nivo agresivnosti – eager (odmah), moderate (pri prelasku kursora od 200ms) i conservative (pri pritisku miša ili dodiru).

CSS selektori takođe mogu biti korišćeni kao alternativa ili u kombinaciji sa href uslovima za pronalaženje linkova na trenutnoj stranici:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Kada koristite Speculation Rules API, možete ga pregledati koristeći Speculative loads background services u Chrome Application tab-u kada pregledate stranicu.

Podrška browsera

Speculation Rules API je podržan u modernim browser-ima zasnovanim na Chromium-u, uključujući Chrome i Edge, od određenih verzija nadalje, kao što možete videti na slici ispod.

Ovo osigurava da korisnici na podržanim browser-ima mogu imati koristi od bržeg učitavanja stranica, dok korisnici na drugim browser-ima neće doživeti negativne efekte, jer je API alat za progresivno poboljšanje.

Speculative Loading WordPress plugin

Kako biste uživali u prednostima Speculation Rules API-ja u WordPress-u, WordPress tim za performanse (uključujući programere iz Google-a) nedavno je objavio Speculative Loading plugin. Ovaj plugin omogućava spekulativno učitavanje frontend URL-ova povezanih na stranici.

Do sada je ovaj plugin imao malu upotrebu pošto je API još u ranoj fazi, ali je već dobio neke pozitivne recenzije.

Podrazumevano, plugin je podešen da prerenderuje WordPress frontend URL-ove kada korisnik pređe kursorom preko relevantnog linka. Ovo se može prilagoditi u sekciji Speculative Loading pod Settings > Reading.

To znači da se bilo koji URL-ovi povezani na stranici prerenderuju sa eagerness konfiguracijom moderate-a, koja se obično aktivira kada se prelazi kursorom preko linka. Dakle, ne morate ništa raditi nakon aktiviranja plugina jer on funkcioniše odmah po aktivaciji.

Na primer, ako ste već instalirali Speculative Loading plugin na WordPress sajtu, koristite Chrome DevTools da pregledate sajt i kliknite na tab Elements. Kada se pomerite naniže, primetićete script type="speculationrules" već dodat za vas sa raznim Speculation pravilima.

Koristi Regex za specifikaciju linkova koji bi trebalo da budu prerenderovani, navodi linkove koje ne treba prerenderovati i postavlja nivo agresivnosti. Sledeći delovi objašnjavaju ove pravila detaljno.

Ograničenja za sprečavanje prekomerne upotrebe

Chrome ima postavljena ograničenja kako bi sprečio prekomernu upotrebu API-ja:

Oni sprečavaju preteranu upotrebu putem različitih podešavanja baziranih na hitnosti i interakciji korisnika.

Immediate i eager — Ne zavise od akcije korisnika, pa imaju više ograničenja. Omogućavaju dinamičko podešavanje kapaciteta uklanjanjem starijih spekulacija.

Moderate i conservative — Nasuprot tome, ova podešavanja su pokrenuta korisnikom i pridržavaju se principa prvi-u-prvi-iz (FIFO) sa ograničenjem od 2, pri čemu se zamenjuju najstarije spekulacije novim radi čuvanja memorije.

Važno je napomenuti da su WP-admin rute automatski isključene iz prerenderovanja i prefetchinga. Kao WordPress developer, na vama je da odredite koje rute želite da prioritetizujete.

Možete prilagoditi pravila za koje vrste URL-ova će se spekulativno učitavati koristeći filter plsr_speculation_rules_href_exclude_paths.

U sledećem primeru koda se osigurava da URL-ovi poput https://wordpresssite.com/cart/ ili https://wordpresssite.com/cart/book/ budu isključeni iz prefetchinga i prerenderovanja:

<?php
 
add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( $exclude_paths ) {
        $exclude_paths[] = '/cart/*';
        return $exclude_paths;
    }
);

Ponekad možete želeti da isključite URL iz prerenderovanja, ali dopustite da bude prefetchovan. Na primer, stranica sa JavaScript-om na klijentskoj strani koji ažurira stanje korisnika verovatno ne bi trebalo da bude prerenderovana, ali bi bilo razumno da bude prefetchovana.

U tu svrhu, filter plsr_speculation_rules_href_exclude_paths prima trenutni režim (ili prefetch ili prerender) kako bi omogućio uslovna isključenja.

Na primer, osigurajmo na primeru ispod da URL-ovi poput https://wordpresssite.com/products/ ne mogu biti prerenderovani, ali da ih i dalje možemo prefetchovati:

<?php

add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( array $exclude_paths, string $mode ): array {
        if ( 'prerender' === $mode ) {
            $exclude_paths[] = '/products/*';
        }
        return $exclude_paths;
    }
);

Debagovanje spekulativnih pravila za WordPress sajtove

Debagovanje spekulativnih pravila za WordPress sajtove može biti izazovno jer se prerenderovane stranice renderuju u posebnom rendereru — kao skriveni pozadinski tab koji zamenjuje trenutni tab kada je aktiviran. Tim iz Chrome-a je uradio mnogo posla sa DevTools-ima, omogućavajući vam da ih koristite za debagovanje.

U Chrome DevTools-u, idite na tab Applications i zatim se spustite do Speculative loads. Ovo developerima pruža detalje o Speculation, prerenderovanim URL-ovima, onima koji nisu uspeli i mnogo više informacija.

Na primeru ispod možete da vidite da pet linkova na stranici može biti prerenderovano na osnovu URL-ova koji se podudaraju sa pravilima postavljenim u Speculative rules JSON-u. Primetite kako nije potrebno navesti sve URL-ove; pravila dokumenta omogućavaju browser-u da ih pokupi iz linkova istog porekla na stranici.

Status nekih linkova prikazuje se kao “Not triggered” — proces prerenderovanja za te linkove nije započeo. Međutim, kako prelazimo mišem preko linkova na stranici, vidimo kako se status menja dok se svaki URL prerenderuje.

Treba imati na umu da Chrome postavlja ograničenja na prerenderovanje, uključujući maksimum od dva prerendera za umereni stepen agresivnosti, pa nakon što pređemo mišem preko trećeg linka, vidimo razlog za neuspeh tog URL-a:

Takođe je moguće promeniti renderer koji se koristi u DevTools panelima sa padajućeg menija u gornjem desnom uglu ili biranjem URL-a u gornjem delu panela i izborom opcije Inspect:

Ovaj padajući meni (i izabrana vrednost) je deljen sa svim ostalim panelima, kao što je Network panel, gde možete videti da se zahtevana stranica odnosi na prerenderovanu verziju:

Ili u Elements panelu, možete videti sadržaj stranice:

Baš kao što možete da debagujete prerenderovane stranice, možete takođe i da prefetchujete stranice. Za plugin “Speculative loading”, pobrinite se da izaberete Prefetch kao Speculation Mode.

Sada, kada uradite Inspect za stranicu sa DevTools i zatim odete do Speculative loads taba, Action će biti Prefetch za različite URL-ove, a pravila će takođe biti promenjena.

Kada pređete na Network tab nakon što pređete mišem preko linka, prefetchovani resursi se prikazuju na kraju, što možete videti u Type koloni.

Ovi resursi se preuzimaju sa najnižim prioritetom jer su namenjeni budućim navigacijama, dok Chrome daje prioritet resursima trenutne stranice.

Uporedna analiza performansi

Do sada ste razumeli šta “Speculative Loading” plugin radi i kako funkcioniše. Hajde da sada uporedimo performanse dva identična sajta na istom serveru.

Za ovo smo kreirali dva WordPress sajta u istom data centru, bez instaliranja bilo kog drugog plugina za oba sajta.

“Čisti sajt”  je sajt bez plugina, dok je “Speculative-site” sajt na kome je instaliran i aktiviran “Speculative Loading” plugin na WordPress dashboard-u.

Važno je znati da Speculative Rules API samo unapređuje vreme učitavanja sledeće stranice na koju nameravate da idete — ne možete to procenjivati na osnovu generičkih alata za performanse kao što je Lighthouse.

Testiraćemo brzinu stranice učitavanjem stranice sa specifičnog internog linka na oba sajta i koristićemo Chrome DevTools Network tab tada, kako bismo videli vreme učitavanja i druge informacije.

Za “Čisti sajt,” primetićete da mu treba duže vreme za učitavanje jer ceo proces učitavanja se dešava u hodu, i DOM sadržaj se tek učitava.

Ali za “Speculative-site”, sadržaj DOM-a je već učitan putem Speculative API-ja i keširan.

Razlika između oba sajta može delovati jako mala. U ovom slučaju, razlika je oko 0.22 sekunde, ali za veliki sajt sa više sadržaja počinjete da primećujete značajnu razliku.

Uticaj Speculation Rules API-ja na analitiku

Analitika je ključna za praćenje upotrebe veb sajta putem pregleda stranica i događaja, kao i za procenu performansi putem Monitoringa stvarnih korisnika (RUM). Važno je znati da prerenderovanje može uticati na analitiku.

Na primer, korišćenje Speculation Rules API-ja može zahtevati dodatni kod da aktivira analitiku samo kada se stvarno pristupi prerenderovanim stranicama. Iako Google Analytics, Google Publisher Tag (GPT) i Google AdSense odlažu praćenje dok se stranica ne aktivira, neki provajderi to ne rade podrazumevano.

Da biste se nosili s tim, može se postaviti Promise da se inicijalizuje analitika samo prilikom aktivacije stranice:

// Promise to activate analytics on page activation for prerendered pages
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve);
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // Initialize analytics
}

initAnalytics();

Zaključak 

U ovom tekstu smo objasnili šta je Speculative Rules API, kako funkcioniše i kako ga možete koristiti na svom WordPress sajtu. Imajte u vidu da je u pitanju još uvek eksperimentalna funkcija, koja bez sumnje postepeno dobija širu podršku.

Nadamo se da zbog svoje više nego korisne funkcionalnosti, ovaj API uskoro postati standard u web okruženju.

Nenad Mihajlović