Front-End-Checklist

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize Google Tag Manager implementation. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when auditing a page's heading structure, generating H1 text for landing pages or blog posts, or reviewing a CMS template that may produce empty or missing H1 elements.

Use when reviewing stylesheets or components that use JavaScript to toggle classes on parent elements based on child state, form input values, or content presence — :has() may replace the JavaScript entirely.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use logical heading hierarchy. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Maintain logical heading order. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when applies to all CSS layout rules. Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break` properties. Use when auditing responsive design or WCAG 2.1 Level AA compliance. Test at 320px viewport width and at 400% browser zoom.

Use when auditing metadata, crawlability, structured data, or indexability related to Add hreflang tags for multilingual sites. Verify the rendered HTML and HTTP response rather than relying only on source files.

Use when reviewing HTTP response headers on any site that serves content over HTTPS.

Use when reviewing templates, rendered HTML, or shared components related to Use semantic HTML elements. Validate the final browser-facing markup, not just the source framework abstraction.

Use when reviewing templates, rendered HTML, or shared components related to Add resource hints (preload, prefetch, dns-prefetch). Validate the final browser-facing markup, not just the source framework abstraction.

Use when auditing page weight for crawl efficiency, investigating why certain page content is not appearing in Google's index, or reviewing server-rendered pages that embed large JSON payloads in HTML.

Use when applies to XHTML documents and polyglot HTML documents that must parse correctly as both HTML5 and XML. For modern HTML5-only documents, only `lang` is needed and `xml:lang` is not required. Check when auditing documents served as application/xhtml+xml or documents that include both attributes.

Use when auditing slow page loads, heavy assets, or rendering delays related to Enable HTTP/2 or HTTP/3. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize HTTP requests. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Use when auditing whether a website or web application serves content exclusively over HTTPS with a valid certificate.

Use when auditing a site's internal and external links for protocol consistency, migrating a site from HTTP to HTTPS, or reviewing hardcoded URLs in a codebase that may use `http://` instead of `https://`.

Use when checking whether a web server is configured to redirect all HTTP traffic to HTTPS.

Use when auditing URL structures for word separator format, generating slugs from titles, or planning a URL migration from underscores or spaces to hyphens with appropriate redirects.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure identical links have consistent destinations. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use when reviewing image assets, markup, and CDN or build transforms related to Serve images from a CDN. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.