✔️ SEO HELPER | NICOLA.TOP

✔️ SEO HELPER | NICOLA.TOP

CSS оптимизация — 21 способ ускорить сайт

Количество просмотров

2 588
Распечатать · Время на чтение: 8мин · Автор: · Опубликовано · Обновлено

playПрослушать эту статью

Как оптимизировать CSS для повышения производительности.

CSS должен проходить через относительно сложный конвейер, точно так же, как HTML и JavaScript. Браузер должен загрузить файлы с сервера, а затем приступить к их синтаксическому анализу и применению к DOM. Из-за экстремальных уровней оптимизации этот процесс обычно происходит довольно быстро — для небольших веб-проектов, не основанных на фреймворках, CSS обычно составляет лишь небольшую часть от общего потребления ресурсов.

Рамки нарушают это равновесие. Включите стек графического пользовательского интерфейса JavaScript, такой как пользовательский интерфейс jQuery, и наблюдайте за стремительным ростом размеров CSS, JS и HTML. Часто разработчики чувствуют себя не плохо — когда  сидят за мощной восьмиядерной рабочей станцией с интернетом T3, скорость никого не волнует. Это меняется по мере того, как в игру вступают задержки или устройства с ограничениями ЦП.

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

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

Содержание статьи:

Используйте сокращение CSS предложений

Оптимизация CSS для быстрой загрузки страниц.

Самое быстрое предложение CSS — это то, которое никогда не анализируется. Использование сокращенных предложений, таких как объявление поля, показанное ниже, радикально уменьшает размер ваших файлов CSS. Множество дополнительных сокращенных форм можно найти, погуглив «CSS Shorthand».

Вот пример:

p { 
margin-top: 1px; 
margin-right: 2px; 
margin-bottom: 3px; 
margin-left: 4px; }
 p {
margin: 1px 2px 3px 4px; 
}

Удалите неиспользуемый код CSS

Устранение ненужных частей вашей разметки, очевидно, приводит к огромному увеличению скорости. Браузер Google Chrome имеет эту функцию из коробки.

Просто перейдите в «Просмотр»> «Разработчик»> «Инструменты разработчика», откройте вкладку «Источники» в последней версии и откройте меню команд. После этого выберите «Показать покрытие» и полюбуйтесь на окно анализа покрытия, подсвечивающее неиспользуемый код на текущей веб-странице.

Работайте с CSS более удобным способом

Навигация по построчному анализу не обязательно удобна. Аудит веб-производительности Chrome возвращает аналогичную информацию — просто откройте его на панели инструментов, выберите «Просмотр» > «Разработчик» > «Инструменты разработчика» > «Аудит» и запустите его. Когда это будет сделано, появится список проблемных элементов.

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

Имейте в виду, что автоматизированный анализ CSS всегда может привести к ошибкам. Проведите тщательный тест всего веб-сайта после замены файлов CSS на уменьшенные — никогда не знаешь, какие ошибки допустил оптимизатор. И в дальнейшем достойный веб-хостинг может помочь вам сгладить складки на вашем сайте.

Встроенный критический CSS

Загрузка внешних таблиц стилей требует времени из-за задержки — кто-нибудь помнит «вспышку нестилизованного содержимого»? Таким образом, наиболее важные фрагменты кода могут быть помещены в тег заголовка.

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

Вот пример:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> Hello, world! </div>

Антипараллельный анализ

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

Пример:

@import url("a.css");
 @import url("b.css");
 @import url("c.css");
 <link rel="stylesheet" href="a.css">
 <link rel="stylesheet" href="b.css">
 <link rel="stylesheet" href="c.css">

Замените ваши изображения с помощью CSS

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

Пример:

img { 
-webkit-filter: grayscale(100%);
 /* old safari */ filter: grayscale(100%);
 }

Используйте сочетания цветов

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

target { background-color: #ffffff; } 
target { background: #fff; }

Удалите ненужные нули и единицы

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

padding: 0.2em; margin: 20.0em; avalue: 0px; padding: .2em; margin: 20em; avalue: 0;

Удалите лишние точки с запятой

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

p { . . . font-size: 1.33em }

Используйте спрайты текстур

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

.download { 
width:80px;
height:31px;
background-position: -160px -160px; 
} 
.download:hover { 
width:80px;
height:32px; 
background-position: -80px -160px; 
}

Удаляйте ненужный пиксель

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

h2 {padding:0px; margin:0px;} 
h2 {padding:0; margin:0}

Избегайте требовательных пропорций

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

border-radius box-shadow transform filter :nth-child position: fixed; etc.

Удалить ненужные пробелы

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

Удалите ненужные комментарии

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

Используйте автоматическое сжатие

Команда Yahoo, занимающаяся пользовательским интерфейсом, создала приложение, которое выполняет множество задач по сжатию. Он поставляется в виде файла JAR,и может быть запущен с выбранной JVM.

java -jar yuicompressor-x.y.z.jar Usage: java -jar yuicompressor-x.y.z.jar [options] [input file] Global Options -h, --help Displays this information --type <js|css> Specifies the type of the input file

Запуск из NPM

Если вы предпочитаете интегрировать продукт в Node.JS, посетите npmjs.com/package/yuicompressor . Плохо поддерживаемый репозиторий содержит набор файлов-оболочек и JavaScript API.

var compressor = require('yuicompressor');
 compressor.compress('/path/to/ file or String of JS', { //Compressor Options: charset: 'utf8', type: 'js',

Держите Sass и др. под контролем

Хотя производительность селектора CSS не так критична, как несколько лет назад (см. ресурс), такие фреймворки, как Sass, иногда выдают чрезвычайно сложный код. Время от времени просматривайте выходные файлы и думайте, как оптимизировать результаты. Есть результаты, чтобы поделиться с командой? Храните файлы в общедоступном облачном хранилище.

Настройте кеширование

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

Очистить кеш

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

<link rel="stylesheet" href="style.css?v=1.2.3">

Не забывайте об основах

Оптимизация CSS — это только часть мероприятий по оптимизации. Если ваш сервер не использует сжатие HTTP/2 и gzip, при передаче данных теряется много времени. К счастью, решить эти две проблемы достаточно просто. В моем примере показано несколько настроек широко используемого сервера Apache с помощью файла .htaccess. Если вы окажетесь в другой системе, просто обратитесь к документации сервера.

pico /etc/httpd/conf/httpd.conf 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/css

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

С этой статьей читают:

Спасибо, что читаешь: SEO HELPER | NICOLA.TOP

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 329

Оценок пока нет. Поставьте оценку первым.

Метки:

Читайте также:

1 комментарий

  1. Илья:
    22.05.2022 в 20:36

    Давно наблюдаю за вашим проектом. Смотрю начали восстановление, очень приятно видеть изменения в лучшую сторону. Мне нравится ваш дизайн и оформление. Видно работаете над качеством.Благодарю за старания.

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

тринадцать + восемнадцать =