Как отложить загрузку скрипта в WordPress
Опубликовано: 2022-05-02Ищете способ отложить загрузку скрипта в WordPress?
Пользователи WordPress всегда находятся в поиске передовых технологий, позволяющих сократить время загрузки своего веб-сайта. Скорость невероятно важна для многих факторов, которые создают успешное присутствие в Интернете. Когда дело доходит до скорости WordPress, двумя основными факторами являются опыт посетителей и рейтинг в поисковых системах.
Существует множество сторонних инструментов, которые улучшают функциональность или видимость веб-сайта WordPress. Эти сторонние инструменты используют JavaScript для добавления своих функций на веб-сайт WordPress.
Недостатком этого добавленного стороннего JavaScript является то, что в большинстве случаев это увеличивает время загрузки страницы для каждого URL-адреса, на котором существует скрипт.
Это означает, что везде, где у вас есть сценарий на вашей странице, и посетитель пытается получить доступ к этой странице, время, необходимое для полной загрузки страницы, будет увеличено из-за сценария.
Возможно, вы даже не уверены, работает ли ваш сайт быстрее или медленнее. Взгляните на ссылку ниже, чтобы дать вам некоторую информацию о некоторых бесплатных инструментах тестирования скорости веб-сайта, которые вы можете использовать для определения скорости вашего сайта.
https://www.wpfixit.com/free-website-speed-testing-tools/
Кажется несправедливым, что вы должны обменивать функциональность на скорость, не так ли?
Внешние скрипты дорого обходятся при загрузке страницы вашего сайта
Сторонние скрипты есть везде. Согласно отчету HTTP Archive о состоянии JavaScript, среднее количество внешних скриптов, запрашиваемых веб-сайтами, составляет 20 , а их общий размер составляет около 449 КБ .
Колоссальные 93,59% веб-страниц содержат как минимум один сторонний ресурс. Более глубокое изучение тех же данных показывает, что 76% веб-сайтов отслеживают пользователей с помощью сценариев аналитики.
Худшее влияние сторонних скриптов — это задержка критического пути рендеринга, а также влияние на ваши баллы Core Web Vitals, начиная с оценки FID.
Критический путь рендеринга — это набор действий, которые браузер выполняет для сборки HTML, CSS и JavaScript в живой, удобный веб-сайт.
Естественно, большую роль здесь играет размер полезной нагрузки сторонних скриптов, но есть еще один важный фактор, который следует учитывать.
JavaScript требует много ресурсов процессора для выполнения. Даже если вы оптимизируете сторонние скрипты, чтобы уменьшить влияние на время рендеринга, они все равно могут повлиять на метрику «Время до интерактивности». Он измеряет, насколько быстро пользователи могут взаимодействовать с веб-страницей.
Чем медленнее, тем больше будут разочарованы ваши пользователи и тем выше вероятность того, что они покинут ваш сайт.
Наиболее часто используемые внешние скрипты в WordPress
Ниже приведен список некоторых из наиболее часто используемых внешних скриптов на веб-сайте WordPress. Многие из них вы узнаете, потому что вы, вероятно, используете их на своем веб-сайте.
- Гугл Аналитика
- Код пикселя Facebook
- Виджеты живого чата
- Встраивание видео
- Встроенные формы
- Виджеты социальных сетей
- Встроенные формы
Достигните величия, когда вы откладываете загрузку скрипта в WordPress
Нет причин жертвовать скоростью ради функциональности.
Что, если мы скажем вам, что вы можете иметь и то, и другое?
Повысьте функциональность и видимость вашего веб-сайта WordPress с помощью сторонних скриптов, а также убедитесь, что каждая страница вашего веб-сайта загружается максимально быстро для ваших посетителей.
Это возможно, и это делается с помощью процесса, в котором вы откладываете загрузку скрипта в WordPress.
В обычных обстоятельствах, когда вы используете внутренний скрипт на своем веб-сайте, он будет загружаться вместе со страницей, когда посетитель обращается к одному из URL-адресов вашего сайта.
Когда вы откладываете загрузку скрипта в WordPress, внешний скрипт не начнет загрузку, пока не истечет установленный период времени задержки.
Например, если вы установите время задержки на 4 секунды, это означает, что скрипт не будет выполняться до тех пор, пока не пройдет 4 секунды после полной загрузки страницы.
Это чрезвычайно эффективно, потому что это означает, что загрузка страницы не ожидает завершения сценария. Ваш опыт посетителей улучшится, потому что страницы загружаются быстрее, и любой инструмент проверки скорости, который вы используете для проверки одного из URL-адресов на вашем веб-сайте, даст лучшие результаты.
Ниже мы рассмотрим разницу между обычной загрузкой внешнего скрипта и загрузкой скрипта с задержкой.
Регулярная загрузка внешнего скрипта
На изображении ниже показана каскадная загрузка URL-адреса со встроенным виджетом отзывов TrustPilot.
Как вы можете видеть на изображении, есть 5 внешних запросов, которые загружаются вместе с этой страницей. Эти запросы исходят от встроенного внешнего скрипта.
Задержка загрузки внешнего скрипта
Теперь давайте взглянем на ту же страницу, загруженную с задержкой загрузки скрипта в WordPress.
Этот виджет отзывов TrustPilot по-прежнему встроен на страницу, но мы установили задержку для его загрузки через 2,5 секунды после загрузки страницы.
Мало того, что количество запросов уменьшилось, обратите внимание на время полной загрузки и время загрузки, которое также уменьшилось.
Как будто скрипт даже не находится на странице во время загрузки.
Итак, теперь, когда мы объяснили высокую стоимость времени загрузки для внешних скриптов и то, как вы можете использовать их, не жертвуя скоростью, давайте покажем вам точный код, который вам нужно реализовать, чтобы достичь величия.
Загрузка исходного скрипта загрузки в WordPress
Приведенный ниже код представляет собой встроенный скрипт по умолчанию для этого виджета TrustPilot, который мы использовали в приведенных выше тестах скорости.
<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->Задержка загрузки скрипта в WordPress
Приведенный ниже код представляет собой встроенный отложенный скрипт для этого виджета TrustPilot, который мы использовали в приведенных выше тестах скорости.
<!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
head_ID.appendChild (script_element);
}, 2500 ); // ВРЕМЯ ЗАДЕРЖКИ МОЖНО РЕГУЛИРОВАТЬ
</скрипт>
<!-- Завершить сценарий TrustBox -->
<!-- Виджет TrustBox - Карусель -->
<div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme=" свет" data-stars="1,2,3,4,5" data-review-languages="en">
</div>
<!-- Конец виджета TrustBox -->Любое использование скрипта задержки загрузки в WordPress
Приведенный ниже код является шаблоном по умолчанию, который вы можете использовать для отложенной загрузки скрипта в WordPress.
В этом шаблоне есть только два элемента, которые необходимо изменить.
- URL-адрес внешнего скрипта, который вы хотите использовать
- Задержка времени, когда вы хотите запустить скрипт
<script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
head_ID.appendChild (script_element);
}, 2500 ); // ВРЕМЯ ЗАДЕРЖКИ МОЖНО РЕГУЛИРОВАТЬ
</скрипт>В заключение
Мы очень надеемся, что этот пост был полезен и помог понять, как отложить загрузку скрипта в WordPress.
Вам действительно следует использовать это для любых сторонних внешних скриптов, которые вы используете на своем веб-сайте WordPress, и вы увидите немедленное уменьшение времени загрузки страницы, что улучшит ваш рейтинг в поисковых системах и общее впечатление от посетителей.
Если у вас есть какие-либо проблемы с реализацией чего-либо из того, что вы прочитали в этом посте, оставьте комментарий ниже, и мы увидим, где вы застряли.