critical css - cached vs inlined

[Filip Mareš‏]

I've optimized our page so there are no other issues but one: Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

To be specific, it's our critical.css file, it is well optimized and minified, it has only 50KB, when gzipped it drops to 10KB to be transferred. The download and processing takes approx 150ms.

I don't really want to inline the critical.css in the page source as our application is not an SPA, the page is dynamic, displays content based on query string.

The caching headers for the css file are set so every next page request benefits from having that file cached, if I follow the recommendation, the css won't be cached for other page loads.

My question is; why I've got a penalty of 25 points (score is 75/100 on mobile, 91/100 on desktop) for such a small and well optimized critical.css file?
Is the PageSpeed Insights tool adjusted for SPAs, where the caching benefit of a separate asset isn't so significant?

Can I do anything else to improve the score?

Cheers,

Filip

[Barry Hunter‏]

One trick I've used (possibly shunned, although did learn about it via mod_pagespeed!) 

... on the first visit (basically if got no cookies, as a session sets a cookie) inline the CSS dynamically, on subsequent visits link to external resource. (the second pageview still needs to download, but third will benefit) 

hybrid approach means first view should be fast, but can save repeated downloads for people 'continining' to explore the site. 

In many ways your first view is the most important, first impressions and all that. 

Note, this group is for the now shutdown, PageSpeed Service. Think you looking for 

https://groups.google.com/forum/#!forum/pagespeed-insights-discuss

--
You received this message because you are subscribed to the Google Groups "page-speed-service-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to page-speed-service-discuss+unsubsc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/page-speed-service-discuss/63d93643-f21c-42b3-abcc-563a36af004e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Filip Mareš‏]

Thanks Barry,

that's a great tip!

I've also found an article describing this technique if anyone else would be interested: https://iamsteve.me/blog/entry/using-cookies-to-serve-critical-css-for-first-time-visits

Cheers,

Filip

so 2. 9. 2017 v 12:49 odesílatel Barry Hunter <barryb...@gmail.com> napsal:

One trick I've used (possibly shunned, although did learn about it via mod_pagespeed!) 

... on the first visit (basically if got no cookies, as a session sets a cookie) inline the CSS dynamically, on subsequent visits link to external resource. (the second pageview still needs to download, but third will benefit) 

hybrid approach means first view should be fast, but can save repeated downloads for people 'continining' to explore the site. 

In many ways your first view is the most important, first impressions and all that. 

Note, this group is for the now shutdown, PageSpeed Service. Think you looking for 

https://groups.google.com/forum/#!forum/pagespeed-insights-discuss

On 1 September 2017 at 23:38, Filip Mareš <mar...@gmail.com> wrote:

I've optimized our page so there are no other issues but one: Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

To be specific, it's our critical.css file, it is well optimized and minified, it has only 50KB, when gzipped it drops to 10KB to be transferred. The download and processing takes approx 150ms.

I don't really want to inline the critical.css in the page source as our application is not an SPA, the page is dynamic, displays content based on query string.

The caching headers for the css file are set so every next page request benefits from having that file cached, if I follow the recommendation, the css won't be cached for other page loads.

My question is; why I've got a penalty of 25 points (score is 75/100 on mobile, 91/100 on desktop) for such a small and well optimized critical.css file?
Is the PageSpeed Insights tool adjusted for SPAs, where the caching benefit of a separate asset isn't so significant?

Can I do anything else to improve the score?

Cheers,

Filip

--
You received this message because you are subscribed to the Google Groups "page-speed-service-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to page-speed-service-...@googlegroups.com.