Оптимізація доставки CSS • прискорюємо WordPress

Оптимізація доставки CSS • прискорюємо WordPress
1 голос
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5,00 out of 5)
Loading...

Стилем або CSS (Cascading Style Sheets, каскадні таблиці стилів) називається набір параметрів форматування, який застосовується до елементів веб-сторінки, щоб структуровано продемонструвати їх зовнішній вигляд. Колір, розміри тексту і інші параметри зберігаються в файлі стилю (файлах) і легко «прикручуються» до будь-якого тегу. Ще однією перевагою стилів є те, що вони пропонують набагато більше можливостей для форматування, ніж звичайний HTML. Отже, це файли до яких звертається запитом браузер і від їх величини і кількості залежить швидкість завантаження сторінок сайту. А фактор швидкості для сайтів, що мають намір потрапити в рейтинг видачі Гугл (SERP) має пріоритетне значення – «правило трьох секунд».

Що таке доставка CSS?

Що таке доставка CSS?

  • Спосіб отримання CSS-файлу для візуалізації веб-сторінки
  • Використання зовнішніх файлів CSS, внутрішніх блоків CSS або їх комбінація.


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

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

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

Ідеальні налаштування CSS

Ідеальні налаштування CSS виглядали б приблизно так…

  • Не більше однієї зовнішньої таблиці стилів CSS розумного розміру (менше 75кб або трохи більше)
  • Вбудуйте невеликий CSS у HTML, використовуючи теги стилів для вмісту, що знаходиться вище контенту
  • Ніяких запитів @import для CSS
  • Відсутні CSS у HTML таких компонентів тіла сторінки, як ваші divs або h1 (в елементі CSS)

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

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

Якщо вам не знайомі ці види доставки CSS, то я пояснюю їх дежчо нижче.

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

Зовнішні файли CSS – це головний спосіб використання CSS на веб-сторінках, і, швидше за все, спосіб використання ваших CSS. У хідері вашого html є щось, що часто виглядає так:

<link rel="stylesheet" type="text/css" href="http://yoursite.com/main.css" media="screen" title="style (screen)" />

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

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

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

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

Вбудований CSS

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

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

<style>CSS прописуєте тут<br /></style>

Невеликий Вбудований CSS може дійсно прискорити завантаження сторінок у веб-браузерах.

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

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

@import url("style.css")

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

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

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

Цей варіант реалізації стилю виглядає так…

<p style="float:left;"> </p>, чи <div style="color: #ff5500;"> </div>

У мене в коді багато подібного, тому і мені доведеться виконати багато роботи, щоб позбутися від зауважень Гугл та санкцій зі сторони браузерів. Все це є наслідком мого давнього досвіду в написанні HTML/CSS/JS сайтів.

Відступ про Веб-дизайнерів

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

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

Усі CSS повинні містити лише один файл для найкращої веб-продуктивності.

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

На завершення

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

Рекомендації:
  • Поєднайте зовнішні таблиці стилів CSS
  • Вбудовуйте невеликі CSS у тегах стилів
  • Не застосовуйте @import для CSS, де це можливо
  • Забудьте CSS у HTML  в тегах таких, як ваші divs або h1s (в елементі CSS)
  • Все перевіряйте за допомогою Інструмента доставки CSS
Високих вам швидкостей!

Залишайтеся в Темі і слідкуйте за оновленнями!

Якщо вам недостатньо викладеного матеріалу 😉 , чи

Якщо вам потрібна допомога/порада 

заповніть Заявку нижче