Эта статья познакомит вас с темой, известной как 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:
что предупреждает в javascript
CSSminifier.com: чрезвычайно простой в использовании инструмент. Просто скопируйте код с левой стороны, сгенерируйте миниатюрный файл и загрузите его. У минифицированного файла будет расширение .min.
Ваш уменьшенный файл CSS будет иметь расширение demo.min.css.
Smallseotools.com: либо скопируйте свой код, либо загрузите файл кода. Он уменьшит ваш код и позволит вам скопировать или загрузить его.
Autoptimize: это плагин, который вы можете добавить в свои инструменты WordPress. В качестве плагина вы можете сразу же минимизировать свой CSS-код.
Разработчику легче понять, когда файл минифицирован, а когда нет. У минифицированного файла будет расширение .min.
Продолжаем статью о Minify CSS
Когда это делать?
В первую очередь минификация должна выполняться, когда вы написали код и должны отправить его на сервер для ответа. После того, как файлы уменьшены, уменьшенные версии используются для распространения среди пользователей.
Преимущества минификация ?
Уменьшение размера файла: за счет удаления лишних интервалов, сокращения имен переменных и удаления комментариев размер файла уменьшается почти на 30-60%. Более быстрая загрузка: с меньшим объемом данных для отправки по сети веб-сайт загружается быстрее, чем раньше. Более низкая стоимость полосы пропускания: при удалении ненужных данных необходимая пропускная способность намного меньше, как и стоимость.
То, что нужно запомнить:
Даже перед попыткой минификации убедитесь, что ваш код не выходит за пределы ограничений. Поток не должен прерываться, а функциональность должна оставаться безликой. Вам нужно убедиться, что даже после минификации ваш код работает аналогичным образом.
На самом деле, лучше всего всегда держать шаблон наготове. Внесите изменения во встроенный шаблон, что сэкономит вам много времени.
Это похоже на сжатие?
Ну категорически НЕТ. минификация отличается от сжатия. Сжатие позволяет уменьшить размер уменьшенного файла, но не влияет на стиль и структуру кода.
Файл минифицируется, затем сжимается в виде zip-архива и отправляется по сети, когда клиент запрашивает доступ к веб-сайту. Затем файл распаковывается и используется.
Примеры:
Перед минификацией:
портфолио
- Главная
После минификации:
портфолио
- Главная
Код определенно сложнее читать и понимать для человека, но в равной степени правдоподобен для рендеринга машины. Машине наплевать на красоту кода и интервалы, она понимает суть и работает соответственно.
Достаточно впечатлены техникой минификации?
Тогда попробуйте сами. Уменьшите нагрузку на свой файл и позвольте вашему веб-сайту свободно работать для всех пользователей!
На этом мы подошли к концу статьи о Minify In CSS.
Если вы хотите узнать больше о веб-разработке, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам узнать, как создавать впечатляющие веб-сайты с помощью HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).
Если вам все еще интересно. Если у вас есть какие-либо вопросы, вы можете опубликовать их в разделе комментариев этого блога «Минимизация в CSS», и мы свяжемся с вами как можно скорее.