pagespeed insights Defer unused CSS and ofscreen images

Question

I'v defered all my CSS using

media="none" onload="if(media!='all')media='all'"

and images using yall.min.js

But PageSpeed Insights continues claiming it (and the images are visibles too)

How do I could optimize this?

Thanks, Ari

Answer 1

I'm using JavaScript to asynchronously load external CSS files. Similar to old solutions where one would put scripts before the closing </body> tag, I'm now introducing data-attributes to create <link> tags, so they're made asynchronous automatically:

HTML

<div data-dom="link" data-href="@asyncCssBundle" data-media="screen"></div>
<div data-dom="link" data-href="@printBundle" data-media="print"></div>

jQuery

/**
  * Loads an array object of CSS files in async mode
  * stops render blocking CSS loading
  * good for fonts and @imports
  * @prop {object} asyncLinkTag data representation of a link tag on a div element
  */
function loadCssAsync() {
    var arr = [];

    $.each($('[data-dom="link"]'), function () {
        var el = $(this),
            link = $('<link />').prop({
                href: el.data('href'),
                rel: el.data('rel') || 'stylesheet',
                media: el.data('media') || 'screen'
            });

        arr.push(link);
    });

    $(document.head).append(arr);
}

$(function(){
    loadCssAsync();
});

Additionally I distinguish in SCSS between above the fold CSS and backgrounds, fonts, print, ...

If you really want to put an effort in it, the above the fold CSS can go inline. But I find it rather tricky to pull this off on a larger project. So I'm fine with async loading backgrounds and fonts. However, for fonts it's now clear they're loaded afterwards, similar to a FOUC or call it "Flash of Loading Font". It's good to do some research on a solid substitute font so it doesn't change your layout too much.