8

For awhile now I've been following Google's recommendation here (https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) to inline critical above the fold CSS for faster load times. I was wondering, is this still going to be necessary with the adoption of http2 getting higher and higher? My reasoning is the way I understand it http2 allows for parallel requests across one connection so the CSS could start downloading right away? Someone please correct me if my understanding of how http2 works is wrong is wrong...

Improve this question

2 Answers 2

Reset to default
2

You are correct about the need to no longer inline CSS with the adoption of HTTP/2. As a matter of fact, HTTP/2 best practices suggest the opposite of inlining. The question that lingers for you and any reader of this post is, when is the right time to make this switch?

A change from inlining to no longer inlining (and the same would be true for image sprites) should really only be made after carefully assessing your users' browser/client capabilities to accept HTTP/2. Using analytics to inform your decision takes the guesswork out if this.

Over time I would not be surprised to see modifications to apache, mod_pagespeed, nginx, vanish and others to auto inline only for HTTP/1 clients/browsers. So, stay tuned to the version updates for major web servers to help automate this change.

For more information on HTTP/2, l highly recommend the changelog.com podcast about HTTP/2 with Ilya Grigorieva, the primary architect behind Google's http/2 efforts: listen to the interview here

Improve this answer
1

The idea behind inlining for above-the-fold is still a good one because requests for CSS still take the same amount of time and pages are still blocked while the CSS file is being downloaded. HTTP/2 does not speed up downloads. It allows concurrent downloading. This way, images and other files are not tied up waiting their place in line but, again, it takes just as much time to download and execute or install them as before HTTP/2.

Improve this answer
2
  • Say you have a page with one css file and one image. The image is a larger file size than the css. If they are concurrently downloaded, wouldn't it not matter whether the css was inlined or not because the download time will take as long as the longest resource anyways, in this case, the image?
    – jetyet47
    Aug 6, 2016 at 0:25
  • @jetyet47 My point was that the OP thought HTTP/2 speeds up downloading. It does not. Note that CSS blocks first paint until it's downloaded and the CSS object model is created.
    – Rob
    Aug 6, 2016 at 1:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.