Як видалити невикористані CSS і JS у WordPress (дуже просто)

Наявність на вашому веб-сайті великої кількості невикористаних CSS і JS може погіршити час завантаження веб-сайту. Якщо ви запускаєте свій веб-сайт через a засоби тестування швидкості такий як Google PageSpeed ​​Insight, ви можете отримати попередження про необхідність видалити невикористаний CSS.

На щастя, є дуже простий спосіб зробити це. Вам не потрібно володіти спеціальними технічними знаннями, щоб мати можливість видалити невикористані CSS і JS зі свого сайту WordPress.

Це через дивовижний плагін, відомий як Asset CleanUp: Page Speed ​​Booster. За допомогою цього плагіна видалити невикористаний CSS так само просто, як натиснути кілька кнопок. Крім того, якщо ви не проти витрачати кілька доларів на рік, с WP Rocket, є видалена невикористана кнопка CSS, просто активуйте її, і плагін автоматично видалить усі невикористані CSS.

Замовлення: Топ-7 керованих хостингів Google Cloud WordPress

Що таке невикористаний CSS?

Невикористаний CSS – це файл CSS, який присутній на сторінці, але здебільшого не потрібен для завантаження сторінки. Коли відвідувач відкриває веб-сайт, браузер зазвичай має завантажити, проаналізувати та обробити всі зовнішні таблиці стилів на відвіданій сторінці, перш ніж він зможе відобразити вміст сторінки відвідувачу. Якщо на такій сторінці існує будь-який CSS, який не використовується на сторінці, браузер витрачатиме на це час.

Класичним прикладом цього є більшість плагінів контактної форми, які використовуються. Хоча ці плагіни здебільшого використовуються лише на сторінці «Зв’язатися з нами», вони завантажують CSS на весь веб-сайт. Не має значення, якщо це домашня сторінка, де він не використовується, CSS завантажиться.

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

Крім плагінів, розробники тем пишуть багато речей у style.css, які здебільшого не потрібні. Але незалежно від того, потрібні чи ні, вони завантажуються щоразу, коли завантажується ваш сайт!

Один невикористаний CSS може не бути проблемою, але велика кількість невикористаних CSS може вплинути на час завантаження вашого веб-сайту.

Замовлення: Топ-10 найшвидших і найкращих тем WordPress 

Як визначити невикористаний CSS

Знайти невикористані CSS і JS дуже легко. Є два підходи, які я рекомендую.

Перший – проаналізувати ваш веб-сайт за допомогою Google PageSpeed ​​Insight. Перевірте, чи є на вашому веб-сайті проблема видалення невикористаного CSS. Натисніть на нього, і ви зможете визначити відповідальний за це компонент вашого сайту.

Як видно згори, зареєстровано один випадок невикористаного CSS. Подивившись на це, я можу побачити плагін і розташування невикористаного CSS.

Другий варіант - отримати більш детальний аналіз. Ви можете досягти цього за допомогою інструментів Chrome Dev.

У веб-переглядачі Chrome відкрийте інструменти Chrome Dev і перейдіть до покриття. Потім натисніть кнопку перезавантаження в зоні покриття. Ви можете знайти a вичерпний посібник щодо того, як це зробити в інструменті Google Developers.

Інший варіант - використовувати jitbit для пошуку невикористаних селекторів CSS. Ви також можете використовувати PurifyCSS щоб знайти невикористаний CSS

Як видалити невикористаний CSS

Виконайте такі дії, щоб видалити невикористаний CSS із WordPress:

1. Встановіть Asset CleanUp

Перейдіть до плагіна, а потім Додайте новий. Потім ви вводите «Asset CleanUp» у полі пошуку на сторінці «Додати новий плагін». Встановіть і активуйте плагін.

2. Перейдіть до налаштувань плагіна

Щоб отримати доступ до налаштувань плагіна, на інформаційній панелі WordPress клацніть налаштування, а потім клацніть Asset CleanUp.

3. Вивантажте небажані CSS і JS

У налаштуваннях плагіна вам може знадобитися погодитися, що ви знаєте, як плагін працює під краном видалення жиру, перш ніж почати.

Щоб вивантажити CSS і JS, натисніть на CSS і JSS менеджер. Звідти ви можете видалити будь-які CSS і JS, які вам не потрібні. Ви можете видалити його лише для домашньої сторінки, для всього сайту або для певної URL-адреси. Ви також можете видалити публікації, сторінки чи категорії.

Прикладом є розвантаження будь-якої контактної форми від завантаження всього сайту, крім сторінки зв’язку з нами

Не поспішайте та вивантажте всі CSS і JS, які, як ви знаєте, непотрібні. Переконайтеся, що ви перевірили свій сайт після того, як ви закінчите, щоб переконатися, що все добре.

Видаліть плагіни CSS WordPress, які не використовуються

Ось кілька плагінів, які можна використовувати для видалення невикористаного CSS у WordpPress:

1. Asset CleanUp: Page Speed ​​Booster

Asset CleanUp: Page Speed ​​Booster дозволяє легко видалити невикористані 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 Manager

Менеджер CSS JS може спеціально видалити CSS або JS з мобільного чи настільного комп’ютера. Залежно від того, чого ви хочете досягти.

Цей плагін також може відкласти завантаження файлів CSS або JS.

Висновок

Якщо у вас багато невикористаних CSS і JS, ви помітите значне покращення показників швидкості та продуктивності.

Можливо, неможливо видалити весь невикористаний CSS, але ви можете звести їх до мінімуму. Я використовую Asset CleanUp, щоб видалити невикористаний CSS для TargetTrend.

Пам’ятайте, оптимізуйте, але не захоплюйтеся цим, якщо ви не хочете, щоб ваш сайт виглядав так найшвидший веб-сайт у світі.

Читайте також:

Як усунути ресурси, що блокують візуалізацію, у WordPress

Як зробити WordPress дуже швидким

Як привернути трафік до свого блогу