Как устранить ресурсы, блокирующие рендеринг
Если вы слышите жалобы на скорость загрузки вашего веб-сайта или хотите ускорить загрузку веб-страниц и улучшить взаимодействие с пользователем, вы можете подумать о том, как устранить ресурсы, блокирующие рендеринг.
Независимо от причины, то, как быстро веб-сайт появляется перед лицом посетителя, может повлиять на взаимодействие с пользователем и привести к тому, что ваш бизнес упустит связи с клиентами. Опыт пользователя на веб-сайте в основном зависит от критического пути рендеринга и управления сценариями, которые ваш веб-сайт загружает в процессе рендеринга.
Что такое рендеринг?
Все веб-сайты следуют пути, по которому пользователь может видеть и взаимодействовать с их содержимым. Путь загрузки веб-сайта называется критическим путем рендеринга . Этот путь описывает шаги каждого сайта по сбору и созданию данных для посетителя и его браузера.
Что браузеры делают перед рендерингом
Ввод URL-адреса веб-сайта запускает следующий процесс :
- Навигация завершается, когда пользователь запрашивает определенный URL-адрес.
- Происходит поиск DNS, при котором сервер предоставляет IP-адрес
- Браузер и сервер веб-сайта выполняют рукопожатие TCP для установления соединения.
- Запросы на безопасное соединение получают согласование TLS или второй обмен рукопожатием
- Первый пакет данных получен в TCP Slow Start для регулирования сетевого трафика.
- Пользователь отправляет подтверждения (ACK) на сервер, чтобы установить ограничения соединения и скорость отправки.
- Строится DOM-дерево (структура сайта и страницы)
- Сканер предварительной загрузки собирает внешние ресурсы, такие как сценарии и изображения.
- Создается CSSOM (дерево стилей)
- JavaScript компилируется во время сборки CSSOM
- Объектная модель специальных возможностей (AOM) создана для вспомогательных устройств для интерпретации контента.
Что происходит при рендеринге страницы?
Веб- сайты визуализируются с помощью дизайна кода для завершения макета, стиля, рисования и иногда компоновки на веб-сайте. Объектная модель CSS (CSSOM) и объектная модель документа (DOM)
Стиль
DOM и CSSOM объединяются в дерево рендеринга, и начинается построение. Дерево рендеринга упорядочивает видимые узлы, содержимое и вычисляемые стили для сайта и каждого уникального узла.
Макет
Макет — это шаг, на котором архитектура встречается со строительством, и создается структура страницы для отображения ширины, высоты и расположения всех узлов в дереве рендеринга. Для каждого объекта определяются размер и положение.
Веб-сайты выкладываются в виде коробки. Эти поля могут подстраиваться под неограниченное количество различных размеров области просмотра. Когда структура блока изменяется для изменения размера, это называется перекомпоновкой .
Краска: первая краска и первая содержательная краска (FCP)
Момент, когда браузер веб-сайта выполняет рендеринг страницы, называется «первой отрисовкой». First Paint может быть сплошным цветом фона только в зависимости от кода страницы.
First Contentful Paint (FCP) относится к измеримому моменту, когда посетитель веб-сайта может просматривать контент на вашей странице (текст, изображения, видео и т. д.). FCP измеряет от начала загрузки вашей страницы до момента, когда любой контент отображается.
First Paint и FCP — это не то же самое, что быстрая загрузка страницы или высокая производительность, но пользовательский опыт становится значительно более позитивным, когда посетители сайта воспринимают страницу с быстрой загрузкой. Точная настройка ваших первых рисунков, времени загрузки и производительности сайта улучшает восприятие пользователем времени загрузки.
Веб-страницы используют слои, в которых объекты перекрываются для организации структуры. Композитинг — это когда страница вычисляет порядок вещей для их правильного отображения.
Перекомпоновки вызывают повторную композицию, поскольку позиционирование объекта часто меняется при перекомпоновке.
Что такое ресурсы, блокирующие рендеринг
Сценарии, таблицы стилей и импорт HTML, которые замедляют, задерживают или блокируют отображение браузером контента на веб-сайте, являются ресурсами, блокирующими отображение. Когда люди ссылаются на ресурсы, блокирующие рендеринг, они обычно имеют в виду:
- CSS
- JavaScript в разделе <head>
- Шрифты, загруженные с сервера или из сети доставки контента
- Импорт HTML (устаревшие страницы)
Существует множество CSS и JavaScript, которые не блокируют рендеринг и критически важны для загрузки в самом верху. Расставьте приоритеты в таблицах стилей, чтобы гарантировать, что любой посетитель сайта увидит предполагаемый контент, а не нестилизованный контент или ничего. Что такое JavaScript и CSS, блокирующие рендеринг?
В процессе рендеринга ваш браузер загружает информацию о веб-сайте, сначала просматривая информацию в <head>, включая каждый скрипт. Все сценарии должны быть запущены по порядку и полностью обработаны, прежде чем страница будет видна в вашем браузере.
Скрипты выстраиваются в очередь, поэтому во время разработки важен порядок скриптов в <head>. В зависимости от кода он может замедлять или препятствовать полной загрузке вашего веб-сайта, и это то, что мы называем блокирующими рендеринг CSS и JavaScript.
Скрипты на вашем веб-сайте WordPress могут исходить из тем, пользовательских работ или плагинов, добавленных для различных функций.
Являются ли изображения блокирующими рендеринг ресурсами?
Если вам интересно, являются ли изображения блокирующими рендеринг ресурсами, то это не так. Размер изображения по-прежнему может вызывать проблемы с загрузкой вашей страницы, но он не должен блокировать рендеринг.
Зачем устранять ресурсы, блокирующие рендеринг?
Скрипты, блокирующие рендеринг, могут замедлить загрузку страниц и испортить впечатление от веб-сайта для ваших посетителей. Восприятие медленного веб-сайта может привести к потере посетителей, если ваш сайт плохо работает. Низкое удержание посетителей может повлиять на результаты вашей поисковой системы и уменьшить список результатов.
Более низкий рейтинг поисковой оптимизации (SEO) означает сокращение посетителей и потерю потенциального бизнеса. Потеря рейтинга снижает количество посетителей, а плохой сайт снижает удержание посетителей; Ресурсы, блокирующие рендеринг, могут быть огромной проблемой.
Если ваш веб-сайт нацелен на получение высокой оценки Google PageSpeed , понимание ваших ресурсов, блокирующих рендеринг, является ключом к достижению этой цели.
Как устранить ресурсы, блокирующие рендеринг
Серьезное отношение к SEO-рейтингу вашего сайта и пользовательскому опыту означает, что на вашем сайте должны быть обработаны или удалены ресурсы, блокирующие рендеринг. Если вы не создаете свой сайт с нуля, начните тестировать его на наличие ресурсов, блокирующих рендеринг.
После того, как вы определили эти ресурсы, блокирующие рендеринг, вы выберете свой метод решения проблемы и улучшения функциональности вашего сайта.
Проверьте, есть ли на вашем сайте ресурсы, блокирующие рендеринг
Никогда не помешает провести оценку вашего веб-сайта, чтобы обнаружить ресурсы, блокирующие рендеринг (попробуйте Google PageSpeed Insights ). Если вы оптимизировали в меру своих возможностей, следуете рекомендациям, но по-прежнему испытываете проблемы или не знаете, с чего начать, оценщики страниц могут быть полезными подсказками.
Методы устранения блокировки рендеринга JavaScript и CSS
WordPress позволяет вам управлять любыми ресурсами, которые мешают отображению вашего сайта, несколькими способами. WordPress позволит вам упорядочить сценарии и ссылки, блокирующие рендеринг, с помощью кода, тегов, организации и оптимизации файлов, а также плагинов.
Профессиональные разработчики также могут создавать собственные плагины или темы, которые встраивают эти процессы в код.
Удалите блокирующий рендеринг Javascript с помощью кода
Три метода устранения ресурсов, блокирующих рендеринг, с помощью кода:
- Переместите теги <script> и <link> в конец HTML-кода.
- Добавьте атрибуты async или defer в тег для некритических скриптов.
- Удалите неиспользуемый код JavaScript.
WordPress загружает файл jQuery Migrate, чтобы обеспечить совместимость со старыми версиями jQuery, используемыми плагинами и темами. Вы можете использовать фрагмент кода или плагин, чтобы запретить WordPress загружать этот файл jQuery Migrate, если ничто на вашем сайте не нуждается в его работе.
Избавьтесь от таблиц стилей, блокирующих визуализацию
Природа таблиц стилей делает их блокирующими рендеринг ресурсов по своей природе. Вы можете решить эту проблему на своем сайте следующими способами:
- Разделите CSS по типу носителя (мобильный, планшет, рабочий стол и т. д.).
- Оптимизируйте критический путь рендеринга
- Объединение файлов CSS
Используя WordPress и визуальный конструктор, вы не можете напрямую контролировать построение страницы, но есть способы обойти любую проблему.
Устранение блокировки рендеринга с помощью плагина или расширения WordPress
Плагины и расширения WordPress используются для организации скриптов на странице. Плагины будут проходить через теги <script> и <link> вашей страницы и применять атрибуты отсрочки или асинхронности на основе определенных рекомендаций.
Попросите профессионала WordPress устранить ресурсы, блокирующие рендеринг, для вас
Некоторые плагины требуют настройки и, хотя они и кажутся простыми, могут перестать работать при неправильной настройке. Нет ничего постыдного в том, чтобы обратиться за помощью к специалисту по WordPress , и GoHost есть несколько специалистов, которые могут оптимизировать ваш сайт .
Лучшие практики для оптимизации рендеринга
- Объедините ресурсы, блокирующие рендеринг, чтобы уменьшить их влияние на загрузку страницы.
- Уменьшите размер ресурса, чтобы уменьшить количество загружаемых байтов.
- Отложите загрузку ресурсов, не блокирующих рендеринг.
- Не добавляйте CSS с помощью правила @import, так как это внешняя загрузка.
- Используйте плагин WordPress, предназначенный для кэширования ваших скриптов и оптимизации JavaScript и CSS.
- Загружайте пользовательские шрифты локально.
- Определите критические и некритические CSS и JavaScript.
- Помечайте некритичный код, блокирующий рендеринг, атрибутами async или defer.
- Неиспользуемый код следует удалить.
Избавьтесь от головной боли и позвольте профессионалу WordPress помочь
Мы понимаем, почему производительность важна для вашего бизнеса и на каких областях следует сосредоточиться, чтобы добиться наиболее значительного результата.
Улучшение производительности вашего веб-сайта и удобства для посетителей может заключаться не только в ресурсах, блокирующих рендеринг. вы можете просмотреть ваш сайт и адрес:
- Размеры изображений
- Качество изображения и формат доставки
- Длина страницы и процент динамического содержания
- Плохо построенные темы
- Ненужные скрипты, вызывающие задержки
- Плагины, которые плохо построены
- Неиспользуемые внешние скрипты
- Устаревшее программное обеспечение
- Ограниченный план веб-хостинга не может в достаточной мере удовлетворить потребности сайта.
WordPress может быть достаточно простой платформой для создания веб-сайта, но для максимального удобства пользователей может потребоваться обученный профессионал или отличный поставщик услуг .
Часто задаваемые вопросы
- Что такое «устранение ресурсов, блокирующих рендеринг»?
Веб-сайты используют сценарии и ссылки для доступа к файлам и коду для создания веб-сайта в браузере. Иногда скриптам и ссылкам требуется некоторое время для загрузки, что препятствует отображению других частей веб-сайта для посетителя. Устранение ресурсов, блокирующих рендеринг, означает устранение скриптов, ссылок, шрифтов и файлов, которые замедляют или мешают правильной загрузке веб-сайта.
- Как исправить ресурсы, блокирующие рендеринг?
Существуют разные способы исправления ресурсов, блокирующих рендеринг, и ваш выбор будет зависеть от того, что вам нужно решить. Выясните, какие сценарии и ссылки имеют решающее значение для загрузки вашей страницы, а затем отложите остальные до тех пор, пока они не потребуются. Приоритизация кода может быть выполнена с помощью кода или с помощью плагина.
- Как мне избавиться от ресурсов, блокирующих рендеринг, на моем веб-сайте?
Если вы используете WordPress, самый простой способ — использовать высококачественный плагин, который управляет вашими сценариями и внешними нагрузками, оценивая, что является критическим, а что можно отложить на потом в процессе рендеринга. Вместо того, чтобы вручную оценивать код и назначать теги каждому скрипту для ручной организации (что все еще возможно и рекомендуется), плагин автоматически обрабатывает это за вас.
- Как исправить/устранить ресурсы, блокирующие рендеринг, без плагина?
Если вы не хотите добавлять еще один плагин на свой веб-сайт или плагин вам не подходит, есть другие способы исправить ресурсы, блокирующие рендеринг. Вы можете вручную оптимизировать любые сценарии и ссылки в коде, чтобы обеспечить их загрузку в правильном порядке или отложить загрузку этого сценария до завершения необходимых функций.
Как удалить неиспользуемый код javascript на вордпресс
Когда вы ищете способ удалить неиспользуемый код CSS и JavaScript с вашего веб-сайта WordPress, вы, скорее всего, глубоко погрузитесь в повышение производительности сайта . В конце концов, любой код, который браузеру не нужно загружать, не замедляет его работу.
Что такое неиспользуемый CSS и JavaScript?
Неиспользуемый код — это именно то, на что он похож: разметка CSS и JavaScript, которая загружается, когда кто-то просматривает ваш сайт, но на самом деле ничего не делает для его отображения.
Как уже отмечалось, это плохо, потому что может снизить скорость загрузки вашей страницы. Это, в свою очередь, может повлиять на ваш пользовательский опыт, доход и даже рейтинг поиска. Настолько, что когда вы тестируете скорость своего веб-сайта , вы иногда можете найти в результатах предупреждение, подобное этому:
Откуда это взялось?
Первый вопрос, который у вас может возникнуть, — почему на вашем сайте изначально есть неиспользуемый код. Если вы запускаете сайт WordPress, существует множество компонентов, которые могут добавлять код на ваши страницы.
Прежде всего, это тема, которая отвечает за оформление. Он приносит с собой свои собственные таблицы стилей CSS и файлы JavaScript. Здесь разработчики темы чаще всего помещают весь код CSS в один файл style.css , который охватывает разметку для всех видов элементов (кнопок, таблиц, форм, галерей, виджетов и т. д.). В большинстве случаев они загружаются независимо от того, присутствуют ли рассматриваемые элементы на странице.
Так что, скорее всего, на ваших страницах есть хотя бы какой-то CSS, который вы не используете. Кроме того, многие темы поставляются со своими собственными скриптами для специальных функций. Их доставка не всегда может быть оптимизирована.
Затем, если вы устанавливаете плагины, они могут включать свои собственные ресурсы. Например, если вы добавите контактную форму на свой сайт, плагин, который вы используете для этого, скорее всего, вызовет некоторый CSS при загрузке для стилизации. То же самое и с плагинами для конструктора страниц , которые имеют множество вариантов дизайна.
Кроме того, вместе с вашими страницами могут загружаться всевозможные другие скрипты, такие как веб-шрифты или программное обеспечение для аналитики . Хотя многие из них небольшие и обычно загружаются быстро, их можно легко сложить.
Плюс некоторые ресурсы подгружаются в местах, где они не нужны. Например, плагин контактной формы может загружать файлы даже на страницах, где нет контактной формы.
Если это начинает снижать вашу производительность, пришло время узнать, как можно удалить эти неиспользуемые ресурсы CSS и JavaScript, чтобы WordPress не загружал их без необходимости.
Как найти неиспользуемый код на вашем сайте WordPress
Итак, как определить, есть ли на ваших страницах код, которого там быть не должно? Есть несколько способов сделать это.
1. Инструменты для тестирования скорости
Один из способов — использовать вышеупомянутые плагины для тестирования скорости. Когда вы запускаете свою страницу через Google PageSpeed Insights , вы можете увидеть предупреждение, показанное выше, в разделе «Возможности » . Когда вы щелкнете по нему, служба даже отобразит файл, который вызывает предупреждение.
GTmetrix также укажет это как проблему в разделе « Структура » , включая файлы, которые ее вызывают.
2. Инструменты разработчика браузера
Другой вариант — использовать инструменты разработчика браузера . В Chrome откройте инструменты (через меню, затем « Дополнительные инструменты» > «Инструменты разработчика» или Cmd/Ctrl+Shift+I ), нажмите Esc , чтобы открыть ящик, затем используйте значок с тремя точками в верхнем левом углу, чтобы открыть Coverage .
Кроме того, туда можно также попасть, нажав Cmd/Ctrl+Shift+P , чтобы открыть командную строку. Введите «покрытие» и выберите « Показать покрытие» в появившемся списке.
Когда все будет готово, нажмите кнопку перезагрузки, чтобы начать захват. Это даст вам список файлов, которые браузер загружает для страницы, и такую информацию, как их тип, размер и, самое главное, процент и байты, которые страница не использует.
Дважды щелкните любой из файлов, чтобы увидеть построчную разбивку того, какой код действительно вносит вклад в страницу, а какой нет.
Это может быть довольно отрезвляющим, но это отличное место, чтобы начать выяснять, какой код на вашем сайте действительно необходим, а какой остается неиспользованным.
Остается вопрос, нужно ли так тестировать каждую страницу?
Если ваш сайт небольшой, это может быть возможно. Однако, если нет, начните с самых важных страниц, таких как домашняя страница, основные статьи, страница о сайте, магазин и т. д. В качестве альтернативы сначала настройте таргетинг на самые медленные страницы, где, скорее всего, вы обнаружите подобные проблемы. Проверьте тестирование скорости статьи сайта для более подробной информации.
Удаление неиспользуемых CSS и JavaScript с помощью плагина WordPress
Хорошо, теперь, когда мы знаем, как найти неиспользуемый код на вашем сайте, пришло время поговорить о том, как от него избавиться. Первое, на что мы хотим обратить внимание, это как это сделать с помощью плагина WordPress.
Есть несколько вариантов, которые делают это относительно легко. В этом примере мы будем использовать плагин Asset Cleanup . Ниже вы найдете еще несколько вариантов.
1. Установите плагин
Первое, что вам нужно сделать, это установить плагин. Для этого перейдите в « Плагины» > «Добавить новый » и найдите его по имени. Найдите Asset Cleanup в результатах поиска и нажмите кнопку « Установить сейчас », затем нажмите « Активировать » после завершения установки.
2. Включите тестовый режим
Прежде чем приступить к удалению неиспользуемого кода CSS и Javascript, вам необходимо переключить свой сайт WordPress в тестовый режим. Таким образом, вы можете попробовать что-то, не влияя сразу на свой веб-сайт и потенциально ломая что-то. Все изменения, которые вы вносите, видны только вам как администратору. В качестве альтернативы используйте сайт разработки или промежуточный сайт.
Вы найдете опцию тестового режима в разделе « Настройки»> «Тестовый режим» .
Здесь щелкните ползунок рядом с Включить тестовый режим? а затем « Обновить все настройки» внизу. Когда вы все сделали правильно, рядом с тестовым режимом на боковой панели должен появиться зеленый индикатор, а в панели администратора WordPress должно быть написано, что тестовый режим включен .
3. Начните выгружать CSS и JavaScript
После этого вы хотите перейти в CSS/JS Manager .
Здесь, на первой странице, вы видите список файлов CSS и JavaScript, которые загружаются на вашей домашней странице. Чтобы они этого не сделали, просто используйте ползунок рядом с надписью « Выгрузить» на этой странице . Кроме того, используйте флажок « Выгрузить для всего сайта », чтобы отключить определенный файл для всего вашего сайта.
Нажмите « Обновить» внизу, чтобы сохранить изменения.
Вверху вы можете использовать вкладки, чтобы сделать то же самое для сообщений, страниц, пользовательских типов сообщений и медиа-страниц. Просто найдите часть контента по названию или идентификатору, и вы получите те же параметры, что и для домашней страницы.
Кроме того, плагин Asset Cleanup также добавляет те же функции в нижнюю часть редактора WordPress, где вы можете вносить изменения во время написания.
4. Протестируйте и зафиксируйте
Прежде чем принять ваши изменения, пришло время проверить, все ли работает хорошо. В тестовом режиме это можно сделать только вручную, загрузив и просматривая страницы. Как уже упоминалось, изменения касаются только вас, поэтому вы не можете подобрать их с помощью инструментов тестирования скорости. Именно по этой причине сделать это на сайте разработки может быть лучшей идеей.
Убедившись, вернитесь в настройки и отключите тестовый режим. Снова обновите все настройки , чтобы сохранить. Когда вы снова запустите тест в своем инструменте для тестирования скорости, изменения должны быть видны.
Как вручную удалить неиспользуемые CSS и JS в WordPress
Хорошо, теперь, когда мы знаем маршрут плагина, пришло время посмотреть, как мы можем сделать то же самое вручную. Мы рассмотрим два метода, которые, вероятно, являются наиболее практичными.
Первое, что вам нужно сделать для этого, — создать дочернюю тему , чтобы любые внесенные вами изменения не были перезаписаны при обновлении основной темы.
1. Разделите таблицу стилей
Одна из основных проблем при попытке удалить неиспользуемый CSS с вашего сайта WordPress заключается в том, что в большинстве случаев почти все они находятся в одном style.css файле. В приведенном выше примере покрытия Chrome мы видели, что на данной странице фактически используется лишь небольшой процент этого файла. По этой причине может иметь смысл разделить основную таблицу стилей на несколько меньших, которые загружаются только там, где они необходимы.
Это может выглядеть так:
- base.css
- forms.css
- front-page.css
- table.css
- comments.css
Вы можете использовать такой инструмент, как UnCSS , чтобы генерировать только тот CSS, который на самом деле использует ваша страница. Введите HTML и CSS страницы, которую вы хотите оптимизировать, и она выдаст сокращенную разметку.
Вы можете скопировать его в новую таблицу стилей и загрузить в свою дочернюю тему. После этого нужно удалить из очереди все существующие файлы CSS и встроенный код и добавить в очередь новые оптимизированные таблицы стилей.
Вы даже можете сделать это условно и использовать разные файлы для разных страниц. Тем не менее, это немного выходит за рамки того, что мы можем здесь охватить, однако вы можете найти хороший пример, включая фрагменты кода, на WebPerfTools .
2. Отложите файлы JavaScript или загрузите их условно
Чтобы избавиться от предупреждения о неиспользуемом JavaScript, у вас есть два варианта: либо отложить загрузку ваших скриптов, либо отключить их на страницах, где они не нужны.
Самый распространенный способ задержать JavaScript — переместить скрипты в нижний колонтитул. Это проще всего сделать, если вы напрямую редактируете (дочернюю) тему, которая ставит в очередь рассматриваемый скрипт. В этом случае вам просто нужно установить последний параметр, true и он автоматически загрузится в нижний колонтитул. Вот как это выглядит:
Точно так же вы также можете зарегистрировать его для определенных условий, например, когда браузер загружает страницу, где вы хотите, чтобы она отображалась. Вот как загрузить тот же скрипт только на вашу домашнюю страницу:
Наконец, если ваша проблема связана со сценарием, который не находится в отдельном файле, а выводится прямо на страницу, вам нужно найти, откуда он взялся, а затем скопировать его в отдельный файл и загрузить в дочернюю тему. Оттуда вы можете зарегистрировать его для загрузки в нижний колонтитул, как показано выше.
Вывод
Удаление неиспользуемых CSS и JavaScript с вашего сайта WordPress — отличный способ ускорить его. Это уменьшает размер страницы, сокращает HTTP-запросы и делает ваш сайт компактнее. Как следствие, вашим посетителям будет приятнее пользоваться и лучше выглядеть в поисковых системах.
Как удалить неиспользуемые CSS и JS в WordPress (очень просто)
Наличие большого количества неиспользуемых CSS и JS на вашем веб-сайте может сократить время загрузки вашего веб-сайта. Если вы запускаете свой сайт через инструменты для проверки скорости такой как Google PageSpeed Insight, вы можете получить предупреждение об удалении неиспользуемого CSS.
К счастью, есть очень простой способ сделать это. Вам не нужно обладать какими-либо специальными техническими знаниями, чтобы удалить неиспользуемые CSS и JS с вашего сайта WordPress.
Это из-за удивительного плагина, известного как Asset CleanUp: ускорение страницы. С помощью этого плагина удалить неиспользуемый CSS так же просто, как нажать несколько кнопок. В качестве альтернативы, если вы не против потратить несколько долларов в год, с WP Rocket, есть удаленная неиспользуемая кнопка CSS, просто активируйте ее, и плагин автоматически удалит все неиспользуемые CSS.
Что такое неиспользуемый CSS?
Неиспользуемый CSS — это файл CSS, который присутствует на странице, но в большинстве случаев не требуется для загрузки страницы. Когда посетитель открывает веб-сайт, браузер обычно должен загрузить, проанализировать и обработать все внешние таблицы стилей на посещенной странице, прежде чем он сможет отобразить содержимое страницы для посетителя. Если на такой странице существует какой-либо CSS, который не используется на странице, браузер будет тратить на это свое время.
Классическим примером этого является большинство используемых плагинов контактных форм. Эти плагины, хотя в основном используются только на странице «Свяжитесь с нами», загружают свой CSS по всему веб-сайту. Неважно, если это домашняя страница, где она не используется, CSS загрузится.
Если слишком много CSS, которые не нужны, но загружаются и замедляют время чтения и отображения страницы браузером, это может стать проблемой.
Помимо плагинов, разработчики тем пишут в style.css много чего, что в большинстве случаев не нужно. Но независимо от того, нужны они или нет, они загружаются всякий раз, когда загружается ваш сайт!
Один неиспользуемый CSS может не быть проблемой, но большое количество неиспользуемых CSS может повлиять на время загрузки вашего сайта.
Как определить неиспользуемый CSS
Найти неиспользуемые CSS и JS очень просто. Есть два подхода, которые я рекомендую.
Одним из них является анализ вашего сайта с помощью Google PageSpeed Insight. Проверьте, есть ли на вашем сайте проблема с удалением неиспользуемых CSS. Нажмите на нее, и вы сможете определить компонент вашего сайта, отвечающий за это.
Вы можете видеть сверху, что записан один случай неиспользованного CSS. Я могу увидеть плагин и расположение неиспользуемого CSS, посмотрев на это.
Второй вариант – получить более подробный анализ. Вы можете добиться этого с помощью инструментов Chrome Dev.
В браузере Chrome откройте инструменты Chrome Dev и перейдите к покрытию. Затем нажмите кнопку перезагрузки внутри зоны покрытия. Вы можете найти подробное руководство о том, как это сделать в инструменте Google Developers.
Другой вариант — использовать jitbit для сканирования неиспользуемых селекторов CSS, Вы также можете использовать ОчиститьCSS найти неиспользуемый CSS
Как удалить неиспользуемый CSS
Выполните следующие действия, чтобы удалить неиспользуемый CSS из WordPress:
1. Установите очистку активов
Перейдите к плагину, затем добавьте новый. Затем вы вводите «Asset CleanUp» в поле поиска на странице «Добавить новый плагин». Установите и активируйте плагин.
2. Перейдите в настройки плагина
Чтобы получить доступ к настройкам плагина, на панели инструментов WordPress нажмите «Настройки», затем нажмите «Очистка активов».
3. Выгрузите ненужные CSS и JS
В настройках плагина вам, возможно, придется признать, что вы знаете, как плагин работает под краном для удаления жира, прежде чем начать.
Чтобы выгрузить CSS и JS, нажмите «Менеджер CSS и JSS». Оттуда вы можете удалить любые CSS и JS, которые вам не нужны. Вы можете удалить его только для главной страницы, для всего сайта или для определенного URL-адреса. Вы также можете удалить для сообщений, страниц или категорий.
Примером является выгрузка любой контактной формы из загрузки для всего сайта, кроме страницы контактов.
Не торопитесь и избавьтесь от всех CSS и JS, которые, как вы знаете, не нужны. Убедитесь, что вы протестировали свой сайт после того, как закончите, чтобы убедиться, что все в порядке.
Удалите неиспользуемые плагины CSS WordPress.
Вот несколько плагинов, которые вы можете использовать для удаления неиспользуемого CSS в WordpPress:
1. Очистка ресурсов: ускорение страницы
Asset CleanUp: ускорение страницы позволяет легко удалить неиспользуемые CSS и JS в WordPress даже для новичков. Все, что вам нужно сделать, это деактивировать определенный CSS, который не нужен для конкретной страницы.
Вы также можете отключить только для отдельных сообщений. В премиум-версии вы можете деактивировать неиспользуемые CSS/JS с помощью плагинов.
Этот плагин представляет собой полный плагин производительности со многими другими опциями для ускорения WordPress. Удаление неиспользуемых CSS/JS — это только часть этого.
В этом посте я использовал этот плагин с руководством.
2. WP Rocket
WP Rocket Плагин премиум-класса для WordPress номер один. Если вы новичок, я имею в виду, если вы не имеете опыта или не чувствуете себя комфортно с WordPress, то WP Rocket — это самый простой способ удалить неиспользуемый CSS для.
Вам необходимо приобрести плагин, как только вы это сделаете, вы можете загрузить его из своей учетной записи или проверить свою электронную почту на наличие ссылки для скачивания.
Установите плагин через Панель инструментов>Плагины>Добавить новый>Загрузить.
Просто перейдите к настройкам WP Rocket и нажмите на вкладку «Оптимизация файлов». Затем прокрутите вниз, и вы увидите «Удалить неиспользуемый CSS», установите флажок, сохраните и очистите кеш.
3. Perfmatters
Perfmatters — плагин премиум-класса, разработанный Брайаном Джексоном и его братом Бреттом Джексоном. Этот плагин может помочь очень легко удалить неиспользуемый CSS.
Во-первых, вам необходимо приобрести плагин. Затем установите его. Активировать лицензию. Когда вы перейдете к настройкам, включите диспетчер сценариев.
Просто зайдите на любую страницу или публикацию на своем сайте, вы увидите значок диспетчера скриптов в меню панели инструментов, нажмите на него. Вы сможете удалить неиспользуемые CSS и JS со страницы или глобально.
Этот плагин является плагином производительности, поставляется со многими другими опциями для ускорения WordPress. Удаление неиспользуемых CSS/JS является частью этого.
4. CSS-JS-менеджер
CSS-JS-менеджер может специально удалить CSS или JS с мобильного или рабочего стола. В зависимости от того, чего вы хотите добиться.
Этот плагин также может откладывать загрузку файлов CSS или JS.
Заключение
Если у вас много неиспользуемых CSS и JS, вы заметите значительное улучшение показателей скорости и производительности.
Может быть невозможно удалить все неиспользуемые CSS, но вы можете свести их к минимуму. Я использую Asset CleanUp, чтобы удалить неиспользуемый CSS для Целевая тенденция.
Помните, оптимизируйте, но не зацикливайтесь на этом, если только вы не хотите, чтобы ваш сайт выглядел как самый быстрый сайт в мире.
Читайте также:
Мфон Абель Экене
Мне нравится создавать полезный контент. Моя страсть — помогать интернет-пользователям находить то, что им нужно, указывая им правильное направление. Это то, что я люблю делать, и я потратил много часов на исследования и тестирование, чтобы убедиться, что я делаю именно это с помощью своего контента на TargetTrend.
Получить технические вещи
Технические тенденции, тенденции стартапов, обзоры, онлайн-доход, веб-инструменты и маркетинг один или два раза в месяц.
Популярные сообщения
- Лучшие бюджетные смартфоны 2023 года (дешевые, но мощные)
- 10 лучших инструментов автоматизации маркетинга для малого бизнеса в 2023 году
- 10 лучших программ для управления проектами на 2023 год (бесплатно и платно)
- Лучшие бюджетные ноутбуки на 2023 год (дешевые, но очень хорошие ноутбуки)
- 5 лучших управляемых хостингов AWS WordPress в 2023 году (Amazon Cloud)
- 7 лучших управляемых Google Cloud WordPress хостингов в 2023 году
- 10 лучших инструментов исследования ключевых слов для SEO в 2023 году
- 10 самых быстрых и лучших тем WordPress в 2023 году
- Как заработать на блоге в 2023 году
- Как привлечь трафик на свой блог в 2023 году
Отказ от ответственности
Некоторые из ссылок здесь являются филиалами. Если вы покупаете через них, вы можете получить эксклюзивную скидку. Он не завышает цену, а предлагает скидку. Покупка по партнерским ссылкам помогает нам продолжать разработку и добавлять на этот сайт больше полезного контента.
Удалите неиспользуемый JavaScript в WordPress
вы можете воспользоваться услугами веб-студии прометей и Заказать Сайт Визитку.
Большинство владельцев сайтов WordPress увидят рекомендацию «удалить неиспользуемый Javascript» при запуске теста PageSpeed.
Технически законченное решение недоступно для большинства владельцев сайтов, но есть эффективное сокращенное решение, о котором я расскажу ниже.
Что означает «удалить неиспользуемый JavaScript»?
JavaScript (JS) — это тип кода, который используется на веб-сайтах в основном для интерактивных элементов, таких как слайдеры, анимация и т. Д. По сравнению с CSS или изображениями, он гораздо более ресурсоемкий, поэтому его обработка занимает больше времени при загрузке страницы. Особенно плохо это сказывается на мобильной производительности.
Для лучшей производительности вы должны стремиться к тому, чтобы на вашем сайте было как можно меньше JavaScript.
Загрузка JavaScript, который даже не используется на странице, является пустой тратой ресурсов и вычислительной мощности, и именно к этому стремится эта рекомендация PageSpeed.
Найдите неиспользуемый JavaScript на своем сайте
Чтобы справиться с этим, вы должны выяснить, какие плагины или функции на вашем сайте загружают неиспользуемый код. К счастью, PageSpeed сделает это за вас.
Прежде чем углубиться в это, если вы используете какой-либо плагин оптимизации, который минимизирует или иным образом изменяет имена файлов на вашем сайте, вы должны сначала деактивировать его. Вы должны увидеть исходный немодифицированный URL-адрес, чтобы увидеть источник JavaScript.
После этого запустите тест PageSpeed для страницы на вашем сайте.
Нажмите на рекомендацию для Удалить неиспользуемый JavaScript. Там вы найдете список файлов:
Наведите указатель мыши на любое имя файла, чтобы открыть полный URL-адрес и увидеть, загружено ли оно вашей темой или плагином.
Есть 2 типа неиспользуемого JavaScript:
Файлы, которые полностью не используются.
Проверить Возможная экономия (количество неиспользованного кода) по сравнению с Размер передачи (общий размер файла). Если они совпадают, это означает, что весь файл не используется, и вы можете удалить его со страницы (см. Ниже).Части файлов, которые не используются.
Если экономия меньше размера передачи, это означает, что используется часть файла, но не весь. Это распространено на сайтах WordPress. Например, ваша тема может загружать JS-файл, содержащий код как для слайдера, так и для видеоплеера. Если вы используете только ползунок на странице, код для видеоплеера не используется и его не нужно загружать.Но если вы не разработчик, кодирующий каждую часть своего сайта по индивидуальному заказу, вы действительно не сможете это исправить. Для владельцев сайтов (пока) нет автоматических решений, но приведенное ниже решение поможет вам.
Как удалить неиспользуемый JavaScript на сайтах WordPress
- Проверьте возможности своего сайта и удалите все, что вам действительно не нужно.
Удаление — лучшая оптимизация ��.
Это означает проверку списка файлов, предоставленных PageSpeed, и принятие решения о том, действительно ли вам нужна эта функция или плагин на вашем сайте. Вы должны взвесить ценность, которую он приносит вашим посетителям или вашему бизнесу, с его негативным влиянием на производительность.
- Удалите неиспользуемые файлы с помощью Asset CleanUp или Perfmatters
Хотя для разработчиков плагинов это плохая практика — загружать все свои файлы на каждую страницу вашего сайта, даже если они не используются, такое случается — Contact Form 7 является примером плагина, который делает это. В таких случаях очень полезны плагины, такие как Asset CleanUp и Perfmatters. Вы можете использовать любой из этих плагинов, чтобы предотвратить загрузку целых файлов на страницах, где они вообще не нужны.
Я лично использую профессиональную версию Asset CleanUp, потому что у нее есть дополнительная функция, с помощью которой вы можете целенаправленно удалять файлы на мобильных устройствах, но не на настольных компьютерах (или наоборот). Это полезно при создании настраиваемых мобильных страниц.
Для любой страницы вашего сайта вы можете запретить загрузку определенных файлов, и вы можете установить глобальные условия, например, запретить их загрузку во всех сообщениях или других определенных типах контента. Это даст дополнительные преимущества, такие как уменьшение общего размера страницы.
- Разработчики — создавайте модульный код, который загружается только при необходимости.
Если вы пишете тему или плагин, не помещайте весь свой код в один гигантский файл JavaScript, который загружается повсюду. Попробуйте загрузить только тот код, который нужен в любом контексте. Это единственный верный способ удовлетворить предупреждение об удалении неиспользуемого JavaScript.
Быстрое решение: отложить выполнение JavaScript
Отсрочка выполнения JavaScript — реально единственный способ существенно повлиять на эту рекомендацию и потенциально удалить ее.
Вы можете использовать для этого WP Rocket или Flying Scripts.
Я называю это сокращенным решением (хотя оно полностью справедливо в глазах Google), потому что технически это фактически не удаляет какой-либо JavaScript с вашего сайта. Он просто откладывает его выполнение до тех пор, пока посетитель не взаимодействует со страницей.
Когда PageSpeed запускает тест, он не может взаимодействовать со страницей, поэтому JavaScript никогда не загружается, PageSpeed не может его обнаружить, поэтому он даст вам отличную оценку PageSpeed.
Без этих надоедливых файлов JS для загрузки и обработки первоначальный вид страницы должен загружаться быстрее для посетителя…. до тех пор, пока видимые элементы не зависят от JavaScript!
Этот метод оптимизации и последующий показатель PageSpeed могут дать вам некоторое «розовое» представление о производительности вашего сайта. Вы должны иметь в виду, что весь JavaScript в конечном итоге все равно будет загружаться для ваших реальных посетителей, и они все равно пострадают, если он будет очень медленным, поэтому удаление по-прежнему является лучшей оптимизацией. Вы всегда должны тестировать свой сайт на мобильных устройствах и компьютерах, чтобы проверить, каково реальное взаимодействие с пользователем, независимо от оценки PageSpeed.
В целом, по-прежнему желательно иметь сайт, который вообще не полагается на такой большой объем JavaScript.
Другие оптимизации JavaScript
Хотя они напрямую не касаются Удалить неиспользуемый JavaScript предупреждение, вы всегда должны покрывать свои базы и иметь эти фундаментальные оптимизации. Их можно сделать с помощью большинства плагинов стиля кеширования / оптимизации.
- Минификация
- Сжатие с помощью Brotli или GZIP
- Отложить
Дополнительно: ракетный погрузчик от Cloudflare
Эта функция доступна в бесплатной учетной записи Cloudflare. Он не удаляет какой-либо JavaScript, но помогает ему загружаться быстрее, поэтому он все равно может улучшить вашу общую оценку PageSpeed. Однако это может быть ошибкой или ошибкой — это может вызвать ошибки JavaScript, которые трудно устранить. В таком случае просто выключите его. Но если он будет работать без проблем, это ускорит ваш сайт. Rocket Loader не нужен, если вы уже используете плагин для задержки JavaScript на вашем сайте.
вы можете воспользоваться услугами веб-студии прометей и Страница услуги сайта-визитки..