Содержание

Web-инструменты для оптимизации CSS.

Стили могут быть реально большими, как с точки зрения длины, так и размера файла. Чтобы Вы могли убедиться, что ваши веб-страницы не содержат ошибок и быстро загружаются, позвольте Вам представить подборку некоторых из наиболее известных online CSS оптимизаторов / компрессоров, инструментов для форматирования кода и проверки на корректность. Посмотрите их и выберите те, которые наиболее интересны для вас.

Оптимизаци и сжатие.

CSS Optimizer

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


Clean CSS

Clean CSS базируется на CSSTidy. Вы можете установить нужный уровень сжатия и настройки сжатия. Он создает отчет, чтобы потом показать Вам что именно изменилось. Также проверяет CSS форматирование и оптимизацию, которая используется в последней версии CSSTidy (1.3dev).

CSS Drive gallery-компрессор CSS

CSS Drive gallery-компрессор CSS имеет два режима, Regular и Advanced (который имеет несколько параметров и которые можно настроить). Вы можете удалять комментарии или обрезать комментарии, которые превышают определенный размер, сохраняя, таким образом, короткие комментарии. Regular режим идеально подходит для тех, кто не слишком требователен — просто выбираете между Light, Normal и Super Compact сжатием и все готово.

Online CSS Optimizer

Online CSS Optimizer — это еще один простой инструмент оптимизации CSS, на основе CSS-оптимизатора для OS X и Linux. У вас есть два способа ввода вашего CSS: либо через текстовое поле, предусмотренное на странице, либо указав ссылку к Вашим стилям. Если Вы захотите откатить назад сжатие CSS — это можно сделать с помощью Uncompress CSS application на сайте.

CSS Compressor

Еще один популярный CSS-инструмент для сжатия — CSS Compressor, (исходный PHP-код CSS Compressor-а). Там есть множество вариантов сжатия, которые можно установить. Это касается цвета, измерений, правил и CSS-свойств. CSS компрессор также предоставляет полезную Combine утилиту для одновременного комбинирования и сжатия до трех отдельных CSS-файлов.

flumpCakes Style Sheet Optimizer

flumpCakes Style Sheet Optimizer — еще один инструмент для оптимизации и форматирования. Он позволяет Вам выбирать сочетания атрибутов фона, шрифтов, списков, границ, и Pretty Print опцию, которая стандартизирует формат кода. Одной из лучших функций является Backlink-функция. Она предоставляет вам URL, который Вы можете добавить в закладки и вернуться в любое время чтобы просмотреть Ваши стили в сжатом состоянии.


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments

Ammina Optimizer.

Оптимизация сайта (CSS, JS, HTML, изображения). Веб-студия Ammina: разработка и сопровождение сайтов.

О решении

Модуль «Ammina Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)» позволяет значительно ускорить ваш сайт для пользователя, улучшить дружественность сайта для поисковых систем, провести аудит сайта в режимах для десктопа и мобильных устройств по параметрам

производительности, SEO, доступности, Best Practices и Progressive Web Application.

С помощью модуля вы можете значительно сократить количество и объем загружаемых файлов (запросов к серверу) стилей (CSS), Java Script (скриптов), оптимизировать изображения, используемые на вашем сайте, уменьшить размер кода HTML.

Все это позволит ускорить загрузку и отрисовку страницы на стороне посетителя, улучшить ранжирование поисковыми системами и в конечном итоге увеличить конверсию

на вашем сайте.

Преимущества модуля
  • Более 100 опций
  • Простота настройки. В большинстве случаев достаточно включить несколько галочек (группы оптимизации с настройками по умолчанию)
  • Оптимизация «на лету»
  • Интеграция с Google PageSpeed Insights и аудит показателей страниц сайта
  • Ускорение загрузки сайта на 50 и выше процентов
  • Поддержка WebP формата изображений
  • Оптимизация CSS, JS файлов
  • Оптимизация JPG файлов (сжатие может достигать 2-3 раз)
  • Не изменяет оригинальные CSS и JS файлы
  • 3 модели поиска изображений в коде страницы сайта
  • Не изменяет оригинальные файлы изображений
  • Оптимизация изображений в CSS файлах
  • Оптимизирует (объединяет и сжимает) как файлы шаблона сайта, так и системные файлы битрикс
  • Оптимизация как локальных файлов, так и файлов со сторонних серверов
  • Все операции по оптимизации происходят на сервере сайта в рамках функционала модуля
  • Включение изображений, указанны в CSS файлах в качестве inline кода в файлах
  • Поддержка функции Inline CSS (включение CSS файлов в код HTML страницы)
  • Значительное сокращение количества запросов к серверу и предзагрузка файлов
  • Бесплатная установка и настройка на вашем сайте
  • Техническая поддержка модуля
Функциональные особенности
  • Оптимизация CSS файлов
  • Оптимизация JS файлов
  • Несколько библиотек минификации CSS
  • Несколько библиотек минификации JS файлов
  • Возможность использования Inline CSS
  • Поддержка локального кэширования и оптимизации JS файлов со сторонних сайтов
  • Включение изображений, используемых CSS, в виде Inline кода в CSS файлы
  • Поддержка различных вариантов подключений JS файлов на сайте
  • Оптимизация и локальное кэширование CSS с удаленных сайтов
  • Предзагрузка JS файлов браузером пользователя до завершения этапа парсинга HTML кода сайта
  • Оптимизация отображения веб-шрифтов
  • Поддержка Google Fonts
  • Предзагрузка CSS файлов до завершения этапа парсинга HTML кода страницы
  • Оптимизация изображений
  • Оптимизация HTML кода страницы
  • Поддержка формата WebP
  • Несколько библиотек минификации HTML
  • Использование библиотек GD и IMagick
  • Возможность оптимизации inline JS
  • Оптимизация изображений в тегах IMG
  • Возможность оптимизации inline CSS
  • Оптимизация изображений в CSS правилах background[-image]
  • Поиск и оптимизация изображений, указанных в HTML коде в папке /upload/ и других папках
  • Оптимизация изображений со сторонних сайтов
  • Возможность указать дополнительные файлы для предзагрузки
  • Возможность оптимизации CSS, JS, изображений, возвращаемых AJAX запросами (в т. ч. JSON данные)
  • Интеграция с Google PageSpeed Insights
  • Аудит страниц сайта (с сохранением истории) непосредственно из административной части сайта
Демо-режим

Работать с модулем можно начать абсолютно бесплатно. В течении 21 дня можно протестировать модуль в демо-режиме в полнофункциональном режиме.

Бесплатная техническая поддержка

Мы оказываем техническую поддержку как ДО так и ПОСЛЕ приобретения модуля.

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

Онлайн-чат

Онлайн-чат доступен во всех наших модулях прямо из административной части вашего сайта

Почта

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

Документация

Посмотреть документацию на наши модули.

Проверить сайт сейчас

Мы разработали уникальный сервис симуляции оптимизации сайта позволяет проверить работу модуля на вашем сайте до установки модуля.
Проверить сайт сейчас.

Благодарим, что дочитали до конца

Мы всегда готовы помочь вам!

10 лучших инструментов для форматирования и оптимизации файлов CSS

Редакция Geekflare в Разработка | Последнее обновление: 29 декабря 2019 г.

Поделись на:

Сканер безопасности веб-приложений Invicti — единственное решение, обеспечивающее автоматическую проверку уязвимостей с помощью Proof-Based Scanning™.

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

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

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

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

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

# Инструменты настройки CSS

CSS Minify

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

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

Верхнее покрытие

Верхнее покрытие не является инструментом для оптимизации CSS. Вместо этого это библиотека CSS с открытым исходным кодом, разработанная с учетом скорости. Это потомок языка дизайна Adobe, разработанного для Brackets, Edge Reflow.

Topcoat включает в себя PSD и многие другие артефакты дизайна, а также коллекцию простых и понятных иконок SVG и руководств по стилю. Он также предлагает инструменты для сравнительного анализа и причудливое семейство шрифтов Adobe Source Sans Pro.

Улучшитель кода

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

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

CSS Nano

Другим инструментом минимизации CSS является CSS Nano. Этот основан на инструменте, созданном для преобразования стилей с помощью JavaScript, который называется PostCSS. Благодаря плагиновой архитектуре этого инструмента создатели CSS Nano смогли собрать его из небольших модулей с ограниченными функциями.

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

# Инструменты очистки CSS

Грязная разметка

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

Создатели Dirty Markup говорят, что почти миллиард строк кода (учитывая не только CSS, но также HTML и JavaScript) был улучшен с помощью их инструмента.

Селекторы Dust-Me

Dust-Me Selectors был создан для сканирования веб-сайта и поиска неиспользуемых селекторов CSS, чтобы удалить их и уменьшить размер вашего кода. Он работает как надстройка для Firefox и Opera.

Селекторы Dust-Me могут работать на отдельной странице или сканировать всю карту сайта, показывая вам детали всех найденных таблиц стилей и селекторов, распределяя их по используемым и неиспользуемым. Версия для Firefox способна автоматически сканировать страницы во время просмотра. Следует только учитывать, что при этом события мутации могут запускать дополнительные проверки в случае изменения страницы.

CSS Lint

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

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

# Инструменты для тестирования/проверки CSS

Стресс-тест CSS

Стресс-тест CSS работает как букмарклет (небольшой фрагмент кода JavaScript), который применяет стресс-тестирование к CSS любой веб-страницы. Инструмент индексирует все элементы в коде CSS и их классы. Затем он начинает стресс-тест, удаляя классы один за другим и измеряя время, необходимое для прокрутки страницы.

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

Но CSS3 может вызвать проблемы: одно свойство может привести к видимым перерисовкам и проблемам с прокруткой страницы. Вот где может пригодиться стресс-тест CSS.

Служба проверки CSS

Служба проверки CSS проверяет каскадные таблицы стилей и (X)HTML с таблицами стилей. Инструмент проверяет свойства, определенные во всех версиях CSS. Чтобы проверить страницу или файл CSS, вам просто нужно ввести его URI (унифицированный идентификатор ресурса) и установить некоторые основные параметры, такие как профиль (тип CSS для проверки), целевое устройство, отображаемые предупреждения и что делать с расширениями поставщика. -сопутствующие вопросы (показать ошибки или предупреждения).

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

BackstopJS 3

BackstopJS 3 автоматизирует визуальное регрессионное тестирование адаптивных пользовательских веб-интерфейсов. Он выполняет свою работу, сравнивая серию снимков экрана DOM. Он предлагает захватывающий список функций: есть отчеты в браузере, а также настройка макета для печати и экрана и некоторые другие специальные функции, такие как фильтрация отображения и инспектор ссылок / тестов / визуальных различий.

Используя сценарии Puppeteer и ChromyJS, BackstopJS 3 может имитировать взаимодействие с пользователем и может выполнять тесты с помощью Chrome Headless. Чтобы устранить проблемы кроссплатформенного рендеринга, он также имеет встроенный рендеринг докеров. Инструмент может работать глобально или локально как отдельный пакет, и он отлично работает с CI и системой управления версиями. BackstopJS 3 очень прост в использовании: всего с тремя командами вы можете пройти довольно долгий путь.

Заключение

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

Спасибо нашим спонсорам

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

Часть 2 из   Серия акселераторов Blue Triangle: передовые методы повышения производительности в Интернете

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

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

Как CSS может замедлить работу вашего сайта?

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

Производительность имеет значение, поэтому не позволяйте неоптимизированному CSS замедлять работу вашего сайта. Вот как CSS может замедлить работу:

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

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

HTML и CSS — это два минимальных требования для критического пути рендеринга. HTML — это документ, который создает страницу, а его анализ создает объектную модель документа (DOM). CSS стилизует DOM с помощью объектной модели CSS (CSSOM). Чтобы страница использовала CSS, она должна быть загрузить , а затем разобрать .

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

Чтобы оптимизировать доставку CSS и ускорить работу вашего сайта, вам необходимо:

  • Уменьшить размер файла CSS и
  • Используйте сетевые функции, которые помогают загружать CSS быстрее и раньше.

Давайте посмотрим, как это сделать.

Уменьшить размер файла CSS

Эффективная доставка файлов CSS означает ограничение объема данных, которые необходимо передать, и тщательный подход к средствам доставки.

Существует три основных оптимизации, которые вы можете сделать, чтобы ограничить объем данных, передаваемых в процессе доставки:

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

Минификация CSS

Минификация удаляет все пробелы, комментарии и посторонние символы в CSS. Получится это (48 символов) :

 h2 { 
   color: black; 
  фоновый цвет: синий; 
 }

в этот (38 символов) :

 h2{color:black;background-color:blue;}

Вот несколько инструментов для минимизации вашего CSS:

  • Для ручной минимизации вы можете использовать CSSNano или кссо.
  • Более крупные сайты, которым могут быть полезны автоматизированные рабочие процессы, могут использовать Gulp или Webpack.

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

И если вы используете фреймворк с библиотекой CSS, такой как Bootstrap, Foundation или Susy, убедитесь, что вы используете компиляторы и минифицированные файлы, чтобы не загружать неиспользуемые стили CSS, которые только раздувают код.

Уменьшение длины файла CSS

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

 p { 
  цвет: #00000; 
 }

Некоторые инструменты минимизации преобразуют это в сокращенное шестнадцатеричное число:

 p { 
   color: #000; 
 }

Существуют и другие сокращенные свойства, которые можно использовать для сокращения объема необходимого кода. А когда стили перекрываются в CSS, нет необходимости переписывать стили. Это будет правильной реализацией синтаксиса:

 h2, h3 { 
   color: blue; 
 }

Не это:

 h2 { 
   цвет: синий; 
 } 
 h3 { 
   цвет: синий; 
 }

Ограничение определений стилей также применяется к наследованию — некоторые свойства в CSS наследуются в HTML вложенными элементами (называемыми потомками). Вы также можете форсировать наследование в определениях свойств, если наследование не установлено по умолчанию. Наследование означает, что это:

 
 
     
Заголовок
 
     
Заголовок 
     
Абзац

Наследование применяется к CSS независимо от того, где он появляется — встроенный, встроенный или во внешней таблице стилей. Используйте синтаксис CSS, чтобы ограничить количество определений стилей в документе CSS. Бонус в том, что обычно его легче читать.

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

 

Сжатие CSS

Сжатие выполняется на стороне сервера и уменьшает количество байтов в файле CSS без изменения содержимого.

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

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

Загружайте CSS быстрее и раньше

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

  • HTTP preload и push , которые позволяют загружать CSS раньше, чем обычно, и
  • ленивая загрузка в сочетании с встраиванием CSS в HTML .

Оба этих метода доставки позволяют анализировать HTML во время загрузки CSS.

Доставка CSS с помощью HTTP/2 push или HTTP preload

HTTP/2 push и HTTP preload — это два механизма, которые немного по-разному управляют поведением сети.

Предварительная загрузка HTTP
Использование предварительной загрузки, более новой функции в HTTP, позволяет загружать стили раньше, поскольку браузер запрашивает их раньше, как только начинается синтаксический анализ HTML. Предварительная загрузка может быть обозначена в разметке или в заголовке HTTP.

Предварительная загрузка в документе HTML:

Предварительная загрузка в заголовке ответа HTML:

 Ссылка: ; отн=предварительная загрузка; as=style

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

HTTP/2 push
HTTP/2 push немного отличается. По сути, они выполняют многие из тех же целей, а предварительная загрузка фактически использует push-API, когда он доступен по умолчанию. Чтобы предотвратить это, вы можете включить «nopush» в заголовок ответа HTTP, например:

 Ссылка: ; отн=предварительная загрузка; как=стиль; nopush

При использовании HTTP/2 push сервер выполняет отправку, а не браузер при предварительной загрузке. Это важное отличие означает, что файл CSS, который был отправлен, сразу же переносится вместе с HTML и другими важными файлами, используя push. В результате push может загружать ресурсы даже быстрее, чем предварительная загрузка. Однако, если вы используете push, вы рискуете переопределить использование кэшированных ресурсов и увеличить объем отправляемых данных, поэтому будьте осторожны с реализацией.

Другим важным отличием является то, что push можно использовать только для соединений HTTP/2. Если на вашем сайте не включен HTTP/2, он не сможет использовать push. Это также означает, что способ инициирования отправки зависит от конфигурации вашего сервера.

Особые указания
Ни предварительная загрузка, ни проталкивание не могут использоваться повсеместно. Тем не менее, использовать их — хорошая идея, потому что браузеры, которые не могут использовать предварительную загрузку или push-уведомление, будут игнорировать эти атрибуты, а браузеры, которые могут их использовать, будут загружать страницы намного быстрее. Предварительная загрузка поддерживается большинством основных браузеров, но без поддержки в Firefox, Opera и IE и только частичной поддержки в Edge. С другой стороны, Firefox поддерживает push, а Safari и IE — нет.

Внедрение и отложенная загрузка CSS

Если предварительная загрузка и отправка на сервер недоступны, вы можете встроить CSS в тег