Reputation: 11
I want to fix the "Eliminate render-blocking JavaScript and CSS in above-the-fold content" requirement for better PageSpeed Insights score but I'm not quite sure what the best approach to this problem is.
Relevant presentation: Optimizing the Critical Rendering Path
Since inlining lots of CSS leads to slower page loads on subsequent visits, I could serve different versions for recurring visitors based on a cookie. For detecting above-the-fold CSS I could use the bookmarklet from this article: paul.kinlan.me/detecting-critical-above-the-fold-css/
For new visitors:
<!DOCTYPE HTML>
<html>
<head>
<title>New Visitor</title>
<style><!-- insert above the fold css here --></style>
<noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
<!-- insert content here -->
<script>
// load css
var node = document.createElement('link');
node.rel = 'stylesheet';
node.href = 'style.css';
document.head.appendChild(node);
// set cookie
var exp = new Date();
exp.setTime(exp.getTime() + 3600 * 1000);
document.cookie = 'returning=true; expires=' + exp.toUTCString() + '; path=/';
</script>
</body>
</html>
For returning visitors:
<!DOCTYPE HTML>
<html>
<head>
<title>Returning Visitor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- content here -->
</body>
</html>
Any problems with this approach?
Upvotes: 1
Views: 1213
Reputation:
There is such a thing as over-optimizing. Your example approach adds unneeded complexity. What you should be looking at is a minimal stylesheet for the head section that will make everything above the fold make sense and conform to the design and layout (but not necessarily respect it 100%).
For the rest of the page just load the rest of the CSS at the end of the page and you should be fine. If what matters to you is above the fold, then so does the first CSS you load. Everything else can be delayed.
Upvotes: 1