Оптимізація css прискорюємо завантаження сайту

Форум просування сайтів «Внутрішня оптимізація сайту

Оптимізація CSS: Прискорюємо завантаження сайту

Виділити все Код: / * Початок стилів блоку header # 40; шапки сайту # 41; * /
-----
/ * Кінець стилів блоку header # 40; шапки сайту # 41; * /

  • Зменшити кількість порожніх рядків.
  • Об'єднати Селектра з однаковими стилями
  • Використовувати короткі записи квітів, якщо це можливо. Наприклад, замість #CCCCC потрібно використовувати #CCC, або припустимо, замість # 112233 використовувати # 123, - це однакові кольори, але код більш легше.
  • Не давати великі імена Селектра id і class
  • Оптимізувати padding і margin. Ось цей запис

    Виділити все Код: margin: 10px 20px 10px 20px;
    padding: 40px 20px 40px 20px;


    Потрібно змінити на більш легку:

    • Онлайн сервіси для оптимізації CSS
    Звичайно ручна оптимізація найбільш надійна, але не кожен веб-майстер знає що робити в каскадних стилях і, відповідно, так може наоптімізоровать, що не тільки браузер але і чорт поламає ногу. У таких випадках краще використовувати онлайн сервіси для оптимізації css.
    На Сью пору працюють досить багато інструментів, наприклад:
    • CleanCSS
    • Online CSS Optimizer
    • CY-PR.com
    Скрізь все гранично просто і особливо морочитися, з описом, непотрібно. Припустимо вибрали CY-PR.com. в текстовому полі вставляємо стилі, з правого боку можна налаштувати оптимізатор, але краще залишити стандартні настройки, і натискаємо "Оптимізувати CSS". Результат оптимізації виводиться внизу текстовий форми. Також сервіс вказує коефіцієнт стиснення і кількість зекономлених байт.

    Вихідний код: 9.175 Кб, Оптимізований код: 6.252 Кб, Коефіцієнт: 31.9% (-2923 байт)


    Дизайн тег . А що? Економлю фоновий div! І тег добре відчуває себе в ролі , це другий div економиться.

    Коли готове, збираю всі CSS і HTML в один рядок. І вага стає мінімально можливим. У невеликих дизайнах навіть скорочую імена класів до однієї літери (це вже конкретна пастка самому собі).

    Але нічого, в браузері завжди можна натиснути Ctrl + Shift + I, тицьнути на потрібний елемент, так подивитися на його код і стилі з комфортом. А в * .css і * .html файлах можна використовувати Ctrl + F для пошуку.

    Схожі статті