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

@Mallika Saha · Jun 10, 2014

Hi..I have thought upon a project named remote access monitoring. This project is based upon client server architecture where there are number of clients and one main server. Server can...

@Ankita Katdare · Nov 25, 2016

Today i.e. on 26th Nov 2016, we celebrate the 11th Anniversary of On account of the birthday of this site, we've organised the most awesome contests for you to...

@aarthivg · Aug 1, 2013

1.The classes contained in the packages of other programs can be easily reused. Is there any other benefits of packages in JAVA. I also, came across "Packages also provide a...

@night crawler · Jul 30, 2008

im a electronics & comm. engineering student of 3'rd yr . does matlab offers any benifit to me . why nmatlab is used in the first place.

@PuneetVerma · Dec 17, 2014

John Deere presents TECHNO-CHAMP – an All India Online Technology Innovation Contest – a unique competition designed with the purpose of creating a common platform for students across the country...