Стоит ли встраивать js и css в тело страницы?

Question

[IsaevDev]

Кажется, в рекомендациях от Google читал, что для ускорения загрузки страницы рекомендуется встраивать скрипты и стили в head. Стоит ли так делать? Действительно ли это ускоряет загрузку? Увеличит ли такое решение трафик (ведь не будет кэширования)?

Answer 1

[Павел Волынцев]

Что касается CSS.
Можно разделить код CSS на две части: первая небольшая часть для того, чтобы сайт выглядел пристойно, вторая - чтобы выглядел идеально.
Первый блок встраивается в HTML, а второй загружается из файла.
Можно поставить куку и при её наличии в текст HTML стили не подключать, а использовать только подключаемый файл. Или делать такое деление только на посадочных страницах, а на более сложных внутренних не заморачиваться.

Насчёт JS принцип тот же. Первый блок встраивается в HTML чтобы сайт не ломался, пока загружается основной JS, но тут так просто не поделишь. Я бы порекомендовал сайт изначально делать так, чтобы он не ломался, пока сценарии JS не загрузились.

Это называется progressive enhancement. В целом это даёт более высокий рейтинг от google pagespeed insights и радует посетителей.

Не забудь выставить заголовки для кэширования CSS и JS в браузере.

Answer 2

[Павел Щеглов]

Эта рекомендация актуальна только для стилей "critical view" или первого загружаемого экрана.
Как результат пользователь видит отрисовку первого экрана немного быстрее.

Answer 3

[Ken Jee]

С точки зрения SEO, чем чище код, тем лучше для поисковика. Есть такое понятие как "битовая глубина до полезного контента", т.е. это количество символов до первого вменяемого текста. Так что всё лишнее - в отдельный файл.

Answer 4

[Константин Китманов]

Нажимаете в Хроме F12, переключаетесь на вкладку «Audits», запускаете и смотрите рекомендации от гугла. Вкратце: стили надо подключать в head, скрипты — перед закрывающим body, все должно быть одним файлом.
Внедрять стили и скрипты в страницу имеет смысл только в одном случае: они пренебрежимо малы (меньше, чем обычный HTTP-запрос для их получения).

Answer 5

[WebDiez]

Лучше стили и js загружать отдельными файлами так как при загрузке страницы сайта JS и CSS будут прогруженны один раз, если будут прописаны в теле страницы, то будут грузиться с каждой страницей, чем увеличится трафик и время загрузки страниц..

Answer 6

[jlekapb]

// немного бреда
Для статичных частей сайта можно сэкономить на хттп запросах и разместить код инлайново, затем кешировать эти страницы на долгое время.