Файл css весь подгружается в сайт или из него идет подгрузка нужных кусков?

P
На сайте с 06.01.2009
Offline
601
1139

Здравствуйте. Вопрос наверное глупый, но прошу подсказать.

Есть сайт, шаблонный вариант, файл стилей весит 500Кб.

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

Вопрос. Когда идет загрузка сайта, файл стилей грузится полностью, или из него, грубо говоря "выдираются" нужные для построения сайта куски?

Спасибо

ps просто как я понимаю, 500Кб даже для адаптива многовато, вот и хочу понять, влияет ли размер данного файла на скорость загрузки. Тем более в моб устройствах имхо 500КБ вообще много...

altezzik
На сайте с 06.11.2011
Offline
247
#1

Файл стилей загружается полностью.

dma84
На сайте с 21.04.2009
Offline
168
#2

Грузится полностью, но потом уже берётся из кэша, если кэширование верно настроено.

TA
На сайте с 12.06.2009
Offline
116
TiA
#3
postavkin:
Вопрос. Когда идет загрузка сайта, файл стилей грузится полностью, или из него, грубо говоря "выдираются" нужные для построения сайта куски?

Для того, чтобы "выдрать" из файла стилей нужные куски его требуется полностью загрузить. По умолчанию браузер начинает рендеринг (отображение) страницы после окончания загрузки и обработки всех файлов CSS в секции <head> страницы.

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

Профессиональная верстка и разработка сайтов на WordPress (http://www.maultalk.com/topic139110s0.html)
S
На сайте с 30.09.2016
Offline
469
#4
TiA:
а также вынести некоторые из них в конец страницы

А перед этим разделить один большой CSS на несколько маленьких.

---------- Добавлено 31.12.2016 в 14:23 ----------

postavkin:
он сделан один под все варианты шаблонов.
А это вообще неправильно. В общий файл следует помещать только общие стили.
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
P
На сайте с 06.01.2009
Offline
601
#5

Здравствуйте. Подскажите, пожалуйста, через инспектор смотрю.

Эти цифры реально что то значат?

При первом заходе юзера скорость загрузки страницы 2,84 сек?

При повторном 0,56 сек?

[ATTACH]159185[/ATTACH]

А главная страница так вообще 29 сек? :)

[ATTACH]159186[/ATTACH]

Спасибо

jpg 159185.jpg
jpg 159186.jpg
K
На сайте с 15.09.2011
Offline
83
#6

Попробуйте вручную почистить файл стилей, после чего минифицируйте его.

Даже если файл будет весить 500 кб, его версия в gzip - не более 100 кб. Следовательно вам нужно вклюсить на сервере поддержку gzip.

Есть удобная утилита для сжатия файлов стилей и файлов скриптов

https://github.com/mrclay/minify

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

замените на /min/f=css/style.css

Если в корне не появилась папка cashe, создайте её сами, в папке должны храниться сжатый css и его версия gzip

Если у вас подключается несколько файлов стилей, можете обьединить их в одну ссылку /min/f=css/style1.css,css/style2.css

Такую же процедуру желательно проделать с файлами .js

Прирост скорости ощутите даже на глаз.

S
На сайте с 13.10.2014
Offline
171
#7

64 картинки, грузятся 27 секунд. (держите меня семеро)

если современные браузеры, способны качать с сайта контент в 8 потоков минимум, то это означает, что что на загрузку одной картинки уходит что-то около 3.7 секунд. При объеме картинки в 100к, это получается средняя скорость 30 килобайт в секунду (модем какой-то)

Вероятно у вас есть какие-то битые ссылки на контент (css/js/картинки) попадание на 404 вызывает у браузера желание дождаться чего-нибудь, что здорово тормозит загрузку. может как раз на 3-5 секунд встать в тротл. т.о. вы убиваете поток. если тротлов много, потоков гибнет тоже дофига, из-за чего скорость падает катастрофически

P
На сайте с 06.01.2009
Offline
601
#8
silicoid:
64 картинки, грузятся 27 секунд. (держите меня семеро)
если современные браузеры, способны качать с сайта контент в 8 потоков минимум, то это означает, что что на загрузку одной картинки уходит что-то около 3.7 секунд. При объеме картинки в 100к, это получается средняя скорость 30 килобайт в секунду (модем какой-то)

Вероятно у вас есть какие-то битые ссылки на контент (css/js/картинки) попадание на 404 вызывает у браузера желание дождаться чего-нибудь, что здорово тормозит загрузку. может как раз на 3-5 секунд встать в тротл. т.о. вы убиваете поток. если тротлов много, потоков гибнет тоже дофига, из-за чего скорость падает катастрофически

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

S
На сайте с 13.10.2014
Offline
171
#9

На самом деле надо посмотреть прогресс загрузки не на круговой диаграме, а на вкладке network в дебагере.

Тут возможна такая штука. Сначала загружается голова (кстати, грузится она 0.7 секунд, что довольно вяло, но, в принципе, если html большой, а движок тяжелый, то возможно) потом оно подтягивает JS (так как многие разработчики по совету гугла пихают JS в хвост) потом по появлению флага, что DOM готов, запускается скрипт, например какого-нибудь онлайн-чата или счетчика или системы внешней авторизации (вроде логинзы) и он подтягивает данные (css/картинки) с другого ресурса а вот у того "другого" своего ресурса уже время ответа как с Марса. Вот и получается, что на загрузку сайта надо минута, хотя в реальности, сайт грузится за 3-4 секунды.

у меня был случай, году в 10м, работали мы тогда с адривером. сайт большой. посещаемость около 1 млн посетителей. Так вот, из-за адривера страницы грузились по 40-50 секунд, причем иногда так, что там даже флаг document.ready не выпадал

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий