Otlogennayz_zagruzka_koda_analytics
Скрипты для отложенной загрузки кода внешних сервисов
12 февраля 2021
WP-Rocket-Caching-Plugin
Кэширование сайта на WordPress с помощью плагина WP Rocket
5 апреля 2021
Показать все

Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress

Оптимизация_HTML_CSS_JavaScript

Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на сайте WordPress — это комплексный подход к работе. Занимает немало времени, сил, терпения, поиска необходимой информации.

А цель одна — ускорить работу сайта, загрузку его страниц, повысить его производительность.
Еще раз напомню о требованиях Google PageSpeed, которые вступят в силу в марте 2021 года.
Читайте в статье — Оптимизация сайта под требования PageSpeed Insights.

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

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

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

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

Все это достигается насыщением кода различными Java-скриптами и стилями CSS.
Вот тут-то и возникает множество проблем при тестировании страниц сайта на PageSpeed Insights.
Неминуемо появляются предупреждения:

Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress

  • Удалите неиспользуемый код JavaScript.
    (Рассмотреть возможность уменьшения или отключения количества плагинов, загружающих неиспользуемый JavaScript.
    Если JavaScript блокирует загрузку, браузер должен загрузить, разобрать, составить и оценить сценарий, прежде чем он сможет приступить к работе, необходимой для визуализации страницы.)
  • Удалите неиспользуемый код CSS.
    (Неиспользованный CSS замедляет производительность.
    Необходимо удалить ненужные правила из таблиц стилей и отложить загрузку кода CSS, который не используется при отрисовке первого экрана.)
  • Устраните ресурсы, блокирующие отображение.
    (В отчете перечислены все URL-адреса, блокирующие первую отрисовку страницы — Google-шрифты, скрипты платежных систем и т. д.
    Рекомендуется встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов.)

Но это только верхушка айсберга. Если вносить какие-либо изменения в Редакторе темы-шаблона — минимизировать HTML или CSS, удалять неиспользуемые коды — проку от такой оптимизации будет мало.

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

Можно, конечно, поставить, в дополнение, дочернюю (Child) тему.
В ее Редакторе имеются две вкладки — Таблица стилей общая (style.css) и Функции темы (functions.php).
Кое-что сделать можно, но очень осторожно, необходимы определенные знания.
Кардинально что-то изменить здесь вряд ли получиться — только дополнить определенными функциями.

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

  1. Оптимизировать (минимизировать) коды HTML, CSS и JavaScript.
  2. Установить асинхронную загрузку некоторого кода CSS и JavaScript.
  3. Отложить загрузку отдельных CSS и JavaScript при отрисовке первого экрана.
    (В идеале, при отрисовке первого экрана Java-скрипты не должны загружаться).
  4. Произвести удаление неиспользуемого кода CSS, JavaScript с каждой страницы.

Вот этим мы и займемся. Для этого будем использовать плагин для WordPress Asset CleanUp Pro.

Плагин WP Asset CleanUP Pro для оптимизации HTML и удаления неиспользуемого кода CSS, JavaScript.

Плагин Asset CleanUP Pro позволяет избирательно удалять неиспользуемые стили CSS и Java-скрипты с любой страницы или поста, размещенных на сайте.

Минифицировать (сократить) и объединить загруженные файлы CSS и JS, чтобы уменьшить общий размер страницы и количество HTTP-запросов.

Производить очистку исходного кода HTML, настроить предварительную загрузку локальных и Google шрифтов. Выгрузку общих файлов CSS и JS по всему сайту.

Есть функция кеширования. Но, как для меня, лучше бы ее не было.
WP Asset CleanUP Pro отлично взаимодействует с более мощным плагином для кеширования — WP Rocket. Возможно, для некоторых легких сайтов и Asset CleanUP будет достаточно.

Проблема в том, что при предварительном тестировании сайта в PageSpeed Insights, файлы кеша очень мешают. Приходится делать полную очистку.

Есть две версии этого плагина. Бесплатная — Asset CleanUp, которую можно скачать с депозитария WordPress, и платная версия — Asset CleanUp Pro.
Минимальная цена базовой версии на один сайт начинается от трех с половиной тысяч.

Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress

Их отличие, друг от друга, заключается в том, что в версии Pro можно настраивать асинхронную (async) или отложенную (defer) загрузку кода CSS и JavaScript. Производить более тонкую настройку скриптов и стилей.
В бесплатной — только удаление кода.

Установка плагина Asset CleanUp Pro.

Установка плагина Asset CleanUp Pro не должна вызвать каких-либо осложнений. Все делается из Админ-панели WordPress.
Есть некоторые нюансы при установке Pro-версии. В скачанном архиве могут быть дополнительные файлы. Архив нужно распаковать в отдельную папку, и уже устанавливать, непосредственно, архив самого плагина.

А теперь, самое главное, что нужно сделать на сайте перед использованием плагина:

  1. Отключить (деактивировать) все плагины кеширования, которые установлены.
  2. Если используется Webcraftic Clearfy — плагин оптимизации для WordPress — отключить Менеджер скриптов. Толку от него мало — будет только мешать.
    В разделе Производительность — Minify (Html/JS/CSS).

Обязательно посмотрите, чтобы не дублировались функции Webcraftic Clearfy и Asset CleanUp Pro.

Общие настройки Asset CleanUp Pro для HTML, CSS, JavaScript.

В Панели Общих настроек Asset CleanUp Pro для HTML, CSS, JavaScript необходимо активировать нужные нам пункты.
Плагин на английском языке — это не проблема. Открываете его в браузере Google Chrome. Правой кнопкой вызываете Контекстное меню — Перевести на русский.
Самый точный и адекватный перевод.

Я буду исходить из своих настроек — думаю, они подойдут большинству.

Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress

Stripping the «fat» (Удаление «жира»).

Читаете внимательно советы по использованию.
Принимаете соглашение.

Plugin Usage Preferences (Настройки использования плагина).

Активируем следующие пункты:

  • Управляйте в личном кабинете. Способ получения — Прямой.
    Получить активы автоматически.
  • Разрешить управление активами — любой администратор.
  • Макет списка активов — Сгруппированы по местоположению (темы, плагины, основные и внешние).
    Расширенный (по умолчанию).
  • При загрузке макета списка активов сохраните группы.
    Расширенный (по умолчанию).
  • При загрузке макета списка активов сохраните область «Встроенный код, связанный с этим дескриптором».
    С контрактом (по умолчанию).
  • Стиль полей ввода. Улучшенный стиль iPhone (по умолчанию).
  • Получить информацию о кешировании ресурсов.
    Диск (по умолчанию).
  • Очистить ранее кешированные файлы CSS/JS старше (x) дней.
    Рекомендую поставить 0 дней, чтобы при настройках и тестировании удалять весь кеш.
    Позже, можно выставить значение 7 дней.
    После этого, обновляем все настройки.

Test Mode (Тестовый режим).

Подходит для отладки, когда вы проходите методом проб и ошибок при удалении ненужных CSS и JavaScript на своем веб-сайте.
Изменения видны только вам — в том же браузере (внимательно читайте инструкцию).

Optimize CSS (Оптимизировать CSS).

Активация следующих опций:

  • Минификация файлов CSS.
    Ставим галочку — Сократить встроенный CSS-контент в тегах STYLE.
  • Объедините загруженные CSS (таблицы стилей) в меньшее количество файлов.
    Если ваш сайт использует сетевой протокол HTTP/2, активируете —
    Применять только для гостевых посетителей (по умолчанию).
  • Встроенные файлы CSS.
    Файлы встроенной таблицы стилей (.css) меньше, чем 3kb.
  • Отложить CSS, загруженный в <body> (нижний колонтитул).
    Да, для любых тегов LINK таблицы стилей, перемещенных из HEAD в BODY,
    с помощью Asset CleanUp Pro (по умолчанию).
  • Кешировать динамически загружаемый CSS.

Сохраняем настройки.

Optimize JavaScript (Оптимизировать JavaScript).

Включаем вкладки:

  • Минификация файлов JavaScript.
  • Объедините загруженный JS (JavaScript) в меньшее количество файлов.
    Если используете сетевой протокол HTTP/2, активируете — Применять только для гостевых посетителей (по умолчанию).
    Отложить загрузку комбинированных файлов JavaScript из <body>
    (применяет defer=»defer»атрибут к комбинированным тегам сценария).
  • Встроенные файлы JavaScript — я не активировал.
    Только поставил галочку — Встроенные файлы JavaScript (.js) меньше, чем 3Кb.
  • Перемещение встроенного кода jQuery после вызова библиотеки jQuery.
  • Переместить все <script> теги из HEAD в BODY.
  • Кешировать динамически загружаемый JavaScript.

Сохраняем изменения.

Внимание! Надо не забывать, что в дальнейшем, при использовании более мощного плагина кеширования WP Rocket, некоторые функции Asset CleanUp Pro будут автоматически отключены, во избежание дублирования.

CDN: Rewrite assets URLs (CDN: перезапись URL-адресов ресурсов).

Данную функцию я не использую.

Site-Wide Common Unloads (Общие выгрузки по всему сайту).

Активируем все опции, кроме:

  • Отключить библиотеку блоков CSS Gutenberg на всем сайте.
    Если пользуетесь Классическим редактором WordPress, для создания постов и страниц — отключаем. Если новым редактором Gutenberg — оставляем не активным.
  • Отключить jQuery Migrate для всего сайта.
    Не советую отключать. Многие темы его используют.
    Он, конечно, подгружается на каждой странице, и тормозит загрузку.
    Лучше удалять загрузку данного JavaScript в настройках Asset CleanUP Pro, на каждой странице отдельно. Если нет в нем необходимости.
  • Отключить ответ на комментарий по всему сайту.
    Если не используете комментарии.

HTML Source CleanUp (Очистка исходного кода HTML).

Активируем все опции, кроме последней — Удалить комментарии HTML — если хотите
сохранить комментарии к постам.

Local Fonts (Локальные шрифты).

Настраиваем опции:

  • Применить font-display: значение свойства CSS — своп (наиболее часто используемый).
    Заменить любое существующее значение «font-display»? — Нет.
  • Предварительная загрузка файлов локальных шрифтов.
    Загружаем путь к расположению всех локальных шрифтов,
    если необходима предварительная их загрузка (особенно в отрисовке первого экрана).
    Читайте, там же, подсказки.

Google Fonts (Google шрифты).

Активируем опции:

  • Объедините несколько запросов в меньшее количество.
    Асинхронный, за счет предварительной загрузки таблицы стилей CSS.
  • Применить font-display: значение свойства CSS.
    Своп (наиболее часто используемый).
  • Предварительно подключиться?
    Если используете Google-шрифты.
  • Предварительно загрузить файлы шрифтов Google.
    Указываете пути и URL-адреса шрифтов от Google, если есть необходимость в их предварительной загрузке.

Disable XML-RPC (Отключить XML-RPC).

Полностью отключить XML-RPC.
Есть выбор — можно отключить только Pingback XML-RPC.
Не забываем сохранить настройки.

Это все общие настройки, в панели инструментов плагина WP Asset CleanUP Pro, для начальной оптимизации кода HTML, CSS, JavaScript.

Видео-версия урока из Учебного раздела Centr-Sit-Info Уровень Profi-bizblog:

 

Менеджер Asset CleanUp Pro для оптимизации и удаления неиспользуемого кода CSS, JavaScript.

Менеджер Asset CleanUp Pro для оптимизации и удаления неиспользуемого кода CSS, JavaScript присутствует в Редакторе каждой отдельной страницы и статьи.

Все файлы CSS и Java-скриптов в Менеджере сгруппированы по местоположению:

  • CSS и JavaScript из плагинов;
  • CSS и JavaScript из темы;
  • CSS и JavaScript из каталога загрузок WordPress;
  • CSS и JavaScript из WordPress Core;
  • CSS и JavaScript внешние сторонние;
  • Жестко закодированные стили и скрипты.

С указанием их количества в каждом разделе.

Следует отметить, что в Менеджере CSS и JavaScript отображаются только те коды, которые подгружаются только на редактируемой странице.

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

  • Установить предварительную загрузку или Нет (по умолчанию);
  • Выбор места расположения — <body> или <head>;
  • Выгрузить (удалить) на этой странице (посте);
  • Выгрузка по всему сайту;
  • В Редакторе страниц — Выгрузить на всех страницах, типа «страница» (массовая);
  • В Редакторе страниц — Выгрузка на все страницы типа «страница» поста;
  • В Редакторе постов — Выгрузить на всех страницах типа «сообщение» (массовая выгрузка);
  • В Редакторе постов — Выгрузить на все страницах поста типа «пост»;
  • Для скриптов — установить атрибут асинхронный (async), или отложенная загрузка (defer).

Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress

Здесь не буду приводить собственные настройки. У каждого сайта, со своей темой и набором плагин, будут свои. Нужно тестировать.

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

Но все же, приведу некоторые примеры настроек в Менеджере Asset CleanUp Pro для удаления неиспользуемого кода CSS, JavaScript в плагинах, темах и самого движка WordPress.

Оптимизация и удаление неиспользуемого кода в разделах:

CSS и JavaScript из плагинов.

Так же, как и некоторые коды WordPress, Премиум-тем и виджетов, на всех страницах сайта могут присутствовать и коды различных плагинов.
Перечислю некоторые — Contact Form 7, WPForms, reCAPTCHA.

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

Та же история и с плагинами всплывающих окон (pop-ups) — Green Popups или социальных кнопок — AddToAny Share Buttons, Social Icons Widget и так далее.
Здесь уже более тонкая настройка — где-то удалить, сделать загрузку асинхронной (async) или отложенной (defer). Возможно перенести код из <head> в <body>.

CSS и JavaScript из темы.

CSS-коды анимации сильно влияют на отрисовку первого экраны. Вот пример:
/wp-content/themes/название темы/assets/animations/animations.min.js
Медленное появление или исчезновение — привлекает глаз. Но это тормоз для скорости загрузки.
Пока, я выгрузил этот скрипт по всему сайту. Возможно, в дальнейшем, включу.

В любой теме присутствуют скрипты:
/wp-content/themes/название темы/js/scripts.js
Обязательно включите отложенную (defer) загрузку.

CSS и JavaScript из WordPress Core.

В фалах JavaScript — jquery и jquery-core не забудьте поставить галочку — Игнорируйте правило зависимости и оставляйте дочерние элементы загруженными.

От этого файла существует зависимость «дочерних» файлов JS.
При их выгрузке, будут удалены и некоторые скрипты тем, плагинов и самого движка WordPress.

Если в основных настройках плагина — Общие выгрузки по всему сайту, вы отключали библиотеку блоков CSS Gutenberg и используете Классический редактор, значит в Менеджере страницы увидите выгруженный (удаленный) CSS-код wp-block-library — не удивляйтесь.
В редакторе он будет выделен красным цветом.

Все дополнительные материалы, дистрибутив плагина WP Asset CleanUp Pro, с подробнейшими видео-уроками, можно получить, зарегистрировавшись в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog.

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

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

Подписывайтесь на обновления Sit-Info, чтобы вовремя знать о выходе нового поста.

Не забываете нажать на кнопку Поделиться в социальных сетях.

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

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