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

Как удалить неиспользуемый код css WordPress

Возможно, вы столкнулись с предупреждением «Удалить неиспользуемый CSS» при анализе сайта с помощью Google PageSpeed ​​Insights.

Использование WordPress означает работу с несколькими файлами style.css и JavaScript не только из выбранной темы, но также и из плагинов. Использование темы на сайте, которая предназначена для предоставления нескольких макетов и различных элементов HTML, таких как:

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

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

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

Как удалить неиспользуемый CSS из файлов CSS (Stylesheet)

Этот метод полезен для сайтов HTML и сайтов без динамических элементов.

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

Пошаговый процесс удаления неиспользуемого CSS:

Инструменты для поиска неиспользуемого кода CSS

Конечно, большинство разработчиков рекомендуют использовать инструменты, а не удалять неиспользуемые правила CSS по одному. И это довольно круто. Удаление неиспользованного CSS вручную может быть очень трудным и скучным, поэтому вот список некоторых рекомендуемых инструментов.

PurifyCSS

Это бесплатный инструмент, который удаляет неиспользуемый CSS из файлов HTML, JavaScript, PHP и CSS. Для работы очистителя потребуется файлы с исходным кодом HTML, а также файл с кодом CSS, который может иметь несколько экземпляров. В нашем случае основная часть нашего CSS находится в файле style.css, который поставляется с темой WordPress.

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

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

Указав какие файлы нужно сканировать, инструмент выдаст новый файл с оптимизированным CSS без изменения ваших исходных файлов. К сожалению, PurifyCSS не работает с живыми сайтами, и вы можете использовать его только во время разработки сайта.

UnCSS Online

Unused CSS online — это бесплатный онлайн-инструмент, который генерирует минимизированную версию используемого CSS.

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

UnusedCSS

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

PurgeCSS

PurgeCSS работает аналогично PurifyCSS, но он более сложный. Он удаляет неиспользуемый CSS с помощью сравнения строк. Одна из вещей, которые вам могут не понравиться — это то, что вы должны вручную добавлять файлы CSS, не указанные в путях, поэтому может быть довольно сложно, если ваш сайт использует некоторые плагины, такие как HTML Forms.

Например, Beaver Builder является одним из наиболее часто используемых конструкторов веб-сайтов WordPress. Но у него есть одна проблема — он накапливает много ненужных файлов CSS и JavaScript, которые сайт не использует. Этот вид CSS-файла создает дополнительные запросы к серверу и, как следствие, увеличивает время загрузки страницы. Их много, но вот список некоторых распространенных:

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

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

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

Удалить неиспользуемый CSS плагином WordPress

Вы можете выгружать неиспользуемые ресурсы (CSS и JS) с определенных страниц, используя плагин Asset CleanUp. Этот плагин доступен бесплатно в хранилище плагинов WordPress. И вы можете использовать Asset CleanUp для удаления неиспользуемых CSS-файлов из WordPress.

Current Version: 1.3.8.4

Last Updated: 23.09.2021

Пошаговая процедура для выгрузки неиспользованного CSS (и JS) в WordPress:

Почему неиспользуемый CSS трудно удалить?

Одна из причин удалении неиспользуемого CSS, настолько трудна, потому что извлечь неиспользуемый CSS из кода не так просто. Классы CSS реализованы на JavaScript, и их очень сложно найти.

1. Расщепление кода

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

Есть несколько способов взглянуть на разделение кода, вы можете: разделить код на основе URL-маршрутов, поэтому вам не нужно загружать код для страницы 2 на странице 1. Или вы можете разделить большой код style.css на несколько файлов и внедрить необходимые файлы на соответствующих страницах.

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

2. CSS, который вставляется с помощью плагинов

Может быть, это лень разработчика, или, может быть, это недостаток знаний, но иногда с помощью плагинов некоторые нежелательные файлы CSS и JavaScript внедряются в страницы, которые могут не требовать их. Хорошим показательным примером является плагин Contact Form 7. Он внедряет файлы CSS и JavaScript во все страницы, содержат ли эти страницы контактную форму или нет.

3. Динамические элементы (JS Inserted CSS)

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

Эти классы (внутри JS) нелегко обнаружить и, следовательно, затрудняют правильное удаление неиспользуемого CSS.

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

Вывод

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

Источник

Как удалить неиспользуемые CSS и JavaScript в WordPress

Легкие темы, такие как Astra, GeneratePress и Genesis, намного меньше загружают CSS и скрипты на сайте. Это помогает удалить неиспользуемые ошибки CSS и JavaScript в инструменте Google PageSpeed ​​Insights и резко повысить показатель скорости.

Однако 99% коммерческих тем WordPress сочетают в себе множество функций и загружают тяжелые скрипты и CSS. Независимо от того, используете ли вы легкую или тяжелую тему, вам все равно понадобится множество функций через плагин. Комбинируя тему и плагины, общая оценка скорости будет зависеть от каждого исходного файла.

В этой статье мы объясним, как удалить неиспользуемые CSS и JavaScript в WordPress, чтобы улучшить показатель скорости страницы.

Что такое неиспользуемый CSS и JavaScript?

Поясним это на простом примере. Contact Form 7 — один из популярных плагинов для добавления контактных форм на ваш сайт. Как правило, вам нужна контактная форма на странице «Контакты» и, возможно, на нескольких других страницах. Вы не будете использовать контактную форму для каждого сообщения в блоге.

Однако плагин Contact Form 7 будет загружать CSS и JavaScript на каждую страницу и сообщение в блоге вашего сайта. Это большая проблема, когда у вас есть 1000 сообщений в блоге, и все они загружают скрипт / CSS контактной формы без необходимости. Эти ненужные CSS и скрипты называются неиспользуемыми CSS и неиспользуемыми скриптами.

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

Почему это проблема?

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

Ошибка PageSpeed ​​для неиспользуемых CSS и JS

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

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

Как определить неиспользуемые CSS и JavaScript?

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

Таким образом, неиспользуемые CSS и JavaScript легко удалить, если они загружены как отдельные файлы. Загрузка огромного файла style.css или встроенного CSS не может быть удалена, если вы вручную не просмотрите их и не удалите неиспользуемые коды. В качестве альтернативы вам может потребоваться найти легкую тему или плагин, чтобы избавиться от проблемы.

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

Установите плагин Asset CleanUp

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

Настройки плагина

Плагин имеет множество настроек, которые мы не будем объяснять в этой статье. Если вы используете на своем сайте плагин кеширования, такой как WP Rocket, убедитесь, что не используете никаких других функций, кроме отключения неиспользуемых скриптов и CSS. Перейдите в меню «Очистка активов> Настройки», а затем на вкладку «Настройки использования плагина». Здесь вы можете выбрать способ просмотра и отключить неиспользуемые CSS / скрипты на ваших страницах.

Теперь перейдите на вкладку «Тестовый режим» и включите опцию «Включить тестовый режим». Это поможет вам убедиться, что сайт не работает после отключения скриптов и CSS, прежде чем сделать его общедоступным.

Включить тестовый режим

Нажмите «Обновить все настройки» внизу, чтобы применить изменения.

Удалите неиспользуемые CSS и JavaScript

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

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

Просмотр загруженных ресурсов в группе

Разверните каждую группу и просмотрите сведения о файлах, загруженных вашими плагинами и темами. Для каждого файла CSS и JS у вас есть несколько вариантов, как показано на рисунке ниже.

После отключения файлов обновите свое сообщение, чтобы изменения вступили в силу на сайте.

Просмотр отключенных файлов и удаление тестового режима

Проверьте свой сайт и, если все в порядке, вернитесь на страницу настроек и отключите параметр «Тестовый режим». Это сделает изменения доступными для всех пользователей, посещающих ваш сайт. Точно так же вы можете отключить файлы CSS и JS на пользовательских типах сообщений, страницах и страницах продуктов, отредактировав их. Проверьте свои страницы с помощью инструмента Google PageSpeed ​​Insights, чтобы увидеть, удалены ли ошибки.

Источник

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

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

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

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

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

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

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

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

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

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

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

Проблема многофункциональных тем-шаблонов и Премиум-плагинов в том, что их некоторые коды 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.
Минимальная цена базовой версии на один сайт начинается от трех с половиной тысяч.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.

Сообщите мне, когда будут добавлены новые комментарии.

Источник

Удалите из верхней части страницы код javascript и CSS при помощи WordPress плагина Autoptimize

Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом PageSpeed Insight от Google и не сталкивался при этом с рекомендацией — « Удалите из верхней части страницы код javascript и CSS, блокирующий отображение «.

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

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

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

Итак, для выполнения рекомендаций Гугла по удалению кода javascript и CSS из верхней части страницы я подрядил плагин Autoptimize, который объединяет скрипты и стили в один файл и переносит его из верхней части страницы, чего мы собственно и добиваемся. Кроме того, плагин сокращает HTML, JS и CSS (еще один плюсик нам от PageSpeed Insight).

Таким образом, мы убьем сразу много зайцев :-).

Плагин можно найти по названию через поиск в панели администратора сайта или скачать с депозитария WordPress по адресу — https://ru.wordpress.org/plugins/autoptimize/

Настройки плагина для WordPress Autoptimize

Для успешного завершения миссии на wordpress-book.ru мне хватило поставить галочку в шестом пункте у Inline all CSS в опциях CSS, как на скриншоте ниже, и все на этом.

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

Параметры HTML

1 Активируйте опцию « Оптимизировать код HTML » если этого просит PageSpeed Insight.

2 Комментарии HTML я сохранять не стал за ненадобностью.

Опции JavaScript

Если после активации плагина под рекомендацией «Удалите из верхней части ….» исчезли из списка JS и сайт продолжает работать по-прежнему, без перекосов, без конфликтов плагинов и т.д., оставьте тут настройки как есть. Иначе поэкспериментируйте со следующими опциями:

1 Force JavaScript in

Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству PageSpeed Insight. Включите в самом крайнем случае, только если не помогут функции ниже.

2 Also aggregate inline JS

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

3 Exclude scripts from Autoptimize

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

4 Add try-catch wrapping

Если какой-либо скрипт работает некорректно, он не даст жизни остальным. Опция позволяет обойти сломанный JS и продолжить работу.

Многие веб-мастера размещают в сайдбаре различные блоки, работающие на JS. Это могут быть блоки подписки, перенаправления трафика партнерских программ и тому подобные. Чтобы скрипт блока не блокировал загрузку (плагин отказался решать эту задачу), отложите ее. Для этого просто вставьте атрибут « async » в код скрипта как на скриншоте.

Опции CSS

1 Оптимизировать код CSS

Как уже было обговорено, опция сокращает все CSS и объединяет их в один файл. Для удаления CSS из верхней части страницы этого недостаточно.

2 Generate data: URLs for images

Если в каком-либо файле CSS прописаны пути к маленьким изображениям (меньше 4кб), то этот запрос будет прописан в основном файле CSS.

3 Remove Google Fonts

Замена шрифтов Гугла (которые почему-то не любит PageSpeed Insight если таковые наличествуют) на стандартные.

4 Also aggregate inline CSS

Как и в случае с JS, опция интегрирует ту часть CSS в HTML, которую посчитает нужной, что также должно положительно сказаться на скорости загрузки.

5 Inline and Defer CSS

Позволяет интегрировать в HTML только CSS видимой отрисовки сайта с отложенной загрузкой остального кода CSS.

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

Для определения CSS видимой отрисовки существует несколько сервисов, о которых упоминается в разделе «fag» на странице плагина. Эту функцию я не активировал ни разу и пока описывать не буду, если только вы не попросите в комментариях.

6 Inline all CSS

В отличие от предыдущего пункта, опция интегрирует вообще все стили в HTML. После активации, как правило, PageSpeed Insight перестает ругаться на блокирующие CSS в верхней части страницы.

7 Exclude CSS from Autoptimize

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

CDN Options

CDN Base URL

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

Информация о кэше

Save aggregated script/css as static files

Опция выключит статическое сжатие скриптов и стилей. Активируйте, если на сайте используется Gzip сжатие.

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

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

Источник