5 порад для супер швидкого CSS

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

3 найкращих інструментів для тестування веб-продуктивності

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

Ось п’ять порад, які допоможуть вам досягти цього.

1. Використовуйте селектори з невеликим рівнем вкладеності

nav ul li.nav-item

Це можна записати більш коротко:

.nav-item

Крім того, що ваш CSS буде невеликим, браузер також швидше відображатиме елементи, націлені на конкретні селектори. Браузери читають селектор праворуч наліво. Чим більший рівень вкладеності селекторів, тим більше часу потрібно браузеру щоб обробити і відобразити елементи, до яких застосовуються ці селектори. Для більш складних DOM, які часто перезаписуються, короткі селектори можуть скоротити час.

В ідеалі ми хочемо, щоб селектори були якомога дрібніші, але це не означає, що необхідно їх урізати до кістки. Іноді потрібна додаткова специфічність, щоб розширити компоненти. Знайдіть баланс, але будьте прагматичні.

2. Використовуйте скорочені властивості

Люди, що дивляться сайт препроцесора Sass: на ноутбуці

Використання скороченого CSS прискорить ваш сайт

Це здається здоровим глуздом, але ви будете здивовані, як часто використовуються непотрібні властивості. Ось приклад використання деяких властивостей:

font-size: 1.5rem;
line-height: 1.618;
font-family: "Arial", "Helvetica", sans-serif;

Тут дуже багато CSS. Давайте приведемо це до ладу:

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

При скороченому записі властивості font, зменшилася кількість декларацій і вони були записані в один рядок, цим ми заощадили місце.

У прикладі, показаному вище, короткий запис використовує приблизно на 40 відсотків менше місця, ніж його еквівалент записаний у три рядки. З першого погляду цей запис важко зрозуміти, але коли ви витратите деякий час на його використання, синтаксис стає зрозумілим.

font – це не єдиний скорочений запис, доступний вам. Наприклад, margin також має скорочений запис замість більш довгих властивостей, таких як margin-top, margin-right і т.д.

Властивість padding працює так само. Для отримання додаткових можливостей для зменшення CSS, Mozilla Developer Network пропонує корисний список скорочених властивостей.

Що робити, якщо потрібно перевизначити значення нижче в каскаді? Наприклад, припустимо, що ви маєте елемент заголовка, який повинен змінити розмір шрифту для великих дисплеїв. У цьому випадку, ви повинні використовувати конкретну властивість font-size:

h1 {
  font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2rem;
  }
}

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

3. Використовуйте попереднє завантаження ресурсів

Вказівка ресурсу для завантаження може дати браузеру фору на завантаження CSS вашого сайту. Ви можете встановити його як тег <link> в HTML:

<link rel="preload" href="/css/styles.css" as="style">

Або як HTTP-заголовок у конфігурації вашого сервера:

Link: </css/styles.css>; rel=preload; as=style

В обох сценаріях preload дає браузеру фору на навантаження /css/styles.css. Використання попереднього завантаження в HTTP-заголовку краще, тому що це означає, що браузер виявить підказку раніше в заголовках відповідей, а не пізніше в тілі відповіді.

Ще одна причина для використання попереднього завантаження в заголовку HTTP полягає в тому, що він ініціює подію push-сервера на більшості реалізацій HTTP/2. Server push – це механізм, за допомогою якого активи попередньо виштовхуються клієнту при створенні запитів на контент, і він пропонує переваги продуктивності, аналогічні вкладенню CSS. Server push недоступний за протоколом HTTP/1. Однак, використання попереднього завантаження в середовищі HTTP/1 може підвищити продуктивність..

4. Збір зайвих стилів за допомогою csscss

csscss аналізуватиме будь-які файли CSS, які ви йому даєте, і дасть знати, які набори правил дублювали декларації

Може перевірити ваш CSS для дублювання правил за допомогою перевірки надмірності. Наприклад, візьміть інструмент csscss на основі Ruby.

Користувачі Ruby можуть встановити його за допомогою:

gem install csscss

Після установки ви можете перевірити свій CSS для надмірність наступним чином:

csscss -v styles.css

Ця команда показує, які селектори використовують загальні правила, які можна видалити, щоб заощадити місце:

{h1} AND {p} share 3 declarations 
  - color: #000
  - line-height: 1.618
  - margin: 0 0 1.5rem

Ви можете переміщати повторювані правила під одним селектором:

h1, p {
  color: #000;
  line-height: 1.618;
  margin: 0 0 1.5rem;
}

Ви будете здивовані тим, скільки вільного простору може заощадити цей процес у великих проектах.

Використовуйте –help, щоб побачити більше команд, які можна використовувати, щоб змінити налаштування.

5. Зменшення розміру за допомогою cssnano

cssnano приймає ваш відформатований CSS і запускає його через безліч цілеспрямованих оптимізацій

Ви можете використовувати cssnano-node та інструмент PostCSS. cssnano не тільки мінімізує CSS, але й робить багато цілеспрямованих оптимізацій, які можуть зменшити розмір CSS.

Встановіть його у системі за допомогою npm:

npm i -g cssnano-cli

Потім використовуйте його для оптимізації CSS:

cssnano styles.css optimized-styles.css

Якщо ви не любитель роботи з командним рядком, можете автоматизувати cssnano із системою збирання. Ось як використовувати cssnano в gulpfile:

const gulp = require("gulp");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");

const buildCSS = () => {
  return gulp.src("css/styles.css")
    .pipe(postcss([cssnano()])
    .pipe(gulp.dest("css/optimized"));
};
const watch = () => {
  gulp.watch("css/styles.css", buildCSS);
};
exports.buildCSS = buildCSS;
exports.watch = watch;

Завдання buildCSS читає CSS, який ви пишете в css/styles.css, потім передає оптимізований висновок у каталог css/optimized. Завдання watch запускає buildCSS щоразу, коли відбуваються зміни в css/styles.css.

Завдання watch можна викликати в терміналі так:

gulp watch

З деяким налаштуванням, ви зможете створити робочий процес, який виконує цю конкретну оптимізацію на додаток до інших пов’язаних з CSS завдань, таких як збір Sass/Lessфайлів, автопрефікс та багато іншого.