Challenge - 5 Problems

🎖️

Critical CSS Master

Get all challenges correct to earn this badge!

Test your skills under time pressure!

🧠 Conceptual

intermediate

1:30remaining

Understanding Critical CSS Purpose

Why is extracting critical CSS important for web performance?

AIt reduces the amount of CSS loaded initially, speeding up page rendering.

BIt combines all CSS files into one large file for easier management.

CIt delays loading CSS until after all images have loaded.

DIt removes all unused CSS from the project permanently.

Attempts:

2 left

📝 Syntax

intermediate

1:30remaining

Sass Partial for Critical CSS

Which Sass partial file naming convention is best for critical CSS to ensure it is loaded first?

Amain-critical.scss

B_critical.scss

C_main.scss

Dcritical.scss

Attempts:

2 left

❓ rendering

advanced

2:00remaining

Effect of Critical CSS on Page Load

Given this HTML and Sass setup, what will the user see first when the page loads?

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Critical CSS inlined here */
    body { background: white; }
    header { color: blue; font-size: 2rem; }
  </style>
  <link rel="stylesheet" href="styles.css">
  <title>Test Page</title>
</head>
<body>
  <header>Welcome!</header>
  <main>
    <p>This is the main content.</p>
  </main>
</body>
</html>

AOnly the body background color applies, but header text is unstyled.

BThe entire page loads with all styles at once after styles.css loads.

CNo styles apply until styles.css finishes loading, so content is unstyled initially.

DThe header text appears styled in blue immediately, while other styles load later.

Attempts:

2 left