Якщо ваш сайт WordPress використовує платну тему WordPress або популярну тему з офіційного сховища тем WordPress, ймовірно, що тема буде розроблена для різних випадків використання. І ви можете використовувати лише невеликий набір усіх функцій, доступних у темі.
У цьому випадку ваш сайт завантажує багато невикористаних CSS, які не потрібні для стилізації сторінок вашого сайту. Наприклад, тема WordPress, яку ви використовуєте, також може мати стилі для сторінок WooCommerce, але якщо ви ведете лише блог на своєму сайті WordPress, то ви не використовуєте CSS, включений для сторінок WooCommerce на вашому сайті, і таким чином обслуговуєте невикористані CSS для користувачів.
Якщо ви тестували свій веб-сайт за допомогою інструмента Google Pagespeed, ви, ймовірно, вже знаєте, що на вашому сайті є невикористані проблеми CSS. У цьому посібнику ми покажемо вам, як спочатку перевірити наявність невикористаного CSS, а потім скористатися безкоштовним інструментом для видалення невикористаного CSS зі свого сайту WordPress.
Як перевірити невикористаний CSS
Google Chrome DevTools (той, який ви бачите, коли ви натискаєте опцію «Перевірити» у контекстному меню) має функцію покриття на вкладці «Джерела». Ви можете використовувати опцію Покриття, щоб знайти невикористані CSS та JS, які завантажує ваш веб-сайт.
- Відкрийте свій веб-сайт у Chrome на робочому столі.
- Клацніть правою кнопкою миші порожнє місце на вашому сайті та виберіть Оглянути з контекстного меню.
- Натисніть на Джерела вкладку, натисніть Ctrl + Shift + P щоб відкрити командне вікно, потім введіть покриття і виберіть Почніть огляд інструментів і перезавантажте сторінку з доступних команд.
- На вкладці Покриття натисніть на URL-фільтр і введіть тут кореневий домен вашого сайту, щоб відображати лише внутрішні файли CSS/JS.
└ Перевірте Невикористані байти Щоб побачити відсоток даних, які завантажуються у файл CSS/JS із вашої теми.
- Натисніть на файл CSS, щоб переглянути невикористаний CSS (позначений червоними смугами), завантажений вашим сайтом. CSS, який використовується на поточній сторінці, буде показано зеленими смугами.
Після того, як ви проаналізували весь невикористаний CSS, який завантажується на ваш веб-сайт, настав час його видалити. Існує кілька безкоштовних інструментів для видалення невикористаних CSS з веб-сторінок. Нижче наведено один із популярних інструментів, які я тестував і використовував у своїх власних проектах.
Використовуйте PurifyCSS Online, щоб видалити невикористаний CSS
Зазвичай ви можете знайти плагін майже для всього в WordPress. Але для видалення невикористаного CSS, на жаль, немає жодного доступного плагіна. Тому ми будемо використовувати ручні інструменти, не специфічні для WordPress, щоб видалити невикористані CSS з вашого сайту.
PurifyCSS є найбільш зручний інструмент для розробників ви можете знайти справу з невикористаним CSS. Інструмент має простий інтерфейс користувача, який дозволяє користувачам надавати URL-адресу веб-сайту АБО код HTML і CSS. Для WordPress ми будемо використовувати параметр URL і надавати посилання на всі види сторінок вашого сайту, щоб інструмент міг захопити CSS з усіх і оптимізувати для невикористаних CSS.
Ось короткий список сторінок, які ви повинні додати в інструмент:
- URL домашньої сторінки
- Кілька URL-адрес сторінок публікації з кожної категорії на вашому сайті
└ Це робиться для того, щоб CSS був включений для всіх елементів публікації.
- Контакти, Інформація, Конфіденційність і всілякі різні сторінки, які можуть бути на вашому сайті.
- Сторінка архіву, Сторінка пошуку, Сторінки авторів
- Спеціальні сторінки типу публікації
Гаряча порада: Створіть публікацію/сторінку «функції» з усіма елементами теми, які ви використовуєте або можете використовувати в майбутньому, такими як таблиця, галерея зображень, код, попередні, упорядковані списки, неупорядковані списки, форми, вкладки, акордеони, блоки Гутенберга, які ви зазвичай використовуєте , тощо
Використовуйте цю URL-адресу публікації «функції» в онлайн-інструменті PurifyCSS, щоб переконатися, що CSS для часто використовуваних елементів включено.
Натисніть на Очистіть CSS після того, як ви додасте всі релевантні типи URL-адрес зі свого сайту в інструмент PurifyCSS Online.
Скопіюйте новий CSS, згенерований інструментом, і використовуйте його на своєму сайті. Переконайтеся, що ви створіть резервну копію оригінального style.css та інші файли CSS у вашій темі, перш ніж замінити новий CSS, згенерований PurifyCSS.
Порада: Ви можете використовувати вбудований редактор тем WordPress для редагування файлів CSS своєї теми, або ви можете використовувати програму FTP/SFTP для підключення до сервера та зручного редагування файлів за допомогою редактора Блокнота.