Google PageSpeed Insight CSS Errors

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Frank Goossens

    (@futtta)

    8 years, 9 months ago

    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

    (@klipklopp)

    8 years, 9 months ago

    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/

    With regard to the font, do you have any suggestions or other possible solutions I can try?

    Thanks!

    Ted

    Thread Starter klipklopp

    (@klipklopp)

    8 years, 9 months ago

    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://www.westminsterav.com/wp-content/cache/autoptimize/css/autoptimize_5911c5d1872d7ab6726ee6c8a1e40429.css

    Any suggestions would be most welcome.

    Thanks!

    Ted

    Plugin Author Frank Goossens

    (@futtta)

    8 years, 9 months ago

    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 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

    (@klipklopp)

    8 years, 9 months ago

    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

    (@futtta)

    8 years, 9 months ago

    Well, I loaded your page in Chrome (doesn’t work in FF), opened the developer tools’ console and copy/pasted the code 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

    (@klipklopp)

    8 years, 9 months ago

    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.