Функции для Core Web Vitals Tactics с помощью HTMLRewriter от Cloudflare

Наше Руководство по A/B-тестированию для Core Web Vitals объяснило серию небольших шагов с двумя сервисами и расширением браузера для написания тестов для тактик внешнего кода. Тридцать лет назад мы копировали необработанный исходный код страницы для выполнения операций поиска и замены, пока не смогли управлять факсимиле страницы, помещенной в веб-папку, чтобы продемонстрировать такие же рекомендации.

Нам больше не нужно этого делать.

Двадцать лет назад установка обратного прокси-сервера и написание программного обеспечения для проведения SEO были ограничены небольшой группой компаний, которые сами создавали и размещали инфраструктуру. Теперь Cloudflare предоставляет нам готовое решение. Вы можете приступить к работе, используя бесплатную учетную запись. Чтобы изменить внешний код, используйте JavaScript API HTMLRewriter() .

Код относительно прост для понимания.

С Core Web Vitals именно оперативность, осознанная необходимость и скорость циклического прохождения различных тестов в конечном итоге демонстрируют ценность и действительно впечатляют. Базовая платформа доступна вам через шаги, описанные в нашем руководстве. Мы напишем функции для внесения банальных изменений, чтобы вы могли сразу приступить к тестированию реальной тактики.

HTMLRewriter()

Если вы следили за этим, вы, возможно, знаете, что наш сценарий предоставляет возможность предварительной загрузки элемента, который вы можете указать в параметре запроса для LCP. Мы возвращаем форму, когда значение отсутствует, просто чтобы упростить добавление вашей ссылки. Также есть местозаполнитель для чего-то под названием Important , к которому мы тоже будем обращаться. Важно понимать, что мы собираемся делать.

API HTMLRewriter() дает нам возможность использовать селекторы элементов в стиле jQuery для присоединения к элементам HTML в необработанном исходном коде страницы для запуска JavaScript из этой точки опоры. Вы сможете изменять элементы, целую группу элементов или даже базовый документ мощными способами. Например, вы можете отредактировать заголовок страницы. В продакшене ваше редактирование становится заголовком и индексируется в Google и Bing.

Одна сложность, с которой вы столкнетесь, заключается в том, что вы можете редактировать только исходный код, а не гидратированную объектную модель документа (DOM). Один из быстрых способов просмотра необработанного исходного кода — встроенная в браузер функция просмотра исходного кода. Например, в Firefox view-source выделяет ошибки проверки красным цветом. Даже когда браузеры «исправляют» сломанный HTML, это обычно можно исправить с помощью нашего Worker.

Работая внутри DevTools, вкладка «Источники» предоставляет доступ к исходному коду. Используйте настройки предпочтений, чтобы всегда «красиво печатать» источник, который будет форматировать его, чтобы вы могли сканировать код для поиска оптимизаций. Еще один совет по настройке — это настройка обхода кеша при открытом DevTools. Этот рабочий процесс поможет вам в процессе работы, чтобы ваши оптимизации не приводили к ошибкам ссылок.

Селекторы элементов

Когда вы обнаружите что-то, что хотите исправить с помощью HTMLRewriter() , вам нужно будет сузить изменения и изолировать элемент, чтобы избежать изменения большего количества кода, чем вы намеревались. Используйте максимально эксклюзивный селектор, что может быть очень просто, когда элементы имеют уникальные идентификаторы. В противном случае найдите контрольный знак, например, ссылку на уникальное местоположение в атрибутах href или src .

Вы найдете возможность использовать подстановочные знаки и регулярные выражения в стиле vim в «командном режиме», соответствующие значениям атрибутов. Вы также можете указать более одного критерия, даже с одним и тем же именем атрибута. Используйте свои возможности vim, чтобы сузить совпадения до отдельных элементов или сопоставить группу элементов с более широкими выражениями. Затем логика может разделить проблемы между изменениями.

Пример сопоставления элементов ссылки предварительной загрузки «fonts.g» с подстановочными знаками для удаления элементов ссылки для: fonts.googleapis.com.

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

Пример, показывающий два совпадения для атрибута href , сужающий его до одного файла среди многих.

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

В первом приведенном выше примере используется подстановочный знак, где строка «fonts.g» может появляться в любом месте атрибута href элементов ссылки. Это пример широкого соответствия, которое может быть связано с более чем одним элементом ссылки для соответствующего действия, например, удаления совпадающих элементов, если таковые имеются.

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

Элементы ссылки

Элементы ссылки многогранны в силу их нескольких атрибутов. Таким образом, они могут служить нескольким целям. Чтобы не путать со ссылками (как в анкорах), ссылочные элементы обычно являются тем местом, где вы начинаете искать быстрые стратегии повышения производительности. Некоторые элементы ссылок предварительной загрузки и предварительного подключения могут на самом деле мешать или быть совершенно ненужными.

Вы можете подключить максимум шесть хостов одновременно. Ваша первая стратегия будет состоять в том, чтобы максимально использовать их. Попробуйте удалить все операторы элемента ссылки на приоритетную подсказку и проверьте результат. Если тайминги идут не так, то добавляйте их по одному и проверяйте реальное влияние каждого из них. Вам нужно научиться подробно читать каскадную диаграмму WebpageTest.

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

Удаление элементов

Удаление элементов исключительно просто. После того, как вы выбрали элемент или группу элементов, в следующем поле в HTMLRewriter().on() вы записываете блок скрипта. Вы можете сделать это на месте с помощью фигурных скобок. Вы можете ссылаться на именованную функцию. Или вы можете создать новый экземпляр class для объекта, определенного ранее, что в данном контексте может оказаться слишком сложным.

Когда вы сталкиваетесь с образцом кода Worker, вы можете увидеть инициализаторы class . Все, что действительно необходимо для удаления элемента, — это следующая функция. Все, что делается с объектом именованного класса, можно сделать с помощью простой функции (объекта), используя меньше кода, с меньшим количеством ошибок, с более читаемым синтаксисом и гораздо более обучаемым. Мы еще вернемся к конструкторам class , когда будем углубляться в Durable Objects.

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

В двух словах, этот блок определяет переменную «el» в отношении экземпляра элемента, а блок кода вызывает встроенный метод элемента remove() , подробное описание которого вы найдете в соответствующей документации. Все методы элемента HTMLRewriter() доступны для использования с экземплярами совпадений вашего элемента. Удаление элементов является одним из самых простых для понимания.

Разблокировка ресурсов, блокирующих рендеринг

Разблокировать элементы script намного проще, чем разблокировать ресурсы таблицы стилей. Как назло, у нас есть логический атрибут для сигнализации браузеру, что мы хотим асинхронно загрузить скрипт или вообще отложить его (на время простоя). Это идеально! Таблицы стилей, с другой стороны, нуждаются в небольшом «хаке», чтобы разблокировать их — они требуют встроенного Javascript.

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

Предварительная загрузка, а затем использование атрибута onload для запуска JavaScript, чтобы изменить его обратно с предварительной загрузки на таблицу стилей, — это «хак» CSS, позволяющий разблокировать то, что в противном случае является естественным ресурсом, блокирующим рендеринг. Использование ключевого слова this в JavaScript позволяет изменять его свойства, включая атрибут rel (и сам атрибут onload ). В шаблоне также есть заполнение для сеансов, отличных от JavaScript.

Вот наша unblockCSS() , которая реализует стратегию с помощью готовых методов элемента.

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

Выберите ссылки на таблицы стилей элемента ссылки, которые блокируют рендеринг, и вызовите для них эту функцию. Это позволяет браузеру начать загрузку таблицы стилей, предварительно загрузив ее. После загрузки атрибут rel снова переключается на таблицу стилей, и сразу же применяются правила CSS. Если после этого изменения возникают проблемы со стилем, то один или несколько листов необходимо загрузить в обычном порядке запросов.

Функция действует как повторно используемый блок кода. Переключите выбор элементов с помощью HTMLRewriter() и проверьте разницу, разблокируя листы CSS по одному или группами, в зависимости от вашего подхода. Используйте тактику для достижения общей стратегии, разблокирующей как можно больше. Однако всегда не забывайте искать проблемы, возникающие из-за изменений в ресурсах CSS и Script.

Приоритеты сценария

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

Лучший способ проверить наличие проблем — посмотреть на ящик консоли и смоделировать медленное сетевое соединение. Это может преувеличить проблемы до такой степени, что они должны быть очевидны в DevTools. Если ресурсы сценария обрабатываются с использованием более мощных процессоров и загружаются со скоростью кабельного модема или быстрее, возможно, вы пропустите критическую ошибку. Запросы также хорошо разнесены.

Вот наша функция, изменяющая или добавляющая атрибуты async и defer.

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

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

Если скрипт изначально не имеет асинхронности или отсрочки, безвредно запустить метод элемента removeAttribute() для более многократного использования блока кода. Вы можете смело игнорировать это, если вы быстро работаете над одноразовым проектом, где вы можете писать это встроенно, а не вызывать функцию, которую вы определили ранее в сценарии.

Alt-атрибуты для SEO

Как уже упоминалось, наше Руководство по тактике A/B Core Web Vitals по задумке предназначалось для того, чтобы у нас была полностью функционирующая испытательная установка Edge Computing, чтобы демонстрировать контент с будущими статьями SEO для разработчиков и будущими мероприятиями. Во время нашего мероприятия SMX West в прошлом году (2021) мы продемонстрировали использование Cloudflare Workers для веб-сайта, достигнув фейерверков Lighthouse (набрав 100 баллов во всех тестах).

Есть много вещей, которые должны быть на месте, чтобы получить фейерверк. Одним из важных аспектов является то, что все изображения должны иметь допустимые атрибуты alt . Тест может определить, когда текст в атрибутах alt является «неописуемым» или присутствует, но пуст. Вам нужны слова, которые изображают то, что находится на связанном изображении. Одним из способов сделать это может быть анализ имени файла из атрибута src .

Вот функция, которая извлекает текст из атрибутов img src для включения alt текста из имен файлов с дефисами.

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

В двух словах, это будет искать условие на изображениях, где нет значения атрибута alt . Когда есть вероятность, что имя файла атрибута src написано через дефис, он заменит дефисы пробелами, чтобы сформулировать то, что может быть подходящим значением. Эта версия не будет работать в большинстве случаев. Он не заменяет косую черту или протокол и домен. Это просто служит отправной точкой.

Протестируйте для повышения производительности и большей наглядности

Наличие испытательного стенда для опробования различных тактик оптимизации производительности Core Web Vitals невероятно впечатляет владельцев сайтов. Вы должны иметь эту возможность в своем арсенале агентства. Небольшое повышение рейтинга Google с хорошими результатами является измеримым и в значительной степени достижимым для большинства сайтов с помощью тактики, которую мы обсудим и продемонстрируем. Настройтесь на живое выступление 8-9 марта.

SEO-специалисты уже давно рекомендуют улучшения производительности для ранжирования в поисковых системах. Польза для рейтинга никогда не была более очевидной. Google буквально определил метрики и публикует информацию об их влиянии. У нас есть Cloudflare Workers для внедрения средств Edge SEO, как показано здесь с атрибутами alt для изображений. Наш испытательный стенд обратного прокси-сервера благодаря Cloudflare создает основу для полноценного общения с разработчиками.