Ако вашият 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 програма, за да се свържете със сървъра и удобно да редактирате файлове с помощта на редактор на Notepad.