21 способи оптимізації CSS і прискорити свій сайт

Sep 11, 2025

Як

CSS повинен пройти через відносно комплексний трубопровід, так само, як HTML та JavaScript. Браузер повинен завантажувати файли з сервера, а потім перейти до аналізу та застосування їх до DOM. Завдяки екстремальним рівням оптимізації, цей процес, як правило, досить швидко - для менших веб-проектів, які не базуються на рамках, CSS зазвичай складає лише невелику частину загального споживання ресурсів.

Рамки засмучують цю рівновагу. Включіть JavaScript Gui Stack, як JQuery UI, а також переглядати CSS, JS та HTML розміри. Часто розробники зазвичай відчувають щіпку останню - коли сидить за потужною восьми-основною робочою роботою з інтернетом T3, ніхто не піклується про швидкість. Ці зміни як затримки або обмежені процесорними пристроями.

Приклади анімації Cool CSS для відтворення

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

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

01. Використовуйте скорочення

Найшвидший пункт CSS - це той, який ніколи не отримує аналізу. Використання чіткості, таких як декларація маржі, показана нижче, радикально зменшує розмір файлів CSS. Багато додаткових системних форм можна знайти за допомогою ShoGling "CSS Shortandand".

 p {margin-top: 1px;
    маржа-праворуч: 2px;
    маржа-дна: 3px;
    маржа-ліворуч: 4px; }

p {маржа: 1px 2px 3px 4px; }

02. Знайти та видалити невикористані CSS

Виключення непотрібних частин вашого позначення, очевидно, викликає величезну швидкість. Браузер Chrome Google має цю функцію з коробки. Просто перейдіть до перегляду & gt; Розробник & gt; Інструменти розробників та відкриття вкладки джерел у недавній версії та відкрийте меню команди. Після цього виберіть Показати покриття та бенкет очі на вікно аналізу покриття, що виділяє невикористаний код на поточній веб-сторінці.

03. Робіть це в більш комфортному моді

Навігація через лінійний аналіз не обов'язково комфортно. Аудит веб-ефективності Chrome повертає аналогічну інформацію - просто відкрийте його з панелі інструментів, перегляду & GT; Розробник & gt; Інструменти та GT розробника; Аудит і нехай він запускається. Коли зроблено, з'явиться список проблемних елементів.

04. Будьте в курсі проблем

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

05. Вбудований критичний CSS

Завантаження зовнішніх таблиць стилів коштують час через затримку - кожен пам'ятає "Flash of unstyled Content"? Отже, найбільш критичні біти коду можуть йти в тег заголовка. Однак переконайтеся, що не перестарайтеся. Майте на увазі, що код також повинен бути прочитаний людьми, що виконують виконання завдань.

 & lt; html & gt;
  & lt; head & gt;
    & lt; стиль & gt;
      .blue {color: blue;}
    & lt; / стиль & gt;
    & lt; / head & gt;
  & lt; body & gt;
    & lt; div class = "синій" & gt;
      Привіт Світ!
    & lt; / div & gt;

06. Дозволити антипаралельний аналіз

@Import додає структуру до вашого CSS-коду. На жаль, переваги не безкоштовно: як імпорт може гніздити, розбір їх паралельно неможливо. Більш паралельний спосіб використовує серію & lt; link & gt; Теги, які браузер може відразу відразу.

 @import URL ("A.CSS");
@import URL ("b.css");
@import URL ("C.css");
V & Lt; Link Rel = "StyleSheet" HREF = "A.CSS" & GT;
& lt; link rel = "стильний таблиця" href = "b.css" & gt;
& lt; link rel = "stylesheet" href = "c.css" & gt;

07. Замініть зображення з CSS

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

 IMG {
    -Webkit-фільтр: сірого (100%); / * старий
Safari * /
    Фільтр: сірого (100%);
}

08. Використовуйте кольорові ярлики

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

 ціль {фоновий колір: #ffffff; }
ціль {background: #fff; }

09. Усуньте непотрібні нулі та одиниці

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

 Колекція: 0.2em;
Маржа: 20.0.
avalue: 0px;
підкладка: .2em;
маржа: 20em;
avalue: 0;

10. Усуньте надмірні комолови

Ця оптимізація є дещо критичною, оскільки вона впливає на зміни коду. Специфікація CSS дозволяє випустити останню крапку у групі нерухомості. Оскільки економія, досягнута методом оптимізації, є мінімальним, ми згадуємо це, головним чином, для тих, хто працює над автоматизованим оптимізатором.

 p {
. . .
Шрифт: 1.33EM
}

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

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

 .ownload {
  Ширина: 80px;
  Висота: 31px;
  фонове положення: -160px -160px
}
.ownload: hover {
  Ширина: 80px;
  Висота: 32px;
  фонове положення: -80px -160px
}

12. Переслідуйте PX

Один акуратний спосіб збільшення продуктивності використовує спеціальність стандарту CSS. Числові значення без одиниці вважаються пікселями - видалення PX зберігає два байти для кожного номера.

 H2 {підкладка: 0px; Маржа: 0px;}
H2 {підкладка: 0; Маржа: 0}

13. Уникайте дорогих властивостей

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

 Прикордонний радіус
    коробка
    перетворення
    фільтрувати
    : n-дитина
    Позиція: фіксована;

14. Видалити пробіл

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

15. Усуньте коментарі

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

16. Використовуйте автоматичне стиснення

Команда користувачів Yahoo створила програму, яка обробляє багато завдань стиснення. Він поставляється як файл банку, Доступно тут , і можна запустити з JVM вибору.

 Java -Jar yuicompressor-x.y.z.jar
Використання: Java -Jar Yuicompressor-x.y.z.jar
 [Опції] [Вхідний файл]
Глобальні варіанти
    -H, --help відображає це
 інформація
    - тип & lt; js | css & gt; Вказує
 Тип вхідного файлу

17. Запустіть його від NPM

Якщо ви віддаєте перевагу інтегрувати продукт у Node.js, відвідування npmjs.com/package/yuicompressor . Погано збережений сховище містить набір файлів обгортки та API JavaScript.

 Var Compressor = вимагає ('yuicompressor');
compressor.compress ('/ шлях / до /
файл або рядок JS ', {
// Параметри компресора:
charset: 'utf8',
Тип: "JS",

18. Тримайте Sass et al в перевірці

Хоча продуктивність селектора CSS не настільки ж критична, як це було кілька років тому (див. Ресурс), рамки, такі як SASS, іноді випускають надзвичайно складним кодом. Погляньте на вихідні файли час від часу і подумайте про способи оптимізації результатів. Отримали результати, щоб поділитися з командою? Зберігайте файли в розділі хмара зберігання .

Що таке сас?

19. Налаштування кешування

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

20. Бюст кеш

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

 & lt; link rel = "стильний таблиця" href = "style.css? V = 1.2.3" & gt;

21. Не забувайте про основи

Оптимізація CSS є лише частиною гри. Якщо ваш сервер не використовує стиснення HTTP / 2 та GZIP, протягом передачі даних втрачається багато часу. На щастя, фіксація цих двох проблем зазвичай проста. Наш приклад показує кілька налаштувань до звичайного сервера Apache. Якщо ви опинитеся в іншу систему, просто зверніться до документації сервера.

 pico /etc/httpd/conf/httpd.conf
AddOutputFilterbytype Deflate Text / HTML
AddOutputfilterbytype дефляція тексту / CSS

Ця стаття була опублікована у випуску 282 журналу Creative Web Design Веб-дизайнер . Купити проблему 282 тут або Підписатися на веб-дизайнер тут .

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

10 Дивовижні нові методи CSS
Який найкращий препроцесор CSS?
Введення до спеціальних властивостей CSS

21 способи оптимізації CSS і прискорити свій сайт

01. Використовуйте скорочення

02. Знайти та видалити невикористані CSS

03. Робіть це в більш комфортному моді

04. Будьте в курсі проблем

05. Вбудований критичний CSS

06. Дозволити антипаралельний аналіз

07. Замініть зображення з CSS

08. Використовуйте кольорові ярлики

09. Усуньте непотрібні нулі та одиниці

10. Усуньте надмірні комолови

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

12. Переслідуйте PX

13. Уникайте дорогих властивостей

14. Видалити пробіл

15. Усуньте коментарі

16. Використовуйте автоматичне стиснення

17. Запустіть його від NPM

18. Тримайте Sass et al в перевірці

19. Налаштування кешування

20. Бюст кеш

21. Не забувайте про основи

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

Створіть ефект старої школи

Створіть ефект паралакса керування миші

10 Дивовижні речі, які ви можете зробити з шарами

Намалюйте Bad-Ass Geisha

Як створити інтерфейс ChatBot

Як спроектувати ізометричну типографіку

Як працювати з HTML-відео

Як скульпти в кіно 4D

Категорії