Здрастуйте, шановні читачі блогу . Це невелика замітка з серії «самому собі на пам’ять». Виникла ідея прибрати зайві рядки з файлу стилів. За сім років існування блогу багато чого змінилося, але рядка в файлику STYLE.CSS залишалися (на всякий випадок або просто забував їх прибирати). Зараз мені здалося, що він став занадто багато важити, а тому виникла ідея його почистити.
Робити це вручну досить складно, та й не потрібно. Є способи цей процес автоматизувати. Частина з них у мене не спрацювала, за що треба було платити і я вважав це зайвим. У підсумку я скористався напівавтоматичним методом, про який напишу в найближчих кількох абзацах. Забігаючи вперед скажу, що зменшити розмір файлу CSS вдалося мало не в два рази, що мене навіть здивувало.
Варіанти пошуку непотрібних для роботи сайту CSS стилів
Як я вже писав, як об’єднати всі файли стилів в WordPress в один. По суті, потрібно просто відключити файли стилів деяких плагінів, які автоматом їх додають між тегами Head код кожної сторінки сайту. Ну, а рядки зі стилями з цих файлів потрібно перенести в основній — у мене він називається STYLE.CSS і живе в папці з вашою темою оформлення.
Ось саме цей файл стилів я хотів оптимізувати, тобто прибрати із нього все, що не використовується при завантаженні сторінок сайту. Логічно було припустити, що найкраще з розбором коду впорається браузер, що, власне, не було позбавлене сенсу.
В мережі я знайшов кілька рекомендованих для цієї справи плагінів. Зупинився на плагіні для Фаерфокса під назвою Dust-Me. Він в реальному часі робить розбір відкритої в браузері сторінки миттєво виявляючи ті селектори CSS, які виявилися не використовуються для її відтворення.
Але цього, як ви розумієте, мало для того, щоб виносити вердикт цим селекторам. Адже вони можуть використовуватися на інших типах сторінок вашого сайту. Що робити? Перевіряти їх все вручну? Зовсім ні. Dust-Me вміє працювати з картою вашого сайту виду сайтмар xml — достатньо буде тільки вказати шлях до неї:
Як бачите, у мене в sitemap.xml близько 1000 сторінок і плагін успішно почав їх сканування. Приблизно через сотню іншу сторінок він у мене затыкался і доводилося натискати на паузу, а потім його повторно запускати.
Даний метод всім хороший, бо дозволяє перевірити абсолютно всі сторінки свого сайту, щоб точно знати, що зайві селектори CSS ніде не використовуються і не знадобляться. Проблема в тому, що Dust-Me для мого STYLE.CSS в результаті видав помилку при показі невикористовуваних рядків (селекторів). Може бути йому не сподобалася його компресія або ще що завадило, але факт залишається фактом.
Далі я зайшов на платний онлайн-сервіс Unused-Css.com, де зареєструвався і вказав Урл свого сайту. Вони обіцяли протягом декількох годин його відсканувати і надіслати звіт поштою. Повний варіант нового (очищеного) CSS файлу коштує 25$, що, по-моєму, дуже дорого.
Однак, поки я чекав їх відповіді, знайшов безкоштовний і досить простий спосіб самому протягом п’яти-десяти хвилин прибрати зайве з файлу стилів в напівавтоматичному режимі. Допоміг мені в цьому абсолютно безкоштовний сервіс, де весь процес досить докладно описаний на наведеною за посиланням сторінці:
Суть методу видалення невикористовуваних стилів полягає в наступному:
Методика очищення CSS файлу від зовсім непотрібних селекторів
Вся сіль саме в маніпуляціях проводяться в браузері. Відкриваєте спочатку в ньому будь-яку сторінку сайту, запускаєте «інструменти розробника» (F12) і робите наступне: «Audits» → «Reload Page and Audit on Load» → «Run» → розгорніть «Web Page Performance» → розгорніть «Remove unused CSS rules» → розгорніть ваш CSS файл → скопіюйте все, що з’явилося в буфер обміну.
Виглядає це приблизно так:
Тобто просто переставляєте галочку в зазначене місце і тиснете на запуск. По закінченні процесу знаходите під спойлером «Remove unused CSS rules» назва вашого файлу стилів (у мене це STYLE.CSS) і клікаєте по ньому. Всі селектори CSS, які не використовуються для відтворення даної сторінки, будуть там наведені в стовпчик:
Копіюєте їх усі (від першого до останнього) в буфер обміну і вставляєте у вікно сервісу, позначене на наведеному вище скріншоті цифрою 1. Т. к. це дані лише з однієї сторінки вашого сайту, то робити з них висновки ще рано. Тому повторюєте все те ж саме з десятком інших сторінок свого сайту, щоб охопити весь їх можливий набір: статті, список рубрик, статичні сторінки, сторінки з таблицями, сторінки з оформленим кодом, сторінки зі списками і т. п.
Всі отримані в цих ітераціях списки невикористовуваних стилів (на різних сторінках вашого сайту) ви по черзі вставляєте у вікно, позначене на скріншоті цифрою 2, і щоразу після цього тисніть на розташоване трохи правіше жовту кнопку «Залишити невикористовувані стилі…»
Сервіс таким чином порівняє CSS стилі невикористовувані на всіх протестованих вами сторінках і видалить з загального списку ті, що брали участь в промальовуванні хоча б однієї сторінки. Чим більше сторінок ви перевірите, тим краще. Коли набридне — тисніть на кнопку «Видалити невикористовувані стилі» і копіюйте з’явилося в нижньому полі вміст вашого оновленого (очищеного) стильового файлу.
Особисто я спочатку порівняв його вміст з оригінальним файлом STYLE.CSS в Нотепад++ за допомогою плагіна Compare. Всі видалені з оригіналу рядка (у мене в кожному рядку записано по селектору, щоб зменшити загальний розмір файлів) підсвітяться і можна буде на вскидку проаналізувати целесоображность їх видалення.
Ніяких нарікань у мене видалені селектори не викликали (вони залишилися у STYLE.CSS від старих експериментів або вже непотрібних плагінів). У результаті число рядків (селекторів) у мене в файлі стилів зменшилася з майже 600 до трохи більше 300. А підсумковий вага файлу знизився до 25 кілобайт (менше 10 з урахуванням його gzip стиснення при передачі з сервера до браузера).
Заміна файлу стилів (його вмісту — старе видалив, а вставив нове, після чого зберіг зміни через файлзилу) на новий (покоцанный) видимих змін на сайті не викликало (поки, в усякому разі, не виявив). Загалом, я дуже задоволений і рекомендую спробувати. Швидко, просто і зручно (а так само безкоштовно).
Удачі вам! До зустрічей на сторінках блогу
