Тази статия ще ви запознае с тема, известна като Minify In и в процес също ви дава подробна практическа демонстрация. Следните указания ще бъдат обхванати в тази статия,
- Какво е минификация?
- Защо е необходима минификация?
- Как минимизирате CSS, JS, HTML код?
- Кога трябва да направите това?
- Ползи от минификацията?
Както името ни подсказва доста добре, минификацията е свързана с минимизиране на размера на файла. В основата на кода имаме свободата да минимизираме HTML, CSS или Javascript файлове. Тук ще обсъдим за минимизиране на CSS файл.
Когато разработчик кодира, той / тя се уверява, че кодът е в най-четливия формат, за да опрости всеки процес на по-нататъшни промени. И така, имената на променливите са във формат, който е лесно разбираем и отнема много много знаци. След това те също добавят добро количество празни интервали, за да го направят достатъчно четлив.
Но в целия процес сме склонни да разхлабваме низовете, че размерът на нашия файл се увеличава, което от своя страна увеличава времето за зареждане на уебсайта. Особено при уебсайтовете, които имат голяма част от функционалностите и добавките, по-дългата кодова база само влошава уебсайта.
Google така или иначе има ограничен формат за класиране на уебсайтовете на страницата си за търсене въз основа на оптималното потребителско изживяване, което уебсайтовете предлагат. Колкото по-добре се зарежда вашият сайт, толкова по-добре се класира вашият сайт на страницата за търсене.
С толкова много залог не искате вашите потребители да страдат поради лошо време за зареждане на сайта и да преминете към следващия. Следователно минимизирането на кода е изключително важно.
Всъщност, докато изграждаме уебсайт, знаем какво се състои от максималната кодова база?
Всичко е свързано с CSS, HTML и Javascript. Състезанието днес, за да изглежда уебсайтът ви привлекателно визуално, подчертава CSS файла много и без да осъзнаваме, че използваме уебсайта си с тежък код.
Влиза, минификация ..
Продължавайки с тази статия за Minify CSS
Какво е минификация ?
Минификацията ви позволява да премахнете кода до минимален размер на файла, който не засяга кода и въпреки това намалява размера на файла. В процеса можете да премахнете ненужните интервали и символи, които никъде не засягат оригиналността на уебсайта ви. Няколко неща, които трябва да се избягват от кода, са:
- Пробели
- Символи от нов ред
- Блокиращи разделители
- Коментари
- Съкращаване на имена на променливи
Тези фактори не са включени, за да може уебсайтът Ви да работи, а просто да утежни файла и да увеличи времето за зареждане на сайта.
Четливостта на кода е изцяло изключителна за това, което машината разбира. Уеб браузърът не се нуждае от допълнително разстояние между символите, за да разбере и стартира. Така че, опитайте се да ги намалите и умалете CSS и HTML кода.
Да вземем пример:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Смалете ми CSS
Почти разлика от 48% в оригиналния и умален файл. Намалено със 178 байта. След минификация
#myContent {font-family: Arialfont-size: 90%}Здравей свят!
Продължавайки с тази статия за Minify CSS
Защо е минификация необходимо?
За по-добро време за зареждане на уебсайта. Никой не обича да чака уебсайт да се зареди според удобството. С толкова много налични опции, хората са склонни да преминат към друга. Така че, по-добре е да намалите размера на файла.
Продължавайки с тази статия за Minify CSS
Как си минимизирайте CSS, JS, HTML код?
За да се намали, има многобройни инструменти, достъпни онлайн, които могат да ви помогнат да намалите кодовата основа. Можете също така да се включите да го направите ръчно, но за по-голяма кодова база е препоръчително да използвате някой от следните инструменти за минимизиране на вашия CSS файл:
CSSminifier.com: Изключително лесен за използване инструмент. Просто копирайте кода от лявата страна, генерирайте минимизирания файл и го изтеглете. Минимизираният файл ще има разширение .min.
Вашият минимизиран CSS файл ще има разширение demo.min.css.
Smallseotools.com: Или копирайте кода си, или качете кодовия файл. Той ще минимизира вашия код и ще ви позволи да го копирате или изтеглите.
Автоматично оптимизиране: Това е приставка, която можете да добавите към вашите инструменти на WordPress. Като приставка можете да изберете да минимизирате вашия CSS код тогава и там.
За разработчика е по-лесно да разбере кога файлът е минимизиран и кога не. Минимизираният файл ще има разширение .min.
Продължавайки с тази статия за Minify CSS
Кога трябва да направите това?
Минимизацията трябва да се извършва предимно, когато сте написали кода и трябва да го изпратите на сървъра за отговор. След като файловете бъдат минимизирани, минимизираните версии се използват за разпространение сред потребителите.
Ползи от минификация ?
Намаляване на размера на файла: Чрез премахване на допълнителния интервал, намаляване на имената на променливи и премахване на коментари, размерът на файла е почти намален с 30-60%. По-бързо зареждане: С по-малко данни за изпращане по мрежата уебсайтът се зарежда по-бързо от преди. По-ниска цена на честотната лента: Когато се премахнат ненужните данни, необходимата честотна лента е много по-малка, а разходите също.
Неща, които трябва да запомните:
Още преди да се опитате да минимизирате, уверете се, че вашият код не излиза извън границите. Потокът не трябва да се нарушава и функционалността трябва да остане без лице. Трябва да проверите дали дори след минимизацията вашият код работи по подобен начин.
Всъщност, като най-добра практика винаги можете да поддържате готов шаблон. Направете промените си във вградения шаблон, което ще ви спести щедро време.
Подобно ли е на компресията?
Е, категорично НЕ. минификацията е различна от компресията. Компресията кара минифицирания файл да намалява повече, но не засяга стила и структурата на кода.
Файлът се минимизира и след това се компресира като zip и се изпраща по мрежата, когато клиент поиска достъп до уебсайта. След това файлът се компресира и използва.
Примери:
Преди минификация:
Портфолио
- У дома
След минификация:
Портфолио
- У дома
Кодът определено е по-труден за четене и разбиране за човек, но е еднакво правдоподобен за предаване на машина. Машината всъщност не се интересува от красотата на кода и разстоянието, тя разбира същността и работи по съответния начин.
Достатъчно впечатлен от техниката за минимизиране?
След това опитайте сами. Намалете тежестта на файла си и оставете уебсайта Ви да тече свободно за всички потребители!
Това ни води до края на тази статия за Minify In CSS.
как да използвам параметри в таблицата
Ако се интересувате да научите повече за уеб разработката, разгледайте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уеб сайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го внедрите в Amazon Simple Storage Service (S3).
Ако все още се интересувате Ако имате някакъв въпрос, можете да го публикувате в раздела за коментари в този блог „Минифициране в CSS“ и ние ще се свържем с вас възможно най-скоро.