Почему быстрее сначала загружать HTML и CSS при загрузке страницы. Каковы исключения из этого общего правила (если они есть)?
Почему быстрее сначала загружать HTML и CSS при загрузке страницы?
Ответы (3)
Примечание. Этот вопрос лучше подходит для Webmasters.SE.
Название и содержание вашего вопроса отличаются: p
Это не "быстрее", а "лучше". И это выглядит быстрее для пользователя.
Причина в том, что загрузка HTML в первую очередь имеет решающее значение, потому что она показывает контент перед вашим пользователем.
Загрузка CSS делает его красивым. В идеале загрузка CSS должна занимать нулевое время, поэтому CSS обычно является блокирующим запросом, чтобы избежать FOUC (Flash Of Unstyled Content), который может произойти в противном случае.
Наконец, JavaScript. Он загружается последним, поскольку не должен влиять на внешний вид страницы. По крайней мере, не сразу. Не до взаимодействия с пользователем. А так как крайне маловероятно, что у пользователя будут терминаторские рефлексы и он будет взаимодействовать с вашей страницей в первые десятые доли секунды, то вполне нормально, если она загрузится чуть позже.
Обратите внимание, что выше я сказал «не должен», но это не значит «не должен». В моем собственном проекте JavaScript фактически отвечает за отрисовку панели навигации и другого содержимого верхнего/нижнего колонтитула — это было сделано для того, чтобы содержимое можно было кэшировать и экономить до 8 КБ пропускной способности для каждой отдельной загрузки страницы — с несколькими миллионами загрузок страниц за один раз. день, это быстро складывается! Но в этом случае место уже зарезервировано для верхнего/нижнего колонтитула, а это означает, что сам контент может начать читаться даже за долю секунды до загрузки содержимого верхнего/нижнего колонтитула — все дело в получении важного контента. вверх и видно первым
person
Niet the Dark Absol
schedule
21.10.2014
но лучше --- любопытно, если бы вы могли указать на какой-нибудь современный сайт, который следует этой лучшей идее
- person zerkms; 21.10.2014
Этот ответ определенно уместен, очень лаконичен и точен. Он должен быть помечен как ответ. Я узнал несколько вещей здесь!
- person trnelson; 21.10.2014
@zerkms У меня есть, и я получил органическую обратную связь (то есть без подсказки), поздравляющую меня с тем, что у меня есть сайт, который, кажется, загружается еще до того, как вы нажмете на ссылку, потому что он выглядит так быстро в результате такой оптимизации.
- person Niet the Dark Absol; 21.10.2014
@Niet the Dark Absol: stackoverflow.com выглядит мгновенно и загружает css в свой заголовок. Так может дело не в узком месте?
- person zerkms; 21.10.2014
Я не слышал об этой идее кэшированной навигации, но она определенно фантастическая. У вас когда-нибудь были проблемы со сканированием из поисковых систем? Я должен предположить, что вы используете карты сайта и канонические URL-адреса и, вероятно, никаких проблем.
- person trnelson; 21.10.2014
@zerkms SO поддерживает чрезвычайно мощные серверы. Большинство сайтов этого не делают, поэтому мгновенное поиск становится более сложной задачей :)
- person Niet the Dark Absol; 21.10.2014
@Niet the Dark Absol: если у вас медленный сервер/медленный скрипт, тогда ваш браузер будет крутить throbber в ожидании первого байта. После формирования ответа — скорость подачи контента будет зависеть только от латентности + скорости сети. Так что, честно говоря, я не вижу связи между скоростью рендеринга и мощностью ЦП серверов.
- person zerkms; 21.10.2014
@trnelson Мне это вроде как сойдет с рук, потому что практически вся навигация связана с игрой и, следовательно, все равно не будет проиндексирована. Единственные действительно индексируемые вещи — это домашняя страница, профили и форумы, на все из которых можно ссылаться с самих форумов. Типа обман. В общем случае вы можете использовать карту сайта или
robots.txt файл, чтобы помочь поисковым системам.
- person Niet the Dark Absol; 21.10.2014
@zerkms Верно, поэтому важно оптимизировать каждый шаг. Следовательно, необходимо загружать сценарии в последнюю очередь, потому что к тому времени, когда пользователь уже дождался ответа сервера и прочего, последнее, что ему нужно, — это дополнительное время ожидания из-за неоптимального порядка CSS/сценариев.
- person Niet the Dark Absol; 21.10.2014
@Niet the Dark Absol: вот почему важно оптимизировать каждый шаг --- неясно, почему это оптимизация. UX определенно будет хуже из-за FOUC. Так что с этой точки зрения это скорее деградация, чем оптимизация. Производительность css в топе не хуже только потому, что файлы css кешируются после первого запроса. Так что это в основном бесплатно, чтобы поместить их в голову. Я даже не упоминаю, что Google в своих руководствах по производительности рекомендует ставить CSS в топ (developers.google.com/web/fundamentals/performance/)
- person zerkms; 21.10.2014
@zerkms Может быть, у меня проблемы с правильным выражением в это раннее утро. XD Я пытаюсь сказать, что страница должна загружаться так, чтобы она отображалась как можно быстрее. Хотя это означает наличие достаточно мощных серверов для обработки вашего веб-сайта, это также включает в себя такие мелочи, как загрузка страниц наилучшим образом для достижения желаемого эффекта. Весь вопрос заключается в том, чтобы сначала загружать HTML и CSS, предположительно перед JavaScript, и ответ, который я пытался дать, заключается в том, что загрузка их сначала, а JS позже дает видимость загрузки быстрее, потому что контент занимает меньше.
- person Niet the Dark Absol; 21.10.2014
@zerkms А, понятно - я имел в виду, что CSS должен оставаться в голове, так как это позволит загружать страницу без FOUC ... ly. Но я этого не говорил XD
- person Niet the Dark Absol; 21.10.2014
@NiettheDarkAbsol теперь вся дискуссия имеет для меня смысл :-D
- person zerkms; 21.10.2014
@zerkms Ура, смысл! :D
- person Niet the Dark Absol; 21.10.2014
@zerkms: мысли Google о JavaScript внутри головы; это частично объясняет, почему лучше помещать CSS перед файлами JavaScript.
- person Salman A; 21.10.2014
Файлы CSS можно загружать параллельно с HTML. Вот почему они обычно объявляются первыми в заголовке загружаемых документов. Браузерам выделяется несколько потоков, в которые они могут параллельно загружать документы из одного домена. Для еще большей производительности, если вы можете загружать файлы из разных доменов или поддоменов, вы даже можете повысить производительность, поскольку сможете загружать больше документов параллельно.
Файлы JavaScript отличаются тем, что они считаются блокирующими и не обязательно могут загружаться параллельно так же, как файлы CSS. Вот почему обычно рекомендуется загружать файлы JavaScript ближе к концу документа, где это возможно.
person
trnelson
schedule
21.10.2014
Есть ли исключения из этого?
- person MHOOS; 21.10.2014
Единственное исключение, о котором я могу думать, это когда вы хотите динамически изменять CSS на лету. HTML позволяет вам загружать и изменять объявления CSS во время выполнения, и изменения будут применены немедленно.
- person trnelson; 21.10.2014
@MHOOS Во всем есть исключения. Даже ты не должен убивать, поскольку почти сразу после этого следует, что тот, кто убивает, должен быть предан смерти, что подразумевает предположение, что тот, кто убивает убийцу, освобождается от казни, иначе одно убийство приведет к исчезновению человечества. раса... В любом случае... PageSpeed предлагает информацию. Понимание, возможно, оценивается ниже, чем совет, поскольку оно полностью зависит от контекста и требований.
- person Niet the Dark Absol; 21.10.2014
Это более полезно для SEO, потому что Сканеры сканируют тысячи веб-сайтов. И он читает ваш исходный код HTML всего за несколько секунд. Несмотря на это, даже если ваш сайт загружен не полностью. Так что лучше сначала загрузите части с полезными ключевыми словами.
person
Cyd Dalupan
schedule
21.10.2014
styleв файлеheadвашего документа. В соответствии с тем, как работает StackOverflow, мне пришлось проголосовать, чтобы закрыть этот вопрос, потому что он в основном основан на мнениях. - person James Donnelly schedule 21.10.2014