Render blocking ressources Page Speed

0
votes

I have made an analysis of the speed of my website with Page Speed Insights, and an advice the tool is giving me is :

"For stylesheets, consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device. See Render-Blocking CSS to learn more. Build tools like critical can help you extract and inline critical CSS."

However I have always read that this practice wasn't good because the browser was in fact reading all the CSS files, even if it's not targetting the good width.

What is your opinion about it ?

1
pagespeedgoogle-pagespeed

1 Answers

1
votes

Stylesheets (aka CSS) are render-blocking resources, so your browser may parse all stylesheet blocks on your page before continuing rendering.

You may consider putting your device-specific CSS to different files (e.g. pc_styles.css for PC version, sp_styles.css for smart phones) and adding media attribute into <link> tags. 

<link rel="stylesheet" href="sp_styles.css">
<link rel="stylesheet" href="pc_styles.css" media="screen and (min-width: 500px)">

In above example, pc_styles.css will not be used for browsers that has screen width less than 500px. It saves download time and prevents render-blocking on mobile browsers.

You also can lazy-load other CSS files you may not need yet, such as CSS for popups, photo sliders, code-highlighting etc...

defer.js (note: I am the author of this script) is a super tiny script (less than 500 bytes) to efficiently load JavaScript. Extended version (about 1KB) supports CSS files, images and iframes. They are all easy to use.

Full sample codes can be found here.