5 Поради для Super-Fast CSS

Jan 29, 2026

Як

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

16 кращих прикладів анімації CSS

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

Отримав складний сайт? Вам потрібен ідеальний веб хостинг Сервіс. Або, якщо ви хочете зробити сайт без суєти, спробуйте Веб-будівельник .

01. Використовуйте дрібні селектори

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

nav ul li.nav-item

Це може бути виражено більш лаконічно:

.nav-item

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

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

02. Використовуйте строкові властивості

Using shorthand CSS will speed up your site — Використання Shorthand CSS буде прискорити ваш сайт

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

 шрифт: 1.5rem;
Лінійна висота: 1.618;
Шрифт-Сім'я: "Аріал", "Хельветика", SANS-Serif;

Це багато CSS! Давайте прибираємо це:

 Шрифт: 1.5rem / 1.618 "Аріал", "Хельветика", SANS-Serif;

Точний шрифт Shortand Shorite конденсується кількома деклараціями в зручний односторонній, який займає набагато менше місця.

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

Звичайно, шрифт не є єдиним недоступним для вас. Наприклад, маржа може використовуватися замість довших властивостей, таких як вершина , маржа-праворуч і так далі.

Точний підкладка Власність працює так само. Щоб отримати додаткові способи очищення вашої CSS, мережа Mozilla Developer пропонує корисний список Література системи Shorthand .

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

У цьому випадку ви повинні використовувати більш конкретні розмір шрифту властивість замість:

 H1 {
    Шрифт: 1.5Rem / 1.618 "Аріал", "Хельветика", SANS-Serif;
}
@Media (Min-ширина: 60rem) {
    h1 {
        Шрифт-розмір: 2Rem;
    }
}

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

03. Використовуйте підказку про передачу

Точний задаток Підказка про ресурс може дати браузер голову, запущений у завантаженні CSS вашого сайту. Точний задаток Навичка ресурсу розповідає браузер, щоб ініціювати ранній вибір для активу.

Ви можете встановити його як & lt; link & gt; Тег у HTML:


    & lt; link rel = "preload" href = "/ css / styles.css" as = "стиль" & gt;

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


  посилання: & lt; /css/styles.css> ;; Rel = попереднє завантаження; as = стиль

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

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

Server Push не доступний на HTTP / 1. Однак, використовуючи задаток У середовищі HTTP / 1 все ще може покращити продуктивність.

04. Cull Redundansies з CSCSSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSCSS проаналізують будь-які файли CSS, які ви даєте, і дайте вам знати, які правила мають дубльовані декларації

Він може заплатити, щоб перевірити CSS для дублікатів правил з резервною перевіркою. Візьміть Ruby-інструмент CSCSS, наприклад.

Ruby користувачі можуть встановити його з:


  gem Встановити CSCSS

Після встановлення, ви можете вивчити свій CSS для Redundantsies, як так:


  csscss -v styles.css

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

 {h1} та {p} Поділитися 3 декларації
  - Колір: # 000
  - Лінія-висота: 1.618
  - маржа: 0 0 1.5Rem

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

 H1, P {
    Колір: # 000;
    Лінійна висота: 1.618;
    маржа: 0 0 1.5rem;
}

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

05. Перейти на додаткову милю з CSSNANO

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNANO приймає ваші красиво відформатовані CSS і запускає його через багато цілеспрямованих оптимізацій

Для вишні зверху, ви можете використовувати CSSNANO - Вузол та постКС-залежний інструмент. CSSNANO не тільки вибиває CSS, це робить багато цілеспрямованих оптимізацій, які можуть ще більше зменшити ваш CSS. Встановіть його на систему за допомогою NPM, як:

 npm i -g cssnano-cli

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

 cssnano styles.css оптимізований-стиль.css

Якщо запущені команди Ad Hoc не є вашим стилем, ви можете автоматизувати CSSNANO з системою побудови. Ось як використовувати CSSNANO в GULPFILE:

 Const Gulp = вимагає ("gulp");
const postcss = вимагає ("gulp-postcss");
const cssnano = потрібно ("CSSNANO");

const buildcss = () = & gt; {
    Повернення gulp.src ("css / styles.css")
        .pipe (postcss ([cssnano ()])
        .pipe (gulp.dest ("css / optimized");
};
const watch = () = & gt; {
    gulp.watch ("css / styles.css", buildcsss;
};
exports.buildcss = buildcss;
exports.watch = watch;

Точний buildcss Завдання читає CSS, в якому ви пишете CSS / Styles.css , потім труби оптимізовані вихід до CSS / оптимізований каталог. Точний дивитися Завдання викидається buildcss Всякий раз, коли відбуваються зміни CSS / Styles.css .

Точний дивитися Тоді завдання може бути викликаним у терміналі, як:

 GULP Watch

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

Хочете зберегти сторінки веб-сайту? Експортувати як PDF-файли та заощаджуйте в надійному хмара зберігання .

Ця стаття спочатку з'явилася сітка , провідний журнал World для веб-дизайнерів. Підписатися тут .

Пов'язані статті:

Розуміння властивості відображення CSS
Новий прикордонний анімація CSS
Як побудувати складні макети за допомогою CSS

5 Поради для Super-Fast CSS

01. Використовуйте дрібні селектори

02. Використовуйте строкові властивості

03. Використовуйте підказку про передачу

04. Cull Redundansies з CSCSSS

05. Перейти на додаткову милю з CSSNANO

Як - Найпопулярніші статті

Як перевернути шар у Photoshop: повний посібник

Affinity Designer: Як використовувати ефекти та стилі

Анімація SVG з JavaScript

Як налаштувати тематику сайту з змінними CSS

Як рухатися між студією DAZ та Zbrush

Як змішувати колір тіні в фарбі

Як намалювати ландшафт з пастелями

загострення ваших навичок живопису

Категорії