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:
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.
?