How can I resolve above-the-fold content rendering for CSS files if I'm using Cloudflare?

Question

I've been wanting to learn how to increase my page loads when site building and when researching I learned about Google's PageSpeed Insights. After testing my site, I realized that Google is scoring me 79 out of 100 and the issues are with my CSS files:

• Google Font API
• Bootstrap CSS from a CDN
• Default CSS (style.css) for WordPress

After much research learning about how to resolve Eliminate render-blocking JavaScript and CSS in above-the-fold content I've run across:

• Google's Optimize CSS Delivery
• CSS-Trick's Thinking Async
• [wordpress] Eliminate render-blocking JavaScript and CSS in above-the-fold content

To tackle the Google Fonts I was thinking of moving the font calls from style.css to the head in style tags but I'm not sure the approach I should take for the other two CSS files.

Further research has produced:

• async javascript and css for wordpress
• How to load CSS files asynchronously in WordPress

After reading all this information I'm somewhat overwhelmed if I should have another solution to cache my files if I've already implemented Cloudflare's cache or would declaring the version of the file in the wp_enqueue_script() be enough? What should I do to resolve my CSS issue with PageSpeed to resolve Your page has 3 blocking CSS resources. This causes a delay in rendering your page.?

Answer 1

The best practice for CSS optimization and, specially, for removing render-blocking CSS from the head area of the HTML document is not done with one step.

Well, you are indeed able to remove the whole CSS to the bottom of the page and defer it (load it after the onLoad event). If it would works anywhere - it would be the whole job.

But under some circumstances (in some browsers / with some user agents) user will get FOUC - flash of unstyled content.

To avoid fouc, you should:

• get to know, which style rules are needed for displaying of your above-the-fold area,
• include these style rules into the head of your HTML document, using the <style>-tag.

To get these style rules to know there are many different approaches - all of them aren't trivial. Many of those tools are listed on a github page of a googler. A simple one is here to find.

On the similar way should be inlined into the head not only style rules, but images and fonts too - like base64 data URIs.

Finally your HTML document will grow - but if browser gets really all needed information for displaying the above-the-fold area through only reading of the single one HTML document (no additional file requests, TCP connections, handshakes, all that jazz), your optimization job is to 98,5% done.