The Frontend Checklist 2018

The frontend checklist for 2018 things to use when building a website

senior developer

Stefan I

Senior Software developer available for work.

The Frontend Checklist 2018

The frontend checklist for 2018 things to use when building a website

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

More stories

  • Stefan I

    Why I love manjaro linux and you should too!

    Why i love Manjaro Linux And You Should Too!
  • Laravel Star
    I'm a certified Laravel Developer
  • Availability
    My working hours are from 9 to 5
  • Current Location
    Currently I'm located in London.
  • Happy Clients
    Over 200 clients made happy
  • Support
    Over 100 hours of support

Contact Me

Freelance Developer

Creator of @Lzo Media I am a 30 years old Romanian freelance developer who likes beautiful code and has an adherence to standards & open-source solutions.

Contact