Optymalizacja frontendu
Optymalizacja TTFB w Wordpressie na frontendzie
Wykorzystanie reguł spekulacyjnych (Speculation Rules API) w projektach Wordpress to najszybszy i najprostszy sposób na optymalizację wydajności. Dzięki nim nawigacja między podstronami odbywać się może niemalże natychmiastowo, a wskaźnik TTFB ulega znaczącej poprawie.
Czym właściwie jest Speculation Rules API?
Speculation Rules to nowoczesna wersja <link rel=prerender> oraz <link rel=prefetch>. Dzięki temu API strona internetowa może określić, które adresy URL użytkownik może następnie odwiedzić, co pozwala przeglądarce połączyć te informacje ze swoimi heurystykami, aby zdecydować, czy powinna spekulatywnie buforować lub renderować strony z wyprzedzeniem. To z kolei zmniejsza odczuwalną latencję dla użytkownika podczas poruszania się między podstronami.
Wsparcie przeglądarek dla Speculation Rules jest całkiem dobre (Chrome, Edge, Opera). W przypadku przeglądarek, które (jeszcze) nie obsługują tego interfejsu, strona działa normalnie, więc nie musimy się obawiać, że coś się zepsuje.
Jeśli masz stronę opartą na WordPressie, polecam oficjalną wtyczkę Speculative Loading. Wystarczy ją zainstalować, włączyć, skonfigurować, i gotowe. Z drugiej zaś strony konfiguracja Speculation Rules jest na tyle prosta, że implementacja prostego kodu np. w header.php naszego theme'u nie musi wymagać instalacji pluginu. Poniżej wideo Laboratorium Wydajności, w którym pokazuję proces wdrożenia reguł spekulacyjnych.
Laboratorium Wydajności z demo wykorzystania reguł spekulacyjnych w Wordpressie
Poniżej snippety kodu wykorzystane w wideo.
Przykład #1: prefetching dokumentu HTML każdego odnośnika w chwili "najechania" na niego kursorem myszy
<script type="speculationrules">
{
"prefetch": [
{
"source": "document",
"where": {
"and": [
{
"href_matches": "/*"
}
]
},
"eagerness": "moderate"
}
]
}
</script>Przykład #2: prerenderowanie strony docelowej w chwili najechania kursorem myszy na dany link, który ma ustawioną klasę .prerender
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": ".prerender"
}
]
},
"eagerness": "moderate"
}
]
}
</script>Po więcej porad optymalizacyjnych w projektach Wordpressowych zapraszam do mojego darmowego newslettera Zoptymalizowany Wordpress.