: How can I resolve above-the-fold content rendering for CSS files if I'm using Cloudflare? I've been wanting to learn how to increase my page loads when site building and when researching I learned
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.?
More posts by @Voss4911412
1 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.