Crave: A modern WordPress theme with appetizing aesthetic


Results 1 to 2 of 2

Thread: Eliminate render-blocking JavaScript and CSS in above-the-fold content

  1. #1
    Join Date
    Jun 2011
    Posts
    279

    Default Eliminate render-blocking JavaScript and CSS in above-the-fold content

    How can I fix these 2 errors?

    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://www.thewheelsofshame.com/wb7..._2SGsd6Pv8.css
    http://fonts.googleapis.com/00%2C70...C500&ver=1.0.0
    CLICK HERE to read blogs and see photos shaming disabled parking violators!

  2. #2
    Join Date
    Aug 2011
    Posts
    293

    Default

    If I were you, I wouldn't care. This wouldn't increase your google pagespeed score too much, and it is a very tiny improvement. On the other hand its almost impossible to achieve. What google wants you to do is to load your javascript and CSS after all of the HTML has been loaded.

    This basically means that you have to include your javascript after the closing </html> tag instead of doing it in the head or footer. Then you would need to create inline CSS styles for rendering the content that is "above the fold" (which is next to impossible.. especially if you use responsive design for your site). After that is done, you would need to asynchronously load the CSS via javascript. Here is an example of how your page might look like:


    <html>
    <head>
    </head>
    <body>
    <div class="navigation" style="color:red"></div>
    </body>
    </html>
    <script src="/js/jquery.js">
    <script>
    $(function() {
    $( "head" ).append("<link rel="stylesheet" type="text/css" href="theme.css">");
    });
    <noscript><link rel="stylesheet" type="text/css" href="theme.css"></noscript>

    Like I said earlier.. don't bother unless you have a super simple site and this would be easy thing to do. It has literally almost no benefit for your page and is a huge time/effort investment.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •