Funkcje dla podstawowych taktyk Web Vitals z HTMLRewriterem Cloudflare

Nasz Przewodnik po testach A/B dla podstawowych wskaźników internetowych wyjaśnił serię małych kroków z dwoma usługami i rozszerzeniem przeglądarki do pisania testów taktyk kodu frontendowego. Trzydzieści lat temu kopiowaliśmy surowe źródło strony, aby uruchamiać operacje Znajdź i zamień, dopóki nie będziemy mogli zarządzać faksem strony umieszczonym w folderze z obsługą sieci Web, aby zademonstrować tego samego rodzaju rekomendacje.

Nie musimy już tego robić.

Konfigurowanie reverse proxy i pisanie oprogramowania do prowadzenia SEO dwadzieścia lat temu ograniczało się do niewielkiej grupy firm, które same budowały i hostowały infrastrukturę. Cloudflare zapewnia nam teraz rozwiązanie „pod klucz”. Możesz zacząć korzystać z darmowego konta. Aby zmienić kod frontendu, użyj interfejsu API JavaScript HTMLRewriter() Cloudflare.

Kod jest stosunkowo łatwy do zrozumienia.

W przypadku Core Web Vitals natychmiastowość, postrzegana potrzeba i szybkość, z jaką można przejść przez różne testy, ostatecznie pokazują wartość i naprawdę robią wrażenie. Podstawowa platforma jest dostępna dzięki krokom opisanym w naszym przewodniku. Napiszemy funkcje do wprowadzania typowych zmian, abyś mógł od razu rozpocząć testowanie prawdziwych taktyk.

HTMLRewriter()

Jeśli śledzisz, być może wiesz, że nasz skrypt udostępnia opcję wstępnego załadowania elementu, który możesz określić w parametrze żądania dla LCP. Zwracamy formularz, gdy brakuje wartości, aby ułatwić dodanie referencji. Istnieje również symbol zastępczy dla czegoś, co nazywa się znaczenie , którym również zajmiemy się. Ważne jest, aby zrozumieć, co zamierzamy zrobić.

Interfejs API HTMLRewriter() daje nam możliwość używania selektorów elementów w stylu jQuery do dołączania do elementów HTML w nieprzetworzonym źródle strony w celu uruchomienia JavaScript z tego punktu. Będziesz mógł modyfikować elementy, całą grupę elementów, a nawet dokument bazowy w potężny sposób. Możesz na przykład edytować tytuł strony. W środowisku produkcyjnym Twoja zmiana staje się tytułem i jest indeksowana w Google i Bing.

Jedną z komplikacji, jakie napotkasz, jest to, że możesz edytować tylko surowe źródło, a nie uwodniony model obiektów dokumentu (DOM). Jednym z szybkich sposobów przeglądania surowego źródła jest wbudowana funkcja przeglądania źródła w przeglądarce. W przeglądarce Firefox, na przykład, view-source podświetla błędy walidacji na czerwono. Nawet jeśli przeglądarki „naprawiają” uszkodzony kod HTML, zazwyczaj można to naprawić za pomocą naszego pracownika.

Działając w DevTools, zakładka „Źródła” zapewnia dostęp do surowego źródła. Użyj ustawień preferencji, aby zawsze „ładnie wydrukować” źródło, które sformatuje je, abyś mógł zeskanować kod w poszukiwaniu optymalizacji. Kolejną wskazówką dotyczącą preferencji jest ustawienie pomijania pamięci podręcznej, gdy otwarte jest narzędzie DevTools. Ten przepływ pracy pomoże Ci na bieżąco, aby Twoje optymalizacje nie skutkowały błędami referencyjnymi.

Selektory elementów

Kiedy zauważysz coś, co chcesz naprawić za pomocą HTMLRewriter() , będziesz musiał zawęzić zmiany i wyizolować element, aby uniknąć zmiany większej ilości kodu, niż zamierzasz. Użyj najbardziej ekskluzywnego selektora, co może być bardzo łatwe, gdy elementy mają unikalne identyfikatory. W przeciwnym razie znajdź znak ostrzegawczy, taki jak odniesienie do unikalnej lokalizacji w atrybutach href lub src .

Znajdziesz możliwość używania symboli wieloznacznych i wyrażeń regularnych w stylu vim w „trybie poleceń”, pasujących do wartości atrybutów. Możesz również podać więcej niż jedno kryterium, nawet z tą samą nazwą atrybutu. Użyj swoich mocy vim, aby zawęzić dopasowania do pojedynczych elementów lub dopasuj grupę elementów za pomocą szerszych wyrażeń. Logika może wtedy rozdzielić obawy między zmianami.

Przykład pasującego symbolu wieloznacznego „fonts.g” – pobierz wstępnie elementy linku, aby usunąć te dla: fonts.googleapis.com.

 .on(`link[rel="dns-prefetch"][href*="fonts.g"]`, removeEl())

Przykład pokazujący dwa dopasowania dla atrybutu href , zawężając go do jednego pliku spośród wielu.

 .on('link[href^="https://example.com/static/version"][href$="/print.css"]', unblockCSS())

W pierwszym powyższym przykładzie użyto tego dopasowania wieloznacznego, w którym ciąg „fonts.g” może pojawić się w dowolnym miejscu w atrybucie href elementów linku. Jest to przykład dopasowania przybliżonego, które może dołączyć do więcej niż jednego elementu linku w celu wykonania odpowiedniej akcji, na przykład usunięcia pasujących elementów, jeśli takie istnieją.

Drugi przykład z powyższego pokazuje, w jaki sposób można wybrać konkretny element linku, który zaczyna się ciągiem, a kończy innym ciągiem, ale może mieć cokolwiek pomiędzy. Jest to przydatne do wybierania pojedynczego elementu, który jest częścią systemu kompilacji, w którym może istnieć katalog tokenów wersjonowania do pomijania pamięci podręcznej przeglądarki, który jest nazwany dynamicznie.

Elementy linków

Elementy łącza są wieloaspektowe ze względu na ich kilka atrybutów. W ten sposób mogą służyć wielu celom. Nie mylić z linkami (jak w kotwicach), elementy linków są zazwyczaj miejscem, w którym zaczynasz szukać szybkich strategii wydajności. Niektóre elementy łącza wstępnego ładowania i łączenia wstępnego mogą faktycznie przeszkadzać lub być całkowicie niepotrzebne.

Możesz połączyć się jednocześnie z maksymalnie sześcioma hostami. Twoją pierwszą strategią będzie jak najlepsze ich wykorzystanie. Spróbuj usunąć wszystkie instrukcje dotyczące elementu linku ze wskazówką priorytetową i przetestuj wynik. Jeśli czasy się nie udają, dodaj je z powrotem pojedynczo i przetestuj rzeczywisty wpływ każdego z nich. Będziesz musiał nauczyć się dogłębnie czytać wykres kaskadowy WebpageTest.

Następnie taktyka przechodzi do ładowania zasobów, które obejmuje również elementy linków dość mocno, ale nie wyłącznie. W tym momencie chcemy również przyjrzeć się skryptom. Kolejność ładowania zasobów może mieć bardzo negatywny wpływ. Nasze stanowisko testowe jest idealne do wypróbowywania różnych taktyk zebranych z wykresu kaskadowego. Pozostaw szufladę konsoli DevTools otwartą, aby sprawdzać błędy podczas pracy.

Usuwanie elementów

Usuwanie elementów jest wyjątkowo proste. Po wybraniu elementu lub ich grupy następne pole w HTMLRewriter().on() to miejsce, w którym piszesz blok skryptu. Możesz to zrobić na miejscu za pomocą nawiasów klamrowych. Możesz odwołać się do nazwanej funkcji. Lub możesz zbudować nową instancję class dla obiektu zdefiniowanego wcześniej, co w tym kontekście może być przesadne.

Gdy napotkasz przykładowy kod procesu roboczego, możesz zobaczyć inicjatory class . Wszystko, co jest naprawdę potrzebne do usunięcia elementu, to następująca funkcja. Wszystko, co można zrobić z nazwanym obiektem klasy, można wykonać za pomocą zwykłej funkcji (obiektu) przy użyciu mniejszej ilości kodu, mniejszej liczby błędów, z bardziej czytelną składnią i znacznie łatwiejszą do nauczenia. Powrócimy do konstruktorów class , gdy zagłębimy się w trwałe obiekty.

 element: (el) => { el.remove(); }

W skrócie, ten blok definiuje zmienną „el” w odniesieniu do instancji elementu, a blok kodu wywołuje wbudowaną metodę elementu remove() , którą znajdziesz szczegółowo w odpowiedniej dokumentacji. Wszystkie metody elementów HTMLRewriter() są dostępne do użytku z instancjami dopasowań elementów. Usuwanie elementów jest jednym z prostszych do zrozumienia.

Odblokowywanie zasobów blokujących renderowanie

Odblokowanie elementów script jest znacznie łatwiejsze niż odblokowanie zasobów arkusza stylów. Na szczęście mamy atrybut logiczny do sygnalizowania przeglądarce, że chcemy asynchronicznie załadować skrypt lub całkowicie go odroczyć (na czas bezczynności). To jest idealne! Z drugiej strony arkusze stylów wymagają odrobiny „hackowania”, aby je odblokować — wymagają wbudowanego JavaScriptu.

Zasadniczo zamieniamy odwołanie do elementu linku arkusza stylów we wstępne ładowanie, aby je odblokować. Ale to zmienia charakter elementu linku na taki, w którym reguły stylu nie zostaną zastosowane. Wstępne ładowanie pobiera zasoby, aby przechowywać je w lokalnej pamięci podręcznej, gotowe w razie potrzeby, ale to wszystko. DevTools ostrzega, gdy zasób jest wstępnie załadowany i nie jest używany w odpowiednim czasie — wtedy wiesz, że możesz go usunąć!

Wstępne ładowanie, a następnie użycie atrybutu onload w celu uruchomienia JavaScript w celu zmiany go z powrotem z wstępnego ładowania na arkusz stylów to „hack” CSS, który umożliwia odblokowanie tego, co w przeciwnym razie jest naturalnym zasobem blokującym renderowanie. Użycie słowa kluczowego this w JavaScript umożliwia zmianę jego właściwości, w tym atrybutu rel (i samego atrybutu onload ). Wzorzec ma również wypełnienie dla sesji innych niż JavaScript.

Oto nasza unblockCSS() , która implementuje strategię za pomocą gotowych metod elementów.

 const unblockCSS = () => ({ element: (el) => { el.removeAttribute('media'); el.setAttribute('rel', 'preload'); el.setAttribute('as', 'style'); el.setAttribute('onload', "this.onload=null;this.rel='stylesheet';this.media='all'"); el.after(` `, { html: true }); }});

Wybierz odniesienia do arkusza stylów elementu łącza, które blokują renderowanie, i wywołaj na nich tę funkcję. Pozwala przeglądarce na rozpoczęcie pobierania arkusza stylów przez jego wstępne załadowanie. Po załadowaniu atrybut rel przełącza się z powrotem do arkusza stylów, a reguły CSS są natychmiast stosowane. Jeśli po tej zmianie wystąpią problemy ze stylami, jeden lub więcej arkuszy musi zostać załadowanych w normalnej kolejności żądań.

Funkcja działa jak blok kodu wielokrotnego użytku. Przełącz wybór elementów za pomocą HTMLRewriter() i przetestuj różnicę, odblokowując arkusze CSS pojedynczo lub w grupach, w zależności od podejścia. Wykorzystaj taktykę, aby osiągnąć ogólną strategię odblokowującą jak najwięcej. Jednak zawsze pamiętaj o szukaniu problemów wynikających ze zmian w zasobach CSS i Script.

Priorytety skryptów

Kolejność wczytywania stylów może spowodować zepsucie projektu. Nieoczekiwanie szybko ładujące się reguły arkusza stylów zostaną nadpisane przez te, które ładują się wolniej. Musisz także obserwować podczas ładowania skryptów w alternatywnej kolejności, aby zostały ocenione i były rezydentne w pamięci podczas oceny dokumentu. Błędy referencyjne mogą skutkować kaskadą do dziesiątek lub setek błędów skryptu.

Najlepszym sposobem sprawdzenia problemów jest obserwacja szuflady konsoli i symulowanie wolnych połączeń sieciowych. Może to wyolbrzymiać problemy do tego stopnia, że ​​powinny być widoczne w DevTools. Jeśli zasoby skryptu są przetwarzane przy użyciu mocniejszych procesorów i ładują się z prędkością modemu kablowego lub szybciej, możliwe jest, że przeoczysz błąd krytyczny. Prośby również są ładnie rozmieszczone.

Oto nasza funkcja zmieniająca lub dodająca, asynchroniczna i odraczająca atrybuty.

 const makeAsyncJS = () => ({ element: (el) => { el.removeAttribute("defer"); el.setAttribute("async", "async"); } });

 const makeDeferJS = () => ({ element: (el) => { el.removeAttribute("async"); el.setAttribute("defer", "defer"); } });

Jeśli skrypt pierwotnie nie ma funkcji asynchronicznej lub odroczenia, uruchomienie metody elementu removeAttribute() w celu uzyskania bloku kodu, który można ponownie wykorzystać, jest nieszkodliwe. Możesz bezpiecznie zignorować to, jeśli pracujesz szybko nad jednorazowym projektem, w którym możesz pisać to wbudowane, zamiast wywoływać funkcję zdefiniowaną wcześniej w skrypcie.

Atrybuty alternatywne dla SEO

Jak wspomniano, nasz Przewodnik po taktykach A/B Core Web Vitals był z założenia przeznaczony dla nas, abyśmy mieli uruchomione i w pełni funkcjonalne narzędzie testowe Edge Computing, aby zademonstrować zawartość z przyszłymi artykułami SEO dla programistów i przyszłymi wydarzeniami. Podczas naszego wydarzenia SMX West w zeszłym roku (2021) zademonstrowaliśmy użycie Cloudflare Workers na stronie internetowej, osiągając fajerwerki Lighthouse (z wynikiem 100 we wszystkich testach).

Jest wiele rzeczy, które muszą być na swoim miejscu, aby uzyskać fajerwerki. Jednym z ważnych aspektów jest to, że wszystkie obrazy muszą mieć prawidłowe atrybuty alt . Test może wykryć, kiedy tekst w atrybutach alt jest „nieopisany” lub obecny, ale pusty. Potrzebujesz słów, które opisują to, co znajduje się na powiązanym obrazie. Jednym ze sposobów, aby to zrobić, może być przeanalizowanie nazwy pliku z atrybutu src .

Oto funkcja, która wyodrębnia tekst z atrybutów img src , aby wzmocnić tekst alt z nazw plików z myślnikami.

 const img_alt = element.getAttribute('alt'); const img_src = element.getAttribute('src'); if (!img_alt) { element.setAttribute('alt', img_src.replace('-', ' ')); }

Krótko mówiąc, będzie to szukać warunku na obrazach, na których nie ma wartości atrybutu alt . Jeśli istnieje prawdopodobieństwo, że nazwa pliku atrybutu src jest dzielona, ​​zastąpi myślniki spacjami, aby określić odpowiednią wartość. Ta wersja nie będzie działać w większości przypadków. Nie zastępuje ukośników ani protokołu i domeny. Służy to jedynie jako punkt wyjścia.

Testuj pod kątem lepszej wydajności i większej widoczności

Posiadanie stanowiska testowego do wypróbowania różnych taktyk optymalizacji wydajności sieci Web Vitals jest niewiarygodnie imponujące dla właścicieli witryn. Powinieneś mieć tę możliwość w swoim arsenale agencji. Niewielki wzrost rankingu Google z dobrymi wynikami jest zarówno mierzalny, jak i w dużej mierze możliwy do osiągnięcia dla większości witryn za pomocą taktyk, które omówimy i zademonstrujemy. Nastaw się na występ na żywo 8-9 marca.

Technicy SEO od dawna zalecają poprawę wydajności w rankingu wyszukiwarek. Korzyść dla rankingów nigdy nie była tak jasna. Google dosłownie zdefiniował wskaźniki i publikuje o ich efekcie. Mamy pracowników Cloudflare, którzy wdrażają środki zaradcze Edge SEO, jak pokazano tutaj z atrybutami alt dla obrazów. Nasze stanowisko testowe odwrotnego proxy dzięki Cloudflare przygotowuje grunt pod bogatą komunikację z programistami.