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