Giter VIP home page Giter VIP logo

checklist's Introduction

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

checklist's People

Contributors

ammarcodes avatar anselmh avatar drublic avatar shiruco avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

checklist's Issues

Cache busting

Cool list, man! Thank you for share it.

Shouldn't be an item for cache busting the static resources?

Thank you for your attention.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.