Front End Performance and Accessibility
What this domain covers
Expect questions on asset loading strategy, caching, image optimization, Core Web Vitals, and WCAG-oriented markup. You should connect Drupal configuration (aggregation, lazy loading, responsive images) to measurable front-end outcomes.
Concepts to know
- Critical rendering path: CSS is render-blocking; synchronous JS is parser-blocking. Use
defer/asyncand inline critical CSS where appropriate. - Drupal aggregation: CSS/JS aggregation reduces request count. In modern Drupal, aggregation settings live under performance configuration.
- Images: responsive image styles,
loading="lazy"for below-the-fold images, explicitwidth/heightto prevent layout shift, modern formats like WebP/AVIF. - Core Web Vitals: LCP (loading), INP (interactivity), CLS (layout stability).
- Accessibility: semantic landmarks, alt text, color contrast (4.5:1 for normal text), keyboard focus, ARIA only when native semantics are insufficient.
- Caching: page cache, dynamic page cache, and render cache; BigPipe streams personalized parts.
Traps in questions
Common traps: lazy-loading the LCP hero image (hurts LCP), omitting image dimensions (causes CLS), and using ARIA roles that duplicate native semantics. Another is assuming aggregation alone fixes performance - it reduces requests but not payload size. Questions may also confuse INP with a loading metric; it measures responsiveness.
Rule of thumb
Eager-load and prioritize the hero/LCP image; lazy-load everything below the fold. Always set dimensions to reserve space.
Worked example: A hero image should use loading="eager" with fetchpriority="high" and explicit width/height. Below-the-fold images use loading="lazy". This improves LCP while preventing CLS.