Как правильно подключать ccs файл?

Question

[Андрей]

Ребят я так понял по новым стандартам теперь можно подключать таблицу стилей в конце страницы перед тегом body и это будет валидный код. Но у меня вопрос стоит ли так делать и есть ли какие-то преимущества в таком подключении?

Comments

[Сергей delphinpro]

Есть один явный недостаток - при не очень быстром интернете страница сначала отобразится без стилей, а только потом перерисуется, когда стили подгрузятся.

Answer 1

[Ivan Bogachev]

Critical CSS вставляется инлайново в начале страницы, а остальная гора стилей уже подключается в конце. Таким образом юзер сразу видит красивую страничку, а все, что не так важно (например стили для футера - пока он там еще до него доскролит...), уже потом подгружается.

Comments

[Андрей]

Здравствуйте! Я правильно понял, нужно сделать одну таблицу стилей для первого окна просмотра и подключить ее в head, а остальные стили закинуть в другой css файл и подключить в конце страницы перед body?
Возникает пару вопросов:
1) куда подключать тогда файл с media запросами и остальные файлы, например bootstrap и т.д.?
2) возможен ли такой вариант: делать прелоадер и подключать все файлы в конце?

[Ivan Bogachev]

Андрей 1. По-хорошему можно все стили (вообще все) собирать в один файл, затем из него выделять critical-часть, вставлять ее в head, а сам этот файл со всеми стилями - в конце страницы. Grunt/Gulp помогут с автоматизацией этого процесса.
2. Прелоадеры - зло, тем более если использовать вышеупомянутый подход - они просто не понадобятся. Исключение только одно: страницы с большим количеством скриптов, которые долго что-то делают перед тем, как показать страницу (сам таких моментов стараюсь избегать, но если все-таки эти скрипты есть - да, прелоадер может быть хорошим выбором, но тогда уже о css можно и не думать, выигрыш от быстрой загруски стилей не перебъет проигрыш от долгой загрузки скриптов).

[Андрей]

Ivan Bogachev: Спасибо за помощь.

Answer 2

[Артур Карапетян]

google pagespeed insight не ругается

Answer 3

[Александр Моргунов]

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

Comments

[DTX]

По возможности файлы лучше подключать в body. А сили я бы подключил в head, т.к. страница без стилей мало кому нужна.

[Александр Моргунов]

DTX: зачем файлы подключать в body?

[DTX]

Александр Моргунов: чтобы страница грузилась быстрее. Иначе браузер сначала ждёт загрузки всех ресурсов из head, а только потом начинает отрисовывать страницу.