Title: Google PageSpeed Insight CSS Errors
Last modified: August 30, 2016

---

# Google PageSpeed Insight CSS Errors

 *  Resolved [klipklopp](https://wordpress.org/support/users/klipklopp/)
 * (@klipklopp)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/)
 * Hello,
 * I am using the Autoptimize plugin to try to speed things up on my site and get
   rid of this error from Google PageSpeed Insights:
 * Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your 
   page has 5 blocking CSS resources. This causes a delay in rendering your page.
   None of the above-the-fold content on your page could be rendered without waiting
   for the following resources to load. Try to defer or asynchronously load blocking
   resources, or inline the critical portions of those resources directly in the
   HTML. Optimize CSS Delivery of the following: [http://fonts.googleapis.com/css?family=Open+Sans](http://fonts.googleapis.com/css?family=Open+Sans)
   [http://www.westminsterav.com/…-lite/assets/css/soliloquy.css?ver=2.3.7](http://www.westminsterav.com/…-lite/assets/css/soliloquy.css?ver=2.3.7)
   [http://www.westminsterav.com/…-lite/themes/classic/style.css?ver=4.2.3](http://www.westminsterav.com/…-lite/themes/classic/style.css?ver=4.2.3)
   [http://www.westminsterav.com/…ize_0759713a7c498d142b2bb08fa00cb8d1.css](http://www.westminsterav.com/…ize_0759713a7c498d142b2bb08fa00cb8d1.css)
   [http://fonts.googleapis.com/css?family=Open+Sans](http://fonts.googleapis.com/css?family=Open+Sans)
 * I am using the advanced settings for optimizing CSS with the plugin. I am doing
   Inline and defer… I copied my style.css into the CSS Critical Path converter 
   suggested in the FAQ and then copied the result into the text box below the Inline
   and Defer option.
 * Any suggestions for fixing this problem would be greatly appreciated.
 * [https://wordpress.org/plugins/autoptimize/](https://wordpress.org/plugins/autoptimize/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358352)
 * evening KlipKlopp;
    The Google Font-CSS can’t be solved by AO, as that is external
   to your site and AO only treats local CSS/JS.
 * What does strike me as odd is that there are 2 css-files that aren’t aggregated
   by AO; what does soliloquy do? Can I download it somewhere/ look at the code?
 * kind regards,
    frank
 *  Thread Starter [klipklopp](https://wordpress.org/support/users/klipklopp/)
 * (@klipklopp)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358354)
 * Hi Frank,
 * Thanks for the reply. Soliloquy Lite is a simple image slider. If there is one
   that doesn’t bog down speed and load times, I would have no problem switching.
   Do you have any suggestions? You can find out more about Soliloquy and download
   it at: [https://wordpress.org/plugins/soliloquy-lite/](https://wordpress.org/plugins/soliloquy-lite/)
 * With regard to the font, do you have any suggestions or other possible solutions
   I can try?
 * Thanks!
 * Ted
 *  Thread Starter [klipklopp](https://wordpress.org/support/users/klipklopp/)
 * (@klipklopp)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358412)
 * Hi Frank,
 * A quick update. Since Soliloquy was causing problems, I removed it and am using
   a different slider plugin.
 * The only CSS errors I am getting now are:
 * Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your 
   page has 2 blocking CSS resources. This causes a delay in rendering your page.
   None of the above-the-fold content on your page could be rendered without waiting
   for the following resources to load. Try to defer or asynchronously load blocking
   resources, or inline the critical portions of those resources directly in the
   HTML. Optimize CSS Delivery of the following: [http://fonts.googleapis.com/css?family=Open+Sans](http://fonts.googleapis.com/css?family=Open+Sans)
   [http://www.westminsterav.com/wp-content/cache/autoptimize/css/autoptimize_5911c5d1872d7ab6726ee6c8a1e40429.css](http://www.westminsterav.com/wp-content/cache/autoptimize/css/autoptimize_5911c5d1872d7ab6726ee6c8a1e40429.css)
 * Any suggestions would be most welcome.
 * Thanks!
 * Ted
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358470)
 * Hi Ted;
    I don’t see the Google Fonts-warning any more on Google’s Pagespeed 
   Insights, guess you found a way to fix this?
 * Regarding the Autoptimized CSS still being render blocking; it all boils down
   to what CSS you copy/ pasted as “inline”. Clearly what is in there currently 
   is not sufficient to paint the “above the fold”-page and this indeed is one of
   the more complex topics to address. I tried [another tool](https://gist.github.com/PaulKinlan/6284142)
   that extracts critical CSS and got;
 *     ```
       body { background-color: rgb(242, 242, 242); }
       body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, select, textarea { color: rgb(34, 34, 34); font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.6; margin: 0px; padding: 0px; text-decoration: none; }
       body.custom-background { background-image: url(http://www.westminsterav.com/wp-content/uploads/2015/03/av-2000x2000.png); background-attachment: fixed; background-color: rgb(0, 0, 0); background-position: 50% 0%; background-repeat: no-repeat; }
       #wrap { margin: 0px auto; width: 1140px; }
       #header { margin: 0px auto; min-height: 100px; width: 100%; background: url(http://www.westminsterav.com/wp-content/uploads/2015/03/wt-llc-logo-280x100.png) no-repeat !important; }
       #title-area { float: left; overflow: hidden; width: 25%; }
       .header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; height: 100px; overflow: hidden; padding: 0px; text-indent: -9999px; width: 25%; }
       h1 { color: rgb(51, 51, 51); }
       h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6 { color: rgb(51, 51, 51); font-family: 'Open Sans', sans-serif; font-weight: bold; line-height: 1.25; margin: 0px 0px 10px; }
       h1, h2, h2 a, h2 a:visited { clear: both; font-size: 42px; margin: 0px 0px 20px; }
       #title { font-family: 'Open Sans', sans-serif; font-size: 36px; font-weight: bold; line-height: 1.25; margin: 0px 0px 5px; }
       a { color: rgb(100, 201, 234); text-decoration: none; }
       a, a:visited { color: rgb(100, 201, 234); text-decoration: none; }
       .executive-teal a, .executive-teal a:visited { color: rgb(20, 36, 132); }
       #title a { color: rgb(34, 34, 34); display: block; padding: 27px 0px 0px; text-decoration: none; }
       #title a, #title a:hover { color: rgb(34, 34, 34); display: block; padding: 27px 0px 0px; text-decoration: none; }
       #header .widget-area { float: right; width: 75%; }
       li, ul { margin: 0px; padding: 0px !important; }
       li, ol, ul { margin: 0px; padding: 0px !important; }
       ul { list-style: none; margin-left: 0px; padding-left: 1em; }
       .menu-primary { clear: both; color: rgb(102, 102, 102); font-size: 14px; margin: 0px; overflow: hidden; width: 100%; background-color: rgb(242, 242, 242); }
       .menu-primary, .menu-secondary, #header .menu { clear: both; color: rgb(102, 102, 102); font-size: 14px; margin: 0px; overflow: hidden; width: 100%; background-color: rgb(242, 242, 242); }
       .menu-primary li { float: left; list-style-type: none; }
       .menu-primary li, .menu-secondary li, #header .menu li { float: left; list-style-type: none; }
       .menu-primary a { color: rgb(102, 102, 102); display: block; padding: 15px 20px; position: relative; text-decoration: none; }
       .menu-primary a, .menu-secondary a, #header .menu a { color: rgb(102, 102, 102); display: block; padding: 15px 20px; position: relative; text-decoration: none; }
       .menu-primary .current-menu-item a { color: rgb(255, 255, 255); background-color: rgb(100, 201, 234); }
       .menu-primary li a:active, .menu-primary .current-menu-item a, .menu-secondary li a:active, .menu-secondary .current-menu-item a, #header .menu li a:active, #header .menu .current-menu-item a { color: rgb(255, 255, 255); background-color: rgb(100, 201, 234); }
       .executive-teal .menu-primary a, .executive-teal .menu-secondary a, .executive-teal #header .menu a { color: rgb(102, 102, 102); }
       .executive-teal a.button, .executive-teal .menu-primary li a:active, .executive-teal .menu-primary .current-menu-item a, .executive-teal .menu-secondary li a:active, .executive-teal .menu-secondary .current-menu-item a, .executive-teal #header .menu li a:active, .executive-teal #header .menu .current-menu-item a { color: rgb(255, 255, 255); }
       .executive-teal input[type="button"], .executive-teal input[type="submit"], .executive-teal a.button, .executive-teal .menu-primary li a:active, .executive-teal .menu-primary .current-menu-item a, .executive-teal .menu-secondary li a:active, .executive-teal .menu-secondary .current-menu-item a, .executive-teal .navigation li a, .executive-teal .navigation li.disabled, .executive-teal .navigation li a:hover, .executive-teal .navigation li.active a, .executive-teal .post-info .comments, .executive-teal #header .menu li a:active, .executive-teal #header .menu .current-menu-item a { background-color: rgb(20, 36, 132); }
       #inner { -webkit-box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px; clear: both; margin: 0px auto; overflow: hidden; background-color: rgb(255, 255, 255); }
       .executive-home #inner { overflow: visible; }
       #content-sidebar-wrap { float: left; width: 100%; }
       #content { float: left; padding: 30px 60px 10px; width: 680px; }
       .full-width-content #content { width: 1020px; }
       .full-width-content.executive-home #content { padding: 0px; width: 100%; }
       #latest-box { padding: 5px; position: relative; }
       .sliderpreloader { text-align: center; width: 100% !important; height: 32px !important; background: url(data:image/gif;base64,R0lGODlhIAAgAPMAAP///15cXNra2rGwsNDQ0L++voB+fpSSkubl5…lLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==) 50% 50% no-repeat !important; }
       .bx-wrapper { position: relative; margin: 0px auto 60px; padding: 0px; }
       .bx-wrapper .bx-viewport { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 5px; border: 5px solid rgb(255, 255, 255); left: -5px; -webkit-transform: translateZ(0px); transform: translateZ(0px); background: rgb(255, 255, 255); }
       .bx-wrapper ul { margin: 0px !important; padding: 0px !important; }
       .bx-wrapper ul li { list-style: none !important; margin: 0px !important; }
       img { height: auto; max-width: 100%; }
       .ewic-wid-imgs { width: 100%; max-width: 100%; height: auto; }
       .bx-wrapper img { max-width: 100%; display: block; }
       .bx-wrapper .bx-prev { left: 10px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA/CAYAAAAfQM0aAAAAGXRFW…zj76DdpuIZx8FPuOAviWDG8e8qXl0yXxnHPnGdsf8FGAByGwC02iMZswAAAABJRU5ErkJggg==) 0px -32px no-repeat; }
       .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0px; width: 32px; height: 32px; text-indent: -9999px; z-index: 999; }
       .bx-wrapper .bx-next { right: 10px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA/CAYAAAAfQM0aAAAAGXRFW…zj76DdpuIZx8FPuOAviWDG8e8qXl0yXxnHPnGdsf8FGAByGwC02iMZswAAAABJRU5ErkJggg==) -43px -32px no-repeat; }
       .bx-controls-auto { display: none !important; }
       .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; }
       .bx-wrapper .bx-controls-auto { text-align: center; }
       .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; }
       .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0px; margin: 0px 3px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA/CAYAAAAfQM0aAAAAGXRFW…zj76DdpuIZx8FPuOAviWDG8e8qXl0yXxnHPnGdsf8FGAByGwC02iMZswAAAABJRU5ErkJggg==) -86px -11px no-repeat; }
       .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0px; }
       .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0px; margin: 0px 3px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA/CAYAAAAfQM0aAAAAGXRFW…zj76DdpuIZx8FPuOAviWDG8e8qXl0yXxnHPnGdsf8FGAByGwC02iMZswAAAABJRU5ErkJggg==) -86px -44px no-repeat; }
       .testimonials { border-radius: 20px; background-color: rgb(245, 245, 245); }
       blockquote { border: 0px; margin: 5px 5px 20px; padding: 25px 30px 5px 70px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAABGdBT…34elxwRXJwf2XdbtFxsbL7Zscjjy7wmx1ULiq5R2xq6t/rC5lYJVgoOeWuAAAAAElFTkSuQmCC) no-repeat; }
       blockquote, input, select, textarea, .author-box, .breadcrumb, .sticky, .taxonomy-description, .wp-caption { background-color: rgb(245, 245, 245); }
       input { color: rgb(34, 34, 34); font-family: 'Open Sans', sans-serif; font-size: 14px; }
       input, select, textarea { border: 1px solid rgb(221, 221, 221); }
       input, label, select, textarea { color: rgb(34, 34, 34); font-family: 'Open Sans', sans-serif; font-size: 14px; }
       .searchsubmit { display: none; }
       input[type="button"], input[type="submit"], a.button { border-radius: 5px; border: 0px; color: rgb(255, 255, 255); cursor: pointer; font-size: 14px; padding: 15px 20px; text-align: center; text-decoration: none; background-color: rgb(100, 201, 234); }
       ```
   
 * Based on a quick test this will yield better results. Alternatively you could
   off course also switch to “inline all CSS” (which has downsides of its own, but
   at least it is simple and works 100% of the times).
 * Hope this helps,
    frank
 *  Thread Starter [klipklopp](https://wordpress.org/support/users/klipklopp/)
 * (@klipklopp)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358501)
 * Hi Frank,
 * Great news – the code you supplied me with worked!
 * One question – I am not clear on how the tool you linked to works… Can you explain
   or direct me somewhere where I can get an explanation. I have at least one more
   site to optimize so I want to make sure I use all the correct tools on it as 
   well.
 * Thanks for your help!
 * Ted
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358502)
 * Well, I loaded your page in Chrome (doesn’t work in FF), opened the developer
   tools’ console and copy/pasted [the code](https://gist.github.com/PaulKinlan/6284142)
   there and pressed enter to execute it. it then prints out the “critical CSS” 
   on the console output.
 * Hope this makes some sense to you 🙂
 * frank
 *  Thread Starter [klipklopp](https://wordpress.org/support/users/klipklopp/)
 * (@klipklopp)
 * [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358503)
 * Cool – I think I have it now – thanks so much!
 * Ted

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Google PageSpeed Insight CSS Errors’ is closed to new replies.

 * ![](https://ps.w.org/autoptimize/assets/icon-256X256.png?rev=2211608)
 * [Autoptimize](https://wordpress.org/plugins/autoptimize/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/autoptimize/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/autoptimize/)
 * [Active Topics](https://wordpress.org/support/plugin/autoptimize/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/autoptimize/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/autoptimize/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [Eliminate render blocking](https://wordpress.org/support/topic-tag/eliminate-render-blocking/)
 * [PageSpeed Insights](https://wordpress.org/support/topic-tag/pagespeed-insights/)

 * 7 replies
 * 2 participants
 * Last reply from: [klipklopp](https://wordpress.org/support/users/klipklopp/)
 * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/google-pagespeed-insight-css-errors/#post-6358503)
 * Status: resolved