CSS должен проходить через относительно сложный конвейер, как HTML и JavaScript. Браузер должен загрузить файлы с сервера, а затем приступить к их синтаксическому анализу и применению к DOM. Из-за экстремальных уровней оптимизации этот процесс обычно довольно быстрый — для небольших веб-проектов, не основанных на фреймворках, CSS обычно составляет лишь небольшую часть общего потребления ресурсов.
Фреймворки нарушают это равновесие. Включите стек графического интерфейса JavaScript, такой как jQuery UI, и наблюдайте за размерами CSS, JS и HTML. Зачастую разработчики обычно чувствуют себя в последнюю очередь — когда они сидят за мощной восьмиъядерной рабочей станцией с Интернетом T3, никто не заботится о скорости. Это меняется по мере появления задержек или устройств с ограничением процессора.
Оптимизация CSS требует многомерного подхода. В то время как рукописный код может быть уменьшен с помощью различных методов, обход кода кода вручную неэффективен. В этих случаях использование автоматического минимизатора дает лучшие результаты.
Следующие шаги позволят нам отправиться в путешествие по миру оптимизации CSS. Не каждый из них может быть непосредственно применим к вашему проекту, но имейте это в виду.
Содержание статьи
- 1 01. Используйте сокращение
- 2 02. Найти и удалить неиспользуемый CSS
- 3 03. Делайте это более удобным способом
- 4 04. Помните о проблемах
- 5 05. Встроенный критический CSS
- 6 06. Разрешить антипараллельный анализ
- 7 07. Замена изображений на CSS
- 8 08. Используйте сочетания цветов
- 9 09. Устраните ненужные нули и единицы измерения
- 10 10. Устранить лишние точки с запятой
- 11 11. Используйте текстурный атлас
- 12 12. Преследуйте px
- 13 13. Избегайте дорогих свойств
- 14 14. Удаление пробелов
- 15 16. Использовать автоматическое сжатие
- 16 17. Запустите его из NPM
- 17 18. Keep Sass et al. в проверке
- 18 19. Настройка кеширования
- 19 20. Разрушьте кеш
- 20 21 , Не забывайте об основах
01. Используйте сокращение
Сокращение может сделать ваши CSS-файлы намного меньше
Самое быстрое предложение CSS — это то, которое никогда не анализируется , Использование сокращенных предложений, таких как объявление полей, показанное ниже, радикально уменьшает размер ваших CSS-файлов. Много дополнительных сокращенных форм можно найти, прибегая к помощи «CSS Shorthand».
p {margin-top: 1px; поле справа: 2 пикселя; поле снизу: 3 пикселя; поле слева: 4 пикселя; } p {margin: 1px 2px 3px 4px; }
02. Найти и удалить неиспользуемый CSS
Если код ничего не делает, избавьтесь от него
Устранение ненужных частей вашего разметка, очевидно, вызывает огромный выигрыш в скорости. Браузер Google Chrome имеет эту функциональность из коробки. Просто перейдите в «Просмотр»> «Разработчик»> «Инструменты разработчика», откройте вкладку «Источники» в последней версии и откройте меню команд. После этого выберите Показать покрытие и полюбуйтесь на окно анализа покрытия, выделяя неиспользуемый код на текущей веб-странице.
03. Делайте это более удобным способом
Используйте веб-аудит производительности для простой обрезки избыточного кода
Навигация по линии Анализ по линии не обязательно удобен. Chrome Web Performance Audit возвращает похожую информацию — просто откройте ее на панели инструментов, выберите «Просмотр»> «Разработчик»> «Инструменты разработчика»> «Аудиты» и дайте ей поработать. Когда закончите, появится список проблемных элементов.
04. Помните о проблемах
Имейте в виду, что автоматический анализ CSS всегда может привести к ошибкам. Проведите тщательное тестирование всего веб-сайта после замены ваших CSS-файлов минимизированными — никто не знает, какие ошибки вызвал оптимизатор.
05. Встроенный критический CSS
Загрузка внешних таблиц стилей стоит времени из-за задержки — кто-нибудь помнит «вспышку нестандартного контента»? Поэтому самые важные биты кода могут быть включены в тег заголовка. Однако не переусердствуйте. Помните, что код также должен быть прочитан людьми, выполняющими задачи по обслуживанию.
Привет, мир!
06. Разрешить антипараллельный анализ
@import добавляет структуру в ваш код CSS. К сожалению, преимущества не бесплатны: поскольку импорт может быть вложен, их параллельный анализ невозможен. Более параллельный способ использует серию тегов которые браузер может извлечь сразу.
@import url ("a.css"); @import url ("b.css"); @import url ("c.css"); v
07. Замена изображений на CSS
Несколько лет назад набор полупрозрачных PNG для создания полупрозрачных эффектов на веб-сайтах был обычным явлением. В настоящее время CSS-фильтры предоставляют ресурсосберегающую альтернативу. В качестве примера, фрагмент, сопровождающий этот шаг, гарантирует, что рассматриваемое изображение будет отображаться как версия в оттенках серого.
img {-webkit-filter: grayscale (100%); / * старое сафари * / фильтр: оттенки серого (100%); }
08. Используйте сочетания цветов
Общепринятое мнение, что шестизначные цветовые дескрипторы являются наиболее эффективным способом выражения цветов. Это не так — в некоторых случаях сокращенные описания или названия цветов могут быть короче.
target {background-color: #ffffff; } target {background: #fff; }
09. Устраните ненужные нули и единицы измерения
CSS поддерживает широкий спектр единиц и числовых форматов. Они являются благодарной целью для оптимизации — и конечные, и последующие нули могут быть удалены, как показано в приведенном ниже фрагменте. Кроме того, имейте в виду, что ноль всегда является нулем, и что добавление измерения не добавляет ценности к содержащейся информации.
padding: 0.2em; маржа: 20.0em; значение: 0px; набивка: .2em; поле: 20em; значение: 0;
10. Устранить лишние точки с запятой
Эта оптимизация несколько критична, так как влияет на изменения кода. Спецификация CSS позволяет вам опустить последнюю точку с запятой в группе свойств. Поскольку экономия, достигаемая этим методом оптимизации, минимальна, мы упоминаем это главным образом для тех, кто работает над автоматическим оптимизатором.
p {. , , размер шрифта: 1,33em}
11. Используйте текстурный атлас
Загрузка нескольких маленьких спрайтов неэффективна из-за накладных расходов протокола. CSS-спрайты объединяют серию маленьких картинок в один большой файл PNG, который затем разбивается на части с помощью правил CSS. Такие программы, как TexturePacker, значительно упрощают процесс создания.
.download {width: 80px; высота: 31px; background-position: -160px -160px} .download: hover {width: 80px; высота: 32px; background-position: -80px -160px}
12. Преследуйте px
Один из аккуратных способов повышения производительности использует специальность стандарта CSS. Предполагается, что числовые значения без единиц измерения — это пиксели. Удаление px сохраняет два байта для каждого числа.
h2 {padding: 0px; margin: 0px;} h2 {padding: 0; Запас: 0}
13. Избегайте дорогих свойств
Анализ показал, что некоторые теги стоят дороже, чем другие. Список, сопровождающий этот шаг, считается особенно требовательным к производительности — избегайте их, когда есть возможность сделать это.
фильтр преобразования прямоугольных теней границы-радиуса: nth-child position: fixed; и т.д.
14. Удаление пробелов
Пробелы — например, табуляция, возврат каретки и пробелы — облегчают чтение кода, но с точки зрения синтаксического анализатора не имеют большого значения. Уничтожьте их перед отправкой. Еще лучший способ — делегировать эту работу сценарию оболочки или подобному устройству.
Комментарии также не имеют смысла для компилятора. Создайте собственный анализатор, чтобы удалить их перед доставкой. Это не только экономит полосу пропускания, но также гарантирует, что злоумышленникам и клонерам будет сложнее понять, что лежит в основе кода.
16. Использовать автоматическое сжатие
Опытная команда Yahoo создала приложение, которое обрабатывает множество задач сжатия. Он поставляется в виде файла JAR, доступного здесь, и может быть запущен с выбранной JVM.
java -jar yuicompressor-xyzjar Использование: java -jar yuicompressor-xyzjar [options] [input file] ] Global Options -h, --help Отображает эту информацию --type Определяет тип входного файла
17. Запустите его из NPM
Если вы предпочитаете интегрировать продукт в Node.JS, посетите npmjs.com/package/yuicompressor. Хранилище в плохом состоянии содержит набор файлов-оболочек и JavaScript API.
var compressor = require ('yuicompressor'); compressor.compress ('/ path / to / file или String of JS', {// Опции компрессора: charset: 'utf8', тип: 'js',
18. Keep Sass et al. в проверке
Sass может стать излишне сложным, поэтому оптимизируйте его, если можете
Хотя производительность селектора CSS отсутствует Почти столь же критично, как это было несколько лет назад (см. ресурс), фреймворки, такие как Sass, иногда генерируют чрезвычайно сложный код. Время от времени просматривайте выходные файлы и продумывайте способы оптимизации результатов.
19. Настройка кеширования
В старой поговорке утверждается, что самый быстрый файл — тот, который никогда не отправляется по проводам. Выполнение запросов к кешу браузера достигает этого эффективно. К сожалению, настройка заголовков кеширования должна выполняться на сервер. Используйте два инструмента, показанные на скриншотах — они обеспечивают быстрый способ анализа результатов наши изменения.
20. Разрушьте кеш
Дизайнеры часто не любят кеширование из-за боязни проблем с предстоящими изменениями. Аккуратный способ обойти проблему включает в себя теги с именем файла. К сожалению, схема, изложенная в коде, сопровождающем этот шаг, не работает везде, так как некоторые прокси отказываются кэшировать файлы с «динамическими» путями.
21 , Не забывайте об основах
Оптимизация CSS — это только часть игры. Если ваш сервер не использует HTTP / 2 и сжатие gzip, много времени теряется во время передачи данных. К счастью, решить эти две проблемы обычно просто. В нашем примере показано несколько настроек наиболее часто используемого сервера Apache. Если вы оказались в другой системе, просто обратитесь к документации по серверу.
pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE 190101901990199019019019109 / так же ] Эта статья была первоначально опубликована в выпуске 282 журнала Creative Web Design Веб-дизайнер . Купите выпуск 282 здесь или подпишитесь на веб-дизайнера здесь .
Статьи по теме:
Загрузка...
