Развитие тактики Core Web Vitals с использованием Cloudflare и WebpageTest

В нашем руководстве по тактике Core Web Vitals с использованием Cloudflare и WebpageTest мы изложили основные требования для использования Cloudflare в качестве обратного прокси-сервера для тестирования тактических изменений HTML с помощью WebpageTest. Наша версия теста упрощена по сравнению с оригинальной концепцией Патрика Минана, которая использует HTMLRewriter() для выбора элемента и изменения кода.

Мы углубимся в это руководство, но если вы просто ищете скрипт Cloudflare Worker, вы можете найти его здесь.

В нашем первом выпуске отмечалось, что он не поспевает за изменениями в Search Engine Land. LCP был жестко запрограммирован, и нам нужно было взаимодействовать с динамической страницей и ее значениями. Хотя WebpageTest на момент публикации имеет наиболее продуманную каскадную диаграмму и больше деталей, чем вы можете себе представить, это не самый быстрый способ получить результаты.

Маяк из командной строки

Запуск программы Lighthouse CLI (интерпретатор командной строки) с --extra-headers , необходимыми для теста, позволяет нам также имитировать стандартные настройки для Core Web Vitals, как мы это делали с WebpageTest. Вам нужно будет работать с эмулятором терминала.

Самый простой способ установить Lighthouse — использовать NPM (менеджер пакетов узлов). После установки выполните следующую инструкцию:

$ 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

Эволюция нашего испытательного стенда

Наша цель — продемонстрировать эволюцию от оригинальной концепции испытательного стенда до проекта, подходящего для наших будущих мероприятий и статей. Испытательный стенд не должен ограничиваться текущими оценками производительности; именно с этого мы и начнем. Но он должен работать достаточно хорошо для ряда ситуаций с веб-сайтами, и это может оказаться довольно сложным. Мы будем поставлять методы, чтобы помочь.

Например, сайты часто используют относительные пути к ресурсам активов, а не абсолютные (с протоколом HTTP и всем остальным). Мы предоставим соответствующий блок, чтобы HTML в целом работал. После применения этого, когда что-то все еще не работает, переключение проблемных ссылок между именами хостов тестируемого и испытуемого часто помогает, даже для нарушений политики CORS.

Вот где действительно сияет красота HTMLRewriter() . Активы всего сайта обычно загружаются как дочерние элементы HEAD страницы. С гибким соответствием, таким как jQuery, даже с похожим синтаксисом, мы можем выбирать дочерние элементы HEAD, когда это необходимо. Вы можете использовать селекторы XPath и регулярные выражения. Давайте не будем усложнять и поищем относительные пути, начинающиеся с «/» для атрибутов src или 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); } } })

Мы используем мощь (и экономическую эффективность) периферийных вычислений для проведения действительно полезных тестов. Измените заголовок запроса x-host , чтобы загрузить разные сайты на тестовом стенде, и откройте DevTools. Преобразования могут не понадобиться, но ваш пробег будет другим. Опыт работы с фронтендом дает вам представление об этом.

Блоки комментариев, такие как переключатели, не сработают и потребуют небольшого эксперимента (возможно, это все, что вам нужно). Например, некоторые ссылки на активы могут быть написаны без двоеточия HTTP. Вам нужно будет написать еще одно условное выражение для проверки путей, где href или src начинается с «//», а затем изменить значение выбранного элемента в сценарии. Постарайтесь избавиться от ошибок консоли, которых нет на самом сайте.

Маяк дает вам LCP

Относительно легко получить ссылки LCP с помощью Lighthouse, PageSpeed ​​Insights или WebpageTest. Предполагая, что LCP подходит для предварительной загрузки, например, когда это не <div> или <p> , и когда он еще не загружается, предоставьте нашему сценарию значение href по структуре URL-адреса «параметр запроса» (или верните HTML с form) для проверки изменений времени LCP страницы с предварительной загрузкой.

Большинство технических специалистов по поисковой оптимизации умеют изменять параметры запроса запроса для обработки различных вещей в серверных программах, таких как результаты поиска Google. Используя тот же интерфейс, наш скрипт предварительно загрузит LCP, используя путь, указанный вами в значении параметра «lcp», и передаст его функции addPreloadAfter() для интерполяции HTML для теста.

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

Функция addPreloadAfter() берет наше значение «lcpHref» из searchParams.get() и обрабатывает его как «href» для построения HTML.

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

Обратите внимание на опцию «html: true»? Это параметр, который требуется Cloudflare для обеспечения безопасности при использовании Workers с методами API HTMLRewriter() , которые пишут HTML. Вы захотите изучить его возможности и ограничения для написания собственных тестов.

KV Cloudflare

Если мы когда-нибудь собираемся сделать что-то отдаленно интересное, нам нужен способ хранения постоянных данных между выполнениями скриптов. К счастью, Cloudflare также предлагает аккуратный небольшой механизм хранения данных под названием KV, который мы можем связать с нашими рабочими для хранения небольшого поля « value » данных, доступного по его « key ». Это удивительно легко понять и реализовать. Чтобы продемонстрировать, как его использовать, мы напишем небольшой счетчик посещений.

 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); }

Найдите пункт меню навигации KV в разделе «Рабочие».

После того, как вы создали пространство имен (в приведенном выше примере используется SEL), используйте пользовательский интерфейс панели инструментов KV, чтобы создать свой первый ключ ( counter в приведенном выше случае) и назначить начальное value . После настройки вернитесь к панели управления Worker для интерфейса, необходимого для привязки нашего нового пространства имен KV с Cloudflare Workers, чтобы они могли получить доступ к ключам и связанным с ними сохраненным значениям.

Привязать пространства имен KV к рабочим процессам

Выберите работника, с которым вы хотите выполнить привязку, и щелкните его меню «Настройки», чтобы найти подменю «Переменные» (непосредственно в разделе «Общие»). Обратите внимание, что вы можете определить переменные среды, привязки Durable Object (которые мы рассмотрим в следующей части) и, наконец, привязки пространства имен KV. Нажмите «Редактировать переменные» и добавьте переменную, которую хотите использовать в скрипте.

В следующем случае вы можете увидеть нашу переменную с избыточным именем « KV », которую мы будем использовать в связанном сценарии Worker, из которого мы перешли. Наше использование « KV » было названо в иллюстративных целях. Выберите его из раскрывающегося списка, сохраните, и вы сразу же сможете использовать свою variable в скрипте. Создавайте столько сценариев и комбинаций пространств имен KV, сколько хотите.

Хитрость заключается в том, чтобы не забыть связать переменную, которую вы хотите использовать в Worker. Он настолько гибкий, что поначалу вы можете свободно баловаться и наводить беспорядок. Вы, вероятно, сможете организовать его во что-то связное позже, что именно то, что вам нужно для возможности прототипирования приложений или создания микросервисов для использования в ваших приложениях.

После того, как вы настроили службу KV и начальные значения, вернитесь к Worker и откройте встроенное «Быстрое редактирование». Замените то, что там есть, этой обновленной сутью, которая включает в себя счетчик посещений и все остальное, о чем написано в этом посте. Нажмите «Сохранить и развернуть», и вы должны запустить службу на общедоступном демонстрационном URL-адресе Workers.

Почему мы заботимся

Наше оригинальное руководство было предназначено для того, чтобы возбудить ваш аппетит, вдохновить вас начать работу и получить более ценные знания. Для этого у нас есть бесплатная платформа и комбинация кода, которая достаточно проста для понимания сама по себе, в сочетании с процессом, который должен быть достаточно простым для выполнения и достижения результата тестирования.

Стандартизация тестирования веб-сайтов для демонстрации SEO разработчикам не должна требовать понимания кода, когда вы можете скопировать и вставить скрипт в Cloudflare, выполнить шаги и протестировать определенные тактики SEO. Тесты Core Web Vitals настолько же надежны, насколько мы собираемся улучшить показатели производительности RUM (Real User Metrics) для повышения рейтинга, учитывая, насколько они зависят от показателей.

Хотите больше SEO для разработчиков? Присоединяйтесь к нам на тренинге SMX Master Class под руководством Детлефа Джонсона 8-9 марта 2022 года.