Від автора: тема продуктивності CSS, прискорення CSS — досить актуальна сьогодні. У цій статті я розповім вам про 5 інструментів, з допомогою яких можна посадити CSS на дієту і прискорити завантаження сторінок.
Чому швидкість завантаження сторінок так важлива?
Швидке завантаження – вирішальний фактор успіху вашого сайту. Є результати досліджень, які підтверджують думку про те, що користувачі швидко втрачають терпіння, якщо їм занадто довго доводиться чекати появи контенту.
Коли сайт працює повільно, користувачі отримують негативний досвід роботи, що призводить до зменшення кількості відвідувачів і зниження конверсії. В кінцевому результаті це негативно позначається на бізнесі.
Існує ряд факторів, що впливають на веб-продуктивність. Наприклад, кількість HTTP-запитів, забрудненість коду, важкі медіа файли і т. д. Стиль написання CSS і завантаження стилів в браузер можуть значно вплинути на ті мілісекунди, які розмежовують користувачів на тих, хто залишиться на сайті і тих, хто піде до конкурентів.
Давайте подивимося, як інструменти нижче можуть підвищити продуктивність вашого CSS.
TestMyCSS
TestMyCSS – безкоштовний інструмент оптимізації з масою функцій. Він перевіряє на надмірність, помилки валідації, невикористаний CSS і застосування кращих практик.
Можете відразу ж користуватися сервісом, просто введіть url до CSS-файлу з вашого сайту, а TestMyCSS знайде все, що потрібно поліпшити. Також вам можуть допомогти підказки:
як спростити складні селектори;
дублі CSS-властивостей і селекторів, від яких потрібно позбутися;
кількість оголошень !important, присутніх в коді;
непотрібна специфічність класів;
непотрібні IE фікси;
властивості з префіксами, яким префікси вже не потрібні;
класи і id з тегами, наприклад, a.primary-link;
неправильне використання універсальних селекторів.
Stylelint
Stylelint – амбітний CSS-лінтер, що працює з PostCSS. Інструмент з відкритим вихідним кодом для написання сучасного CSS-коду. Лінтер – програма, скануюча код на потенційні помилки.
Stylelint вміє:
позначати прапором помилки: помилки, неправильні hex-значення кольорів, дублікати селекторів і т. д;
змушувати використовувати кращі практики;
забезпечувати дотримання правил кодинга, таких як однакові прогалини у всіх CSS-правила і т. д;
забезпечувати підтримку нового CSS-синтаксису;
автоматично виправляти деякі незначні попередження з допомогою stylefmt, інструменту форматування CSS-правил…
… і багато іншого. Stylelint вкрай універсальний інструмент, його можна використовувати разом з:
Stylelint CLI (командний рядок);
плагін для запаковщика (webpack, gulp тощо);
плагін для текстового редактора (Atom, Sublime Text тощо);
Stylelint Node API;
плагін Stylelint PostCSS.
Більш докладно ознайомитися з сервісом можна в керівництві користувача і розробника.
CSS Triggers
CSS Triggers – онлайн ресурс, який інформує вас про те, в яких браузерах властивості викликають операції макетування, відтворення і композиції. Ці три процеси виконуються при рендерінгу сторінки в браузері.
Зокрема:
макет: браузер генерує геометрію і положення всіх елементів;
вивід: браузер обчислює пікселі всіх елементів в шари;
композиція: браузер розмальовує шари на екран.
Ця інформація є особливо цінною, якщо ви анимируете елементи в вебі. Композиційні операції витрачають найменше ресурсів у браузері. Якщо ваш CSS-код анімує властивості, які повторно викликають операції макетування і відтворення, вам буде складно домогтися 60fps (кадрів в секунду) – вирішальне значення для плавної анімації.
cssnano
Як тільки ви зрозуміли, що CSS критично впливає на процес візуалізації, з’являється питання, як писати короткий і добре структурований код в стилях. Іншими словами, за замовчуванням браузери відкладають рендеринг сторінок до завантаження, парсинга і виконання стилів. Тому якщо ваш CSS-файл великий і заплутаний, відвідувачам, швидше за все, доведеться почекати, перш ніж вони зможуть прочитати контент на вашому сайті.
cssnano – плагін для PostCSS з оптимізації та минификации CSS. Зокрема: «cssnano бере ваш добре форматований CSS і проганяє його через безліч тестів по оптимізації, щоб на виході отримати найменшу вагу файлу.»
У цьому інструменті маса функцій, з усіма ними ви можете ознайомитися на сайті cssnano.
Critical
Critical – ще один інструмент, який вирішує проблеми критичного маршруту CSS, про яких я писав у попередньому розділі.
Серед правил і рекомендацій PageSpeed Insights ви знайдете цю пораду: «Для найкращої продуктивності, можливо, доведеться вставити критичний CSS-код безпосередньо в HTML-документ. Це прибирає додаткові переходи в критичному маршруті…» — Ilya Grigorik на Google Developers Blog.
Ідея полягає в пошуку критичних CSS-правил та розміщення їх в тезі документа. Під критичні стилі потрапляють будь-які правила, що відповідають за базовий макет і типографіку, а також стилі видимій частині сторінки сайту.
Critical генерує і вставляє критичний CSS-код за вас. Інструмент можна використовувати з Grunt і Gulp. Більш детально про вставлення критичних стилів за допомогою цього інструменту можете прочитати в статті Asha Laxmi «як і навіщо инлайнить критичний CSS».
Висновок
У цій статті я підкреслив важливість швидкого завантаження сайту, а також те, як роздуті стилі можуть змусити ваших користувачів чекати завантаження контенту. Перелічені 5 інструментів очистять стилі, зменшать кількість багів, що спростить браузерам завантаження і парсинг.
З допомогою чого ви підтримуєте стислість CSS-коду? Пишіть в коментарях.
