подобряване

Здравейте! Казвам се Рикардо Прието и работя (и пиша) по уеб дизайн, оформление и потребителски опит в 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 Стенографски свойства ни позволяват да дефинираме няколко стойности в един ред. Най-ясният пример е в дефиницията на поле или подложка, където можем да дефинираме четирите стойности в един ред, като се започне от горната страна и се върви по посока на часовниковата стрелка.

Намаляването на знаците и следователно на размера е значително.

Вляво определяме подложката, използвайки 4 свойства. Отдясно дефинираме запълването на елемента в един ред със стенографско свойство.

Като основно правило, стига да декларираме повече от една стойност на свойство, което може да се използва като стенография, ще си струва да се използва.

2. Пространства и раздели в CSS. Която заема по-малко?

Вечната дилема, Раздел или интервали в CSS?. Лично аз винаги съм намирал за по-изчистено и подредено да използвам раздели. Ако към това добавим спестяването на байтове, балансът очевидно се опира отстрани на разделите.

За да получите представа, табулаторът се брои като символ, така че би било 1 байт, за да се добави към общото ни тегло. Пространството също се брои за 1 байт, но за да постигнем същото ниво на отстъп се нуждаем от 4 интервала (4 байта).

CSS отстъп с таб

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

3. Префикси за съвместимост на браузъра, които вече не са необходими в CSS

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

С течение на времето обаче тези браузърите интегрират това свойство, без да е необходимо да използват какъвто и да е тип префикс. Не е лоша идея да проверите нашите CSS файлове за тези префикси, които вече не са полезни. Добър инструмент за намиране на съвместимост на свойствата е Can I Use. В този пример преходното свойство вече не се нуждае от толкова много префикси.

Мога ли да използвам е добър ресурс, ако искате да знаете новините и съвместимостта на погрешно наречения CSS4.

4. Пропуснете CSS единица, когато стойността е нула

В CSS стойността 0 винаги е 0. Няма значение към коя единица се отнасяме, тъй като тази информация ще бъде игнорирана. Тук можем да спестим няколко байта със сигурност.

5. Оптимизирайте десетичните стойности в CSS

Ето два въпроса, които трябва да разгледаме. От една страна, всяка десетична стойност, по-малка от 1 и по-голяма от 0, не изисква използването на 0 преди точката, която показва началото на десетките. По същия начин всяка десетична стойност, която има 0 в края, може да бъде намалена за да ни спести още един байт.

6. По-кратък CSS цветен код

Имаме няколко начина да декларираме стойност за цветове в CSS: RGB, HEX или име на цвят. Идеалното тук би било да използваме това, което заемаме по-малко байтове.

Заключение: Интегрирайте WPO задачи от фазата на оформление

Мисля, че е важно всички ние, които сме отдадени на работата с CSS, да сме наясно от фазата на оформлението, че нашите таблици със стилове са част от окончателен пакет където SEO и WPO са толкова важни за успеха на проекта, колкото и всяка друга задача.

Имайки предвид това ни помага интегрирайте се по-добре с останалата част от екипа и да оптимизираме от минута 1 всички стилови листове, които създаваме.

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

А вие, какви други принципи и правила знаете, за да намалите теглото на нашите CSS файлове?