Ръчна CSS оптимизация за подобряване на скоростта на зареждане • Silo Creativo

подобряване

Здравейте! Казвам се Рикардо Прието и работя (и пиша) по уеб дизайн, оформление и потребителски опит в SiloCreativo, откъдето помагаме на хората да разработват своите проекти с уроци, съвети и ресурси.

20% отстъпка
WordPress теми като Divi за $ 1 всяка

Скоростта на зареждане на уебсайт се превърна в един от най-важните фактори в уеб дизайна през последните години и въпреки че има много елементи, които могат да бъдат оптимизирани, за да облекчат общото тегло на изтеглените файлове, в тази статия ще се съсредоточим върху оптимизиране на CSS файлове, по-точно когато пишем CSS.

Фактът, че уебсайтът тежи малко и се зарежда бързо, е очевидно подобрение на UX (User Experience), тъй като посетителите стигат до съдържанието по-рано и взаимодействат с него. Но това е свързано и с други предимства, като например по-малко консумация на данни и дори спестяване на батерията на устройството.

Това беше важно преди време. Но решението на Google беше да включи скорост на зареждане сред факторите, определящи позиционирането в търсачката, което ни накара да полудеем от SEO, който се опитва да намали десетите в времето за зареждане и да спести малко kb, където може.

Това породи това, което наричаме WPO (Оптимизиране на уеб ефективността), област на работа, в която целта е оптимизирайте максимално зареждането в мрежата чрез техники за компресиране на съдържание и оптимизация.

Как да намалите теглото на вашите CSS файлове

Давай напред, има много техники за намаляване на теглото на CSS файловете. Най-известните преминават групирайте всички таблици със стилове на вашия уебсайт в един файл, минимизирайте го и го сервирайте компресиран с помощта на Gzip. След това бихме могли да активираме кеша на споменатия файл, така че когато посетителят се върне, да не се налага да изтеглят CSS файла отново.

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

Всички те започват от един основен принцип: всеки знак тежи приблизително 1 байт. Ако намалим броя на знаците, ще можем да намалим теглото на файла, лесно, нали? Нека да видим как да го направим. (Забележка: наистина правилото 1 символ = 1 байт не винаги е такова, това е много по-сложен проблем, когато влизат типът кодиране и видът на символа, но за да илюстрираме следните точки, ще вземем тази еквивалентност за добре).

1. Стенографски свойства в CSS

The Стенографски свойства ни позволяват да дефинираме няколко стойности в един ред. Най-ясният пример е в дефиницията на поле или подложка, където можем да дефинираме четирите стойности в един ред, като се започне от горната страна и се върви по посока на часовниковата стрелка.