Как использовать Instant Page в WordPress для предварительной загрузки контента

Если вы хотите ускорить свой сайт WordPress, используйте Instant Page на WordPress — это менее известная тактика, которая использует силу «предварительной загрузки».

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

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

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

Давай начнем!

Введение в предварительную загрузку «точно в срок»

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

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

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

• Внутренние ссылки на вашем сайте
• Ссылки на внешние страницы (если хотите!)

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

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

Стоит отметить, что предварительная загрузка — это не то же самое, что «предварительная выборка» — еще один термин, с которым вы можете столкнуться. Предварительная выборка также заставляет ваш браузер загружать ресурсы в фоновом режиме. Однако он делает это с более низким приоритетом, что не соответствует цели почти немедленного начала загрузки.

Instant Page позволяет легко настроить предварительную загрузку «точно в срок».

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

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

Прежде чем добавлять скрипт на свой веб-сайт, вам необходимо провести несколько внутренних тестов скорости. Для этого нам нравится использовать Chrome Dev Tools. Просто щелкните правой кнопкой мыши на любой странице вашего сайта и выберите Осмотреть вариант. Открыв инструменты справа, выберите Сеть вкладку, затем нажмите на внутреннюю ссылку:

DOMContentЗагружено В разделе в правом нижнем углу указано, сколько времени потребовалось для загрузки HTML-кода страницы. Проведите несколько таких тестов и запишите результаты – это ваш базовый уровень.

Теперь давайте рассмотрим, как использовать Instant Page в WordPress.

Самый простой способ использовать Instant Page в WordPress

Хотя в следующем разделе мы покажем вам ручной метод использования Instant Page в WordPress, самый простой способ начать работу с Instant Page в WordPress — это использовать специальный плагин:

Здесь не требуется никакого руководства – вы просто устанавливаете плагин, и он начинает работать!

Как вручную использовать Instant Page в WordPress

Мы рекомендуем плагин большинству пользователей, но вы также можете вручную добавить скрипт Instant Page на свой сайт WordPress.

Небольшое преимущество использования ручного метода заключается в том, что у вас есть немного больше контроля над тем, как работает предварительная загрузка.

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

Мы будем использовать последний метод, поскольку для работы Instant Page требуется всего несколько строк кода.

Для этого вам нужно получить доступ к своему веб-сайту через протокол передачи файлов (FTP) и перейти к своему WordPress. корень папка.

Оказавшись там, перейдите в wp-content/themes. и найдите папку, соответствующую вашей дочерней теме.

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

Затем найдите footer.php файл, который должен содержать последнюю часть вашей темы. теги. Откройте файл в текстовом редакторе и найдите закрывающий тег body (). Вы можете увидеть часть примера footer.php. файл ниже, но имейте в виду, что ваш может выглядеть немного по-другому в зависимости от используемой вами темы:

Теперь вставьте следующий фрагмент кода до этот тег. Затем вам нужно сохранить изменения в файле перед его закрытием:

По умолчанию скрипт предварительно загружает только внутренние ссылки. Однако вы можете настроить его, чтобы включить внешнюю предварительную загрузку, добавив атрибут в тег , например:

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

Тестирование своевременной предварительной загрузки в WordPress

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

Во время наших тестов мы не заметили существенных различий во времени загрузки WordPress. Там был небольшое снижение по данным Chrome Dev Tools, но, как видите, оно составило всего несколько миллисекунд. Это неплохо, но мы не достигаем снижения задержки даже на 100 мс.

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

В конечном счете, реализовать своевременную предварительную загрузку легко, если вы являетесь пользователем WordPress. Сокращение задержки — это хорошо, но наши тесты в WordPress не показали значительного снижения, что означает, что на основе этих результатов это меняет правила игры только в определенных ситуациях.

Заключение

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

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

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

Есть ли у вас вопросы о том, как работает мгновенная страница или предварительная загрузка? Давайте поговорим о них в разделе комментариев ниже!

Бесплатное руководство

4 основных шага для ускорения
Ваш сайт WordPress

Следуйте простым шагам из нашей мини-серии из 4 частей.
и сократите время загрузки на 50-80%. 🚀

Ура! 🎉Вы дочитали статью до конца!