New Page

There are some things that can’t be checked automatically (or we are too lazy to implement automated checks).

General

1. Page properly load on all major supported desktop browsers
2. Page properly load on all major supported mobile browsers

SEO

1. Page has a custom title tag (less than 55 characters)
2. A meta description <meta name="description" content="..."> is provided, it is unique and doesn’t possess more than 150 characters.
3. Page is added to a sitemap (if needed)
4. Page can be indexed and not blocked by robots.txt if the page is public
5. Optional: page has Facebook OG
6. Optional: page has Twitter Cards

Assets

1. JavaScript files load with defer attribute
2. No inline CSS
3. Usage of correct image formats (jpg, png, webp)
4. Images are optimized (squoosh, ImageOptim app, SVGOMG)
5. Images are cached in the browser (proper headers)
6. Expires, cache-control, content-type headers are valid, max-age for static resources is set to 1-2 years
7. Page is printable (use print-preview to check, print:hidden and @media print to fix)

Performance

1. Scrolling is possible with 60fps
2. CSS animation causing layout (reflow) is not heavily used
3. More performance metrics coming soon
4. BE: No n+1 DB query issues
5. BE: Server Response cache is enabled if possible (see Server response cache for details)

Accessibility

1. Page passes Lighthouse accessibility tests
2. Page can be read by a screen reader (elements have proper semantic and aria attributes)
3. Page has correct heading hierarchy (single h1, don’t skip h levels (like h1 > h3))

Source code

1. New and updated Blade files contain PHPDoc for all PHP variables.
2. Page is W3C-compliant: W3C validator

Materials

1. thedaviddias/Front-End-Checklist
2. drublic/checklist
3. Front-End Performance Checklist 2021