Пропустить

Как быстро сделать свой блог: управление файлами CSS и JS

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

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

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

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

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

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

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

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

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
22 акции
доля18
чирикать1
Регистрация3