отложенная загрузка скриптов wordpress

Включаем асинхронную загрузку JavaScript на WordPress

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

Для чего это нужно?

Все очень просто. Современный сайт представляет из себя сборник самых разнообразных скриптов, тегов, сниппетов, стилей, шрифтов и всего прочего. Как вы понимаете, чем больше «плюшек», тем дольше грузится ваш сайт. Что касается JavaScript, тут отдельная песня. Замечали ли вы такой косяк, когда страница вроде бы загрузилась, но вкладка показывает, что страница все еще грузится? Так бывает, когда какой-то отдельный скрипт не прогрузился до конца. Ладно бы так, иногда страница вообще простаивает до тех пор, пока не загрузится тот самый, вроде бы и не совсем важный скрипт. А у ваших пользователей просто может не хватить терпения.

Асинхронная загрузка JavaScript

Данное понятие полностью противоположно синхронной загрузке, коей является обычный скрипт вида:

Асинхронный вызов скрипта выглядит так:

Всего лишь добавился соответствующий атрибут.

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

Как автоматизировать процесс?

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

Находим уже знакомый нам файл functions.php вашей темы и вставляем туда (например в конец) следующий код:

Заключение

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

Источник

Асинхронная загрузка JavaScript в WordPress

Философия WordPress рекомендует оформлять загрузку JacaScript в файле functions.php вашей темы. Но предлагаемый кодексом код не учитывает атрибут асинхронной загрузки async.

Правила загрузки JavaScript

Для ускорения загрузки вашего сайта ссылки на файлы JavaScript лучше располагать в конце HTML документа перед закрывающим тегом BODY.

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

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

Как добавить async для JavaScript в WordPress

Начиная с версии WordPress 4.1 был введен новый фильтр, который обеспечивает простой способ добавления параметра асинхронной загрузки файлов скриптов.

Чтобы реализовать асинхронную загрузку добавьте следующий код в файл functions.php вашей темы:

Важное замечание. Замените myscript-1, myscript-2, myscript-3 на дескрипторы своих скриптов, которые необходимо загружать асинхронно.

То есть если вы загружаете скрипты следующим кодом:

отложенная загрузка скриптов wordpress. wordpress javascript async 0. отложенная загрузка скриптов wordpress фото. отложенная загрузка скриптов wordpress-wordpress javascript async 0. картинка отложенная загрузка скриптов wordpress. картинка wordpress javascript async 0. Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.

то дискрипторами будут являться ‘jquery’ и ‘adsbygoogle’. И строка массива асинхронных скриптов будет выглядеть так:

Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:

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

Похожий вариант асинхронной загрузки скриптов в WordPress предложил Тимур Камаев — https://wp-kama.ru/hook/script_loader_tag.

Альтернативный код асинхронной загрузки скриптов в WordPress

Для асинхронной загрузки JavaScript в WordPress добавьте хеш-тег #asyncload к адресу загрузки скрипта, например:

Код преобразования для асинхронной загрузки в таком случае будет выглядеть так (добавьте его в файл functions.php вашей темы):

Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:

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

Благодарности

При написании статьи были использованы следующие ресурсы:

Источник

Как отложить или асинхронно этот фрагмент WordPress javascript для загрузки, наконец, для более быстрого времени загрузки страницы?

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

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

Я читал о defer=’defer’ и асинхронные функции в javascript, и я думаю, что один из них выполнит то, что я пытаюсь достичь. Но я не понимаю, как это сделать в php-файле.

например, вот фрагмент из php-файла одного конкретного плагина, где вызывается файл javascript:

Я читал, что лучше всего сделать что-то подобное для более быстрого времени загрузки страницы:

но я не знаю, как это сделать в php-файле. Я хочу сделать это со всеми моими файлами javascript.

как бы я добиться отсрочки или asyncing этот фрагмент JavaScript для нагрузок в прошлом и ускоряет время загрузки страницы? Каков был бы идеальный способ увеличить время загрузки страницы во всех браузерах? Спасибо за любые рекомендации, которые кто-либо может предложить!

11 ответов

этой блоге ссылки на два плагина, представляющих интерес:

Асинхронный Javascript
повышение производительности загрузки страницы путем асинхронной загрузки javascript с помощью head.js

WP отложенные Javascripts
отложить загрузку всех javascripts, добавленных с помощью wp_enqueue_scripts, используя LABJS (асинхронный javascript библиотека.)

не тестировали их, но проверили код, и они делают довольно причудливые вещи с помощью процесса запроса скриптов WordPress.

или более универсальный способ:

таким образом, вы можете добавить async в любой скрипт без изменений кода, просто добавьте #asyncload в url скрипта как:

спасибо @MattKeys @crissoca за вдохновляющий мой ответ здесь.

другое решение с использованием другого фильтра, который может использоваться для целевого дескриптора конкретного скрипта:

обновление

вот моя измененная версия решения:

Я считаю, что это плохая практика откладывать / асинхронный WordPress jQuery. Лучшим решением было бы исключить jQuery из фильтра:

можно использовать defer вместо async

очень мало кода модификации Майк Kormendy, что позволяет добавлять сразу 2 атрибута:

правильный способ сделать это

Источник

Как “Отложить” Загрузку JavaScript на Сайте WordPress

отложенная загрузка скриптов wordpress. %D0%BA%D0%B0%D0%BA %D0%BE%D1%82%D0%BB%D0%BE%D0%B6%D0%B8%D1%82%D1%8C %D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D1%83 javascript %D0%BD%D0%B0 %D1%81%D0%B0%D0%B9%D1%82%D0%B5 wordpress. отложенная загрузка скриптов wordpress фото. отложенная загрузка скриптов wordpress-%D0%BA%D0%B0%D0%BA %D0%BE%D1%82%D0%BB%D0%BE%D0%B6%D0%B8%D1%82%D1%8C %D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D1%83 javascript %D0%BD%D0%B0 %D1%81%D0%B0%D0%B9%D1%82%D0%B5 wordpress. картинка отложенная загрузка скриптов wordpress. картинка %D0%BA%D0%B0%D0%BA %D0%BE%D1%82%D0%BB%D0%BE%D0%B6%D0%B8%D1%82%D1%8C %D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D1%83 javascript %D0%BD%D0%B0 %D1%81%D0%B0%D0%B9%D1%82%D0%B5 wordpress. Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.

Введение

Есть несколько причин для того, чтобы “отложить” (парсинг) загрузку JavaScript на сайте WordPress. Самой важной, станет скорость и производительность сайта. В основном JavaScript находится между тегами и когда сайт открывается, он загружает весь код, начиная с самого верха и донизу. Это означает, что большое количество скриптов или длинных строк увеличит время загрузки сайта и появления его контента, так как сначала ему необходимо полностью загрузить все JavaScript. Откладывая парсинг JavaScript, сайт не будет ждать загрузки JS кода, что выльется в более быстрое время загрузки сайта. В этом руководстве мы рассмотрим два способа для “откладывания” загрузки JavaScript в WordPress.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Шаг 1 — Анализ сайта

Чтобы выяснить, необходимо ли вам применить это руководство, вы можете проанализировать ваш WordPress используя инструмент GTMetrix.

Средняя рекомендованная оценка в GTMetrix должна быть не менее 71%. Вот результаты тестового сайта на WordPress:

отложенная загрузка скриптов wordpress. defer js results1. отложенная загрузка скриптов wordpress фото. отложенная загрузка скриптов wordpress-defer js results1. картинка отложенная загрузка скриптов wordpress. картинка defer js results1. Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.

Шаг 2 — «Откладывание» загрузки JavaScript на сайте WordPress

На выбор есть несколько способов, которые помогут вам «отложить» загрузку JS на вашем сайте WordPress.

ВАЖНО! Убедитесь, что перед началом сделали резервное копирование сайта.

Вариант 1 – «Откладывание» загрузки JavaScript через плагины WordPress

Использование WordPress плагинов, таких как WP Deferred JavaScript, является одним из самых легких и быстрых путей для «откладывания» загрузки JS на сайте WordPress.

Еще один плагин который поможет вам в этом деле, это Speed Booster Pack. Помимо основного своего предназначения, он также предлагает вам несколько дополнительных методов оптимизации вашего WordPress.

После установки Speed Booster Pack вам необходимо перейти в раздел Settings (Настройки) плагина.

отложенная загрузка скриптов wordpress. speed boster pack 1. отложенная загрузка скриптов wordpress фото. отложенная загрузка скриптов wordpress-speed boster pack 1. картинка отложенная загрузка скриптов wordpress. картинка speed boster pack 1. Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.

Отметить флажком Defer parsing of javascript files и нажать Save Changes (Сохранить изменения).

отложенная загрузка скриптов wordpress. speed boster pack 2. отложенная загрузка скриптов wordpress фото. отложенная загрузка скриптов wordpress-speed boster pack 2. картинка отложенная загрузка скриптов wordpress. картинка speed boster pack 2. Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.

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

Вариант 2 – «Откладывание» загрузки JavaScript через functions.php

Для этого, вы должны скопировать данный код в нижнюю часть вашего файла wp-includes/functions.php:

Шаг 3 — Проверка изменений

Используйте тот же инструмент для проверки работы сайта WordPress снова. Здесь представлены результаты после проведенных манипуляций:

отложенная загрузка скриптов wordpress. defer js results2. отложенная загрузка скриптов wordpress фото. отложенная загрузка скриптов wordpress-defer js results2. картинка отложенная загрузка скриптов wordpress. картинка defer js results2. Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.

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

Заключение

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

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

Источник

Contact From 7 – отложенная загрузка скриптов и стилей для ускорения WordPress

отложенная загрузка скриптов wordpress. poster contact from 7 otlozhennaya zagruzka skriptov i stilei dlya uskoreniya wordpress. отложенная загрузка скриптов wordpress фото. отложенная загрузка скриптов wordpress-poster contact from 7 otlozhennaya zagruzka skriptov i stilei dlya uskoreniya wordpress. картинка отложенная загрузка скриптов wordpress. картинка poster contact from 7 otlozhennaya zagruzka skriptov i stilei dlya uskoreniya wordpress. Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.

https://github.com/joeldbirch/lazy-cf7-assetsИ так, если Вы такой же “помешанный” на скорости администратор WordPress как и я, значит Вам будет полезно знать что в наших силах осуществить подключение скрипта scripts.js плагина CF7 в defer режиме. Для этого добавьте код ниже в файл темы function.php.

Добавляем в function.php

Официальный вариант подключения стилей и скриптов

Самый что ненаесть официальный вариант отложенного подключения, написанный из слов разработчиков плагина Contact Form 7.

В своих настройках по умолчанию Contact Form 7 загружает свою таблицу стилей и JavaScript на каждую страницу. Вы можете подумать, что это будет излишним или расточительным, и если Вы хотите загружать их только на те страницы, которые содержат контактные формы. Я понимаю это чувство, но плагин испытывает техническую трудность, так как не знает, содержит ли страница контактные формы или нет (при загрузке страницы). Тем не менее, я могу показать вам способ обойти это.

Шаг 1: Прекратить загрузку таблицы стилей JavaScript и CSS на всех страницах

Когда значение WPCF7_LOAD_JS = false (по умолчанию: true ), плагин не загружает JavaScript. Вы можете установить значение этой константы в вашем wp-config.php следующим образом:

Аналогично, вы можете контролировать загрузку таблицы стилей CSS с помощью WPCF7_LOAD_CSS. Контактная форма 7 не загружает таблицу стилей CSS, когда значение WPCF7_LOAD_CSS = false (по умолчанию: true ). Вы можете установить его в wp-config.php следующим образом:

Или вы также можете отключить загрузку JavaScript и CSS, добавив несколько строк кода в файл functions.php вашей темы, например так:

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

Шаг 2: Загрузите файлы на страницах, которые содержат контактные формы

Например, предположим, у вас есть страница с именем «Контакты», и это единственная страница, которая содержит форму контакта. И предположим, что у вас есть файл шаблона для страницы «Контакты» с именем contact.php в папке вашей темы. Теперь вам нужно загрузить таблицу стилей JavaScript и CSS контактной формы 7 специально на странице «Контакты».

Для этого вы должны отредактировать файл шаблона contact.php и вставить в него следующие строки:

После отмены автоматического включения JavaScript, вы можете теперь настроить подключение файлов JavaScript плагина для динамической загрузки, импортировав Lazy CF7 Assets и инициализировав его из пакета JavaScript вашего сайта, например:

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

Ознакомиться с дополнением CF7 можно по данной ссылке:

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *