Комментарии 22
Большинство из этих советов в настоящее время не слишком актуальны. Браузеры сейчас сами хорошо оптимизируют обработку css и отображение страницы.
Как минимум о производительности селекторов сейчас точно практически нет смысла парится.
Хотя минификация и склеивание, конечно всегда пригодятся. Особенно это касается склеивания, так как время на обработку лишнего запроса к серверу, может сильнее влиять на время отображения страницы, чем загрузка десяятка другого лишних килобайт
Как минимум о производительности селекторов сейчас точно практически нет смысла парится.
Хотя минификация и склеивание, конечно всегда пригодятся. Особенно это касается склеивания, так как время на обработку лишнего запроса к серверу, может сильнее влиять на время отображения страницы, чем загрузка десяятка другого лишних килобайт
Не слишком актуален лишь совет о производительности селекторов, да.
Он немного оторван от реальности, однако он вполне применим на крупных хайлоад-проектах. И да, лишним этот совет точно не будет — разработчики должны знать об этом, пусть и не применяя на практике до поры до времени.
Он немного оторван от реальности, однако он вполне применим на крупных хайлоад-проектах. И да, лишним этот совет точно не будет — разработчики должны знать об этом, пусть и не применяя на практике до поры до времени.
Каскад сейчас тоже слабо влияет на время обработки css. Хотя знать как он работает в общих чертах, конечно, все равно полезно.
Но большого выигрыша в производительности его оптимизация не даст. Полезнее следить за тем чтобы не раздувать файл стилей и не применять и перезаписывать одни и те же стили несколько раз. Для этого может оказаться полезным, например, такое расширение для хрома как css dig
Но большого выигрыша в производительности его оптимизация не даст. Полезнее следить за тем чтобы не раздувать файл стилей и не применять и перезаписывать одни и те же стили несколько раз. Для этого может оказаться полезным, например, такое расширение для хрома как css dig
Вот свежее исследование на эту тему benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
Вкратце, не стоит над этим заморачиваться.
Вкратце, не стоит над этим заморачиваться.
Посмотрите эту статью.
Сейчас это не актуально, гараздо больше влияют кучи лишних стилей.
benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
Вы упомянули про отключение hover-состояний, но при этом не указали зачем это нужно делать. В действительности же, дело не в «интересе пользователя», а в том, что это может серьезно повлиять на процесс отрисовки страницы в момент скролла.
На Хабре была статья на эту тему, она хорошо раскрывает описанный вами метод.
На Хабре была статья на эту тему, она хорошо раскрывает описанный вами метод.
Поддерживаю.
Кстати, статья похожа на рерайт вот этой статьи: http://frontender.info/pointer-events-60fps/
Кстати, статья похожа на рерайт вот этой статьи: http://frontender.info/pointer-events-60fps/
Или на перевод вот этой: http://www.thecssninja.com/javascript/pointer-events-60fps
Кстати, есть мнение, что такие мелочи браузеры должны бы тоже уже уметь оптимизировать сами…
Кстати, есть мнение, что такие мелочи браузеры должны бы тоже уже уметь оптимизировать сами…
была придумана техника, позволяющая отобразить часть контента ещё до полной загрузки стилей. Применяется она следующим образом. Посмотрите на десктопную и мобильную версию сайта и определите, какие части страницы критически важны для пользователя. Выберите CSS, который стилизует эти части, минифицируйте его и разместите в инлайновом виде перед подключением основных стилей.
Что-то я не понял в этом месте, объясните пожалуйста. Если я часть стилей размещу в самом HTML, до подключения основных стилей в разделе , то как это поможет отобразить часть контента до их загрузки, ведь, как только браузер встретит линк на внешний стиль, рендеринг страницы остановится до полной загрузки стилей и никакой части контента пользователь все равно не увидит, так?
Имеется ввиду следующее: прописываете основные стили в тег style и размещаете его внутри тега head каждой страницы. А ссылку на основной css-файл ставите уже в теге body. При таком раскладе браузер будет загружать css-файл параллельно с другими элементами страницы. Негативный момент только один — подергивание страницы после загрузки css. Лично мне это не нравится чисто психологически, поэтому я по старинке ставлю ссылку на css-файл в head.
Ага, только вот для тега link расположение внутри body запрещено стандартом HTML )
Да, но сам гугл рекомендует вставлять не то что в , а даже после …
Хотя, не думаю, что гугл интересуется валидностью своих сайтов — они же их и ранжируют.
Хотя, не думаю, что гугл интересуется валидностью своих сайтов — они же их и ранжируют.
Не представляю, каким образом можно ссылку на CSS-файл поместить внутри body. Обычно в самом верху страницы помещают инлайновые стили, а затем уже подключают внешние файлы.
«В самом верху страницы» — это где именно? Если вы перечисляете в особом порядке css-файлы, размещая их в head, то это все равно ничего не даст, т.к. все, что в head, блокирует отображение страницы вне зависимости от порядка следования. Чтобы этого избежать, ссылку на css нужно ставить вне тега 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");
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Оптимизируем производительность веб-страницы: CSS