CODEWITHSUNDEEP
htmlcssoptimizationgoogle-pagespeed
zoid
zoid

Reputation: 11

Optimizing above-the-fold CSS

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

Example

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

Answers (1)

user3646269
user3646269

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

Related Questions