Як оптимізувати доставку CSS – 7 простих кроків

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


Тоді, як очікувалося, ця «шапка» оброблятиме HTML, JavaScript, зображення, CSS та Flash. Якщо ми будемо чесними, не потрібно багато, щоб повністю перевищити 30 кбіт.

Коли JavaScript і CSS набули популярності, для CSS стало загальним перевищення межі 30 КБ. Особливо це стосується великих веб-сайтів.

Однак при створенні та розробці сторінок для вашого веб-сайту не слід надмірно зосереджуватись на «кілобайт». Важливо зберігати свої сторінки оптимізований і жорсткий при написанні CSS.

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

Ось 5 простих речей, які ви можете зробити, щоб оптимізувати свій CSS зараз.

Як повністю оптимізувати доставку CSS

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

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

властивість шрифту css

Існує безліч елементів, для яких можна використовувати скорочення, але до найбільш поширених належать:

  • Маржа
  • Прокладки
  • Шрифт
  • Структура
  • Кордон
  • Фон
  • Список-стиль

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

Використання будь-якої скорочення буде зробіть ваш загальний код куди більш лаконічним. Ви зберігаєте і символи, і рядки.

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

2. Позбудься хаків

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

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

Якщо вам потрібно використовувати хак, обов’язково код, який ви використовуєте, є специфічним для тієї версії Internet Explorer, на яку ви зосереджені..

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

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

3. Будьте розумні щодо використання Whitespace

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

Пробіл включає елементи, такі як вкладки, пробіли та додаткові розриви рядків. Кожен шматочок пробілів, який ви зможете усунути, схожий на усунення символу.

видалити порожні рядкиОднак часто не рекомендується скупитися на пробіли заради меншого файлу. Вам все одно потрібно підтримувати оптимальну читабельність своїх веб-сторінок.

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

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

Тепер для виробничої версії файлу CSS ви можете видалити пробіл. Він все ще буде присутній у вашому робочому файлі.

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

4. Сорт чорносливу та рамки

Коли ви використовуєте рамку CSS, обов’язково слід переглянути документацію.

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

видалено невикористані правила css

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

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

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

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

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

5. Підтвердження майбутнього вашого CSS

Синтаксис css

Ще один корисний варіант оптимізації CSS: відокремте більшість своїх правил від декларацій щодо вашого макета.

Призначте макет своєму власному окремому файлу, якщо це можливо. Якщо ні, то принаймні надання йому власного розділу може бути корисним.

Зрештою, позиціонування та плавання – які є поточними методами використання CSS – не повинні були слугувати інструментами компонування.

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

Як тільки ця підтримка відбудеться, не дуже складно буде замінити властивості моделі коробки, які підключені на ті, які призначені для макетів.

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

6. Завжди зберігайте оновлену документацію щодо вашої роботи

Незалежно від того, працюєте ви на веб-сайті як команда чи поодинці, обов’язково слідкуйте за усім, що ви зробили.

Наприклад, поодинці ви можете забути щось, що зробили. Як команда, хтось може щось робити, і ви можете не знати, поки не внесете зміни, які можуть спричинити проблеми з різними елементами коду.

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

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

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

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

7. Стисніть файли (Оптимізація CSS 101)

стиснення і оптимізація css gif

Стиснення: є трохи більше, ніж це…

Один ефективний спосіб оптимізації CSS – це використання компресії. Це спосіб переконатися, що ваші файли зручні для браузера, навіть якщо люди не читають.

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

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

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

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

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

Твоя черга

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

Однак обговорені тут принципи допомагають як досвіду розробки, так і користувачеві.

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector