Як зменшити розмір css файлу, щоб він швидше завантажувався
Як ви знаєте, зменшення часу завантаження сайту - це одна з найважливіших тем вебдизайну. Одним з таких елементів, який необхідно оптимізувати для досягнення цієї мети є CSS. Давайте подивимося, які існують способи його оптимізації.
1. Стандартний CSS код.
Наступний приклад є стандартом написання CSS.
Розмір наведеного файлу 3.39 Кб. Це багато.
У цій статті ми скористаємося допомогою сайту автоматичної оптимізації коду CleanCSS.
2. Базова оптимізація.
Перша операція, яку ми застосуємо до файлу CSS, повинна видалити крапку з комою після останнього властивості кожного стилю.
Розмір файлу після першого кроку вже 3.02 Кб, а це значить, що файл завантажиться швидше.
3. Кожен стиль пишемо в один рядок.
Застосування цього прийому може істотно зменшити розмір.
4. Весь файл CSS пишемо в один рядок.
Ми досягли розміру файлу 2.53 KB.
5. Загальні рекомендації для оптимізації CSS коду.
1. Використовуйте вільне місце тільки тоді, коли це дійсно вам необхідно.
2. Використовуйте способи скорочення СSS.
3. Не ставте крапку з комою після такі характеристики кожного стилю
4. Використовуйте "700" замість "напівжирний" (наприклад "font-weight: 700;" замість "font-weight: bold;")
5. Використовуйте "400" замість "нормальний"
6. Використовуйте 0 замість 0px
7. Об'єднуйте стилі з однаковими властивостями.
Вибирайте той спосіб оптимізації, який вам підходить, але не забувайте і про стандарти!
Ну, знаєте. Жень, спасибі тобі за твої труди, звичайно, але один кб - це навіть для мого gprs і швидкості в 5 кб / сек - смішно. кожен стиль в одну строчку я пишу - але не заради одного кб. Просто якщо кількість стилів перевищує кілька сот в одному css-ніку - тоді краще написати в рядок, а то не дуже зручно гортати такий листочок.
Дякую за посилання Саша!
Віталій Гордій
в мене Взагалі 1-2 +
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!