Frontend Checklist

Sun, 15 Mar 2026 00:00:00 +0000

Landing Website — Frontend Checklist & TODO

Based on Front-End Checklist, Front-End Performance Checklist, and Hugo Best Practices.

Priority: 🔴 High · 🟡 Medium · 🟢 Low

1. HEAD & Meta Tags

Doctype 🔴 — HTML5 doctype is present at the top of all pages
Charset 🔴 — UTF-8 declared as the first meta tag in <head>
Viewport 🔴 — width=device-width, initial-scale=1 is set
Viewport viewport-fit 🟢 — Add viewport-fit=cover for notched devices: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Title 🔴 — Every page has a unique, descriptive <title> (< 55 characters)
Meta description 🔴 — Per-page descriptions provided (< 150 characters)
keywords meta tag 🟡 — Either populated dynamically from tags/categories or removed entirely (Google ignores it, but an empty tag looks unprofessional)
Canonical URL 🔴 — <link rel="canonical"> present to avoid duplicate content
Language attribute 🔴 — <html lang="..."> set correctly for the page language
Alternate hreflang 🟢 — Hreflang tags present for all translations
x-default hreflang 🟡 — <link rel="alternate" hreflang="x-default" href="..." /> present for international landing page fallback (Google recommendation)
twitter:card meta tag 🟡 — twitter:card type declared (e.g., summary_large_image). Required for Twitter/X preview cards
Open Graph tags 🟡 — og:type, og:title, og:description, og:image, og:url, og:locale, og:site_name present
og:image:width and og:image:height 🟢 — Dimensions specified so crawlers render immediately without downloading
CSS before JS 🔴 — All CSS <link> tags loaded before any <script> tags in <head>

2. Favicons & Web App Manifest

Favicon files 🟡 — All required sizes present (16x16, 32x32, 192x192, 512x512, apple-touch-icon, favicon.ico)
Web manifest 🟡 — site.webmanifest exists and is linked
Manifest name and short_name 🔴 — Both fields populated with the site name (required for PWA install prompts and bookmarking)
Theme color 🟢 — <meta name="theme-color"> set to match brand

3. HTML Quality

Semantic HTML5 🔴 — Appropriate use of <header>, <footer>, <section>, <main>, <aside>, <nav>, <article>
404 error page 🔴 — Custom 404 page exists with inline CSS (no external stylesheet dependency)
5xx error page 🟡 — Custom 500 error page exists with inline CSS
No boilerplate/template remnants 🔴 — All placeholder text, debug strings, and framework boilerplate removed from production templates
No dead code 🟢 — Unused template blocks, variables, and commented-out code removed
noopener noreferrer on external links 🔴 — All target="_blank" links include rel="noopener noreferrer" to prevent tab nabbing
<noscript> fallback 🟡 — A minimal fallback message provided for users with JavaScript disabled
No unused source files 🟢 — Unused SCSS/JS source files removed from the project
All strings internationalized 🟡 — No hardcoded UI strings in templates; all user-facing text pulled from i18n files
W3C HTML validation 🔴 — All pages pass W3C validator without errors
Broken link check 🔴 — No broken internal or external links (use W3C Link Checker)
Clean production code 🟢 — HTML comments and unnecessary whitespace removed in production output

4. CSS

CSS preprocessor 🟢 — Using a CSS preprocessor (Sass/SCSS/Less) for maintainability
Autoprefixer 🔴 — Vendor prefixes generated automatically via Autoprefixer or PostCSS
Minification 🔴 — All CSS minified in production
Fingerprinting / cache busting 🟡 — CSS filenames include content hash for cache invalidation
SRI (Subresource Integrity) 🟡 — CSS <link> tags include integrity attribute
Single CSS bundle 🔴 — All CSS concatenated into a single file (or minimal files for HTTP/2)
CSS Reset / Normalize 🔴 — A CSS reset, normalize, or reboot is included and up to date
Unused CSS removed 🟡 — Unused CSS selectors purged (via PurgeCSS or similar). Full framework imports trimmed to needed components
Critical CSS 🟡 — Above-the-fold CSS inlined in <head> for faster First Contentful Paint (FCP)
font-display property 🟡 — Web fonts (including icon fonts) use font-display: swap to prevent FOIT (Flash of Invisible Text)
No inline CSS in <body> 🔴 — All styles in external files or <head> (except critical CSS)
Unique IDs 🔴 — All element IDs are unique per page
Responsive design 🔴 — Tested at 320px, 768px, 1024px, 1440px breakpoints
Print stylesheet 🟡 — Print-specific styles provided
CSS validation 🟡 — CSS passes W3C CSS Validator
LTR/RTL support 🟡 — If multilingual, tested for RTL languages

5. JavaScript

No inline JS in <body> 🔴 — JavaScript code in external files, not mixed with HTML
Minification 🔴 — All JS files minified in production
Fingerprinting / SRI 🔴 — JS filenames hashed and integrity attribute present
Non-blocking loading 🔴 — Scripts loaded with defer or async attribute
Bundled into minimal files 🔴 — All JS concatenated/bundled to minimize HTTP requests
No javascript:void(0) 🟡 — Using proper href="#" with event.preventDefault() or <button> elements instead
Updated libraries 🟡 — All JS libraries are up to date with latest stable versions
Dependency size audit 🟢 — External libraries are necessary and as lightweight as possible (consider Vanilla JS for simple features)
ESLint / linting 🟡 — No errors flagged by a JS linter
No console.log in production 🟢 — Debug logging removed from production builds

6. Images

Image optimization 🔴 — All images compressed without visible quality loss (target: < 200 KB per image)
Modern formats 🟡 — Using WebP (or AVIF) with fallbacks where appropriate
No duplicate format files 🟢 — If multiple formats exist for the same image, implement <picture> with fallback or remove unused formats
SVG optimization 🟡 — Large SVG files optimized with SVGO
loading="lazy" 🟡 — Below-the-fold images use native lazy loading
Descriptive alt text 🔴 — All <img> tags have meaningful, descriptive alt text (not just the brand name)
width and height attributes 🟡 — Dimensions specified on images to prevent Cumulative Layout Shift (CLS)
Responsive images 🟡 — Using srcset and <picture> to serve appropriately sized images per viewport
Hugo image processing 🟡 — Using Hugo’s built-in .Resize / .Fit / .Fill for serving optimally sized images (Hugo-specific)
No oversized images in content 🔴 — Blog/content images are appropriately sized (not raw camera/design exports)

7. Video & Media

Video hosting strategy 🔴 — Large videos hosted on CDN or streaming platform (YouTube/Vimeo) rather than self-hosted in static/
Video compression 🟡 — Self-hosted videos compressed with modern codecs (H.265/VP9), with WebM fallback
preload optimization 🟡 — Videos not auto-loaded use preload="none" or preload="metadata" to save bandwidth
Video file size 🔴 — Self-hosted video files kept under 5 MB each where possible

8. Performance

Resource hints 🟡 — <link rel="preconnect"> and/or <link rel="dns-prefetch"> added for critical external domains (analytics, CDN, API)
Page weight < 1.5 MB 🔴 — Initial page load (HTML + CSS + JS + images) kept under 1.5 MB, ideally under 500 KB
Page load time < 3 seconds 🔴 — Full page load under 3 seconds on 3G connection
TTFB < 1.3 seconds 🔴 — Time To First Byte under 1.3 seconds

HTML minification 🟡 — Hugo minify config enabled:

Copy

1
2
3

minify:
  disableXML: true
  minifyOutput: true

Gzip/Brotli compression 🔴 — Server delivers compressed responses (verify with curl -H "Accept-Encoding: gzip" -I)
HTTP cache headers 🟡 — Static assets have appropriate Cache-Control headers
Google PageSpeed score ≥ 90 🔴 — PageSpeed Insights score ≥ 90 on both mobile and desktop
Core Web Vitals 🔴 — LCP, INP, and CLS metrics within “Good” thresholds
Cookie size 🟡 — Each cookie under 4096 bytes; domain has fewer than 20 cookies
Minimal HTTP requests 🔴 — Every requested file is essential; no unnecessary requests
CDN 🟡 — Static assets served from a CDN for global performance
Same-protocol assets 🔴 — All assets served over HTTPS; no mixed content

9. SEO

Sitemap 🔴 — sitemap.xml generated and submitted to Google Search Console
robots.txt 🔴 — robots.txt present and not blocking important pages
robots.txt environment check 🟡 — Verify that production environment variables are set so robots.txt allows crawling (not Disallow: /)
enableRobotsTXT in Hugo config 🟡 — Enabled in config.yaml so Hugo uses the custom robots.txt template
Structured data (JSON-LD) 🔴 — Schema.org markup present and validated with Rich Results Test
Schema.org accuracy 🟡 — Author names, sameAs URLs, and image references in JSON-LD are correct (not empty or placeholder values)
Sitemap configuration 🟡 — Hugo sitemap config set with changefreq and priority:
Copy
1 2 3

sitemap: changefreq: weekly priority: 0.5
Heading hierarchy 🟡 — Proper heading order (single <h1> per page, <h2> → <h3> → etc.) without skipping levels
HTML sitemap 🟡 — An HTML sitemap page is accessible via the footer
Google Analytics / Search Console 🟢 — Analytics installed and Search Console configured

Skip navigation link 🔴 — “Skip to main content” link at the top of the page:
Copy
1

<a href="#content" class="visually-hidden-focusable">Skip to main content</a>
Focus styles 🔴 — :focus outlines visible on all interactive elements; not suppressed by custom CSS
Color contrast 🟡 — All text/background combinations pass WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text)
ARIA labels on icon-only links 🟡 — Links/buttons using only icons have aria-label for screen readers
Keyboard navigation 🔴 — All interactive elements (nav, modals, forms, buttons) reachable and operable with keyboard only
Screen reader testing 🟡 — Pages tested with at least one screen reader (VoiceOver, NVDA, ChromeVox)
Form labels 🔴 — All form inputs have associated <label> elements or aria-label
Heading structure 🔴 — Headings used in proper order for document outline (not for visual styling)
WAVE / axe audit 🟡 — Automated accessibility testing passed with WAVE or axe
Progressive enhancement 🟡 — Core functionality (navigation, content) works without JavaScript

11. Security

HTTPS everywhere 🔴 — All pages and assets served over HTTPS
SRI (Subresource Integrity) 🟡 — External/CDN CSS and JS include integrity and crossorigin attributes
noopener noreferrer 🔴 — All target="_blank" links include rel="noopener noreferrer"
Content Security Policy (CSP) 🟡 — CSP headers configured to restrict resource loading sources
HSTS header 🟡 — Strict-Transport-Security header set with max-age ≥ 31536000
X-Content-Type-Options 🟢 — nosniff header set to prevent MIME-type sniffing
X-Frame-Options 🟢 — DENY or SAMEORIGIN header set to prevent clickjacking
Security headers audit 🟡 — Scan with securityheaders.com and Mozilla Observatory

12. Hugo-Specific Best Practices

Content archetypes 🟡 — Archetypes defined for each content type (blog, page, etc.) with pre-filled front matter:

Copy

# archetypes/blog.md
---
title: "{{ replace .Name "-" " " | title }}"
description: ""
date: {{ .Date }}
draft: true
archived: false
toc: true
tags: []
---

canonifyURLs 🟡 — Consider enabling canonifyURLs: true in config for consistent URL handling
External link render hook 🟡 — Custom render-link.html in layouts/_default/_markup/ to add target="_blank" rel="noopener noreferrer" to external links in markdown content
Content for all configured languages 🟡 — All languages in config have corresponding content directories, or unused languages are disabled
.gitignore coverage 🟢 — Build artifacts ignored: public/, resources/, node_modules/, generated JS/CSS in assets/
Content organization 🟢 — Images stored alongside their markdown files (page bundles), not in a separate global folder
Hugo Pipes for assets 🟡 — Using resources.Minify, resources.Fingerprint, and resources.Concat for CSS/JS processing
Conditional asset loading 🟢 — Page-specific scripts and styles wrapped in Hugo conditionals to avoid loading on every page

13. Build & CI/CD

Pinned CI image 🔴 — CI container uses a specific version (e.g., node:20-alpine), not latest
Hugo binary available in CI 🟡 — Hugo is correctly installed/available in the CI build environment
Production environment variables 🟡 — HUGO_ENV=production (or equivalent) set in CI so that:
- robots.txt allows crawling
- Analytics scripts are activated
- Minification/optimization is enabled
Build size monitoring 🟢 — Bundle size tracked and checked on each build (consider size-limit or similar)
Build reproducibility 🟡 — package-lock.json committed and npm ci used instead of npm install in CI

14. Fonts & Typography

WOFF2 format 🔴 — Web fonts served in WOFF2 format (with WOFF fallback for older browsers)
Webfont total size < 300 KB 🟡 — All font files (including icon fonts) combined under 300 KB
font-display: swap 🟡 — All @font-face declarations include font-display: swap
Preconnect for font CDN 🟡 — If using Google Fonts or similar: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
System font stack considered 🟢 — Evaluated whether a system font stack is sufficient vs. custom web fonts (better performance)
Icon font audit 🟢 — If using an icon font, verify full font is needed; consider inline SVG for a small number of icons

15. Pre-Launch Summary Checklist

#	Item	Status
1	Web manifest has valid `name`/`short_name`	⬜
2	No boilerplate/placeholder text in templates	⬜
3	`rel="noopener noreferrer"` on all external links	⬜
4	All images optimized (< 200 KB each)	⬜
5	Videos compressed or externally hosted	⬜
6	Skip navigation link present	⬜
7	CI uses pinned image version	⬜
8	Production env variables set in CI	⬜
9	Core Web Vitals in “Good” range	⬜
10	`robots.txt` allows crawling in production	⬜
11	PageSpeed score ≥ 90 (mobile + desktop)	⬜
12	Accessibility audit passed (WAVE/axe)	⬜
13	Structured data validated (Schema.org)	⬜
14	Security headers audit passed	⬜
15	All forms have labels and proper input types	⬜

Frontend on ARI Systems

Frontend Checklist

Landing Website — Frontend Checklist & TODO

1. HEAD & Meta Tags

2. Favicons & Web App Manifest

3. HTML Quality

4. CSS

5. JavaScript

6. Images

7. Video & Media

8. Performance

9. SEO

11. Security

12. Hugo-Specific Best Practices

13. Build & CI/CD

14. Fonts & Typography

15. Pre-Launch Summary Checklist

References

Frontend on ARI Systems

Frontend Checklist

Landing Website — Frontend Checklist & TODO

1. HEAD & Meta Tags

2. Favicons & Web App Manifest

3. HTML Quality

4. CSS

5. JavaScript

6. Images

7. Video & Media

8. Performance

9. SEO

10. Accessibility (a11y)

11. Security

12. Hugo-Specific Best Practices

13. Build & CI/CD

14. Fonts & Typography

15. Pre-Launch Summary Checklist

References