Practice & Assessment
Test your understanding of How Browsers Load Pages
Multiple Choice Questions
5Which browser rendering step calculates the exact pixel position and size of every visible element?
A script tag loaded with the `async` attribute will execute:
What does TTFB measure?
Which Cache-Control directive should be used for a versioned JavaScript bundle with a content hash in its filename?
In a network waterfall, a long 'Stalled' bar on a small file most likely indicates:
Coding Challenges
1Audit and Fix Render-Blocking Resources
Given an HTML file (provided) that includes 3 external scripts and 2 stylesheets in the <head>, identify which are render-blocking and refactor them: add defer to all non-critical scripts, add async to the analytics script, and move the print stylesheet to use media='print'. Output: the corrected HTML file. Constraint: do not change the order of the link/script tags, only add attributes or media values. Estimated time: 15–20 minutes.
Mini Project
CRP Audit Report for a Real Website
Choose any public website. Using Chrome DevTools Performance tab, record a cold-load. Document: (1) TTFB value, (2) every render-blocking resource identified (name and size), (3) a screenshot of the waterfall annotated with the four critical phases (DNS, connect, TTFB, download) on the main document request, (4) the cache headers returned on at least 3 static assets. Produce a one-page HTML report embedding your findings with a recommended fix for each issue found. Deliverable: a self-contained HTML file with your analysis.