Skip to Content
HTML and CSS Advanced: Styles That Hold Up in Production
Advanced
0 likes
Courses
HTML and CSS Advanced: Styles That Hold Up in Production

Check Yourself: Performance and Delivery

Five scenario questions on blocking CSS, fonts and images. If you miss more than one, go back to the lessons before moving on.

5 min HTML and CSSWeb DevelopmentTesting and DebuggingPerformance Optimization Advanced
Prev Next
Fullscreen Share
Course content

Sign in to save your progress.

Course Home
1. A page with a slow external stylesheet shows nothing for a second. Which choice reduces the blank time without hiding the page's first screen?
Add defer to the stylesheet link. Inline the CSS the first screen needs and load the rest with media="print" and an onload swap. Move the stylesheet link to the bottom of the body. Minify the HTML only.
2. A critical CSS setup inlines the first-screen rules and also keeps them in the full stylesheet that loads afterwards. What is the cost?
The page will not paint. Nothing, because the browser removes duplicates. The rules ship twice, and the HTML grows on every page view. The stylesheet will be render-blocking.
3. Your web font arrives late and the text below the heading jumps when it swaps in. Which fix attacks the jump itself?
Define a fallback face with size-adjust and the ascent, descent and line-gap overrides computed from the font files. Use font-display: swap and nothing else. Preload five more fonts. Set font-display: block.
4. A product image fills a slot that is about 342 CSS pixels wide on a phone with a device pixel ratio of 2. You offer 400w, 800w and 1200w files. Which one does the browser need?
The 1200w file, because bigger is always safer. The 800w file, since the image needs about 684 physical pixels. Whichever file is listed first in srcset. The 400w file, because the phone is small.
5. The hero image at the very top of the page has loading="lazy", and the page feels slow to show it. What is the better setup?
Use a larger file so it loads faster. Add decoding="sync" only. Remove loading="lazy" and add fetchpriority="high". Keep lazy loading and add a spinner.

About

Five scenario questions on blocking CSS, fonts and images. If you miss more than one, go back to the lessons before moving on.

Duration
5 min
Last update
08/11/2026
Was this helpful?
​ 0 ​ 0

Comments (0)

Sign in to comment

No comments yet.