Реализация Preload, Prefetch, Preconnect в WordPress

Воспользуйтесь современными функциями браузера, такими как предварительная загрузка, предварительная выборка, предварительное подключение, чтобы сделать веб-сайт WordPress быстрее.

Кому, как владельцу сайта, не нравится делать все возможное, чтобы веб-страница загружалась быстрее?

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

Примечание . Методы подсказок браузера не очень помогают при первом посещении веб-сайта, но последующие запросы выполняются быстрее.

Предварительная загрузка

Вы можете использовать тег preload , чтобы указать браузеру, что некоторые из статических ресурсов следует загружать заранее. Это может быть изображение, шрифт, JavaScript, CSS, скрипты, видео и т.д. Это помогает расставить приоритеты загрузки ресурсов; следовательно, производительность улучшается.

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

Вы можете использовать следующие плагины для настройки функции предварительной загрузки.

Улучшенные подсказки ресурсов — бесплатный плагин для настройки файлов CSS и JS.

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

Как узнать, включена ли предварительная загрузка?

Самый быстрый способ узнать это — просмотреть исходный код страницы. Вы должны увидеть что-то вроде того, что показано ниже.

 <link rel="preload" as="style" href="IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">

Не все браузеры поддерживают предварительную загрузку во время записи. Итак, проверьте матрицу совместимости перед реализацией.

Предварительное подключение

Вы загружаете ресурсы с других доменов? Может CDN?

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

Предварительное подключение подсказывает браузеру установить подключение к другим доменам в фоновом режиме, чтобы сэкономить время на поиск DNS, перенаправление, рукопожатие TCP, согласование TLS и т. д. Идея состоит в том, чтобы уменьшить задержку, чтобы обеспечить быструю загрузку ресурсов из другого домена.

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

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

 <link rel="preconnect" href="https://ANOTHERSITE.com">

Примечание. Если вы загружаете ресурсы из домена, для которого требуется CORS, вам необходимо указать, что это должно выглядеть как crossorigin и вывод.

 <link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

Preconnect совместим с последними версиями Chrome, Edge, Firefox, Safari.

Предварительная выборка

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

Предварительная выборка DNS — поясняется ниже

Предварительная выборка ссылок — настраивается с помощью <link url ..>. Используется для предварительной загрузки HTML или статических ресурсов. Вы можете выполнять предварительную выборку ресурсов, используя as качестве атрибута.

<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">

as атрибут поддерживает различные ресурсы, такие как аудио, видео, сценарий, дорожка, стиль, шрифт, объект, документ и т. д. Предварительную выборку ссылок можно настроить с помощью плагина Pre Party Resource Hints.

Предварительная выборка DNS

Загружаете ресурсы из многих доменов и хотите разрешить их в фоновом режиме?

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

Допустим, вы загружаете ресурсы из 3 доменов, и каждому домену требуется около 100 мс для выполнения поиска DNS, тогда вы сэкономите задержку в 300 мс.

Разве это не круто?

Вы можете реализовать это с помощью плагина perfmatters или добавить следующее в файл functions.php вашей темы, если вам удобно редактировать файлы темы.

 //* DNS Prefetching function dns_prefetch() { echo '<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" /> <link rel="dns-prefetch" href="https://ANDANOTHERONE.com" /> <link rel="dns-prefetch" href="https://AND.SOMEMORE.com" /> } add_action('wp_head', 'dns_prefetch', 0);

Вы можете прочитать больше в веб-документах Mozilla.

Пререндеринг

Ожидаете ли вы, что пользователи вашего сайта будут переходить на потенциальную страницу?

Prerender может помочь загрузить эти ресурсы в фоновом режиме, и когда пользователь нажимает на него, он получает их очень быстро. Вы можете добиться этого с помощью плагина Pre Party Resource Hints.

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

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

Плагин Pre Party Resource Hints — бесплатный плагин предлагает предварительную выборку DNS, предварительную выборку ссылок, предварительную визуализацию, предварительное подключение и предварительную загрузку.

Улучшенные подсказки ресурсов — альтернатива приведенным выше.

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

WP Rocket — с хорошей репутацией, которому доверяют более 800 000 сайтов. Это стоило 49 долларов за один сайт.

Perfmatters — легкий и простой в использовании, стоит 24,95 доллара за один сайт. Как я пишу, он предлагает следующие функции.

Это большая оптимизация.

Вывод

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

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