Ad

How To Use Inline CSS For Above The Fold Content

- 1 answer

I've recently came across some tasks for website performance improvement but due to the concept above and below used in the question I feel confused to realize what is being asked. (ーー;)

Does the fold means where the page splits in two parts? (by design and css rules) so the solution is to detect the css used for the 2nd part and load it at the bottom of the page?


Task
The below the fold styles in style.css are delaying the rendering of the above the fold content. Improve the load speed for the above the fold content.

Your solution should inline the CSS for only the above the fold content and make sure the loading of main.css is not blocking rendering of the page.

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('scroll-button').addEventListener('click', () => {
    document.getElementsByClassName('conversation-headline')[0]
        .scrollIntoView(true);
  });
});
html {
  background-color: #FFF;
}

body {
  background-color: #FFF;
  color: #848484;
  font-family: "Helvetica","Arial",sans-serif;
  margin: 0;
  min-height: 100vh;
}

h1 {
  font-size: 28px;
  font-weight: 100;
}

h2 {
  color: #FFF;
  font-size: 38px;
  font-weight: 100;
}

h3 {
  color: #000;
  font-size: 38px;
  font-weight: 100;
  line-height: 125%;
  margin: 0 40px;
}

.card {
  margin: 0 auto;
  max-width: 79%;
}

.card-content {
  align-items: center;
  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),
    0 1px 10px 0 rgba(0,0,0,.12),
    0 2px 4px -1px rgba(0,0,0,.2);
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.conversation-diag {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.conversation-headline {
  color: #000;
  font-size: 38px;
  font-weight: 100;
  line-height: 125%;
  margin: 0 40px;
}

.conversation-pane {
  display: flex;
  flex-direction: column;
  height: 40vh;
  justify-content: space-around;
  padding: 40px;
}

.flipped {
  transform: scaleX(-1);
}

.header {
  align-items: center;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  height: 10vh;
  padding: 0 16px;
}

.ribbon {
  align-items: center;
  background-color: #848484;
  display: flex;
  flex-direction: column;
  height: 90vh;
  justify-content: space-around;
}

.ribbon button {
  background-color: #FFF;
  box-shadow:
    0 2px 2px 0 rgba(0,0,0,0.14),
    0 3px 1px -2px rgba(0,0,0,0.2),
    0 1px 5px 0 rgba(0,0,0,0.12);
  color: #848484;
  cursor: pointer;
  font-size: 25px;
  padding: 0.7em 0.57em;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Socializer</title>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="styles/main.css">
    <script src="scripts/app.js" type="text/javascript"></script>
  </head>
  <body>
    <header class="header">
      <svg fill="#848484" height="48" viewbox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z"/>
      </svg>
      <h1>Socializer</h1>
    </header>
    <div class="ribbon">
      <div class="ribbon-text-container">
        <h2>Really talk to your friends.</h2>
        <h2>Really.</h2>
      </div>
      <button id="scroll-button">Learn More</button>
    </div>
    <div>
      <section class="conversation-pane">
      <h3 class="conversation-headline">Make social media mean something again.</h3>
        <div class="conversation-diag">
          <div class="card">
            <div class="card-content">
              <svg fill="#000000" height="128" viewbox="0 0 24 24" width="128" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="9" cy="9" r="4"/>
                  <path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"/>
                  <path d="M0 0h24v24H0z" fill="none"/>
              </svg>
              <div class="text-container">
                <h3>Miss you!</h3>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="text-container">
                <h3>Miss you toooo!</h3>
              </div>
              <svg class="flipped" fill="#000000" height="128" viewbox="0 0 24 24" width="128" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="9" cy="9" r="4"/>
                  <path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"/>
                  <path d="M0 0h24v24H0z" fill="none"/>
              </svg>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>

Ad

Answer

To better understand what's above the fold, temporarily apply this to your website:

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

Everything you can now see on screen is above the fold. Everything you can't see, is below the fold.

Technically, the fold is the bottom margin of your screen, without scrolling down.

"Performance loading above the fold CSS" means to separate the CSS rules for the content that's visible without scrolling down and placing them in a separate, smaller file. This stylesheet should be the only render blocking CSS in your page.
The rest of your CSS is to be loaded async, because it will not create FOUC.

In doing so, your page will appear to load and render faster than if you load all your CSS render-blocking.

The only time this technique could create FOUC is if someone empties cache and hard reloads the page, while scrolled down, which never happens.

Ad
source: stackoverflow.com
Ad