Как оптимизировать доставку CSS – 7 простых шагов

CSS оптимизация векторное изображениеПрошли те времена, когда эксперты по дизайну и ведущие блоггеры рекомендовали создавать веб-страницы размером не более 30 килобайт…


В то время эта «шапка» должна была обрабатывать HTML, JavaScript, изображения, CSS и Flash. Давайте будем честными, для полного превышения 30 кб не требуется много.

По мере того как JavaScript и CSS набирали популярность, для одного только CSS стало обычным превышать потолок в 30 КБ. Это особенно актуально для крупных сайтов.

Тем не менее, вы не должны быть чрезмерно сосредоточены на «количестве килобайт» при создании и дизайне страниц для вашего сайта. Важно сохранить ваши страницы оптимизированный и туго при написании вашего CSS.

Оптимизация заключается не только в минимизации размеров ваших файлов. Речь идет о том, чтобы ваши страницы были свободными от беспорядка и раздувания, чтобы они были максимально организованными и эффективными. Когда вы узнаете больше о лучших практиках оптимизации CSS, вы обнаружите, что вы автоматически создаете файлы меньшего размера.

Вот 5 простых вещей, которые вы можете сделать, чтобы оптимизировать свой CSS прямо сейчас.

Как полностью оптимизировать доставку CSS

1. Используйте стенографию

Письмо в стенографии стало очень распространенной практикой. Это, безусловно, самый простой способ сократить ваш код и сколько времени вам понадобится на код. Если вы еще этого не делаете, нет времени, как настоящее.

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

Существует множество элементов, для которых вы можете использовать сокращение, но наиболее распространенными являются:

  • Прибыль
  • набивка
  • Шрифт
  • Контур
  • бордюр
  • Фон
  • Список стиль

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

Используя любую стенографию сделать ваш общий код гораздо более кратким. Вы сохраняете как символы, так и строки.

Если вы используете сокращение в каждой возможной области, это может значительно уменьшить общий размер файла..

2. Избавиться от хаков

т.е. правило cssЧтобы обслуживать специфичные для IE правила CSS, использование условных хаков CSS дает вам преимущество в предоставлении меньшего и более чистого файла CSS по умолчанию..

Это помогает с браузерами, которые более соответствуют стандартам. Однако дополнительный вес страницы будет загружен только теми браузерами, которые этого требуют.

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

Существует множество предварительно написанных кодов, которые служат хаком, если вы не хотите писать свой собственный. Просто найдите время, чтобы действительно посмотреть на заранее написанный код и убедиться, что он точный или это может привести к еще большим проблемам.

Теперь, если вы можете использовать CSS для получения желаемых результатов, делайте это без каких-либо взломов. Конечно, это зависит от того, при прочих равных условиях. Ваш общий код будет намного легче и проще, когда вы используете меньше хаков на своем сайте.

3. Будьте умны в использовании пробелов

Для вашего кода CSS, пробел необходим для удобства чтения.

Пробельные символы включают такие элементы, как табуляции, пробелы и дополнительные разрывы строк. Каждый пробел, который вы можете устранить, похож на удаление персонажа..

удалить пустые строкиТем не менее, часто не рекомендуется экономить на пустых местах ради файла меньшего размера. Вам все еще нужно поддерживать оптимальную читабельность на своих веб-страницах.

Пробелы важны для форматирования, поэтому вы хотите найти баланс. Если вы пишете большими блоками в текст, чтобы устранить пробелы, короткое внимание читателей в Интернете заставит их щелкнуть мышью.

Один из способов обеспечить как меньший размер файла, так и удобочитаемость состоит в том, чтобы отбрасывать вкладки и помещать только одну строку между абзацами. Это обеспечивает достаточные пробелы с точки зрения читабельности, но также устраняет некоторые из тех пробелов, которые не нужны.

Теперь для рабочей версии вашего CSS-файла вы можете удалить пробел. Он все еще будет присутствовать в вашем рабочем файле.

Это еще один способ достичь компромисса, чтобы у вас были и меньшие файлы, и удобочитаемое форматирование.

4. Сброс сбрасывает и рамки

Когда вы используете CSS-фреймворк, обязательно просмотрите документацию.

Не менее важно взглянуть на каждую строку в вашем CSS-файле. Временами вы обнаруживаете, что в структуре есть некоторые правила, которые вам не нужны для вашего текущего проекта. Они могут быть удалены.

удалены неиспользованные правила CSS

Возможно, вы обнаружите, что вы можете достичь презентационных деталей более кратким и элегантным способом …

Это может быть не то, что вы обычно используете, но если это работает, это может позволить более чистую структуру. Когда вы знаете о них, это также поможет вам избежать непреднамеренного дублирования наборов правил..

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

Например, в общем блоге вы, скорее всего, не будете их использовать. Просто избавьтесь от того, что вам не нужно для конкретного сайта, который вы строите. Вы можете обеспечить лучшую оптимизированную работу при использовании набора правил относительно сброса или структуры.

Однако в состоянии по умолчанию они не должны приниматься. Чтобы ваши CSS-файлы были удобочитаемыми и понятными, посмотрите на каждое объявление в отдельности и сократите ненужные..

5. Будущее Доказательство Вашего CSS

Синтаксис CSS

Еще один полезный вариант оптимизации CSS: отделите большинство ваших правил от объявлений, относящихся к макету..

Назначьте макет отдельному файлу, если это возможно. Если нет, то, по крайней мере, предоставление его собственного раздела может быть полезным.

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

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

Как только эта поддержка произойдет, не должно быть очень сложно поменять свойства блочной модели, которые взломаны на те, которые предназначены для макетов..

Прямо сейчас лучший выбор – обрабатывать макет, используя правильные свойства. Это обычно будет сгущать вес страницы более эффективно, чем использование ограниченного набора свойств, доступных в настоящее время, чтобы компенсировать причуды.

6. Всегда держите обновленную документацию о вашей работе

Работаете ли вы на веб-сайте в команде или в одиночку, обязательно следите за всем, что вы сделали.

Например, один, вы можете забыть что-то, что вы сделали. Как команда, кто-то может что-то делать, и вы можете не знать, пока не внесете изменения, которые могут вызвать проблемы с различными элементами кода.

добавление комментария cssДублирование кода представляет собой огромную проблему как для команд, так и для отдельных дизайнеров, особенно при использовании популярных конструкторов веб-сайтов. Wix, Squarespace и другое программное обеспечение для создания веб-сайтов известен за дублирование кода или его полное отсутствие в своей базе данных.

Использование направляющих таблиц стилей и направляющих разметки – приемлемый выбор документации. Вы также можете использовать CSS-комментарии – это еще один вариант, который может быть полезен для разделения длинных элементов CSS-файлов. Поместив их в руководство по стилю или разметке, они не смогут добавить размер файла..

Один из самых быстрых способов взломать код – выполнить одну и ту же работу дважды. Кодирование является сложным, поэтому необходимо вести точную документацию обо всем, что вы сделали.

Если вы работаете в одиночку, рекомендуется просматривать эту документацию каждый раз, когда вы садитесь за работу. Работая как часть команды, убедитесь, что все пишут в одном документе. придерживается стиля сообщества или руководства по разметке так, чтобы изменения в кодировке были легко понятны каждому в группе.

7. Сожмите ваши файлы (CSS Optimization 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