Optimize CSS Delivery On Wordpress For PageSpeed Improvement

Running a Google PageSpeed test for a wordpress site, may often land you up on a suggestion that says,
Optimize CSS Delivery for certain URLs.
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay painting of content to the screen.
Those who know even the basics of HTML and CSS - know that for small CSS files, inlining is a very good idea. But since we use external themes for our wordpress blogs, identifying an external CSS file and merging it with existing HTML - that is tedious job.

In line with this thought, Google also believes that when the external CSS resources are small, you can insert those directly into the HTML document.
But in the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.
NOTE: Inlining CSS attributes on HTML elements (e.g., < p style=...>) should be avoided wherever possible, as this often leads to unnecessary code duplication. Further, inline CSS on HTML elements is blocked by default with with Content Security Policy Level 3 (CSP).

Frankly, there is no easy or non-technical way of doing any of this.

If you know how to identify the CSS files and merge them together, you are good to go. Not a very hefty job. There are also several good online resources to check out that can help you streamline your workflows.

You can use any one of the following to
  • Combine external CSS stylesheets
  • Inline small CSS in style tags
  • Remove @import calls for CSS where appropriate (When including your stylesheets, always link to the files instead of using the @import reference)
  • Remove the DIVs and H1s from the HTML (in element CSS)
These are the online tools that will help you -

www.cssoptimiser.com
#-Link-Snipped-#
Format and Minify Your Code Online
www.cssdrive.com
#-Link-Snipped-#
Free Online CSS Beautifier / Formatter - Styleneat

Feel free to ask your questions about optimizing CSS Delivery on wordpress in replies below.

Replies

You are reading an archived discussion.

Related Posts

I'm dedicating this discussion to the most interesting articles or pages on Wikipedia. You'll have to provide a link and then briefly describe why it's an interesting page. Page Title:...
One of the most common PageSpeed Insight Suggestion for a Wordpress blog is - Leverage Browser Caching. If you haven't already done this for your wordpress blog, it's time to...
As promised, the 300 Steam Machines Prototype that Valve will be sending to its 300 superlucky eligible users later this year, is finally all set to get shipped alongwith Steam...
The initiative of CitizenWeb Project & Jacob Cook, arkOS is Arch-Linux based Anti-cloud server management custom Linux distribution, specially built for Raspberry Pi promoting decentralization and democratization of Internet. arkOS...
Google's launched a new algorithm update called Penguin 2.1 - that punishes spammy websites and puts high-quality websites at a higher rank in search results. More specifically, what it does...