Задать вопрос
@IsaevDev
javascript

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

Кажется, в рекомендациях от Google читал, что для ускорения загрузки страницы рекомендуется встраивать скрипты и стили в head. Стоит ли так делать? Действительно ли это ускоряет загрузку? Увеличит ли такое решение трафик (ведь не будет кэширования)?
  • Вопрос задан
  • 857 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
copist
@copist
Empower people to give
Что касается CSS.
Можно разделить код CSS на две части: первая небольшая часть для того, чтобы сайт выглядел пристойно, вторая - чтобы выглядел идеально.
Первый блок встраивается в HTML, а второй загружается из файла.
Можно поставить куку и при её наличии в текст HTML стили не подключать, а использовать только подключаемый файл. Или делать такое деление только на посадочных страницах, а на более сложных внутренних не заморачиваться.

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

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

Не забудь выставить заголовки для кэширования CSS и JS в браузере.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 5
webfarrock
@webfarrock
Эта рекомендация актуальна только для стилей "critical view" или первого загружаемого экрана.
Как результат пользователь видит отрисовку первого экрана немного быстрее.
Ответ написан
Комментировать
Комментировать
Machez
@Machez
Бу!
С точки зрения SEO, чем чище код, тем лучше для поисковика. Есть такое понятие как "битовая глубина до полезного контента", т.е. это количество символов до первого вменяемого текста. Так что всё лишнее - в отдельный файл.
Ответ написан
Комментировать
Комментировать
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Нажимаете в Хроме F12, переключаетесь на вкладку «Audits», запускаете и смотрите рекомендации от гугла. Вкратце: стили надо подключать в head, скрипты — перед закрывающим body, все должно быть одним файлом.
Внедрять стили и скрипты в страницу имеет смысл только в одном случае: они пренебрежимо малы (меньше, чем обычный HTTP-запрос для их получения).
Ответ написан
Комментировать
Комментировать
@webdiez
Меня все знают как WebDiez.
Лучше стили и js загружать отдельными файлами так как при загрузке страницы сайта JS и CSS будут прогруженны один раз, если будут прописаны в теле страницы, то будут грузиться с каждой страницей, чем увеличится трафик и время загрузки страниц..
Ответ написан
Комментировать
Комментировать
jlekapb
@jlekapb
.do
// немного бреда
Для статичных частей сайта можно сэкономить на хттп запросах и разместить код инлайново, затем кешировать эти страницы на долгое время.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Офлайн переводчик
24 апр. 2024, в 09:14
5000 руб./за проект
Сделать SPA на Vue
24 апр. 2024, в 09:13
2000 руб./в час
Интегрировать МИС Медцентра с ЕЦП в части получения Направлений
24 апр. 2024, в 08:24
100000 руб./за проект
Ещё заказы