Как да оптимизирате доставката на CSS – 7 прости стъпки

css оптимизация векторно изображениеИзминаха дните, в които дизайнерските експерти и водещите в бранша блогъри препоръчаха да се създават уеб страници не повече от 30 килобайта …


Тогава се очакваше тази „капачка“ да обработва HTML, JavaScript, изображения, CSS и Flash. Нека бъдем честни, не е нужно много, за да надвишите напълно 30 kb.

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

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

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

Ето 5 прости неща, които можете да направите, за да оптимизирате вашия CSS в момента.

Как да оптимизирате напълно доставката на CSS

1. Използвайте стенограма

Писането на стенограми се превърна в много често срещана практика. Това е най-простият начин да намалите кода и колко време ви отнема да кодирате. Ако все още не се занимавате с това, няма време като настоящето.

css свойство на шрифта

Има множество елементи, за които можете да използвате стенограмата, но най-често срещаните включват:

  • марж
  • подложка
  • Font
  • очертание
  • граница
  • Заден план
  • Списък стил

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

Използването на всяка стенограма ще направете общия си код далеч по-кратък. Запазвате и знаци, и линии.

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

2. Отървете се от хакове

т.е. правило cssЗа да обслужвате специфични за IE CSS правила, използването на условни CSS хакове ви дава предимството да обслужвате по-малък и по-чист CSS файл по подразбиране.

Той помага при браузърите, които са по-съвместими със стандартите. Въпреки това, допълнителното тегло на страницата ще бъде изтеглено само от браузърите, които я изискват.

Ако трябва да използвате хак, задължително кодът, който използвате, е специфичен за версията на Internet Explorer, върху която сте фокусирани.

Има множество предварително написани кодове, които служат като хакове, ако не искате да напишете свои. Просто отделете време, за да разгледате наистина написания код и да се уверите, че е точен иначе това може да доведе до още повече проблеми.

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

3. Бъдете интелигентни относно използването на Whitespace

За вашия CSS код, бялото пространство е наложително за четимост.

Бялото пространство включва елементи, като раздели, интервали и допълнителни разкъсвания на линии. Всяко малко бяло пространство, което сте в състояние да премахнете, е подобно на елиминирането на характер.

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

Бялото пространство е важно за форматирането, така че искате да намерите баланс. Ако пишете в големи блокове към текст, за да премахнете малко бяло пространство, краткият обхват на вниманието на читателите в интернет ще ги накара да щракнат.

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

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

Това е друг начин за компромис, така че да имате както по-малки файлове, така и четено форматиране.

4. Възстановяване на сини сливи и рамки

Когато използвате CSS рамка, задължително е да прегледате документацията.

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

премахнати неизползвани css правила

Може да откриете, че можете да постигнете презентационни детайли по по-сбит и елегантен начин …

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

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

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

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

5. Бъдещо доказателство на вашия CSS

Css синтаксис

Друга полезна опция за оптимизиране на CSS: отделете по-голямата част от вашите правила от декларациите за вашия оформление.

Присвоете оформлението на свой собствен файл, ако това е възможно. Ако не, то поне да му дадете свой собствен раздел може да бъде от полза.

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

Някои стигат дотам, че казват, че те всъщност са подобни на хакове за оформление. Понастоящем няма жизнеспособна алтернатива и се надяваме, че след като се постигнат съгласие за стандартите за оформление, те започват да получават поддръжка от браузърите..

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

Точно сега най-добрият избор е да се справите с оформлението си, като използвате правилните свойства. Това обикновено ще съкрати теглото на страницата по-ефективно, отколкото използването на ограничения набор от свойства, налични в момента за компенсиране на странности.

6. Винаги пазете актуализирана документация относно вашата работа

Независимо дали работите на уебсайт като екип или сами, задължително трябва да следите всичко, което сте направили.

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

добавяне на css коментарДублирането на кодове е огромна тревога за екипи и за отделни дизайнери, особено когато се използват популярни създатели на уебсайтове. Wix, Squarespace и друг софтуер за изграждане на уебсайтове са известни с дублиране на код или липсват изцяло от тяхната база данни.

Използването на ръководства за стилни листове и ръководства за маркиране са приемлив избор на документация. Можете също да използвате CSS коментарите е друга опция и това може да бъде полезно за разделяне на елементите на CSS файловете, които са дълги. Поставянето им в ръководството за стил или маркиране, не им позволява да добавят размера на файла.

Един от най-бързите начини за разширяване на кода е като извършите същата работа два пъти. Кодирането е сложно, така че е задължително да пазите точна документация за всичко, което сте направили.

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

7. Сгъстете вашите файлове (CSS оптимизация 101)

css компресия и оптимизация gif

Компресия: има малко повече от това …

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

В сравнение с работните копия, те ще бъдат част от размера. Има различни приложения, от които можете да се възползвате, за да улесните процеса на компресия.

Те ще изпълняват задачи, като намиране и коригиране на всички CSS свойства, които се презаписват, компресиране на бяло пространство и търсене на шансове да се използва CSS стенограма.

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

Те могат да обслужват zip версии на различните CSS файлове, които имате. Обикновено това се прави с помощта на PHP. Ако искате да използвате инструменти за оптимизиране и компресиране, не забравяйте да прегледате няколко опции, преди да изберете най-подходящия за вас.

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

Твой ред

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

Въпреки това, обсъдените тук принципи помагат както при разработването, така и при потребителското изживяване.

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

Тествахме всеки един от канадските уеб хостове и препоръчваме SiteGround. Те не само ви помагат да оптимизирате доставката на CSS, но и техническата им поддръжка е несравнима.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map