Comments 22
Большинство из этих советов в настоящее время не слишком актуальны. Браузеры сейчас сами хорошо оптимизируют обработку css и отображение страницы.
Как минимум о производительности селекторов сейчас точно практически нет смысла парится.
Хотя минификация и склеивание, конечно всегда пригодятся. Особенно это касается склеивания, так как время на обработку лишнего запроса к серверу, может сильнее влиять на время отображения страницы, чем загрузка десяятка другого лишних килобайт
Как минимум о производительности селекторов сейчас точно практически нет смысла парится.
Хотя минификация и склеивание, конечно всегда пригодятся. Особенно это касается склеивания, так как время на обработку лишнего запроса к серверу, может сильнее влиять на время отображения страницы, чем загрузка десяятка другого лишних килобайт
+5
Не слишком актуален лишь совет о производительности селекторов, да.
Он немного оторван от реальности, однако он вполне применим на крупных хайлоад-проектах. И да, лишним этот совет точно не будет — разработчики должны знать об этом, пусть и не применяя на практике до поры до времени.
Он немного оторван от реальности, однако он вполне применим на крупных хайлоад-проектах. И да, лишним этот совет точно не будет — разработчики должны знать об этом, пусть и не применяя на практике до поры до времени.
+2
Каскад сейчас тоже слабо влияет на время обработки css. Хотя знать как он работает в общих чертах, конечно, все равно полезно.
Но большого выигрыша в производительности его оптимизация не даст. Полезнее следить за тем чтобы не раздувать файл стилей и не применять и перезаписывать одни и те же стили несколько раз. Для этого может оказаться полезным, например, такое расширение для хрома как css dig
Но большого выигрыша в производительности его оптимизация не даст. Полезнее следить за тем чтобы не раздувать файл стилей и не применять и перезаписывать одни и те же стили несколько раз. Для этого может оказаться полезным, например, такое расширение для хрома как css dig
+3
Вот свежее исследование на эту тему benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
Вкратце, не стоит над этим заморачиваться.
Вкратце, не стоит над этим заморачиваться.
+1
UFO just landed and posted this here
Посмотрите эту статью.
+1
Сейчас это не актуально, гараздо больше влияют кучи лишних стилей.
benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
0
Вы упомянули про отключение hover-состояний, но при этом не указали зачем это нужно делать. В действительности же, дело не в «интересе пользователя», а в том, что это может серьезно повлиять на процесс отрисовки страницы в момент скролла.
На Хабре была статья на эту тему, она хорошо раскрывает описанный вами метод.
На Хабре была статья на эту тему, она хорошо раскрывает описанный вами метод.
+1
Поддерживаю.
Кстати, статья похожа на рерайт вот этой статьи: http://frontender.info/pointer-events-60fps/
Кстати, статья похожа на рерайт вот этой статьи: http://frontender.info/pointer-events-60fps/
0
Или на перевод вот этой: http://www.thecssninja.com/javascript/pointer-events-60fps
Кстати, есть мнение, что такие мелочи браузеры должны бы тоже уже уметь оптимизировать сами…
Кстати, есть мнение, что такие мелочи браузеры должны бы тоже уже уметь оптимизировать сами…
0
была придумана техника, позволяющая отобразить часть контента ещё до полной загрузки стилей. Применяется она следующим образом. Посмотрите на десктопную и мобильную версию сайта и определите, какие части страницы критически важны для пользователя. Выберите CSS, который стилизует эти части, минифицируйте его и разместите в инлайновом виде перед подключением основных стилей.
Что-то я не понял в этом месте, объясните пожалуйста. Если я часть стилей размещу в самом HTML, до подключения основных стилей в разделе , то как это поможет отобразить часть контента до их загрузки, ведь, как только браузер встретит линк на внешний стиль, рендеринг страницы остановится до полной загрузки стилей и никакой части контента пользователь все равно не увидит, так?
0
Имеется ввиду следующее: прописываете основные стили в тег style и размещаете его внутри тега head каждой страницы. А ссылку на основной css-файл ставите уже в теге body. При таком раскладе браузер будет загружать css-файл параллельно с другими элементами страницы. Негативный момент только один — подергивание страницы после загрузки css. Лично мне это не нравится чисто психологически, поэтому я по старинке ставлю ссылку на css-файл в head.
-1
Ага, только вот для тега link расположение внутри body запрещено стандартом HTML )
+3
Да, но сам гугл рекомендует вставлять не то что в , а даже после …
Хотя, не думаю, что гугл интересуется валидностью своих сайтов — они же их и ранжируют.
Хотя, не думаю, что гугл интересуется валидностью своих сайтов — они же их и ранжируют.
0
Не представляю, каким образом можно ссылку на CSS-файл поместить внутри body. Обычно в самом верху страницы помещают инлайновые стили, а затем уже подключают внешние файлы.
0
«В самом верху страницы» — это где именно? Если вы перечисляете в особом порядке css-файлы, размещая их в head, то это все равно ничего не даст, т.к. все, что в head, блокирует отображение страницы вне зависимости от порядка следования. Чтобы этого избежать, ссылку на css нужно ставить вне тега head.
К стати, я не очень понял ту критику, которая на меня свалилась. Как я написал выше, сам я так предпочитаю не делать. Но Гугл советует выносить ссылки на css-файлы из head. Хотя с другой стороны интересно, что на многих Гугловских сайтах эта рекомендация не выполняется.
К стати, я не очень понял ту критику, которая на меня свалилась. Как я написал выше, сам я так предпочитаю не делать. Но Гугл советует выносить ссылки на css-файлы из head. Хотя с другой стороны интересно, что на многих Гугловских сайтах эта рекомендация не выполняется.
0
В гугловском PageSpeed Insights можно получить практические советы по ускорению сайта. Касаемо css-стилей, приводится совет подключать css-файл после закрывающего «/html».
Интересно было бы услышать вебмастеров, которые смогли решить проблему данным советом.
Оригинальный файл small.css загружается после загрузки страницы. Порядок применения правил CSS определяется путем внедрения всех элементов style и link в документ с помощью JavaScript.
Интересно было бы услышать вебмастеров, которые смогли решить проблему данным советом.
0
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");
+1
Sign up to leave a comment.
Оптимизируем производительность веб-страницы: CSS