E-Commerce Development E-Commerce Development Performance Optimization 1 — Questions and Answers
Question 1: Which metric measures the time from when a user navigates to a page to when the largest visible content element is fully rendered?
- First Contentful Paint (FCP)
- Time to First Byte (TTFB)
- Largest Contentful Paint (LCP) (Correct answer)
- Cumulative Layout Shift (CLS)
Correct answer: Largest Contentful Paint (LCP)
LCP (Largest Contentful Paint) measures rendering time of the largest image or text block visible in the viewport, and Google recommends it be under 2.5 seconds for a good user experience.
Question 2: What is the purpose of a Content Delivery Network (CDN) for an e-commerce store?
- To process payment transactions faster
- To serve static assets from geographically distributed servers closest to the user (Correct answer)
- To manage inventory levels in real time
- To generate product descriptions automatically
Correct answer: To serve static assets from geographically distributed servers closest to the user
A CDN caches static assets (images, CSS, JS) on edge servers worldwide so users receive content from the nearest server, reducing latency and improving page load speed.
Question 3: Which image format is recommended for e-commerce product images to achieve the best compression with high visual quality?
- BMP
- TIFF
- WebP (Correct answer)
- GIF
Correct answer: WebP
WebP provides 25–35% smaller file sizes compared to JPEG and PNG at equivalent visual quality, making it the preferred format for e-commerce product images to improve load speed.
Question 4: What does 'lazy loading' mean in the context of e-commerce product images?
- Loading all images at page startup regardless of viewport position
- Deferring image loading until the image is about to enter the user's viewport (Correct answer)
- Compressing images on the server before delivery
- Loading images from a local cache only
Correct answer: Deferring image loading until the image is about to enter the user's viewport
Lazy loading defers the download of images until they are about to be scrolled into view, reducing initial page load time and bandwidth usage on product listing and category pages.
Question 5: What is code splitting in the context of an e-commerce front-end built with React or Next.js?
- Dividing the CSS stylesheet into multiple files
- Breaking the JavaScript bundle into smaller chunks loaded on demand per route or component (Correct answer)
- Splitting database queries across multiple servers
- Distributing API traffic to multiple back-end nodes
Correct answer: Breaking the JavaScript bundle into smaller chunks loaded on demand per route or component
Code splitting breaks the JavaScript bundle into smaller chunks so users only download the code needed for the current page, reducing initial load time on high-traffic pages like the homepage and PDP.
Question 6: Which database indexing strategy should be applied to an e-commerce products table to speed up filtering by category and price range?
- Full-text index on the product description
- Composite index on (category_id, price) (Correct answer)
- Unique index on the product SKU only
- No indexes — rely on full table scans
Correct answer: Composite index on (category_id, price)
A composite index on (category_id, price) allows the database to efficiently execute queries that filter by category and sort or range-filter by price without a full table scan.
E-Commerce Development E-Commerce Development Performance Optimization 1
Which metric measures the time from when a user navigates to a page to when the largest visible content element is fully rendered?