100/100 x2
precosts.com
Смотрим исходник и
тестируем
Делаем аналогично.
PS: вся соль в минификаторе CSS который выдаёт строку в инлайн через echo динамически (соотв., на сервере - она в кэше) и выносим вниз остальное, что не критично для первичной разметки.
PS2: Считаю, что время загрузки (избавляясь от JS) дороже валидации недоговорившихся валидаторов гигантов IT-индустрии при корректной работе решения на большинстве устройств, поэтому тэг link - стоит внутри body, несмотря на правила сообщества w3c.
Иными словами: между JS-надстройками для отложенной загрузки CSS и неверной (с точки зрения валидации w3c), но рабочей разметке - лучше выбрать разметку, минимизировав нагрузку на клиентское устройство в момент рендеринга страницы.
PS3: Вот еще неплохой сервис для проверки:
www.webpagetest.org
(пошел "полировать до блеска" свой код )))
---------------
Все линки на тесты:
тут
Еще пару ресурсов по советам оптимизации:
Yahoo:
https://developer.yahoo.com/performance/rules.html
Google:
https://developers.google.com/speed/pagespeed/modu...
--------------
PS4: Про "critical CSS":
Можно вставить слегка переделанный скрипт из
ответа на SO на все страницы и собрать стили по каждому URLу, запустив по всем линкам crawler и потом - найти пересечения между ними (П1).
Затем - объединить (merge) все возможные стили (О1), которые грузятся из файлов на сервере и снова найти пересечения между П1 и О1.
Результатом и будет искомый "critical css".
