How to use inline CSS for above the fold content

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" 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>

Recommended topics

Hot tags