Ankita
Member • Oct 4, 2013
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
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.
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)
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.