Front End Development Case Studies & Practical Application 2 — Questions and Answers
Question 1: A startup's e-commerce site has a 70% mobile bounce rate. Analytics show the largest contentful paint (LCP) is 8 seconds on 3G. What is the most impactful first fix?
- Add a service worker for offline caching
- Compress and serve images in WebP with proper sizing (Correct answer)
- Switch from HTTP to HTTP/2
- Minify all CSS files
Correct answer: Compress and serve images in WebP with proper sizing
Unoptimized images are the most common cause of slow LCP; serving correctly sized WebP images typically yields the largest single performance gain.
Question 2: A news website wants to implement infinite scroll but is concerned about SEO. Which approach best balances UX and search engine discoverability?
- Use hash-based URLs like /#page=2 for each batch
- Render all articles server-side without pagination
- Implement History API pushState with paginated URLs and rel=next link tags (Correct answer)
- Load all content at once and use CSS to hide older articles
Correct answer: Implement History API pushState with paginated URLs and rel=next link tags
Using pushState to update the URL and adding rel=next signals allow search engines to crawl paginated content while users enjoy smooth scrolling.
Question 3: A React dashboard re-renders the entire component tree every second due to a real-time data feed. Users report UI lag. What is the best targeted fix?
- Convert the entire app to class components
- Use React.memo and useMemo to memoize components and expensive computations (Correct answer)
- Disable React StrictMode
- Move all state to localStorage
Correct answer: Use React.memo and useMemo to memoize components and expensive computations
React.memo prevents unnecessary re-renders of child components whose props haven't changed, and useMemo caches expensive derived values.
Question 4: Your team inherits a legacy site that fails WCAG 2.1 AA. The audit shows form inputs have no visible labels. The quickest compliant fix is:
- Add placeholder text that describes the field
- Use aria-label or a visually-hidden <label> element associated via for/id (Correct answer)
- Increase the font size of placeholder text
- Add a tooltip on hover over each input
Correct answer: Use aria-label or a visually-hidden <label> element associated via for/id
A programmatically associated <label> or aria-label is required for screen readers; placeholders alone are not a substitute and disappear on input.
Question 5: A SPA's initial bundle is 2.4 MB, causing a 6-second time-to-interactive on mobile. Without changing frameworks, the best architectural change is:
- Enable gzip only
- Implement route-based code splitting with dynamic import() (Correct answer)
- Convert all images to SVG
- Move all logic to web workers
Correct answer: Implement route-based code splitting with dynamic import()
Route-based code splitting defers loading JavaScript for routes the user hasn't visited, dramatically reducing the initial bundle.
Question 6: A retail site shows a flash of unstyled text (FOUT) for its custom font. The designer requires the brand font visible on first paint. The best technique is:
- Use font-display: block to hold layout until the font loads
- Preload the font file with <link rel='preload'> and use font-display: swap with a closely matched system fallback (Correct answer)
- Host the font on a CDN
- Use font-display: optional
Correct answer: Preload the font file with <link rel='preload'> and use font-display: swap with a closely matched system fallback
Preloading the font reduces fetch latency, while swap with a matched fallback minimizes layout shift and shows text immediately.
Question 7: During a code review you find a developer built a dropdown menu using only <div> and CSS. A screen reader user reports they cannot navigate it. The correct remediation is:
- Add tabindex=0 to each div item
- Replace divs with <ul>/<li> elements and add role='menu', role='menuitem', and keyboard event handlers (Correct answer)
- Add a title attribute to the container div
- Increase the z-index of the dropdown
Correct answer: Replace divs with <ul>/<li> elements and add role='menu', role='menuitem', and keyboard event handlers
ARIA menu roles combined with keyboard handlers (Arrow keys, Escape) implement the expected interaction pattern for screen reader and keyboard users.
Front End Development Case Studies & Practical Application 2
A startup's e-commerce site has a 70% mobile bounce rate.
Analytics show the largest contentful paint (LCP) is 8 seconds on 3G.
What is the most impactful first fix?