Front End Development Case Studies & Practical Application 2

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?

Accepted Answer

Compress and serve images in WebP with proper sizing

Answer

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?

Accepted Answer

Implement History API pushState with paginated URLs and rel=next link tags

Answer

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?

Accepted Answer

Use React.memo and useMemo to memoize components and expensive computations

Answer

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:

Accepted Answer

Use aria-label or a visually-hidden <label> element associated via for/id

Answer

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:

Accepted Answer

Implement route-based code splitting with dynamic import()

Answer

Route-based code splitting defers loading JavaScript for routes the user hasn't visited, dramatically reducing the initial bundle.

Front End Development Practice Test

Front End Development Practice Test

Front End Development Case Studies & Practical Application 2