Задать вопрос
CHERNOGOLOV
@CHERNOGOLOV
css

Есть ли смысл ради высокой оценки PageSpeed встраивать весь CSS код в?

Во славу перфекционизму, и преследуя задачу получить наиболее максимальную оценку PageSpeed пришел к тому, что надо что-то делать с twitter bootstrap, который PageSpeed просит удалить из верхней части страницы.
Есть вариант поместить все в тег в head, что не очень удобно при разработке, но возможно в продакшне. Кстати сам Google не стесняется встраивать в кучу кода (примерно 40 000 симв.), twitter bootstrap ~ 100 000 симв...

Чем это может для сайта обернуться и есть ли другие идеи?
  • Вопрос задан
  • 2463 просмотра
Комментировать
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
RomanPavlov
@RomanPavlov
Да, смысл в этом есть. Эта техника называется critical CSS path inlining. Говоря простым языком – запись стилей первого экрана (reset, сетка и т.д.) прямо в теге <head>, а весь остальной CSS (другие блоки, футер и т.д.) подгружается чуть позже. Это придется делать, если вы хотите добиться высоких значений PageSpeed. Такая задача вполне автоматизируемая средствами grunt/gulp. Хотя нужно проделать достаточно большую подготовительную работу по приведению всего фронтенда в порядок.

Эта техника рассматривается в статье www.smashingmagazine.com/2014/09/08/improving-smas..., также там подробно описывается весь путь по оптимизации и "прокачке" PageSpeed (Web Fonts, JS, CSS, CDN), также есть ссылки на необходимые тулы. Можно поискать и видео одноименного доклада от самого Виталия Фридмана (мне посчастливилось на таком поприсутствовать).
Ответ написан
Комментировать
Комментировать
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
https://developers.google.com/web/fundamentals/per...

в случае твиттер бутстрапа вам нужно заинлайнить нормализацию, гриды и стили тех компонентов, которые пользователь видит первыми (навбар к примеру). Есть скрипты автоматизирующие это дело.
Ответ написан
Комментировать
Комментировать
CHERNOGOLOV
@CHERNOGOLOV Автор вопроса
Нашел такой вариант - весь CSS код залил в один файл, сжал его и кэшировал. Поставил этот файл перед закрывающим body, грузится он быстро, даже в режиме теста GPRS в Chrome, и не показывает "голый сайт" без CSS. Буду тестировать этот вариант.

PageSpeed показал 100 баллов)))
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
1500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы