Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md Added improvements to Rendering Performance Jan 18, 2017

README.md

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