Front End Development Front End Development Performance & Optimization 1 — Questions and Answers
Question 1: Which image format offers the best compression for photographs on modern web browsers?
- GIF
- BMP
- WebP (Correct answer)
- TIFF
Correct answer: WebP
WebP provides superior lossless and lossy compression for photos compared to JPEG and PNG, reducing file sizes significantly.
Question 2: What does 'lazy loading' mean in the context of web performance?
- Loading all resources at page startup
- Deferring the loading of off-screen resources until they are needed (Correct answer)
- Caching files in the browser
- Compressing JavaScript files
Correct answer: Deferring the loading of off-screen resources until they are needed
Lazy loading defers the loading of non-critical resources (like below-the-fold images) until they are about to enter the viewport.
Question 3: What is the purpose of minifying CSS and JavaScript files?
- To add comments for documentation
- To reduce file size by removing whitespace and unnecessary characters (Correct answer)
- To encrypt code for security
- To convert code to a different language
Correct answer: To reduce file size by removing whitespace and unnecessary characters
Minification removes whitespace, comments, and redundant code to reduce file sizes, resulting in faster download times.
Question 4: Which HTTP caching header tells the browser how long to cache a resource?
- Content-Type
- Cache-Control (Correct answer)
- ETag
- Last-Modified
Correct answer: Cache-Control
The Cache-Control header specifies caching directives, including max-age, which tells browsers how long to store a resource.
Question 5: What is the benefit of using a Content Delivery Network (CDN) for a US-based website?
- It compiles the source code
- It serves assets from geographically closer servers to reduce latency (Correct answer)
- It provides a database backup
- It generates sitemaps automatically
Correct answer: It serves assets from geographically closer servers to reduce latency
A CDN distributes content across multiple servers worldwide, serving files from the closest node to reduce latency and load times.
Question 6: What does the 'async' attribute on a <script> tag do?
- Delays script execution until the page loads
- Executes the script before HTML parsing
- Downloads the script asynchronously without blocking HTML parsing (Correct answer)
- Enables ES module syntax
Correct answer: Downloads the script asynchronously without blocking HTML parsing
The async attribute causes the script to download in parallel with HTML parsing and execute as soon as it's downloaded, without blocking.
Front End Development Front End Development Performance & Optimization 1
Which image format offers the best compression for photographs on modern web browsers?