/checklist

📋 A Frontend Checklist for Websites

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