Оптимизация сайта Google PageSpeed Insights — 17 рекомендаций

Содержание

В этой статье рассмотрим как реализуется оптимизация сайта Google PageSpeed Insights. Google PageSpeed Insight, без сомнения, является полезным инструментом для веб-мастеров, разработчиков и владельцев сайтов. Однако мы заметили, что многие люди часами зацикливаются на оптимизации своих сайтов, чтобы попытаться набрать 100/100 баллов в этом тесте.

Смысл заключается в том, что сервис Google PageSpeed носит рекомендательный характер и не стоит гнаться за количеством баллов в тесте. Если вы сосредоточитесь на реализации рекомендаций от Google Page Speed, а не на количестве баллов, вы получите гораздо больше преимуществ для своего сайта.

Этот пост представляет собой исчерпывающее руководство по использованию Google PageSpeed Insights с наибольшей выгодой для вашего сайта. Мы расскажем о том, как Google использует ваше количество баллов, а также о том, как реализовать рекомендации полученные от сервиса.

Введение в Google PageSpeed Insights

Если вы еще не знакомы с Google PageSpeed Insights, это инструмент, используемый для тестирования производительности веб-сайта. Вы можете ввести любой URL и проанализировать его:

Оптимизация сайта Google PageSpeed Insights — Интерфейс сервиса

Затем Google покажет общий балл из 100 для протестированного вами сайта, а так же некоторую статистику загрузки страницы:

Оптимизация сайта Google PageSpeed Insights — общий бал по производительности сайта

Наряду с этим результатом вы также увидите несколько рекомендаций от Google о том, как улучшить производительность сайта и, следовательно, ваш общий бал в PageSpeed Insights:

Оптимизация сайта Google PageSpeed Insights — рекомендации сервиса по оптимизации сайта

С 2018 года оценки PageSpeed Insights рассчитываются с помощью Lighthouse, автоматизированного инструмента Google с открытым исходным кодом, позволяющего повысить общее качество веб-страниц. Эта платформа может оценивать все виды факторов, включая производительность, доступность, PWA и многое другое.

Чтобы увидеть полную оценку вашего сайта Lighthous’ом, вы можете использовать инструмент Google Measure:

Оптимизация сайта Google PageSpeed Insights — Google Measure

Помимо проведения аудита эффективности, аналогичного тому, который выполняется в Google PageSpeed Insights, вы получите баллы за доступность (Accessibility), лучшие практики (Best Practies) и поисковую оптимизацию (SEO).

Правда о набирании 100 баллов в Google PageSpeed Insights

Как мы упоминали в начале статьи, есть много владельцев сайтов и разработчиков, которые одержимы достижением 100 баллов в PageSpeed Insights. К сожалению, эти люди, как правило, упускают из виду более важный аспект результатов теста: рекомендации.

Вам, безусловно, следует стремиться максимально сократить время загрузки своего веб-сайта, но получение 100/100 в Google PageSpeed Insights на самом деле не так важно. Для начала скажем о том что, это даже не самый главный тест на производительность.

В отличие от PageSpeed Insights, Pingdom Tools позволяет вам тестировать производительность вашего сайта из разных точек земного шара:

Оптимизация сайта Google PageSpeed Insights — инструмент Pingdom

Вы также можете запустить тесты на таких платформах, как GTmetrix (который объединяет ваши оценки от PageSpeed ​​Insights и YSlow) и WebPageTest. Скорее всего, ваши оценки по этим сервисам не будут точно совпадать, что показывает, насколько разными могут быть эти цифры.

Что действительно важно, так это реальная скорость загрузки вашего сайта. Чтобы вы понимали, мы видели сайты со средним временем загрузки менее 500 миллисекунд (что очень быстро!), у которых нет оценки 100 баллов в PageSpeed ​​Insights!

Другим фактором, который должен повлиять на ваш подход к оптимизации скорости, является производительность вашего сайта. Вашим посетителям все равно какой у вас балл на Google PageSpeed ​​Insights. Они просто хотят иметь возможность просматривать ваш контент как можно быстрее.

Реальная цель тестирования эффективности вашего сайта с помощью Google PageSpeed ​​Insights не состоит в достижении высоких баллов. Вместо этого нужно найти проблемные места на вашем сайте, чтобы вы могли оптимизировать их и сократить как фактическое, так и предполагаемое время загрузки.

Как Google использует PageSpeed Insights

Производительность сайта влияет не только на пользовательский опыт (UX), но она так же играет роль в SEO. Учитывая, что PageSpeed ​​Insights управляется крупнейшей и самой популярной поисковой системой в мире, само собой разумеется, что ваши баллы в PageSpeed могут оказать некоторое влияние на рейтинг страницы результатов поиска (SERP) (по крайней мере, на сам Google).

Реальность такова, что Google использует PageSpeed ​​Insights для определения своего рода рейтинга. Скорость сайта — фактор ранжирования, простой и понятный. Ваш результат теста производительности может дать вам довольно хорошее представление о том, где вы можете стоять в поисковой выдаче.

Однако Google учитывает не только число в кружке вверху результатов PageSpeed. Попадание в 100/100 не гарантирует вам первое место в поисковой выдаче.

С учетом вышесказанного, вы все равно можете использовать результаты PageSpeed ​​Insights для улучшения своего SEO. Например, с 2018 года скорость мобильной страницы является фактором ранжирования для Google. Вы заметите, что тест производительности предоставляет данные как для десктопной, так и для мобильной версии вашего сайта:

Оптимизация сайта Google PageSpeed Insights — вкладка «для мобильных»

Поскольку более 73 процентов пользователей мобильного интернета утверждают, что они постоянно сталкиваются с сайтами, которые загружается слишком долго, информация на вкладке Google PageSpeed Insights «Для мобильных» неоценима. Использование приведенных здесь рекомендаций для сокращения времени загрузки на смартфонах и других устройствах должно дать вам конкурентное преимущество.

Рекомендации Google PageSpeed Insights (17 способов повысить производительность)

В этом посте мы много говорили о рекомендациях Google PageSpeed Insights. Они — реальная основа ваших результатов тестов производительности и гораздо более ценная, чем ваш реальный результат. Вот почему мы посвятили им оставшуюся часть этого поста.

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

Есть две диаграммы, которые показывают, где ваши средние значения Первая отрисовка контента (First Contentful Paint) и Первая задержка ввода (First Input Delay) низкие:

Google PageSpeed Insights — Первая отрисовка контента (FCP) и Первая задержка ввода (FID)

На изображении выше FCP нашего сайта примерно как у 63 процентов сайтов, а наш FID примерно как к 9 процентов сайтов.

Лабораторные данные показывают конкретные данные при имитация загрузки страницы:

Оптимизация сайта Google PageSpeed Insights — имитация загрузки страницы

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

Вместе эти данные должны дать вам представление о фактическом времени загрузки вашего сайта. Как мы упоминали ранее, это даже важнее, чем ваш общий балл PageSpeed, поэтому вам стоит обратить внимание на эти цифры. После того, как вы проанализировали эти данные, пришло время начать повышать эффективность вашего сайта согласно рекомендациям Google PageSpeed.

1. Устранить ресурсы, блокирующие рендеринг

Одна из наиболее распространенных рекомендаций от Google PageSpeed Insights — устранить ресурсы, блокирующие рендеринг — отображение страницы:

Рекомендации Google PageSpeed Insights — устранить ресурсы, блокирующие отображение

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

Есть два решения, которые помогут решить эту проблему:

  • Если у вас мало JavaScript или CSS, вы можете просто встроить их в HTML файл, чтобы избавиться от этого предупреждения. Для WordPress вы можете сделать это с помощью плагина типа Autoptimize. К сожалению большинство сайтов WordPress имеют достаточно много JavaScript и CSS кода и этот способ не подойдет таким сайтам.
  • Другой вариант — отложить загрузку кода JavaScript с помощью атрибута defer. Этот атрибут загружает ваш файл JavaScript во время анализа HTML, но выполняет его только после завершения анализа. Также скрипты с этим атрибутом выполняются в порядке появления на странице.

 

2. Избегайте длинных цепочек критических запросов

Концепция объединения критических запросов связана с Critical Rendering Path (CRP) и тем, как браузеры загружают ваши страницы. Некоторые элементы, такие как JavaScript и CSS, которые мы обсуждали выше, должны быть полностью загружены, прежде чем ваша страница станет видимой.

В рамках этой рекомендации Google PageSpeed Insights покажет вам цепочку запросов на странице, которую вы загружаете прежде чем отобразится страница:

Рекомендации Google PageSpeed Insights — цепочка критический запросов

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

Несколько методов достижения этой цели мы обсудим в рамках других рекомендаций, в том числе:

  • Устранение ресурсов, блокирующих рендеринг
  • Отложенная загрузка изображений
  • Сокращение и минификация CSS и JavaScript

Кроме того, вы можете оптимизировать порядок загрузки ресурсов, чтобы сократить CRP.

Google PageSpeed ​​Insights считает этот аудит рекомендательным, в отличие от многих других рекомендаций, поэтому она выделена серым цветом. Эта информация просто доступна, чтобы помочь вам улучшить время загрузки.

3. Сохраняйте количество запросов минимальным, а размеры ресурсов небольшими

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

Рекомендации Google PageSpeed Insights — цепочка критический запросов

Здесь Google предлагает создать для сайта файл budget.json, который отвечает за бюджет производительности. Создание бюджета производительности дает вам набор стандартов, за которые вы будете отвечать. Когда вы перебираете свой бюджет, вы можете принять решение о том, следует ли исключить или оптимизировать ресурсы в соответствии с заранее определенными правилами. Подробнее о создании бюджета производительности вы можете узнать по ссылке.

4. Минификация CSS

Сокращение вашего CSS — это процесс сжатия ваших файлов за счет удаления ненужных символов, пробелов и дублирования. Google рекомендует эту практику, потому что она уменьшает размеры файлов CSS и, следовательно, может улучшить скорость загрузки:

Рекомендации Google PageSpeed Insights — минификация CSS файлов

Чтобы минимизировать ваши CSS-файлы рекомендуем использовать плагин WP Rocket, если у вас сайт на WordPress.

5. Минификация JavaScript

То же самое, что было в предыдущем пункте относится и к вашим файлам JavaScript.

Рекомендации Google PageSpeed Insights — минификация JS файлов

С минификацией JS вам так же поможет плагин WP Rocket.

6. Удалите неиспользуемый CSS код

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

Рекомендации Google PageSpeed Insights — удаление неиспользуемого CSS кода

Решение здесь по сути такое же, как и для устранения CSS, блокирующего рендеринг. Вы можете встроить или отложить стили любым удобным для вас способом. Вы также можете использовать такой инструмент, как Chrome DevTools, чтобы найти неиспользуемый CSS, который необходимо оптимизировать.

7. Минимизируйте работу основного потока

«Основной поток» — это основной элемент браузера пользователя, который отвечает за превращение кода в веб-страницу, с которой посетители могут взаимодействовать. Он анализирует и выполняет HTML, CSS и JavaScript. Кроме того, он отвечает за взаимодействие с пользователем.

Это означает, что когда основной поток обрабатывает код вашего сайта, он еще не может обрабатывать запросы пользователей. Если работа основного потока вашего сайта занимает слишком много времени, это может привести к плохой работе UX и медленному времени загрузки страницы.

Google PageSpeed помечает страницы, которые занимают больше четырех секунд, чтобы завершить работу основного потока:

Рекомендации Google PageSpeed Insights — минимизация работы основного потока

Некоторые из методов, используемых для сокращения работы основного потока, уже были рассмотрены в других разделах этого поста:

  • Сокращение вашего кода
  • Удаление неиспользуемого кода
  • Реализация кэширования

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

Webpack часто используется для разделения кода. Обратите внимание, что это довольно продвинутая техника и она не подходит для новичков.

8. Сократить время выполнения JavaScript

Выполнение JavaScript часто забирает наибольшее количество времени у работы основного потока, чем другие ресурсы. У PageSpeed Insights есть отдельная рекомендация предупреждать вас, если выполнение JavaScript оказывает существенное влияние на производительность вашего сайта:

Рекомендации Google PageSpeed Insights — сокращение времени выполнения JavaScript

Методы, предложенные выше для сокращения работы основного потока, также должны устранить это предупреждение в ваших результатах PageSpeed.

9. Уменьшите время отклика сервера (TTFB)

Время до первого байта (TTFB) — это показатель времени, которое требуется браузеру для получения первого байта данных с сервера вашего сайта после выполнения запроса. Поэтому сокращение времени отклика сервера входит в число рекомендаций Google PageSpeed Insights. Если вам удастся достичь низкого TTFB, вы увидите это сообщение в разделе «Успешные аудиты»:

Рекомендации Google PageSpeed Insights — сокращение времени ответа от сервера

Есть несколько факторов, которые могут повлиять на ваш TTFB. Некоторые стратегии снижения этого включают:

  • Выбор качественного веб-хостинга
  • Использование легких тем и плагинов
  • Сокращение количества плагинов, установленных на вашем сайте
  • Использование сети доставки контента (CDN)
  • Реализация кэширования браузера
  • Выбор надежного поставщика доменных имен (DNS)

10. Правильный размер изображения

Медиа-файлы, такие как изображения, могут сильно снизить производительность вашего сайта. Правильный подбор их размеров — это простой способ сократить время загрузки:

Рекомендации Google PageSpeed Insights — подбор правильного размера изображения

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

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

Далее нужно указать атрибут srcset, который добавляется в теги <img> для указания альтернативных файлов изображений разных размеров. Браузеры могут прочитать этот список изображений в теге и определить какой вариант лучше всего подходит для экрана пользователя, и предоставить эту версию вашего изображения.

Например, скажем, что у вас есть изображение в хедере сайта и вы хотите, чтобы оно было отзывчивым. Вы можете загрузить три его версии шириной 800, 480 и 320 пикселей. Затем можно применить атрибут srcset, например так:

<img srcset="header-image-800w.jpg 880w,
  Header-image-480w.jpg 480w,
  Header-image-320w.jpg 320w"
 sizes="(max-width: 320px) 280px,
  (max-width: 480px) 440px,
  800px"
 src="header-image-800w.jpg">

Атрибут srcset указывает различные доступные файлы, а атрибут sizes сообщает браузерам, какой из них следует использовать, исходя из текущего размера экрана.

11. Отложите загрузку скрытых изображений

Процесс откладывание загрузки закадровых изображений более известен как «отложенная загрузка». Это означает, что вместо того, чтобы заставлять браузер загружать каждое изображение на странице перед отображением вышеупомянутого контента, он будет загружать только те, которые видны сразу.

Меньшая загрузка до того, как страница станет видимой, означает лучшую производительность, поэтому Google рекомендует этот метод:

Рекомендации Google PageSpeed Insights — подбор правильного размера изображения

Есть несколько плагинов WordPress, специально созданных для отложенной загрузки, в том числе a3 Lazy Load и Lazy Load by WP Rocket. Различные плагины оптимизации изображения и производительности, такие как Autoptimize, также имеют функции отложенной загрузки.

12. Эффективно кодировать изображения

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

Рекомендации Google PageSpeed Insights — эффективная кодировка изображений

Ключ к достижению этой рекомендации — наименьший размер файла, при приемлемом качестве изображения. Плагины, такие как Imagify и Smush, могут помочь с этой задачей.

Другие рекомендации, которые влияют на то, «пройдете» вы или «не пройдете» аудит «Эффективное кодирование изображений» включают:

  • Использование изображений в правильном размере
  • Реализация отложенной загрузки изображений
  • Преобразование изображений в форматы файлов следующего поколения, такие как WebP

13. Используйте современные форматы изображений

Некоторые форматы файлов изображений загружаются быстрее, чем другие. К сожалению, это не относится к обычным форматам таким как PNG или JPEG. Изображения WebP становятся новым стандартом, и Google PageSpeed сообщит вам, если ваши изображения не соответствуют ему:

Рекомендации Google PageSpeed Insights — современные форматы изображений

Эта рекомендация может показаться сложной, так как у вас, вероятно, уже есть много изображений на вашем сайте в старых форматах. К счастью, есть плагины для WordPress, которые могут помочь. Например, Imagify и Smush предлагают функцию преобразования изображений в WebP формат.

14. Используйте видео форматы вместо GIF анимаций

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

К сожалению, за эти преимущества приходится платить скоростью загрузки. GIF-файлы требуют неотложенной загрузки, поэтому PageSpeed ​​Insights рекомендует вместо этого показывать видеоконтент:

Оптимизация сайта Google PageSpeed Insights — рекомендация использования видео вместо GIF анимаций

Во-первых, для преобразования GIF-файлов в видеоформаты, вам нужно решить какой формат видео вы хотите использовать:

  • WebM: самый оптимизированный видеоформат для веба, но он имеет совместимость не со всеми браузерами
  • MP4: создает файлы немного большего размера чем WebM, но совместим c большинством основных браузеров

Далее вы можете просто воспользоваться онлайн конвертерами форматов.

Встраивание видеоконтента вместо анимации

GIF анимации обычно воспроизводятся автоматически и работают по циклу и они всегда без звука. Внедрение вашего нового файла MP4 или WebM на ваш сайт WordPress не даст этих возможностей. Однако вы можете сымитировать их с помощью очень простого кода. Загрузите свое видео в медиатеку, а затем добавьте следующий код на страницу, где вы хотите вставить анимацию:

<video autoplay loop muted playsinline>
  <source src="output.mp4" type="video/mp4">
</video>

Атрибуты тега video сделают ваше видео более «похожим на GIF». Просто измените имя и тип файла в соответствии с вашим ресурсом. Для получения более подробной информации по этому вопросу мы рекомендуем прочитать руководство Google по преобразованию GIF-файлов в видео.

15. Убедитесь, что текст остается видимым во время загрузки веб-шрифта

Как и изображения, шрифты, как правило, представляют собой большие файлы, загрузка которых занимает много времени. В некоторых случаях браузеры могут скрывать ваш текст до тех пор, пока шрифт, который вы используете, не загрузится полностью, что приведет к тому что вы не пройдете этот тест в Google PageSpeed Insights и получите рекомендацию:

Оптимизация сайта Google PageSpeed Insights — оставляйте текст видимым до загрузки шрифта

Google рекомендует вам решить эту проблему, применив директиву @font-face. Для этого откройте таблицу стилей (style.css) и добавьте следующее после атрибута src в @font-face:

font-display: swop

16. Включите сжатие текста

Рекомендация о включении сжатия текста в Google PageSpeed ​​Insights относится к использованию сжатия GZIP на сервере:

Оптимизация сайта Google PageSpeed Insights — включите сжатие текста

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

Первый — установить плагин с функцией сжатия GZIP. Плагин WP Rocket имеет такой функционал, если вы готовы за него заплатить.

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

Большинство сайтов WordPress работают на серверах Apache. Код для включения сжатия GZIP выглядит следующим образом:

<IfModule mod_deflate.c>
  # Сжатие HTML, CSS, JavaScript, текста, XML и шрифтов
  AddOutputFilterByType DEFLATE application / javascript
  AddOutputFilterByType DEFLATE application / rss + xml
  AddOutputFilterByType DEFLATE application / vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application / x-font
  AddOutputFilterByType DEFLATE application / x-font-opentype
  AddOutputFilterByType DEFLATE application / x-font-otf
  AddOutputFilterByType DEFLATE application / x-font-truetype
  AddOutputFilterByType DEFLATE application / x-font-ttf
  AddOutputFilterByType DEFLATE application / x-javascript
  AddOutputFilterByType DEFLATE application / xhtml + xml
  AddOutputFilterByType DEFLATE application / xml
  AddOutputFilterByType DEFLATE font / opentype
  AddOutputFilterByType DEFLATE font / otf
  AddOutputFilterByType DEFLATE font / ttf
  AddOutputFilterByType DEFLATE image / svg + xml
  AddOutputFilterByType DEFLATE image / x-icon
  AddOutputFilterByType DEFLATE text / css
  AddOutputFilterByType DEFLATE text / html
  AddOutputFilterByType DEFLATE text / javascript
  AddOutputFilterByType DEFLATE text / plain
  AddOutputFilterByType DEFLATE text / xml

  # Удалить ошибки браузера (необходимо только для действительно старых браузеров)
  BrowserMatch ^ Mozilla / 4 gzip-только-текст / html
  BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip
  BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html
  Заголовок приложения Vary User-Agent
</ IfModule>

Вы должны добавить его после #END в вашем файле .htaccess. Если ваш WordPress-сайт находится на сервере Nginx, вам следует добавить следующий код в файл nginx.conf:

36 gzip на;
37 gzip_disable "MSIE [1-6] \. (?!. * SV1)";
38 gzip_vary on;
39 gzip_types text / обычный текст / css текст / приложение javascript / приложение javascript / x-javascript;

Если вы хотите проверить включено ли GZIP на вашем сервере, мы предлагаем использовать GiftOfSpeed:

Оптимизация сайта Google PageSpeed Insights — сервис GiftOfSpeed

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

17. Предварительное подключение к необходимым ресурсам

Скорее всего, у вас есть хотя бы один сторонний ресурс на вашем сайте — Google Analytics является типичным примером. Браузерам может потребоваться время для установления соединения с этими ресурсами, что замедляет скорость загрузки.

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

Если Google считает, что эта страница может принести пользу вашей странице, вы увидите предложение Предварительное подключение к требуемым источникам:

предварительно подключить необходимые источники
Предварительно подключиться к рекомендации по требуемому происхождению

Существует несколько способов реализации этой стратегии оптимизации. Если вам удобно редактировать файлы тем WordPress, вы можете добавить тег ссылки в файл header.php. Вот пример:

<link rel = «preconnect» href = «example.com»>

В этом случае тег сообщает браузерам, что им нужно как можно быстрее установить соединение с example.com. В Google PageSpeed ​​Insights будут перечислены все релевантные ресурсы, для которых вы должны добавить теги ссылок с атрибутами предварительного подключения.

Другой вариант — использовать плагин для достижения того же эффекта. Perfmatters включает в себя функцию предварительного подключения (отказ от ответственности: я один из основателей Perfmatters). WP Rocket и Pre * Party Resource Hints включают схожую функциональность.

продвижение сайта
Cody Maverick:
Related Post
  1. Обзор Next 13 — что нового?
  2. 9 важных Soft Skills для разработчика
  3. Vue CLI установка и обзор инструмента