Front End Development Front End Development Performance & Optimization 3 — Questions and Answers
Question 1: What is the purpose of browser caching in web performance?
- To encrypt user data
- To store copies of resources locally so repeat visits load faster (Correct answer)
- To compress server responses
- To block third-party scripts
Correct answer: To store copies of resources locally so repeat visits load faster
Browser caching stores previously downloaded resources locally, so repeat page visits can load assets from the local cache instead of re-downloading them.
Question 2: Which technique reduces the number of HTTP requests by combining multiple CSS files into one?
- Tree shaking
- Minification
- Bundling/concatenation (Correct answer)
- Transpiling
Correct answer: Bundling/concatenation
Bundling (concatenation) merges multiple CSS or JS files into a single file, reducing the number of HTTP requests the browser needs to make.
Question 3: What does the 'defer' attribute on a <script> tag do differently from 'async'?
- Downloads the script faster
- Executes the script after HTML parsing is complete, in order (Correct answer)
- Blocks HTML parsing until complete
- Enables module syntax
Correct answer: Executes the script after HTML parsing is complete, in order
Unlike async, the defer attribute guarantees scripts execute after the HTML document is fully parsed and in the order they appear.
Question 4: What is the primary benefit of using CSS sprites?
- Adds 3D effects to images
- Combines multiple images into one to reduce HTTP requests (Correct answer)
- Enables responsive images
- Converts images to vector format
Correct answer: Combines multiple images into one to reduce HTTP requests
CSS sprites combine multiple small images into a single image file, reducing the number of HTTP requests and improving page load speed.
Question 5: Which tool would a front-end developer use to measure Core Web Vitals on a production site?
- GitHub Actions
- Google PageSpeed Insights (Correct answer)
- npm audit
- Webpack Bundle Analyzer
Correct answer: Google PageSpeed Insights
Google PageSpeed Insights reports real-world Core Web Vitals data (LCP, CLS, FID/INP) from the Chrome User Experience Report.
Question 6: What does 'First Contentful Paint' (FCP) measure in web performance?
- Time until the page is fully interactive
- Time until the first text or image is painted on screen (Correct answer)
- Total blocking time of scripts
- Time until the largest element is visible
Correct answer: Time until the first text or image is painted on screen
FCP measures the time from page navigation start until the browser renders the first piece of DOM content (text, image, or canvas).
Front End Development Front End Development Performance & Optimization 3
What is the purpose of browser caching in web performance?