TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як видалити невикористані CSS та JavaScript у WordPress?

29

Легкі теми, такі як Astra, GeneratePress та Genesis, завантажують на сайт дуже менше CSS та сценаріїв. Це допомагає видалити невикористані помилки CSS та JavaScript в інструменті Google PageSpeed ​​Insights та збільшити показник швидкості. Однак 99% комерційних тем WordPress поєднують у собі кілька функцій та завантажують важкі сценарії та CSS. Якщо ви використовуєте полегшену або важку тему, вам все одно знадобиться багато функціональних можливостей через плагін. Поєднуючи тему та плагіни, загальний показник швидкості вплине на кожен окремий вихідний файл на сайті. У цій статті ми розповімо, як видалити невикористані CSS та JavaScript у WordPress, щоб покращити оцінку Google PageSpeed ​​Insights.

Пов’язані: Прочитайте 400+ безкоштовних підручників WordPress.

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

Пояснимо це простим прикладом. Контактна форма 7 – один з популярних плагінів для додавання контактних форм на сайти WordPress. Як правило, вам потрібна контактна форма на сторінці "Контакти", а може, і на кількох інших сторінках. Ви не будете використовувати контактну форму в кожному дописі в блозі. Однак плагін Форма контакту 7 завантажить CSS та JavaScript на кожну сторінку та допис у блозі на вашому сайті. Це велика проблема, коли у вас є 1000 повідомлень у блозі, і всі вони без необхідності завантажують скрипт контактної форми / CSS. Ці непотрібні CSS та сценарії називаються невикористаним CSS та невикористаним сценарієм.

Ще один хороший приклад – магазин WooCommerce. Стилі та сценарії WooCommerce потрібні лише на таких сторінках, як продукти, архів продуктів, кошик, оформлення замовлення та покупки. Однак у плагіна немає жодної можливості запобігти завантаженню файлів у повідомленнях або сторінках блогу.

Чому це проблема?

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

Як видалити невикористані CSS та JavaScript у WordPress?

Помилка швидкості сторінки для невикористаних CSS та JS

Хоча інструмент каже, що це безпосередньо не вплине на показник продуктивності, це має величезний вплив на час завантаження. На даний момент 30% балів припадає на час блокування, і якщо невикористані CSS / JS та ресурси, що блокують рендеринг, знизять рахунок до дна. Крім того, деякі хостинг -компанії стягуватимуть плату залежно від використання пропускної здатності. Завантаження непотрібних файлів CSS / скриптів на ваш сайт збільшить використання пропускної здатності у багато разів. Тому необхідно визначити невикористані CSS та JavaScript та видалити їх із завантаження на всіх сторінках.

Як визначити невикористані CSS та JavaScript?

Ви повинні розуміти, що викликає завантаження невикористаних ресурсів на ваші сторінки. Як пояснювалося вище, вам не потрібно завантажувати контактну форму, Інтернет -магазин або плагіни для перегляду на всіх сторінках. Однак все завдання складніше, ніж ви думаєте.

  • Спочатку очистіть кешування та вимкніть плагін кешування на своєму сайті. Тепер перейдіть до інструмента Google PageSpeed ​​Insights та перевірте показник швидкості.
  • Натисніть на повідомлення "Видалити невикористаний JavaScript" та "Видалити невикористаний CSS", щоб розгорнути їх. Google покаже вам список ресурсів із розміром переказу та потенційною економією.

Як видалити невикористані CSS та JavaScript у WordPress?

Перегляд невикористаних ресурсів у PageSpeed

  • Зовнішній код – Як ви можете бачити на наведеному вище знімку екрана, "pagad2.googlesyndication.com" надходить від Google AdSense. Ви не можете видалити невикористані CSS та JavaScript, завантажені зі сторонніх веб-сайтів. Ці сценарії завантажуються на ваш сайт за допомогою плагінів для реклами, Analytics, вбудовування відео YouTube або соціального доступу. Отже, ви повинні розуміти, що ці зовнішні ресурси впливатимуть на швидкість сторінки, і ви не можете контролювати це, якщо не вирішите їх видалити. перегляньте статтю про швидкість сторінок AdSense проти швидкості, щоб зрозуміти, що реклама знищить швидкість вашої сторінки.
  • Файли плагінів і тем – ми пояснимо, як їх видалити у наступному розділі.
  • Вбудований CSS та сценарії – інструмент Google PageSpeed ​​Insights зазвичай не відображає їх. Ви повинні вручну визначити та видалити їх зі свого сайту. Якщо плагін вставляє вбудований CSS/скрипт, вимкніть файли плагіна або уникайте додавання власного вбудованого коду. Пам’ятайте, що є велика проблема з важкими темами, які використовують style.css з тисячами рядків. Щоб зменшити розмір, вам доведеться вручну видалити код всередині файлу style.css.

Таким чином, легко видалити невикористані CSS та JavaScript, якщо вони завантажені як окремі файли. Завантаження величезного файлу style.css або вбудованого CSS неможливо видалити, якщо ви не переглянете їх вручну та не видалите невикористані коди. Крім того, вам може знадобитися знайти полегшену тему або плагін, щоб позбутися від проблеми. Після того, як ви дізнаєтесь, що викликає помилку, ви можете знову включити плагін кешування на своєму сайті.

Як видалити невикористані CSS та JavaScript?

Існує два способи видалення невикористаних файлів CSS та JS під час завантаження сторінки у веб -переглядачі. Перший варіант – це використання плагінів преміум -класу, таких як WP Rocket, а другий – використання безкоштовних плагінів. Ми детально пояснимо обидва методи, щоб ви могли перевірити та вибрати найпростіший для вас.

Видаліть невикористаний CSS за допомогою WP Rocket

WP Rocket – найпопулярніший плагін для кешування WordPress, який пропонує надзвичайно простий користувальницький інтерфейс. Щоб покращити час завантаження сторінки, вам потрібно придбати плагін та оновити його до останньої версії (вище 3.9).

  • Перейдіть до меню «Налаштування> WP Rocket» на панелі адміністратора WordPress.
  • Натисніть на вкладку «Оптимізація файлів» і прокрутіть униз до нижньої частини розділу «Файли CSS».
  • Увімкніть опцію «Unused CSS (Beta)» та підтвердьте опцію «Activate Remove Unused CSS» із попереджувального повідомлення.

Як видалити невикористані CSS та JavaScript у WordPress?

Видаліть невикористаний CSS у WP Rocket

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

Як видалити невикористані CSS та JavaScript у WordPress?

Видалення невикористаного CSS завершено

  • Після завершення ви побачите повідомлення про успіх «Видалити невикористаний CSS завершено!».
  • Ви також можете ввімкнути опцію "Оптимізувати доставку CSS" для створення критичних CSS, щоб уникнути проблем із CSS, що блокує рендеринг.
  • Натисніть кнопку «Зберегти зміни» внизу сторінки, щоб відновити кешовані файли.

Видаліть невикористаний JavaScript за допомогою WP Rocket

На відміну від CSS, видалити JS неможливо за допомогою плагіна WP Rocket. Однак ви можете ввімкнути опції «Завантажити відкладений JavaScript» та «Затримка виконання JavaScript» у розділі «Оптимізація файлів> Файли JavaScript». Це затягне як внутрішні, так і зовнішні коди та усуне проблеми, що блокують рендеринг JavaScript.

Як видалити невикористані CSS та JavaScript у WordPress?

Затримка виконання JavaScript

Перевірте, чи ваш сайт працює нормально, після ввімкнення цих опцій.

Використання плагіна Asset CleanUp для видалення невикористаних CSS та JavaScript

Коли у вас багато завантажених файлів плагінів і тем, дотримуйтесь наведених нижче вказівок, щоб видалити їх на сторінках, де вони вам не потрібні.

  • Увійдіть на інформаційну панель адміністратора WordPress і перейдіть до розділу «Плагіни> Додати новий».
  • Введіть «очищення активів» у вікні пошуку та знайдіть плагін «Очищення активів: прискорення швидкості сторінки».

Як видалити невикористані CSS та JavaScript у WordPress?

Встановіть та активуйте плагін

  • Натисніть кнопку «Встановити зараз», а потім активуйте плагін.
  • Після активації плагіна ми рекомендуємо вам ознайомитися з показаною документацією. Це необхідно для правильного використання плагіна.

Як видалити невикористані CSS та JavaScript у WordPress?

Прочитайте Посібники з початку роботи

Налаштування плагіна

Плагін має численні налаштування, які ми не будемо пояснювати в цій статті. Якщо ви використовуєте на своєму сайті плагін кешування, наприклад WP Rocket, переконайтеся, що ви не використовуєте ніяких інших функцій, крім відключення невикористаних скриптів та CSS. Перейдіть до меню «Очищення активів> Налаштування», а потім на вкладку «Налаштування використання плагіна». Тут ви можете вирішити, яким чином ви хочете переглядати та вимикати невикористані CSS / скрипти на своїх сторінках.

  • Керувати на інформаційній панелі – увімкніть цю опцію. Це допоможе вам проаналізувати сторінку з редактора публікацій на інформаційній панелі адміністратора.

Як видалити невикористані CSS та JavaScript у WordPress?

Увімкніть керування на інформаційній панелі

  • Управління в інтерфейсі-якщо ви хочете проаналізувати сторінку з інтернет-браузера, увімкніть цю опцію. В іншому випадку ви можете вимкнути це. Пам’ятайте, що внутрішній аналіз може виконувати лише зареєстрований користувач адміністратора. Під час перевірки користувачі, які відвідають ваш сайт, не постраждають.

Як видалити невикористані CSS та JavaScript у WordPress?

Увімкнути або вимкнути керування у Frontend

  • Макет списку об’єктів – натисніть спадне меню і виберіть «Усі стилі та сценарії> Згруповані за місцезнаходженням (теми, плагіни, основне та зовнішнє). Це допоможе вам переглянути файли ресурсів, згруповані за різними категоріями.

Як видалити невикористані CSS та JavaScript у WordPress?

Встановити макет перегляду

  • Приховати основний файл WordPress зі списку активів? – увімкніть цю опцію, щоб не плутати з основними файлами WordPress.

Тепер перейдіть на вкладку «Тестовий режим» і ввімкніть опцію «Увімкнути тестовий режим». Це допоможе вам перевірити, чи не працює сайт після відключення скриптів і CSS, перш ніж зробити його загальнодоступним.

Як видалити невикористані CSS та JavaScript у WordPress?

Увімкніть тестовий режим

Натисніть «Оновити всі налаштування» внизу, щоб застосувати зміни.

Видаліть невикористані CSS та JavaScript

Залежно від налаштувань, ви можете аналізувати сторінку з редактора або з інтерфейсу.

  • Вимкнення сценаріїв та CSS у редакторі – відредагуйте будь -яку наявну публікацію, щоб перейти до редактора публікацій. Прокрутіть униз донизу, щоб переглянути метабокси з плагіна Asset CleanUp. Перегляньте всі CSS та скрипти, завантажені на цій сторінці, та вимкніть непотрібні ресурси.
  • Вимкнення сценаріїв та CSS із Frontend -Якщо ви ввімкнули опцію "Керувати у передньому кінці", відкрийте будь-яку свою публікацію у веб-переглядачі. Пам’ятайте, що ви повинні увійти до своєї панелі адміністратора WordPress на іншій вкладці веб -переглядача. Унизу сторінки ви побачите, що подібні метабокси вимикають ресурси, завантажені на сторінці.

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

Як видалити невикористані CSS та JavaScript у WordPress?

Перегляд завантажених ресурсів у групі

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

Як видалити невикористані CSS та JavaScript у WordPress?

Вимкнути або ввімкнути CSS та JS

  • Розвантажте ресурс на сторінці.
  • Вимкніть файл для всього сайту
  • Вимкнути у всіх публікаціях (він продовжуватиме завантажуватися на сторінках та користувацьких типах публікацій ).
  • Кілька інших варіантів, таких як використання RegEx, доступні лише в професійній версії плагіна.

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

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

  • Перейдіть до розділу «Очищення активів> Масові зміни».
  • Перейдіть на вкладку «Публікації, сторінки та користувацькі типи публікацій» і виберіть зі списку «допис».
  • Тут ви можете переглянути всі відключені файли на своєму сайті.
  • Установіть прапорець «Видалити масове правило» і натисніть кнопку «Застосувати зміни» внизу, щоб знову включити завантаження файлів.
  • Крім того, ви можете редагувати будь -які публікації в редакторі публікацій та змінювати поведінку завантаження файлів.

Як видалити невикористані CSS та JavaScript у WordPress?

Перегляд та видалення масових файлів

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

Заключні слова

Ми сподіваємося, що ця стаття буде корисною для видалення з вашого сайту невикористаних файлів CSS та JavaScript та покращення показника Google PageSpeed. Ми рекомендуємо використовувати WP Rocket, оскільки легко видалити CSS і затримати зовнішній JS кількома клацаннями миші. Якщо ви використовуєте безкоштовний плагін Asset Cleanup, це лише допоможе вам відключити завантаження файлів CSS та JS із плагінів та тем. Вам слід уникати використання сторонніх кодів і вручну видаляти непотрібні коди всередині основного файлу style.css. Під час редагування файлів вручну обов’язково використовуйте дочірню тему для оновлення таблиці стилів, щоб ви не втрачали зміни під час оновлення теми.

Джерело запису: www.webnots.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі