20 советов по оптимизации производительности CSS


Оглавление (нажмите, чтобы открыть):

CSS оптимизация — делаем загрузку сайтов более быстрой

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

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

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

И вот тут на помощь приходят простые и удобные в использовании он-лайн сервисы – CSS-оптимизаторы.

Путем поиска в Гугле нашлось несколько подобных инструментов, готовых помочь разрешить поставленную задачу (все сервисы буржуйские):

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

Многие пользователи широкополосного Интернета не увидят в этом смысла, поскольку большинство сайтов у них открывается быстро. Но представьте себе: если каждый сайт станет загружаться хотя бы на 10% быстрее, то сколько времени Вы сохраните за неделю, месяц? А за год? При этом стоит учитывать и факт экономии трафика. Она тоже может стать впечатляющей. Ведь (перефразирую известную пословицу) килобайт мегабайт бережет ;).

Что тестировалось

Для тестирования результатов оптимизации я использовал файлы CSS следующий сайтов:

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

Результаты тестирования

Сервис / После оптимизации / Уменьшение, % / Комментарии

Первым тестился Хабрахабр с его 40.69 килобайтовым CSS.

  • CSS Optimizer / 23.25 KB / 42.86% / Уменьшилась высота строк, потеряли жирность некоторые заголовки, уменьшился шрифт некоторых ссылок. В принципе, даже эти недочеты не мешают удобству просмотра страницы, поскольку изменения касаются второстепенных элементов.
  • Clean CSS / 29.13 KB / 30.1% / Никаких изменений не произошло.
  • CSS Compressor / 21.69 KB / 46.7% / Также никаких изменений.

Следующими идут «Новости 2.0». Размер CSS – 18.15 KB.

  • CSS Optimizer / 10.46 KB / 42.34% / Практически никаких изменений не произошло, кроме незначительного увеличения шрифта в двух строках. В целом на юзабилити это никак не отразилось.
  • Clean CSS / 11.40 KB / 38.7% / Все осталось на месте.
  • CSS Compressor / 8.94 KB / 50.74% / Увеличились отступы, потеряли центровку некоторые элементы, испортились стили для некоторых типов ссылок.

Теперь тестим iXBT.com. Размер CSS – 15.47 KB.

  • CSS Optimizer / 11.60 KB / 25.06% / Правая колонка уплывает вниз, что однозначно сказывается на юзабилити.
  • Clean CSS / 11.74 KB / 24.4% / Совсем незначительное изменение отступов в некоторых местах.
  • CSS Compressor / 7.32 KB / 51.75% / Полнейшее искажение внешнего вида страницы. Ее просто не узнать.

Последним в тест попадает CSS моего блога. Его размер – 12.02 KB.

  • CSS Optimizer / 7.60 KB / 36.75% / Исчезает белый фон, изменяются отступы некоторых элементов и высота строк.
  • Clean CSS / 9.65 KB / 24.5% / Все на своих местах.
  • CSS Compressor / 4.74 kB / 60.54% / Полностью теряется форматирование страницы. «Ни в какие ворота не лезет».

Делаем выводы

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

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

Пользоваться остальными двумя вариантами – CSS Optimizer и CSS Compressor – стоит только в конкретном случае, «примерив» на сайте корректность работы оптимизированного стилевого файла.

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

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

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

20 советов по оптимизации производительности CSS

как вы наверное поняли, это требование с google insights.
в общем эксперимент, пытаюсь довести показатель до 100% и посмотреть как отреагирует ранжирование.

одно из оставшихся требований — Оптимизируйте работу CSS на следующих ресурсах: и тут 2 файла ксс.
пытался прочитать подробности с моим английским, судя по всему — хочет чтобы я его вообще вписал напрямую в страницу,
по типу
https://developers.google.com/speed/. izeCSSDelivery
вот тут подробности.

но ксс довольно огромный, что как то странно.
что скажете?

Как упороться по оптимизации скорости загрузки страниц

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

Небольшое объявление. В ноябре 2020 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

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

Статья поделена на несколько блоков для удобной группировки задач по оптимизации. Также постарался распределить их по сложности исполнения (хаха, нет).

Содержание:

Оптимизация изображений

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

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

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

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

Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

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

Объём, или же размер изображения

Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ


Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

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

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

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

Следует отметить, что использование base64 подходит только для совсем маленьких элементов — иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

Подробнее о цели этой доработки можно прочитать в блоке «Оптимизация количества серверных реквестов».

Оптимизация CSS

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

Для оптимизации CSS следует придерживаться нескольких техник:

Загрузка только нужных CSS

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

Для оптимизации этого сайта я воспользовался инструментом unused-css.com.
Суть его работы заключается в исследовании сайта и используемых CSS правил. Если инструмент находит правила, которые не используются на страницах, то он их удаляет. В конечном итоге можно получить из огромного файла список только необходимых сайту стилей:

Используемый мной файл стал на 72% процента «легче» после того как инструмент удалил 78% правил CSS.

Малые CSS лучше включить сразу в HTML-код

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

Использование только файлов CSS и тега

Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги в связке с атрибутами class. Пример некорректного использования:

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

Минификация файлов CSS

Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

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

Оптимизация JS

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

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

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

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

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

Встраивание JS скриптов в HTML-код

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

Оптимизация загрузки CSS

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

Объединяйте скрипты CSS

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

Сжимайте новые скрипты CSS

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

Повысьте приоритет стилей для первоочередного контента

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

  • Сначала определите, является ли ваш новый объединенный скрипт CSS большим или маленьким по размеру. Если скрипт маленький, то вставьте его в тег head страницы. Как правило, загружать в отложенном режиме скрипты CSS небольшого размера не имеет смысла, так как вы не получите от этого никакой выгоды.
  • Извлеките критически важный CSS код. Обычно, это те стили, которые важны для корректного отображения первоочередного контента. Хороший способ сделать это – использовать пакет Node.js от Addy Osmani, который может выполнить эту задачу в автоматическом режиме. Этот метод требует доступа по SSH, поэтому он подойдет не для всех. Другие варианты – это использовать один из онлайн-генераторов CSS или просто сделать это вручную.
  • Теперь, когда у вас есть критически важный для рендеринга код CSS, поместите его в HTML тег head. Остальные стили загрузите в отложенном режиме внизу страницы.

Старайтесь не использовать CSS директиву @import

Директива @import позволяет импортировать внешние CSS файлы в код CSS скрипта. Это плохо для скорости загрузки веб-страницы, так как директива @import загружает каждый внешний файл по отдельности, а не параллельно с другими файлами, необходимыми для рендеринга конкретной страницы. Это также создает ненужные HTTP-запросы.

Старайтесь не использовать атрибут STYLE в HTML тегах

Следует убрать весь CSS, который используется в теле HTML (например:

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

Оптимизируем производительность веб-страницы: CSS


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

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

Как страница выводится на экран

Давайте разберёмся в том, что происходит при открытии новой страницы.

Итак, вы нажимаете enter и браузер посылает запрос на сервер. В ответ сервер посылает запрашиваемую страницу.

  1. Браузер выполняет анализ полученной разметки. Формируются узлы (nodes), из которых затем строится DOM.
  2. Если браузер обнаруживает ссылки на таблицы стилей, он немедленно отправляет запрос на сервер и загружает файлы; при этом отрисовка страницы блокируется.
  3. Загрузив стили, браузер их анализирует и строит CSSOM.
  4. Когда DOM и CSSOM сформированы, браузер создаёт на их основе модель визуализации (rendering tree). В неё попадают только те элементы, которые будут выведены на экран.
  5. Для каждого элемента из модели визуализации рассчитывается его положение на странице. Этот процесс называется формированием макета.
  6. После окончания формирования макета браузер отрисовывает полученный результат (painting).

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

Для начала повторюсь: браузер блокирует отрисовку страницы во время загрузки и обработки таблиц стилей. Если на страницу подключено несколько css-файлов, то браузер загрузит все, независимо от медиазапросов. К счастью, современные браузеры достаточно умны, чтобы в первую очередь загружать те файлы, которые непосредственно требуются для отрисовки основной части страницы. Давайте рассмотрим следующий пример:

У ссылки на первый файл таблицы стилей нет никаких атрибутов, и браузер начнёт загрузку файла сразу же после обнаружения ссылки на него. У ссылки на второй файл указан атрибут media=»screen» . Этот атрибут браузер присваивает элементу
по умолчанию, если он отсутствует, так что второй файл будет обработан сразу же после первого. В ссылках на третий и четвёртый файлы содержится условный media-запрос. Если это условие выполняется, браузер начнёт обработку файла. Если оно не выполняется, то браузер отложит эти файлы «на потом», и сперва обработает более актуальные стили. В четвёртой ссылке в атрибуте media стоит значение «print», указывающее браузеру на то, что этот файл содержит стили для печати. Так как в данный момент браузеру они не требуются, он также отложит их обработку.

Методы оптимизации

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

Использование высокопроизводительных селекторов

Не стоит забывать, что разные селекторы обрабатываются браузером с разной скоростью. Стив Саудерс в своё время проводил исследование и рассортировал CSS-селекторы по производительности — от наиболее быстрых до медленных:

  • Идентификатор: #id
  • Класс: .class
  • Элемент: div
  • Соседний элемент: h2 + p
  • Дочерний элемент: li > ul
  • Вложенный элемент: ul li
  • Общий селектор: *
  • Атрибут: [type=«email»]
  • Псевдоклассы/псевдоэлементы: a:hover

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

Уменьшение каскада

Большой каскад пагубно влияет на производительность. Сравним две конструкции:

Очевидно, что вторая конструкция будет обработана быстрее.

Не могу не упомянуть один важный момент. Браузер обрабатывает селекторы справа налево. Рассмотрим следующую конструкцию:

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

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

Минификация и склеивание CSS

Избегайте использования множества мелких CSS-файлов; хорошей практикой является «склеивание» всех файлов. Благодаря склейке файлов браузеру придётся делать один запрос к серверу вместо нескольких.

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

  • Сервис CSS Shrink — этим сервисом я пользуюсь постоянно.
  • Сервис CSS Compressor — по сравнению с предыдущим даёт бо̀льшие возможности для настройки.
  • Плагин для Gulp — CSSO
  • Плагин для Grunt — contrib-cssmin

Отключение :hover-состояний при прокрутке страницы

Некоторые сайты изобилуют интерактивными элементами, которые имеют уникальные :hover-состояния. Когда пользователь прокручивает страницу, его вряд ли интересует, что произойдёт, если навести курсор вон на ту кнопочку или на это поле ввода. Можно смело отключать :hover-состояния при прокрутке.

Простое решение — создать класс .disable-hover и добавлять его к во время прокрутки.

Critical-path CSS

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

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

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

Заключение

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

Как сильно влияет каскадность css на производительность? И как бороться с этим?

Привет. Делаю большой проект с 10-ками css файлов для каждой отдельной категории сайта. Использую SASS с синтексом scss.
Есть много гайдов и видеоуроков по препроцессорам, все говорят что они увеличивают скорость работы при вёрстке (это действительно так) и т.д., но при всех своих плюсах, препроцессоры же за собой тянут портянку из селекторов и на этой почве у меня возник вопрос: как влияет вложенность в скомпилированном для публикации CSS на скорость рендера и на производительность сайта?

Вот 3 примера подскажите какой из них более предпочтительнее использовать и взять это за правило или же покажите ПРАВИЛЬНЫЙ ВАРИАНТ

  • Вопрос задан более трёх лет назад
  • 1029 просмотров

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

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

Никакой каскадности (размер выходного css сведен к минимуму), потери производительности при выборке также минимизированы.

Оптимизация. Ускорение сайта

Когда воспользовалась сервисом PageSpeed Insights, обнаружила, что требуется:

Исправьте обязательно: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

Количество блокирующих скриптов на странице: 3.
Количество блокирующих ресурсов CSS на странице: 5.
Удалите код JavaScript, препятствующий отображению:

Оптимизируйте работу CSS на следующих ресурсах:


Вот это «Удалите код. » не очень понятно. Я удалила эти три файла, но пришлось вернуть обратно, т.к. шапка сайта не загружалась.

Объясните чайнику, как склеить css в один файл и минизировать (сжать, как я понимаю).

На хостинге, в разделе «Настройки оптимизации сайта» есть опции «Объединить файлы style.css в один файл». Это то, что нужно сделать? А каким образом его сжать?

Ещё я не знаю, как выполнить пункт «Оптимизируйте работу CSS».

Прошу объясните или дайте ссылку на вменяемую статью для начинающих.

21 способ оптимизировать ваш CSS и ускорить ваш сайт

Если код ничего не делает, избавьтесь от него

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

03. Делайте это более удобным способом

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

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

04. Помните о проблемах

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

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

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

06. Разрешить антипараллельный анализ

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

07. Замена изображений на CSS

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

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

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

09. Устраните ненужные нули и единицы измерения

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

10. Устранить лишние точки с запятой

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

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

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

12. Преследуйте px

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

13. Избегайте дорогих свойств

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

14. Удаление пробелов

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

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

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

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

17. Запустите его из NPM

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

18. Keep Sass et al. в проверке

Sass может стать излишне сложным, поэтому оптимизируйте его, если можете

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

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

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

20. Разрушьте кеш

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

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

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

Как оптимизировать CSS?

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

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

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

Во-первых, обязательно используйте обобщённые свойства. Вы можете сэкономить несколько строчек, если вместо margin-bottom, margin-left, margin-right и margin-top будете использовать один margin со значениями четырёх предыдущих, например: body < margin: 10px 2px 10px 5px; >.

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

Никто не сомневается в важности комментариев. Устранив их полностью, вам будет сложнее найти нужную часть кода без плагина Firebug. Но не стоит забывать, что львиную долю содержимого файла style.css занимают именно они. Для того, чтобы исправить это недоразумение, рекомендуется использовать более краткие описания. К примеру, вместо ///* длинного лирического отступления */// можно использовать запоминающееся /* Logo */.

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


Как упороться по оптимизации скорости загрузки страниц

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

Небольшое объявление. В ноябре 2020 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

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

Статья поделена на несколько блоков для удобной группировки задач по оптимизации. Также постарался распределить их по сложности исполнения (хаха, нет).

Содержание:

Оптимизация изображений

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

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

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

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

Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

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

Объём, или же размер изображения

Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

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

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

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

Следует отметить, что использование base64 подходит только для совсем маленьких элементов — иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

Подробнее о цели этой доработки можно прочитать в блоке «Оптимизация количества серверных реквестов».

Оптимизация CSS

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

Для оптимизации CSS следует придерживаться нескольких техник:

Загрузка только нужных CSS

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

Для оптимизации этого сайта я воспользовался инструментом unused-css.com.
Суть его работы заключается в исследовании сайта и используемых CSS правил. Если инструмент находит правила, которые не используются на страницах, то он их удаляет. В конечном итоге можно получить из огромного файла список только необходимых сайту стилей:

Используемый мной файл стал на 72% процента «легче» после того как инструмент удалил 78% правил CSS.

Малые CSS лучше включить сразу в HTML-код

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

Использование только файлов CSS и тега

Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги в связке с атрибутами class. Пример некорректного использования:

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

Минификация файлов CSS

Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

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

Оптимизация JS

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

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

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

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

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

Встраивание JS скриптов в HTML-код

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

Мастер Йода рекомендует:  XML время пришло
Добавить комментарий