Позбавляємось зайвого CSS

8 хв. читання

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

Що таке зайвий CSS?

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

Навіщо видаляти зайвий CSS?

Як відомо, CSS визначає вигляд вмісту HTML-документу. Браузер завантажує та аналізує усі зовнішні CSS-файли перед відображенням контенту. Отже, чим більше CSS має веб-сторінка, тим довше користувачі повинні чекати, щоб побачити що-небудь на своїх екранах. Вбудування невеликого CSS у HTML-файл і скорочення зовнішніх стилів можуть оптимізувати рендеринг контенту. Для більшого ефекту, існують спеціальні методи. Їх поєднання гарантує, що швидкість відображення контенту залежатиме лише від швидкості інтернет-з'єднання.

До того ж, зайвий CSS — суттєва проблема для розробників. Чисті та впорядковані стилі легше підтримувати. Спростіть життя собі та вашим користувачам — позбавтесь зайвого CSS.

Як видаляти зайвий CSS вручну?

У Chrome можна скористатися інструментом на вкладці DevTools. Там можна знайти код стилів, що не використовуються. Щоб скористатися цим інструментом:

  1. Відкрийте Chrome DevTools;
  2. Відкрийте меню, натиснувши cmd + shift + p;
  3. Введіть Coverage та оберіть пункт Show Coverage;
  4. Оберіть CSS-файл у вкладці Coverage. Файл відкриється у вкладці Sources .

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

Позбавляємось зайвого CSS

Якщо стиль не використовується на одній сторінці, це не означає, що він непотрібний. Вам треба перевірити декілька сторінок вашого сайту та простежити за зайвим кодом. Ви можете зберігати результати кожної перевірки у документі Google Sheets. Код, що трапляється найчастіше, можна безпечно видаляти.

Інструменти для видалення зайвого CSS

Розробникам є чим зайнятись окрім видалення зайвого CSS. Існує багато інструментів, що автоматизують цей процес. Ми оглянули найбільш популярні:

1.UnusedCSS

Позбавляємось зайвого CSS

Проста назва свідчить про зручність цього інструменту. Просто приєднайте URL вашого сайту до UnusedCSS — і він зробить усе за вас. Окрім виявлення та видалення зайвого CSS, ви можете побачити скільки пам'яті ви зекономили. Ви можете безкоштовно спробувати UnusedCSS, але вам треба щомісяця платити за завантаження очищених CSS-файлів. Преміум-користувачі можуть планувати автоматичну оптимізацію CSS та мають доступ до інших можливостей.

UnusedCSS працює лише з живими сайтами, тому він не буде корисним на етапі тестування.

2.PurifyCSS

PurifyCSS — безкоштовний інструмент, що видаляє зайвий CSS з ваших HTML, PHP, JavaScript та CSS файлів. Натомість, вам треба щоразу вказувати файли для сканування, що може втомлювати. Замість зміни початкових файлів, PurifyCSS створює новий файл з оптимізованим CSS. PurifyCSS не працює з живими сайтами, тому він стане у пригоді на етапі розробки. Ви можете спочатку використовувати PurifyCSS, а потім перейти на UnusedCSS.

3.PurgeCSS

Позбавляємось зайвого CSS

На створення PurgeCSS надихнув PurifyCSS, тому ці інструменти дуже схожі. Однак PurgeCSS інтуїтивно зрозуміліший. Він порівнює ваш контент з вашим CSS та видаляє селектори, для яких не знайдено відповідності. Великий недолік: вам необхідно вручну додати CSS у білий список не за вказаними шляхами. Це може викликати труднощі, якщо ваш вебсайт використовує плагіни, на зразок HTML Forms.

4.UnCSS

UnCSS більш точний, ніж PurgeCSS, тому що він переглядає суцільні веб-сторінки, а не окремі файли, але він повільніший та потребує більше налаштувань. UnCSS найбільш корисний, якщо використовується поруч з іншими інструментами. Наприклад, ви можете поєднувати UnCSS з Grunt та Node.js, щоб контролювати зайвий CSS віддалено.

Альтернативні методи видалення CSS

Багато веб-інструментів пропонують оптимізацію CSS як частину своїх послуг. Старіші версії Opera та Firefox підтримують доповнення Dust Me, що виявляє невикористовуваний CSS. Однак доповнення не підтримується з 2015. На щастя, Mozilla працює над новим інструментом для оптимізації — CSS Coverage.

Попередження

Інструменти, які були згадані у статті, не ідеальні. Існує декілька різних методів для знаходження зайвих селекторів. Однак, зіставлення селекторів з елементами в DOM може викликати труднощі, якщо у вас є елементи, що залежать від API та сторонніх скриптів. Якщо ви видаляєте зайві стилі вручну, вам треба бути дуже обережними, щоб випадково не пошкодити застосунок, видаливши щось важливе. Ви повинні знати свій сайт краще, ніж будь-хто інший. А DevTools допоможе вам створити більш компактний CSS від самого початку.

Як автоматизувати видалення зайвого CSS з UnCSS

Погляньмо як можна скоротити ваші стилі, використовуючи один зі згаданих інструментів. Ми пояснимо як налаштувати Node.js, Grunt, UnCSS та CSSmin плагін на Windows, щоб звести невикористовуваний CSS до мінімуму.

1.Встановіть Node.js

Завантажте останню версію з офіційного сайту Node.js та дотримуйтесь інструкцій з встановлення.

2.Встановіть Grunt

Відкрийте Node.js та введіть у командний рядок наступне:

npm install -g grunt-cli

Grunt завантажиться та встановиться автоматично.

3.Відкрийте теку свого проекту

У командному рядку Node.js перейдіть до теки з CSS-файлами, які ви хочете просканувати. Для цього можна ввести шлях до файлу. Наприклад:

cd C:TestProject

4.Встановіть UnCSS та CSSMin

Введіть у командному рядку Node.js:

npm install grunt-uncss grunt-contrib-cssmin --save-dev

Пакети UnCSS та CSSMin будуть встановлені у вказану теку проекта.

5.Створіть файл Grunt.js

Створіть JavaScript-файл gruntfile.js у корні вашого проекту. Файл gruntfile.js поводить себе як конфігураційний файл для таких плагінів як UnCSS. Вставте цей код у командний рядок Node.js:

module.exports = function (grunt) {

    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'cleancss/tidy.css' }
                ]
            }
        },
        cssmin: {
            dist: {
                files: [
                    { src: 'cleancss/tidy.css', dest: 'cleancss/tidy.css' }
                ]
            }
        }
    });

    // Завантаження плагінів
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Таски за замовчуванням
    grunt.registerTask('default', ['uncss', 'cssmin']);

};

Тут ми просимо UnCSS просканувати ваш index.html, щоб знайти зайвий CSS. UnCSS створює скорочений CSS-файл у директорії під назвою cleancss. CSSmin плагін мінімізує новий файл. За замовчуванням він називатиметься tidy.css. Останні декілька рядків особливо важливі, тому що вони завантажують та реєструють обидва плагіни.

6.Запускаємо Grunt

Нарешті, повертаємось до теки з первинним файлом та запускаємо Grunt:

cd C:TestProject>grunt

UnCSS та CSSmin виконають свою роботу. Якщо ви все зробили правильно, ви отримаєте чистий та скорочений CSS-файл, який очікуватиме вас у спеціальній теці.

Деякі розробники стверджують, що такий метод зменшив розмір їх CSS-файлів більше ніж на 95 відсотків! Суттєва економія за мінімальних зусиль. Вам необхідно лише один раз виконати налаштування. Надалі, ви можете запускати Grunt, щоб автоматично видаляти зайвий CSS з вашого проекту.

css
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація