Как оптимизировать файл css

Обновлено: 04.07.2024

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

В этом руководстве мы также отдельно разберём аспект оптимизации WordPress сайтов — удаление строк запросов из статического ресурса. Поехали!

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Шаг 1 — Выявление не оптимизированных файлов CSS, HTML, JavaScript

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

Шаг 2 — Замена не оптимизированных файлов

ВАЖНО! Безопасность прежде всего. Перед сохранением каких-либо изменений, убедитесь в наличии резервной копии вашего сайта или отдельных файлов, которые будут заменены.

Вариант 1 — Ручная замена

Одним из преимуществ GTMetrix является возможность мгновенного просмотра оптимизированных версий CSS, JS и HTML файлов, по нажатию кнопки See optimized version (Увидеть оптимизированную версию) возле файла. После этого, оптимизированный файл может быть либо скачан, либо открыт в браузере. Замените старые файлы используя FTP клиент или скопируйте и замените сам код.

Вариант 2 — CMS плагины

Пользователи WordPress могут использовать для достижения тех же целей такие плагины как Better WordPress Minify или W3 Total Cache. Вы можете обратиться к этому руководству для более подробной инструкции по установке плагина W3 Total Cache.

Вариант 3 — CloudFlare

CloudFlare — это бесплатный сервис который ускоряет и защищает ваш сайт выступая в качестве прокси между посетителем и сервером сайта. Он предлагает защиту от DDoS атак, и что самое главное, он бесплатный. Одна из функций которую включает в себя бесплатный тариф, это оптимизация CSS, HTML и JS. Вы можете включить оптимизацию ресурсов в разделе Speed → Auto-Minify:

ВАЖНО! Не рекомендуется использовать оптимизацию CloudFlare, если вы уже используете CMS плагины для оптимизации. Также, CloudFlare не оптимизирует сторонние скрипты и ссылки (Facebook, VK, Twitter)

Шаг 3 — Тестирование изменений

После замены файлов/кода на их оптимизированную версию, последним этапом станет проверка изменений. Вы можете сделать это запустив повторный анализ на сайте GTMetrix. Для сравнения, вот результаты тестового сайта после замены файлов на оптимизированные:

Как удалить строки запроса из статического ресурса и ускорить сайт на WordPress

Строки запроса — это набор символов в URL после ? или & . Эти строки служат параметрами URL-адреса, которые помогают сортировать и определять контент на сайте.

Пример ссылки, содержащей строку запроса:

?ver=1.12.4

Вопросительный знак в приведённом выше примере отмечает начало строки запроса. Когда есть несколько строк запроса, они объединяются с помощью амперсанда «&» следующим образом:

q=query+string+example&safe=strict

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

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

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

Что вам понадобится

Прежде, чем вы продолжите работу с руководством, проверьте наличие следующего:

FTP доступ
доступ к админ-панели WordPress

Шаг 1 — Анализ сайта

Для этого шага будем использовать уже известный нам GTMetrix. После теста нашего WordPress-сайта мы получим результат:

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

Шаг 2 — Удаление строк запроса в WordPress

Существует несколько путей эффективного удаления строк запроса из статического ресурса в WordPress.

Вариант 1. Удаление строк запроса JavaScript и CSS в WordPress, используя плагин

Наиболее подходящей плагин WordPress для удаления строк запроса будет Speed Booster Pack.

Найдите и установите плагин Speed Booster Pack в панели управления WordPress. После установки и активации плагина, перейдите в его меню настроек (Tweaks).

Поставьте галочку возле опции Trim query strings, как показано ниже и нажмите Save, чтобы сохранить изменения.

Для удаления строк запросов из статических ресурсов также подойдут плагины WP Rocket, W3 Total Cache и WP Performance Score Booster.

Вариант 2. Удаление строк запроса JavaScript и CSS в WordPress, используя functions.php

Перед редактированием кода в functions.php настоятельно рекомендуется создать резервную копию вашего сайта. Таким образом, если что-то пойдёт не так, вы сможете вернуть свой сайт до исходного состояния.

Чтобы найти файл functions.php в панели управления WordPress, перейдите в меню Внешний вид -> Редактор тем. Затем найдите файл functions.php (Функции темы) на правой боковой панели.

Строки запроса могут быть удалены из WordPress путём добавления этих строк в конце файла:

Шаг 3 — Проверяем изменения

Для сравнения здесь результаты анализа GTMetrix после удаления строк запроса из статических ресурсов в WordPress:

Итоги

В этом кратком руководстве вы узнали для чего нужна оптимизация CSS, JavaScript and HTML и как минифицировать ваш код. Вы также научились оптимизировать работу WordPress-ресурса, удаляя строки запроса.

В этой статье мы рассмотрим 20 приемов оптимизации CSS, которые повысят производительность сайта.

Используйте аналитические инструменты

Используйте инструменты разработчика, встроенные во все наиболее популярные браузеры. Чтобы запустить их, нажмите F12, Ctrl+ Shift+ I или Cmd+ Alt+ I в Safari (macOS).

Наиболее полезные вкладки включают в себя следующие данные:

Браузеры на основе движка Chrome, предоставляют вкладку «Аудит». В ней можно запустить инструмент Google Lighthouse . Он предоставляет рекомендации по производительности CSS.

Онлайн-инструменты

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

Pingdom Website Speed Test ;
GTmetrix ;
Google PageSpeed Insights ;
WebPagetest ;

В первую очередь выполняйте основные задачи

Код CSS может загружать объемные ресурсы, которые можно оптимизировать. Примеры:

Изображения являются основной причиной большого объема веб-страниц. Поэтому:

Измените размеры растровых изображений. Только для небольшого количества сайтов требуются изображения шириной более 1600 пикселей.
Используйте правильные форматы файлов. JPG лучше всего подходит для фотографий, SVG – для векторных изображений и PNG – для всего остального.
Уменьшайте размеры файлов с помощью увеличения коэффициентов сжатия.

Замените изображения эффектами CSS

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

Удалите ненужные шрифты

Избегайте @import

Правило @import позволяет импортировать CSS в другой файл. Например:

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

Конкатенация и минимизация

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

Также GZIP может максимизировать сжатие, когда в файле часто используются повторяющиеся строки.

Используйте современные методы компоновки

Много лет нам приходилось использовать CSS float для верстки страниц. Но существуют более эффективные технологии:

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

Уменьшите код CSS

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

Откажитесь от использования больших CSS-фреймворков.
Организуйте CSS-файлы. Виджет карусели значительно легче удалить, если его CSS четко определен в widgets/_carousel.css .
Используйте методологии именования, такие как BEM , которые помогают в разработке отдельных компонентов.
Избегайте использования !important для переопределения каскада.
Избегайте использования стилей, встроенных в HTML.

Такие инструменты, как UnCSS , могут помочь удалить избыточный код.

Следуйте каскаду!

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

Упростите селекторы

Упрощение селекторов уменьшит размер CSS-файлов и поможет браузеру быстрее их анализировать. Вам действительно нужен такой селектор ?!

Остерегайтесь использования ресурсоемких свойств

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

Все свойства, которые требуют перерасчета перед рендерингом страницы, потребляют больше ресурсов:

border-radius;
box-shadow;
opacity;
transform;
filter;
position : fixed.

Применяйте CSS-анимацию

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

Избегайте анимирования ресурсоемких свойств

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

Укажите, какие элементы будут анимированы

Свойство will-change позволяет указать, какой элемент будет анимирован. Поэтому браузер может заранее оптимизировать производительность. Например:

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

используйте will-change только в качестве крайней меры для устранения проблем с производительностью;
не применяйте его к большому количеству элементов.

Применяйте SVG-изображения

Масштабируемая векторная графика (SVG) обычно используется для логотипов, диаграмм, иконок и более простой графики. Вместо определения цвета каждого пикселя (как в растровых изображениях JPG и PNG), SVG определяет простые фигуры (линии, прямоугольники и круги). Например:

Простые SVG меньше по размеру, чем растровые изображения. При этом они могут бесконечно масштабироваться без потери качества.

Стилизуйте SVG с помощью CSS

Чаще всего SVG-файлы включаются непосредственно в HTML-документ:

Это добавляет узлы SVG непосредственно в DOM. Поэтому к SVG могут быть применены стили через CSS:

Объем встроенного кода SVG уменьшается, а код CSS можно использовать повторно или анимировать по мере необходимости.

Избегайте растровых изображений Base64

Стандартные растровые изображения JPG, PNG и GIF могут быть закодированы с помощью base64. Например:

Но это неправильный подход:

кодировка base64 на 30% больше, чем ее двоичный эквивалент;
браузер должен проанализировать строку, прежде чем ее можно будет использовать;
изменение изображения делает недействительным весь кэшированный файл CSS.

Критический CSS

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

Располагайте стили, используемые для визуализации элементов, выше первого сгиба. Такие инструменты, как criticalCSS , помогут вам в этом.
Добавьте их в элемент <style> в раздел HTML <head> .
Загружайте основной файл CSS асинхронно, используя JavaScript.

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

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

Прогрессивный рендеринг

Каждый элемент <link> по-прежнему блокирует рендеринг, но на более короткое время. Потому что файл меньше.

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

Научитесь любить CSS

Добавление огромного количества CSS из StackOverflow или Bootstrap может дать быстрые результаты. Но это также приведет к переполнению CSS неиспользуемым кодом.

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

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

Пожалуйста, оставьте ваши мнения по текущей теме статьи. За комментарии, отклики, подписки, лайки, дизлайки низкий вам поклон!

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

Примечание от переводившего
Большая просьба снисходительно отнестись к замеченным ошибкам и сообщить о них.
Спасибо.

1. Найдите узкие места производительности

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

Например, в «Инструментах разработчика» браузера Firefox Вы можете узнать размер и время загрузки всех CSS-файлов, загружаемых на Вашей странице, используя закладку «Network». Вы также можете проверить, насколько быстро Ваши CSS-файлы загружаются с использованием или без использования кэширования. Поскольку здесь показываются внешние CSS, такие как файлы шрифтов Google Fonts и CSS-файлы, загруженные из сторонних CDN-серверов, Вы можете найти много источников, о которых даже не знали ранее

Pingdom Tools и Lighthouse от Google — еще два бесплатных инструмента, которые разработчики часто используют для анализа скорости сайта и производительности интерфейса. Pingdom Tools, например, даёт Вам несколько полезных советов по оптимизации CSS, при запуске простого теста скорости вебсайта.

2. Минифицируйте и сжимайте CSS-файлы

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

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

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

3. Используйте Flexbox и CSS Grid

Если при написании CSS Вы всё еще полагаетесь исключительно на традиционную блочную модель и выравниваете элементы на странице, используя margin, padding и float, Вам следует рассмотреть переход на более современные методы, именуемые Flexbox и CSS Grid. Они позволят Вам реализовывать сложные макеты гораздо меньшим количеством кода.

Используя старые подходы, Вам придется использовать много трюков и ухищрений даже для таких простых вещей, как центрирование элементов по вертикали. Однако, это не относится к Flexbox и CSS Grid. Хотя освоение новых подходов может занять некоторое время, оно стоит того, поскольку размер Ваших CSS-файлов будет намного меньше. Это особенно актуально для Flexbox, который на данный момент имеет очень хорошую поддержку браузерами (98.3% глобально).

Хотя CSS Grid поддерживается браузерами не так хорошо (92.03% глобально), уже можно использовать этот подход, если Вы не должны обеспечивать поддержку старых браузеров или готовы реализовать фолбек.

4. Используйте тег <link> вместо правила @import

Существует два основных метода загрузки CSS-файлов на веб-страницу:

добавить в раздел <head> HTML-страницы, используя тег <link>
импортировать из других таблиц стилей, используя CSS-объявление @import

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

5. Используйте градиенты и SVG вместо изображений

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

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

Следующее правило, например, создаёт красивый градиентный фон, который загружается намного быстрее, чем любые изображения:

Для более сложных градиентов и текстур, Вы также можете использовать генераторы, такие как CSSmatic (на изображении ниже) и ColorZilla

Помимо градиентов, традиционные JPG и PNG изображения Вы также можете можете заменить масштабируемой векторной графикой (SVG). Она не только быстрее загружается, но также Вам требуется загрузить лишь одну версию изображения. Это обусловлено тем, что SVG-изображение может масштабироваться до любых размеров без потери качества в связи с его векторной природой. Кроме того, Вы также можете стилизовать SVG с помощью CSS, как обычный HTML-файл.

6. Избегайте правила !important

Хотя правило !important может быть настоящей находкой в определенных ситуациях, его следует использовать только в крайнем случае. Это правило создаёт исключение из каскада. То есть, когда Вы добавляете !important в CSS-объявление, оно переопределяет любые другие объявления, даже те, которые имеют большую специфичность. Вот как выглядит его синтаксис:

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

7. Рефакторинг CSS

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

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

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

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

Подводя итоги

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

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

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

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

Как оптимизировать CSS и уменьшить размер файла

Какие мероприятия можно провести при оптимизации CSS:

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

Оптимизация CSS с помощью онлайн сервисов

Существует достаточное количество онлайн инструментов (CleanCSS, Online CSS Optimizer и т.д.), способных выполнить оптимизацию CSS. Они мало чем отличаются друг от друга, зачастую используют одни и те же алгоритмы и библиотеки сжатия, например YUICompressor или CSSTidy.

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

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

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

Результаты выводятся ниже с указанием исходного и оптимизированного размера кода, а также коэффициент сжатия в процентном соотношении:

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

Когда браузер находит в документе ссылку на CSS-файл, он приостанавливает процесс визуализации и начинает формировать модель CSSOM. Чтобы ускорить процесс, упрощайте CSS и используйте медиазапросы. Также убедитесь, что браузер может быстро скачать CSS-файлы.

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

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

"Нью-Йорк таймс" с CSS

"Нью-Йорк таймс" без CSS

На иллюстрации изображен сайт газеты Нью-Йорк таймс с CSS и без (эффект на скриншоте справа часто называют появлением нестилизованного контента ). Как видно, пользоваться страницей без CSS почти невозможно. Чтобы избежать такой ситуации, браузер обрабатывает CSS-файл сразу же, как только находит его в HTML-документе. В результате страница выводится на экран только после того, как браузер создаст обе модели: и DOM, и CSSOM.

Обработка CSS задерживает вывод страницы на экран! Ускорьте процесс визуализации, предоставив браузеру быстрый доступ к CSS-файлу.

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

Для этого добавьте в код медиазапрос:

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

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

Давайте разберем следующий пример:

Первый CSS-файл заблокирует вывод страницы, так как его необходимо обработать.
Несмотря на медиазапрос, CSS-файл во второй строке также заблокирует вывод страницы. Дело в типе устройства all - браузер присваивает это значение по умолчанию всем CSS-файлам без медиазапроса. Поэтому вторая ссылка в примере эквивалентна первой.
Третья ссылка содержит медиазапрос с условием, которое будет проверено при загрузке страницы. При портретной ориентации устройства браузер заблокирует вывод страницы и начнет обработку CSS; при альбомной ориентации браузер продолжит создание DOM.
Четвертый CSS-файл используется только для печати, поэтому браузер не будет блокировать вывод страницы.

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

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