CrazyEngineers Archive
Old, but evergreen and popular discussions on CrazyEngineers, presented to you in read-only mode.
@Ankita Katdare • 04 Oct, 2013
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 (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 -

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive’s CSS Compressor
Online YUI Compressor
Style Neat

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

Related Posts

@Ankita Katdare · Mar 23, 2015

If you are still using a landline at your home or office in the age of wireless internet devices, here's a good news for you from the folks at Tata...

@$ona!i · Apr 4, 2008

Can any one suggest any good paper presentation topic related to E&E branch.The topics must be advanced technologies and must have applications in day to day .

@Kaustubh Katdare · Jan 24, 2015

DALER (Deployable Air-Land Exploration Robot) is the latest swiss engineering marvel. It's a robot that can walk and fly as well; and derives its inspiration from the vampire bat Desmodus...

@Aditya Deshmukh · Mar 29, 2014

Bajaj auto’s new Pulsar 150NS was caught on camera, while a road test was going on. Rumors about Pulsar 150NS and 180 NS were around since beginning of this year....

@Kaustubh Katdare · Jan 10, 2013

Makkhichoose is the latest browser plugin by a developer from IIT Chennai that lets you compare the prices of the product you're currently browsing. For example, if you're looking at...