Задать вопрос
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 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Cоздание 3d сцены с симуляцией пызырьков
23 дек. 2024, в 16:13
50000 руб./за проект
Сбор данных из HH
23 дек. 2024, в 15:25
5000 руб./за проект
Сделать js-модуль для Тильды
23 дек. 2024, в 14:47
4500 руб./за проект
Ещё заказы