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

[DuDDiTs]

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

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

[andrew-r]

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

[DuDDiTs]

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

[ImKremen]

Вот свежее исследование на эту тему benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Вкратце, не стоит над этим заморачиваться.

[andrew-r]

Посмотрите эту статью.

[bolk]

speedupyourwebsite.ru/books/speed-up-your-website/
speedupyourwebsite.ru/books/reactive-websites/

[Alexufo]

Сейчас это не актуально, гараздо больше влияют кучи лишних стилей.
benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

[McClay]

Вот еще неплохая статья в тему. Лишний раз удобство Grunt'а демонстрируется.

[NikitaKA]

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

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

[andrew-r]

Поддерживаю.

Кстати, статья похожа на рерайт вот этой статьи: http://frontender.info/pointer-events-60fps/

[NikitaKA]

Или на перевод вот этой: http://www.thecssninja.com/javascript/pointer-events-60fps

Кстати, есть мнение, что такие мелочи браузеры должны бы тоже уже уметь оптимизировать сами…

[andrew-r]

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

[renskiy]

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

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

[Flex25]

Имеется ввиду следующее: прописываете основные стили в тег style и размещаете его внутри тега head каждой страницы. А ссылку на основной css-файл ставите уже в теге body. При таком раскладе браузер будет загружать css-файл параллельно с другими элементами страницы. Негативный момент только один — подергивание страницы после загрузки css. Лично мне это не нравится чисто психологически, поэтому я по старинке ставлю ссылку на css-файл в head.

[lleo_aha]

Ага, только вот для тега link расположение внутри body запрещено стандартом HTML )

[everyonesdesign]

Да, но сам гугл рекомендует вставлять не то что в , а даже после …
Хотя, не думаю, что гугл интересуется валидностью своих сайтов — они же их и ранжируют.

[andrew-r]

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

[Flex25]

«В самом верху страницы» — это где именно? Если вы перечисляете в особом порядке css-файлы, размещая их в head, то это все равно ничего не даст, т.к. все, что в head, блокирует отображение страницы вне зависимости от порядка следования. Чтобы этого избежать, ссылку на css нужно ставить вне тега head.

К стати, я не очень понял ту критику, которая на меня свалилась. Как я написал выше, сам я так предпочитаю не делать. Но Гугл советует выносить ссылки на css-файлы из head. Хотя с другой стороны интересно, что на многих Гугловских сайтах эта рекомендация не выполняется.

[maxsite]

В гугловском PageSpeed Insights можно получить практические советы по ускорению сайта. Касаемо css-стилей, приводится совет подключать css-файл после закрывающего «/html».

Оригинальный файл small.css загружается после загрузки страницы. Порядок применения правил CSS определяется путем внедрения всех элементов style и link в документ с помощью JavaScript.

Интересно было бы услышать вебмастеров, которые смогли решить проблему данным советом.

[ollejah]

function loadCSS(e, t, n) {
    "use strict";
    var r = window.document.createElement("link");
    var i = t || window.document.getElementsByTagName("script")[0];
    r.rel = "stylesheet";
    r.href = e;
    r.media = "only x";
    i.parentNode.insertBefore(r, i);
    setTimeout(function() {
        r.media = n || "all"
    });
    return r
}
loadCSS("style.css");