Frontend Checklist for Websites
Performance
General
- HTTP/2 is being used
- CDN is used for static files
- CDN is used for content pages
- Cookie-Less Domain is used for static files
- DNS prefetching is used
-
<link rel="preload" as="script">
(CSS, JS and fonts) -
<link rel="dns-prefetch">
(for Domain, which provides static resources, eg.: Images, and Tracking Tools)
-
Resources
-
JavaScript combined in one file
-
JavaScript minified
-
JavaScript is compressed
-
No JavaScript inline
-
CSS combined in one file
-
CSS minified
-
CSS is compressed
-
CSS: No usage of @import
-
No CSS inline
-
HTML minified
-
Static files are compressed with gzip or brotli
-
Static files are pre-compressed on the server
-
HTML is compressed with gzip or brotli
-
Usage of correct image formats
-
Usage of responsive images
-
Images are optimized (ImageOptimโฆ)
-
Image are cached in the browser
-
SVG files are minized
-
SVG files are used where possible
-
Only fonts that are used are loaded
-
Browser cache is used efficiently
-
ETags is not used
-
Expires, cache-control and max-age headers for static resources is set to 1 year
-
Asychronous or deferred loading of non-critical content
-
Tracking scripts loaded asynchronously
Measurements
Usually I measure the main pages of a project here.
- Count of all files
- Size of all files combined
- Download time of the page
- Google Page Speed analysis (Desktop, Mobile and Mobile UX; x of 100)
- SpeedIndex
Rendering Performance
- Intrinsic image sizes are specified in the markup
- CSS is loaded in the document head
- Scripts are loaded at the end of the document
- Scripts are loaded with
defer
-attribute - Scripts are loaded in the document head after styles are loaded
- Scrolling is possible with 60fps
- No usage of
document.write
- CSS animation causing layout(reflow) is not heavily used
Device performance
- CPU usage
- Memory usage
- GPU usage
Cross-Browser
- Website is loading on all current desktop browsers (Safari, Firefox, Chrome, IE11, EDGE)
- Website is loading on all current mobile browser (Chrome for Android, iOS Safari)
- For Shops: Checkout is usable on all necessary devices and browsers
- Viewport Meta Tag is used correctly
- Usage of correct input types
SEO
-
Pages can be indexed
-
Mobile version of website is available
-
HTTPS is used on all pages
-
Sitemap is available
-
Structured-Data is used where possible
-
Headlines used
-
Headlines in correct order
-
Meta descriptions used
-
Meta keywords used
-
Meta title is filled correctly
-
Keywords used in headlines
-
Images use the
alt
-attribute -
Links use a
title
-attribute -
Links in navigation do not use
title
-attribute -
No Duplicate Content
-
Usage of absolute URLs
-
Internal links point to HTTPS version of page
-
Redirects are done with 301
-
No 404-errors
-
No 500-errors
-
Canonical Tags are used if applicable
-
Ratio of code and content is around 25% for shop pages and 50% for content pages
Accessibility
- Color Contrast is good (WCAG 2.0)
- WAI-ARIA roles are used
- Usage of accessible elements like nav, footer, aside
- URLs are accessible
- Keyboard accessibility is available
- Correct input types are used
Security
- HTTPS is used on all pages
- There is no mixed content on the pages
- external plugins and trackings get loaded via HTTPS
- Robots.txt is in use
- Cross-Site-Scripting is not possible
- HSTS Header is set
- Content-Security-Policy is set and only allows specific hosts and no inline scripts
More
- Strict usage of domain with or without www
- Correct language set in HTML tag
- Charset is set
- HTML is valid
- 404-page is available
- A special print style sheet is in place
Server
- Correct language set by the server
- Correct content types set by the server