Вы хотите удалить файлы (CSS и JS), которые блокируют загрузку страниц в WordPress? Если вы тестируете свой сайт в Google Insights PageSpeed, то, вероятно, увидите предложение по устранению скриптов, блокирующих загрузку страниц. В этом руководстве мы покажем вам, как исправить эти файлы, которые блокируют загрузку ваших страниц, чтобы улучшить ваш показатель Google PageSpeed.

Как исправить отображение страниц WordPress

Что блокирует загрузку страниц?

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

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

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

1 - Как исправить отображение страницы с помощью Autoptimize

Этот метод проще и рекомендуется для большинства пользователей.

Первое, что вам нужно сделать, это установить и активировать плагин " Autoptimize ». Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

После активации плагина необходимо посетить Настройки> Автоматическая оптимизация Для настройки параметров плагина.

Autoptimizesettings настройки wordpress

Вы можете начать с установки флажка «JavaScript и CSS», а затем нажать кнопку «Сохранить изменения».

Теперь вы можете проверить свой Веб-сайт с помощью инструмента PageSpeed. Если остались скрипты, блокирующие отрисовку страницы, то нужно вернуться на страницу настроек плагина и нажать кнопку «Показать дополнительные настройки» вверху.

Автоматическая оптимизация настроек плагина

Здесь вы можете разрешить плагину включать JS в строку и удалять сценарии, которые исключены по умолчанию, например, «seal.js» или «jquery.js».

Затем прокрутите вниз до опции CSS и позвольте плагину объединить все файлы CSS.

Нажмите кнопку «Сохранить изменения и очистить кэш», чтобы сохранить изменения и Очистить кэш плагин.

Как только вы закончите, идите и проверьте свой Веб-сайт снова с помощью инструмента PageSpeed.

Убедитесь, что вы тщательно протестировали свой сайт, чтобы убедиться, что все работает нормально после оптимизации ваших сценариев JavaScripts или файлов CSS.

2 - Исправлен рендеринг файлов с помощью W3 Total Cache.

Этот метод требует немного больше работы и рекомендуется тем, у кого уже есть W3 Total Cache. сайт.

Сначала вам нужно будет установить и активировать плагин W3 Total Cache. Если тебе нужна помощь, Посмотрите наш полный путеводитель W3 Total Cache.

Затем вам нужно посетить «Производительность> Общие настройки» и прокрутить вниз до раздела «минимизировать».

Плагин для минификации WordPress общий кеш w3

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

Нажмите на кнопку Сохранить все настройки Чтобы сохранить ваши настройки.

Затем вам нужно добавить скрипты и CSS, которые вы хотите сжать.

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

Под предложения, где говорится: Исключите делают блокирование JavaScript и CSS ", Нажмите" Показать, как решить ". Он покажет вам список скриптов и таблиц стилей.

Наведите указатель мыши на сценарий, и он покажет вам полный URL. Вы можете выбрать этот URL-адрес, а затем использовать CTRL + C на клавиатуре (Command + C на Mac), чтобы скопировать URL-адрес.

Теперь перейдите в админку WordPress и перейдите в " производительность > Minifier .

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

Загрузка файлов w3 общее сжатие файлов кэша

Затем вы должны нажать на кнопку Add Script А затем начните добавлять URL-адреса сценариев, которые вы скопировали из инструмента Google PageSpeed.

Когда вы закончите, прокрутите вниз до раздела CSS и нажмите кнопку «Добавить таблицу стилей». Теперь начните добавлять URL-адреса таблиц стилей, которые вы скопировали с помощью инструмента Google PageSpeed.

Общий кеш сжатия файлов css w3

Теперь нажмите на кнопку Сохранить настройки и очистить кеш Для сохранения ваших настроек.

Посетите инструмент Google PageSpeed ​​и снова проверьте свой сайт.

Убедитесь, что вы также тщательно протестировали свой веб-сайт, чтобы убедиться, что все работает нормально.

Это все, что касается этого урока, я надеюсь, что он позволит вам улучшить производительность вашего WordPress блог.