Оптимізуйте передачу CSS

14

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

Неважливо, яким чином він встановлений на сторінках – CSS зобов’язаний допомогти відображатися сторінці швидше, а не гальмувати рендеринг сторінок.

Веб-дизайнери

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

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

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

Оптимізуйте передачу CSS

Приклад «оптимізованої подачі CSS»

Документація Google і відео швидкості сторінки говорять про те, як повинна виглядати хороша настройка CSS.

Не більше однієї зовнішньої таблиці стилів

Зовсім трохи CSS в тегах style для згортання вмісту

Жодних викликів CSS @import

Ніякого CSS в таких HTML теги, як div и або h1

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

Якщо не знайомі, то не панікуйте, нижче я поясню кожен з них (обіцяю: це не так заплутано, як здається спочатку).

Зовнішні файли CSS

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

Так викликається файл CSS називається зовнішнім, тому що стилі CSS знаходяться окремо від HTML. Зовнішній файл – це спосіб обробки CSS де-факто, і серед його переваг є кешування (запам’ятовування) CSS веб-браузером. Проблема виникає, якщо у вас є кілька таких файлів. До нещастя, таке часто трапляється в WordPress та інших темах.

Оптимізуйте передачу CSS

Якщо у вас більше одного файлу CSS, то їх потрібно об’єднати

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

Щоб подивитися, скільки зовнішніх файлів CSS використовується на вашій сторінці, перейдіть сюди

Щоб отримати інструкції по об’єднанню зовнішніх файлів CSS, перейдіть сюди

Вбудований CSS

Оптимізуйте передачу CSS

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

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

сюди поміщається CSS

Маленький вбудований CSS дійсно здатний прискорити завантаження сторінок в веб-браузері.

Щоб дізнатися, чи застосовується на вашій сторінці вбудований CSS, перейдіть сюди

Щоб отримати інструкції про те, як вбудувати CSS, перейдіть сюди

Не застосовуйте @import для виклику файлів CSS

Оптимізуйте передачу CSS

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

@import url(«style.css»)

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

Щоб подивитися, використовуються на вашій сторінці запити @import, перейдіть сюди

Щоб дізнатися про це методі більше, перейдіть сюди

Не додавайте атрибути CSS елементи HTML

Оптимізуйте передачу CSS

Дуже часто стилі вставляються прямо в HTML-теги, наприклад, я схильний так чинити. У керівництві Google про швидкості сторінок «Оптимізуйте подачу CSS» говориться, що в жодному разі не слід так робити. Стверджується, що це змушує браузер повільніше відповідати, і не дуже розумно вставляти код подібні стилі, так як це суперечить Політиці безпеки контенту W3, є протоколом безпеки, за замовчуванням блокує стилі елементів будь-якого рівня. Ці стилі виглядають так…

or

В моєму коді їх темрява, і мені доведеться багато попрацювати, щоб позбутися від них.

Щоб подивитися, чи є на вашій сторінці подібний CSS, перейдіть сюди

Висновок

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

Рекомендується наступне:

Об’єднуйте зовнішні таблиці стилів CSS

Додавайте теги style зовсім небагато CSS

Де можна, не робіть до CSS запитів @import

Не вставляйте CSS елементи HTML начебто div ів або h1