Performance, Accessibility and Tooling
Core Web Vitals
| Metric | Measures | Good |
|---|---|---|
| LCP (Largest Contentful Paint) | Loading speed | 2.5 s or less |
| INP (Interaction to Next Paint) | Responsiveness | 200 ms or less |
| CLS (Cumulative Layout Shift) | Visual stability | 0.1 or less |
Performance checklist
- Compress and size images; use modern formats (WebP, AVIF) and
loading="lazy". - Set
widthandheighton images to avoid layout shift. - Minify and split JavaScript; load non-critical scripts with
defer. - Serve static assets with long
Cache-Controllifetimes and hashed file names. - Use a CDN and HTTP/2 or HTTP/3.
- Avoid render-blocking resources and large third-party scripts.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<script src="analytics.js" defer></script>
<img src="hero.webp" alt="Students studying" width="1200" height="630" fetchpriority="high" />
Accessibility (a11y)
| Practice | Why |
|---|---|
| Semantic HTML | Screen readers understand structure |
Text alternatives (alt, captions) | Non-visual access |
| Keyboard operability and visible focus | Not everyone uses a mouse |
| Sufficient contrast (4.5:1 for body text) | Readability |
| Labels for form controls | Assistive technology and larger click targets |
| ARIA only when HTML is not enough | The first rule of ARIA: use a native element if one exists |
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>
Test with the keyboard, a screen reader, and tools such as Lighthouse and axe.
Security basics
- Escape or sanitise untrusted content (prevent XSS).
- Use HTTPS,
HttpOnlyandSameSitecookies, and a Content-Security-Policy. - Never put secrets in front-end code: anything shipped to the browser is public.
Tooling
| Tool | Use |
|---|---|
| npm / pnpm | Package management |
| Vite, webpack | Bundling and dev server |
| ESLint, Prettier | Linting and formatting |
| TypeScript | Static types |
| Git | Version control |
Loading Comments...