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

Вискяр Градинаров · 23 Октомври 2013

Как да проверим за грешки и оптимизираме CSS файл? Ускорете зареждането на вашия сайт като създадете минимален по обем и напълно точен и правилен CSS файл .
С развитието на технологиите в уеб пространството се създават все по-красиви сайтове. Наред с това се увеличават по обем и сложност CSS файловете.
Как да проверим за грешки и да оптимизираме голям, че и малък, CSS файл?
Онзи ден, докато си търсех нещо в Мрежата, ми попаднаха и разгледах няколко сайта на месеца. Единия ми хареса особено с френското си изящество - за филма "L'extravagant voyage du jeune et prodigieux T.S. Spivet", и разгледах кода на сайта подробно. Впечатли ме неговия CSS файл - бе представен на един ред! Вкарах го в notepad++ с надеждата, че при запис ще го подреди, но редактора, естествено, не поиска да направи това. Споделих този CSS файл в този форум.

Вискяр Бг каза:
Що не вземеш да подредиш коректно и четливо CSS файла на този сайт - http://spivet.gaumont.fr/bande_annonce? Че ми излиза написан на един ред.

Колегата Mimkis бе любезен и показа онлайн средство, с което може да се провери и оптимизира CSS файл.

Mimkis каза:
Не случайно има подобни сайтове като този http://www.codebeautifier.com/

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

Резултата от проверката и оптимизацията на този CSS файл е следната:
(Не зная дали съм задал правилните настройки за проверяване и оптимизиране на CSS файла.)

1. Проверяване за грешки на CSS файла и тяхното оптимизиране.

Код:

Invalid property in CSS2.1: -webkit-text-size-adjust
Invalid property in CSS2.1: -ms-text-size-adjust   
Optimised number: Changed "0.67em" to ".67em"   
Optimised font-weight: Changed "bold" to "700"   
Invalid property in CSS2.1: -moz-box-sizing
Invalid property in CSS2.1: box-sizing   
Optimised number: Changed "-0.5em" to "-.5em"  
Optimised number: Changed "-0.25em" to "-.25em"  
Optimised color: Changed "#c0c0c0" to "silver"  
Optimised number: Changed "0.35em" to ".35em"  
Optimised number: Changed "0.625em" to ".625em"  
Optimised number: Changed "0.75em" to ".75em"  
Invalid property in CSS2.1: -webkit-appearance  
Invalid property in CSS2.1: -webkit-box-sizing  
Invalid property in CSS2.1: -webkit-tap-highlight-color  
Optimised color: Changed "#333333" to "#333"  
Optimised color: Changed "#ffffff" to "#fff"  
Optimised number: Changed "-webkit-focus-ring-color" to "0"  
Invalid property in CSS2.1: outline-offset  
Invalid property in CSS2.1: border-radius  
Optimised color: Changed "#dddddd" to "#ddd"  
Optimised number: Changed "0.2s" to ".2s"  
Invalid property in CSS2.1: -webkit-transition  
Invalid property in CSS2.1: transition  
Optimised color: Changed "#eeeeee" to "#eee"  
Invalid property in CSS2.1: word-break  
Invalid property in CSS2.1: word-wrap  
Optimised color: Changed "#cccccc" to "#ccc"  
Invalid property in CSS2.1: overflow-y  
Optimised number: Changed "8.333333333333332%" to "8.3333333333333%"  
Optimised number: Changed "16.666666666666664%" to "16.666666666667%"  
Optimised number: Changed "33.33333333333333%" to "33.333333333333%"  
Optimised number: Changed "41.66666666666667%" to "41.666666666667%"  
Optimised number: Changed "58.333333333333336%" to "58.333333333333%"  
Optimised number: Changed "66.66666666666666%" to "66.666666666667%"  
Optimised number: Changed "83.33333333333334%" to "83.333333333333%"  
Optimised number: Changed "91.66666666666666%" to "91.666666666667%"  
Invalid property in CSS2.1: text-shadow  
Invalid @-rule:  (removed)  
Optimised number: Changed "0px" to "0"  
Optimised shorthand notation (padding): Changed "5px 0 0 0" to "5px 0 0"  
Invalid property in CSS2.1: -webkit-transform  
Invalid property in CSS2.1: -moz-transform  
Invalid property in CSS2.1: -ms-transform  
Invalid property in CSS2.1: -o-transform  
Invalid property in CSS2.1: transform  
Optimised shorthand notation (padding): Changed "10px 0 0 0" to "10px 0 0"  
Optimised color: Changed "black" to "#000"  
Invalid property in CSS2.1: src  
Optimised font-weight: Changed "normal" to "400"  
Optimised shorthand notation (margin): Changed "-25px 0 0 0" to "-25px 0 0"  
Invalid property in CSS2.1: pointer-events  
Invalid property in CSS2.1: -webkit-background-size  
Invalid property in CSS2.1: -moz-background-size  
Invalid property in CSS2.1: -o-background-size  
Invalid property in CSS2.1: background-size
Optimised number: Changed "0.5em" to ".5em
Invalid property in CSS2.1: -ms-behavior
Invalid property in CSS2.1: behavior
Optimised shorthand notation (padding): Changed "10% 0 0 0" to "10% 0 0"
Optimised number: Changed "0%" to "0"  
Optimised number: Changed "0.7em" to ".7em"
Optimised color: Changed "rgb(255,255,255)" to "#fff"  
Invalid property in CSS2.1: opacity  
Optimised number: Changed "0.9em" to ".9em"  
Invalid property in CSS2.1: box-shadow  
Invalid property in CSS2.1: -webkit-transform-origin  
Invalid property in CSS2.1: -moz-transform-origin  
Invalid property in CSS2.1: -ms-transform-origin  
Invalid property in CSS2.1: -o-transform-origin  
Invalid property in CSS2.1: transform-origin

2. Промяна размера на CSS файла:
Input: 52.026KB, Output:42.722KB, Compression Ratio: 17.9%(-9304 Bytes)

Освен поправянето на грешките в CSS файла, може от оптимизирането да се спести 18% от размера му.

С благодарности и репутация за Mimkis! :beer:

Sky · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

Глупости на търкалета, по скоро трябва да се оптимизират js скриптовете

petya77 · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

Джавата не се оптимизира в случая, грешките са изведени от CSS файла. Използвани са непознати (остаряли) атрибути за CSS3 и HTML5.

Тулчето на Mimkis е мега полезно

Sky · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

petya77 каза:
Джавата не се оптимизира в случая, грешките са изведени от CSS файла. Използвани са непознати (остаряли) атрибути за CSS3 и HTML5.

Тулчето на Mimkis е мега полезно

Имах предвид, че CSS не товари колкото и смотан да е, по-голям проблем би бил един смотан JS

Firefly · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

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

Вискяр Градинаров · 24 Октомври 2013

От: От: Как да проверим за грешки и оптимизираме CSS файл

uphero каза:
Имах предвид, че CSS не товари колкото и смотан да е, по-голям проблем би бил един смотан JS

Дай една тема за проверка и оптмизиране на javascript - ще е доста полезно.

В един сайт доста неща могат да попречат за по-добро класиране в SERP. Капка по капка - вир.
Уеб е като Олимпиада - всички участват, но малцина се класират. А класирането винаги зависи от подготовката.

elpak · 24 Октомври 2013

От: От: От: Как да проверим за грешки и оптимизираме CSS файл

Вискяр Бг каза:
Дай една тема за проверка и оптмизиране на javascript - ще е доста полезно.

В един сайт доста неща могат да попречат за по-добро класиране в SERP. Капка по капка - вир.
Уеб е като Олимпиада - всички участват, но малцина се класират. А класирането винаги зависи от подготовката.

"Уеб е като Олимпиада - всички участват, но малцина се класират. А класирането винаги зависи от подготовката." Взимам го този цитат Вискяр, мерси :twisted:

Вискяр Градинаров · 24 Октомври 2013

От: От: От: От: Как да проверим за грешки и оптимизираме CSS файл

elpak каза:
"Уеб е като Олимпиада - всички участват, но малцина се класират. А класирането винаги зависи от подготовката." Взимам го този цитат Вискяр, мерси :twisted:

:roll:
Да не забравиш да пратиш прасенце сукалче за Коледа!
Ама не като файл! И да бъде проверено за грешки и оптимизирано.

mgrozdanov · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

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

AMitrev · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

Лол! Защо давате съвети за неща, които не разбирате?

0. Минимизирането на файлове не е проблем, че да се фиксва. Това се прави за бързодействие, а разработчика си го има в четлив вид за да може да го променя, но вас потребителите или пък ботовете на търсачките това не ги засяга.
1. Правенето на css/html по стандартите няма да ви класира по-добре в SERP.
2. Семантичният код помага, но това не се отнася за CSS.
3. Така наречените грешки в CSS, които визирате в посоченият файл по-горе карат сайта да работи нормално на всички браузъри.
4. Java е нещо мега различно от javascript

Няма да намерите тулове, които да ви оптимизират js или css файлове. Това което сте дали е просто инструмент, който действа според стандарта.
Един ден когато стандарта на W3C стане наистина стандарт, а не препоръка ще може и да се направи такъв интрумент, но дотогава просто ще се правят така js/html/css че да работят еднакво добре на всички браузъри или поне на повечето.

petya77 · 24 Октомври 2013

От: От: Как да проверим за грешки и оптимизираме CSS файл

uphero каза:
Имах предвид, че CSS не товари колкото и смотан да е, по-голям проблем би бил един смотан JS

Тук си прав. По-безпроблемно ще е JS файловете да са изнесени в отделни такива и да се извикват, вместо да се поставят в боди тялото. Кутиите на Гошко и Фейса (ифрейм) доста забавят отварянето в доста случаи. Докато трак броячите (като на аналитикса) може се поставят в <head> тага, вместо във футера. Ето едно тулче за проверка на Js код: http://jsfiddle.net/

"Правенето на css/html по стандартите няма да ви класира по-добре в SERP." - но зареждат в пъти по-бързо страниците, особено и ако изображенията са съобразени с максимума до 50 кв.

stan_bg · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

Абсолютно съм съгласен с изказването на @AMitrev. Това което наричате "грешки" са си абсолютно валидни css свойства(правила) за различните браузъри като Хром, Мозила и Сафари. Даже самия "тул" ви го съобщава - Invalid property in CSS2.1... Това, че не съществува според стандартите определени от W3C за дадена версия на CSS, незначи, че е невалидно такова според определен браузър.

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

AMitrev · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

@petya77 отново грешиш. Писането на html/css според стандарта не повишава никаква скорост на зареждане. Скоростта с която даден ресурс се зарежда зависи единствено от обема на самият файл.
iframe ресурсите също не влияят на скороста на зареждане на страницата. Просто потребителя може да ги види по късно.

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

.

petya77 · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

AMitrev каза:
@petya77 отново грешиш. Писането на html/css според стандарта не повишава никаква скорост на зареждане. Скоростта с която даден ресурс се зарежда зависи единствено от обема на самият файл.
iframe ресурсите също не влияят на скороста на зареждане на страницата. Просто потребителя може да ги види по късно.

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

Разбира се, че зависи от тежестта на страницата - като задмине 1 км скрол (над 100 и повече кв), потребителят ще бие хикса, докато се зареди и последният синтиметър с по 1 тон изображения...

Ифреймовете влияят на скоростта на зареждане, ако се извикват от чужд и натоварен сървър, но не пречат на самата страница, освен че не са желателни. Може да се вкарат в отделен (и изнесен) джава скрипт...

AMitrev · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

@petya77 дължината на страницата, за което говориш няма нищо общо с нейната големина.
Ифреймовете не влият, защото се зареждат от друго място без значение дали е натоварено или не. От твоя сайт потребителя има да зареди 1к и ще го зареди за Х време, а 100к от ифрейме ще се покажат когато мине У време, но страницата ще е вече заредена, защото Х < У.
отделен JS? Нали говориш за фреймове... или отново има някакво не разбиране на терминологията както е случая с Java и JavaScript.

LazarovDesign · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

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

Мисля да зарежа и JavaScript и да пиша CoffeeScript, тъй като при компилиране до js си прави вътрешните оптимизации.

petya77 · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

AMitrev каза:
отделен JS? Нали говориш за фреймове... или отново има някакво не разбиране на терминологията както е случая с Java и JavaScript.

Да, отделен JS, вместо директен ифрейм. Поне така го използвам:

Код:

d=document;
d.write('<div><iframe width="320" height="240" src="file.swf" frameborder="0"></iframe></div>');

Като в контента поставям само скрипта, който го извиква:

Код:

<script src="js/[B]file.js[/B]" type="text/javascript"></script>

AMitrev · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

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

bassta · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

AMitrev каза:
Поставянето на JS файлове във футера се прави с цел бързодействие. Така разни ботове като тези на Google няма да ви спамят, че сайта ви е бавен и да го оптимизирате .

Не съм много съгласен... Без да влизам в подробности, част от JS-а е там за да се process-не последен ( т.е. вече да е зареден html-a и css-a и JS-a да може да го процесне, и това от хора които не чакат за $( document ).ready() ) Освен това браузъра ти чака да парсне JS-а и през това време не се вижда друго... Просто всеки свестен сайт трябва да си min-ва целия JS и CSS и да си пооптимизира картинките и това е... Проблем може да има ако си нахакал 23892 плъгина дето не знаеш какво правят и как са писани, но и за това си има инструменти - да вкарват много JS-ове в един и да го минват - прави се само една заявка.

AMitrev · 24 Октомври 2013

От: Как да проверим за грешки и оптимизираме CSS файл

@bassta JS не значи jQuery. Слага се последен защото последен започва да се зарежда, което значи бързодействие за търсачачките и тем подобни ботове.
Браузъра въобще не чака да парсне JS. Всичко се случва по ред - DOM дървото не поредица от случайности!

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

* hint: не забравяйте да изчистите кеша ако отваряте сайтове, които сте гледали преди.

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

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Member

Well-Known Member

Member

Well-Known Member

Well-Known Member

Active Member

Well-Known Member

Well-Known Member

Well-Known Member

New Member

Well-Known Member

Well-Known Member

New Member

Well-Known Member