Задать вопрос
@Roman-Fov
html

Вынос link c css из head за footer?

Google PageSpeed советует на нашем сайте вынести link в подвал. Вот так:
то вы можете встроить необходимый код CSS следующим образом:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">


Это нормально? Кто-нибудь так делал? Как дела обстоят с поддержкой в браузерах, чьё название не принято произносить?
  • Вопрос задан
  • 1777 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
вы плохо читали советы гугла. Он обычно рекомендует вставить в конец страницы скрипт, который добавляет link в head. Тип так:

link=document.createElement('link');
link.href='href';
link.rel='rel';

document.getElementsByTagName('head')[0].appendChild(link);

В этом случае стили будут загружаться тогда, когда будет загружен весь DOM. А для того что бы страница не выглядела стремно, тот же гугл рекомендует инлайнить above-the-fold css в тело страницы.
Ответ написан
4 комментария
4 комментария
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Насколько я могу судить, рекомендуется минимизировать количество и размер файлов.
Если это необходимо, писать CSS непосредственно в коде страницы.
Но выносить вниз аж за html?.. Любопытно, но этими советчиками планируется сначала показать текст, а когда-то потом замереть, построить CSSOM, и оформить страницу?) Я так никогда не делал, не делаю и не буду делать.
Ответ написан
Комментировать
Комментировать
neuotq
@neuotq
Прокрастинация
Я думаю проблем не будет, еслине указан како-либо xhtml или что-то еще хитрое. а так если верстка в стиле html5:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Blah blah</title>
 </head>
 <body>
  <p>Страница на HTML5</p>
 </body>
</html>

Проблем бытьне должно, хотя про морально устаревшие не буду утверждать, возможно для них таки нужно делать условия в хедере.
Вот кстати обсуждение вопроса на стаковерфлоу: stackoverflow.com/questions/21058207/why-does-code...

UPD вопрос кстати интересный, слегка потестировал в firefox, на одном из сайтов где нет практически оптимизации и линкуется много css , если после закрытия html размещать, то немного медленнее(процентов на 10). Тест грязный, так как по хорошему нужно было бы и сервак перезапускать и тд. Но все же. Зато есть один плюс, заметил что при отрисовке страницы, нет такого как бы эффекта подвисания браузера , те хоть сама загрузка происходит медленнее, бразер работает более спокойно. Интересно какая ситуация в хроме и вебките, там кстати немного иначе парсер работает, как раз и в плане подключения css. в общем вопрос интересный, требует изучения, думаю для части сайтов это может оказаться выгодным решением, особенно где тяжелые страницы.
Ответ написан
Комментировать
Комментировать
zooks
@zooks
Frontend
Лучше перед закрывающим </body>, но код становится невалидным.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Записать рекламные видео креативы для мобильной игры
25 нояб. 2024, в 05:56
3000 руб./за проект
Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)
25 нояб. 2024, в 03:04
500000 руб./за проект
Сделать простой лендинг
25 нояб. 2024, в 02:45
2000 руб./за проект
Ещё заказы