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

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

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

Чем это может для сайта обернуться и есть ли другие идеи?
  • Вопрос задан
  • 2464 просмотра
Комментировать
Подписаться 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 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Анализ и оценка проектов, с последующим запуском
22 нояб. 2024, в 20:20
1000 руб./в час
Разработать админ панель на yii2
22 нояб. 2024, в 19:51
15000 руб./за проект
VPN приложение на Android
22 нояб. 2024, в 19:15
200000 руб./за проект
Ещё заказы