Ускоряем работу сайта за счёт оптимизации CSS

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

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

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

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

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

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

Используйте GZIP для сжатия данных. Почти все современные браузеры могут обрабатывать сжатые в GZIP стили CSS. Оптимальный способ — предварительное сжатие используемых CSS‑файлов на максимальном (девятом) уровне компрессии и последующая отдача веб‑сервером уже сжатых файлов. Сжатие «на лету» вызывает нагрузку на процессор сервера, поэтому его на нагруженных проектах не стоит использовать.

Кэшируйте CSS на стороне клиента — не заставляйте пользователей многократно скачивать один и тот же файл: задайте соответствующие заголовки в ответе веб‑сервера (Expires или Cache-Control max-age + Last-Modified или ETag).

Сократите каскады в CSS — на «слабых» устройствах быстрее отрисовываются страницы, где для определения стиля элемента не требуется обработка многократно вложенных правил.

быстродействиефронтендCSSвеб-разработка
Статья опубликована в 2014 году

Тематические статьи

Браузерное или клиентское кеширование

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

быстродействие
фронтенд
веб-разработка
Статья опубликована в 2014 году

Ajax-навигация Turboliks & Wiselinks

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

быстродействие
фронтенд
JavaScript
веб-разработка
Статья опубликована в 2014 году

Чек-лист проверки фронтенда

По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.

фронтенд
HTML
CSS
JavaScript
веб-разработка
Статья опубликована в 2014 году

Ленивая загрузка или загрузка по требованию на клиентской части

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

веб-разработка
фронтенд
быстродействие
JavaScript
Статья опубликована в 2014 году

Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript.

Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтэнд‑разработке никаких других языков не используется.

фронтенд
JavaScript
CSS
HTML
веб-разработка
Статья опубликована в 2014 году

Адаптивные изображения

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

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

дизайн
UX / UI
фронтенд
CSS
веб-разработка
адаптивный веб-дизайн
Статья опубликована в 2019 году

БЭМ и независимые блоки

Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.

веб-разработка
фронтенд
HTML
CSS
методологии разработки
Статья опубликована в 2014 году

Ускоряем работу сайта: оптимизация HTML

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

HTML
быстродействие
фронтенд
веб-разработка
Статья опубликована в 2014 году

Адаптивный и отзывчивый дизайн

Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн.

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

фронтенд
веб-разработка
мобильные устройства
HTML
CSS
адаптивный веб-дизайн
дизайн
Статья опубликована в 2019 году