Ewoluowanie podstawowych taktyk Web Vitals za pomocą Cloudflare i WebpageTest

W naszym przewodniku po taktykach Core Web Vitals przy użyciu Cloudflare i WebpageTest przedstawiliśmy podstawowe wymagania dotyczące używania Cloudflare jako zwrotnego serwera proxy do testowania taktycznych zmian HTML za pomocą WebpageTest. Nasza wersja testu jest uproszczona na podstawie oryginalnej koncepcji Patricka Meenana, która wykorzystuje HTMLRewriter() do wybierania elementu i modyfikowania kodu.

Zagłębimy się w ten samouczek, ale jeśli szukasz tylko skryptu Cloudflare Worker, możesz go znaleźć tutaj.

Nasza pierwsza część zauważyła, że ​​nie nadąża za zmianami w Search Engine Land. LCP był zakodowany na stałe i potrzebowalibyśmy go do interakcji z dynamiczną stroną i jej wartościami. Chociaż WebpageTest ma w momencie publikacji najbardziej przemyślany wykres kaskadowy i więcej szczegółów, niż możesz sobie wyobrazić, nie jest to najszybszy sposób na uzyskanie wyników.

Latarnia morska z linii dowodzenia

Uruchomienie programu Lighthouse CLI (Command Line Interpreter) z --extra-headers potrzebnymi do testu pozwala nam również symulować standardowe ustawienia dla Core Web Vitals, tak jak zrobiliśmy to z WebpageTest. Będziesz musiał pracować z emulatorem terminala.

Najłatwiejszym sposobem zainstalowania Lighthouse jest użycie NPM (Node Package Manager). Po zainstalowaniu uruchom następującą instrukcję:

$ lighthouse https://sel.deckart.workers.dev \
--extra-headers "{\"x-host\":\"searchengineland.com\", \"x-bypass-transform\":\"false\"}" \
--form-factor=mobile \
--throttling.cpuSlowdownMultiplier=4 \
--only-categories=performance \
--view

Ewolucja naszego Testbed

Naszym celem jest zademonstrowanie ewolucji od oryginalnej koncepcji stanowiska testowego do projektu odpowiedniego dla naszych przyszłych wydarzeń i artykułów. Stanowisko testowe nie powinno ograniczać się do przeprowadzania oceny wydajności; od tego właśnie zaczniemy. Ale musi działać całkiem dobrze w wielu sytuacjach ze stronami internetowymi, a to może okazać się dość trudne. Dostarczymy metody, aby pomóc.

Na przykład witryny często używają względnych ścieżek do zasobów zasobów, a nie bezwzględnych (z protokołem HTTP i wszystkim). Dostarczymy blok, który będzie pasował do nich, więc HTML będzie ogólnie działał. Po zastosowaniu tego, gdy coś nadal nie działa, przełączanie kłopotliwych odniesień między nazwami hostów testowych i testowych często załatwia sprawę, nawet w przypadku naruszenia zasad CORS.

Właśnie tam naprawdę świeci piękno HTMLRewriter() Cloudflare. Zasoby dla całej witryny są zwykle ładowane jako elementy podrzędne HEAD strony. Dzięki elastyczności dopasowania, takiej jak jQuery, a nawet podobnej składni, możemy w razie potrzeby wybrać elementy potomne HEAD. Możesz używać selektorów XPath i wyrażeń regularnych. Zachowajmy prostotę i poszukajmy ścieżek względnych zaczynających się od „/” dla atrybutów src lub href :

 return new HTMLRewriter() .on('link', { element: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on('script', { element: el => { const script_src = el.getAttribute('src'); if (script_src && script_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + script_src); } } }) .on('img', { element: el => { const img_src = el.getAttribute('src'); if (img_src && img_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + img_src); } } })

Wykorzystujemy moc (i opłacalność) Edge Computing, aby przeprowadzać bardzo przydatne testy. Zmodyfikuj nagłówek żądania x-host , aby załadować różne witryny w środowisku testowym i otwórz DevTools. Przekształcenia mogą nie być potrzebne, ale Twój przebieg będzie się różnić. Doświadczenie frontendowe daje Ci wyczucie.

Bloki komentarzy, takie jak przełączniki, zakończą się niepowodzeniem i wymagają trochę eksperymentów (co może być wszystkim, czego potrzebujesz). Na przykład niektóre odwołania do zasobów mogą być zapisane bez dwukropka HTTP. Będziesz musiał napisać inny warunek, aby sprawdzić ścieżki, w których href lub src zaczyna się od „//”, a następnie zmodyfikować wartość wybranego elementu w skrypcie. Spróbuj skończyć bez błędów konsoli, których nie ma właściwa strona.

Latarnia zapewnia LCP

Pobieranie referencji LCP za pomocą Lighthouse, PageSpeed ​​Insights lub WebpageTest jest stosunkowo łatwe. Zakładając, że LCP kwalifikuje się do wstępnego wczytywania, na przykład gdy nie jest to <div> lub <p> , i gdy nie jest już wstępnie ładowany, podaj naszemu skryptowi wartość href w strukturze „query param” adresu URL (lub zwróć kod HTML z formularz), aby przetestować zmiany czasu LCP strony ze wstępnym ładowaniem.

Większość praktyków zajmujących się pozycjonowaniem technicznym jest przydatna w modyfikowaniu parametrów zapytań żądań, aby przetwarzać różne rzeczy w programach serwerowych, takich jak wyniki wyszukiwania Google. Używając tego samego interfejsu, nasz skrypt wstępnie załaduje LCP, korzystając ze ścieżki, którą zastosujesz w wartości parametru „lcp” i przekaże go do funkcji o nazwie addPreloadAfter() w celu interpolacji kodu HTML na potrzeby testu.

 async function handleRequest(request) { const { searchParams } = new URL(request.url); let lcpHref = searchParams.get("lcp"); return new HTMLRewriter() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse); }

Funkcja addPreloadAfter() pobiera naszą wartość „lcpHref” z searchParams.get() i przetwarza ją jako „href” w celu zbudowania HTML.

 const addPreloadAfter = (href) => ({ element: (el) => { el.after(`<link rel="preload" href="${href}" />`, { html: true }); } });

Zwróć uwagę na opcję „html: true”? Jest to ustawienie opcji wymagane przez Cloudflare dla bezpieczeństwa podczas korzystania z Workers z metodami API HTMLRewriter() , które zapisują HTML. Będziesz chciał poznać jego możliwości i ograniczenia w kodowaniu własnych testów.

KV . Cloudflare'a

Jeśli kiedykolwiek zamierzamy zrobić coś zdalnie interesującego, potrzebujemy sposobu na przechowywanie trwałych danych między wykonaniami skryptów. Na szczęście Cloudflare oferuje również zgrabny, mały mechanizm przechowywania danych o nazwie KV, który możemy powiązać z naszymi pracownikami, aby przechowywać małe pole „ value ” danych, dostępne za pomocą jego „ key ”. Jest to zaskakująco łatwe do zrozumienia i wdrożenia. Aby zademonstrować, jak z niego korzystać, napiszemy mały licznik trafień.

 const counter = parseInt(await KV.get('counter') || 0); if (!host || counter > 1000) { return new Response('hit limit exceeded or x-host missing', {status: 403}); } else { await KV.put("counter", counter + 1); }

Znajdź pozycję menu nawigacyjnego KV w obszarze Pracownicy.

Po utworzeniu przestrzeni nazw (w powyższym przykładzie użyto „SEL”) za pomocą interfejsu użytkownika pulpitu nawigacyjnego KV utwórz swój pierwszy klucz („ counter ” w powyższym przypadku) i przypisz value początkową . Po skonfigurowaniu przejdź z powrotem do pulpitu roboczego Worker, aby uzyskać interfejs wymagany do powiązania naszej nowej przestrzeni nazw KV z pracownikami Cloudflare, aby mogli uzyskać dostęp do kluczy i powiązanych przechowywanych wartości.

Powiąż przestrzenie nazw KV z pracownikami

Wybierz pracownika, z którym chcesz się powiązać, i kliknij jego menu Ustawienia, aby znaleźć podmenu Zmienne (bezpośrednio w sekcji Ogólne). Zauważ, że możesz zdefiniować zmienne środowiskowe, trwałe powiązania obiektów (które omówimy w przyszłej części) i wreszcie powiązania przestrzeni nazw KV. Kliknij Edytuj zmienne i dodaj zmienną, której chcesz użyć w skrypcie.

W następującym przypadku możesz zobaczyć naszą zmienną o nadmiarowej nazwie „ KV ”, której będziemy używać w skojarzonym skrypcie Worker, z którego nawigowaliśmy. Nasze użycie ' KV ' zostało nazwane w celach ilustracyjnych. Wybierz ją z menu, zapisz, a od razu będziesz mógł użyć swojej variable w skrypcie. Twórz dowolną liczbę skryptów i kombinacji przestrzeni nazw KV.

Sztuczka polega na tym, aby pamiętać o powiązaniu zmiennej, którą chcesz użyć w robocie. Jest tak elastyczny, że na początku możesz swobodnie się bawić i narobić bałaganu. Prawdopodobnie będziesz w stanie zorganizować to w coś spójnego w późniejszym terminie, co jest dokładnie tym, czego potrzebujesz, aby móc tworzyć prototypy aplikacji lub tworzyć mikroserwisy do użytku w swoich aplikacjach.

Po skonfigurowaniu usługi KV i wartości początkowych wróć do Worker i otwórz wbudowaną „Szybką edycję”. Zastąp to, co tam jest, tym zaktualizowanym opisem, który obejmuje licznik odwiedzin i wszystko inne, o czym napisano w tym poście. Kliknij „Zapisz i wdróż”, a usługa powinna być uruchomiona i działać pod publicznie dostępnym, demonstracyjnym adresem URL dla pracowników.

Dlaczego nam zależy

Nasz oryginalny przewodnik miał zaostrzyć Twój apetyt, zachęcić do rozpoczęcia i bardziej wartościowej nauki. Aby to zapewnić, mamy bezpłatną platformę i kombinację kodu, która jest wystarczająco prosta do samodzielnego zrozumienia, połączona z procesem, który powinien być wystarczająco łatwy do naśladowania i uzyskania wyniku testu.

Standaryzacja testowania stron internetowych w celu zademonstrowania SEO programistom nie powinna wymagać zrozumienia kodu, gdy możesz skopiować i wkleić skrypt do Cloudflare, wykonać kroki i przetestować określone taktyki SEO. Testy Core Web Vitals są mniej więcej tak niezawodne, jak to, co otrzymamy, jeśli chodzi o poprawę wyników wydajności RUM (Real User Metrics) w celu zwiększenia rankingów, biorąc pod uwagę stopień zależności od metryk.

Chcesz więcej SEO dla programistów? Dołącz do nas na szkolenie SMX Master Class prowadzone przez Detlefa Johnsona w dniach 8-9 marca 2022 r.