Как стать автором
Обновить

Комментарии 22

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

Хотя минификация и склеивание, конечно всегда пригодятся. Особенно это касается склеивания, так как время на обработку лишнего запроса к серверу, может сильнее влиять на время отображения страницы, чем загрузка десяятка другого лишних килобайт
Не слишком актуален лишь совет о производительности селекторов, да.
Он немного оторван от реальности, однако он вполне применим на крупных хайлоад-проектах. И да, лишним этот совет точно не будет — разработчики должны знать об этом, пусть и не применяя на практике до поры до времени.
Каскад сейчас тоже слабо влияет на время обработки css. Хотя знать как он работает в общих чертах, конечно, все равно полезно.
Но большого выигрыша в производительности его оптимизация не даст. Полезнее следить за тем чтобы не раздувать файл стилей и не применять и перезаписывать одни и те же стили несколько раз. Для этого может оказаться полезным, например, такое расширение для хрома как css dig
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Вот еще неплохая статья в тему. Лишний раз удобство Grunt'а демонстрируется.
Вы упомянули про отключение hover-состояний, но при этом не указали зачем это нужно делать. В действительности же, дело не в «интересе пользователя», а в том, что это может серьезно повлиять на процесс отрисовки страницы в момент скролла.

На Хабре была статья на эту тему, она хорошо раскрывает описанный вами метод.
Или на перевод вот этой: http://www.thecssninja.com/javascript/pointer-events-60fps

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

Что-то я не понял в этом месте, объясните пожалуйста. Если я часть стилей размещу в самом HTML, до подключения основных стилей в разделе , то как это поможет отобразить часть контента до их загрузки, ведь, как только браузер встретит линк на внешний стиль, рендеринг страницы остановится до полной загрузки стилей и никакой части контента пользователь все равно не увидит, так?
Имеется ввиду следующее: прописываете основные стили в тег style и размещаете его внутри тега head каждой страницы. А ссылку на основной css-файл ставите уже в теге body. При таком раскладе браузер будет загружать css-файл параллельно с другими элементами страницы. Негативный момент только один — подергивание страницы после загрузки css. Лично мне это не нравится чисто психологически, поэтому я по старинке ставлю ссылку на css-файл в head.
Ага, только вот для тега link расположение внутри body запрещено стандартом HTML )
Да, но сам гугл рекомендует вставлять не то что в , а даже после …
Хотя, не думаю, что гугл интересуется валидностью своих сайтов — они же их и ранжируют.
Не представляю, каким образом можно ссылку на CSS-файл поместить внутри body. Обычно в самом верху страницы помещают инлайновые стили, а затем уже подключают внешние файлы.
«В самом верху страницы» — это где именно? Если вы перечисляете в особом порядке css-файлы, размещая их в head, то это все равно ничего не даст, т.к. все, что в head, блокирует отображение страницы вне зависимости от порядка следования. Чтобы этого избежать, ссылку на css нужно ставить вне тега head.

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

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


Интересно было бы услышать вебмастеров, которые смогли решить проблему данным советом.
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");
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории