Frontend Checklist for Websites

Performance

General

  • [ ] HTTP/2 is being used
  • [ ] CDN is used for assets
  • [ ] CDN is used for static resources
  • [ ] Cookie-less domain used for static files
  • [ ] DNS prefetching is used
    • [ ] <link rel="preload" as="script">
    • [ ] <link rel="dns-prefetch">

Resources

  • [ ] JavaScript files combined into one file
  • [ ] JavaScript is minified
  • [ ] JavaScript is compressed
  • [ ] No inline JavaScript
  • [ ] CSS files combined into one file
  • [ ] CSS is minified
  • [ ] CSS is compressed
  • [ ] CSS has no use of @import
  • [ ] No inline CSS
  • [ ] HTML is minified
  • [ ] Static files are compressed with gzip or brotli
  • [ ] Static files are server-side pre-compressed
  • [ ] HTML is compressed with gzip or brotli
  • [ ] Usage of correct image formats
  • [ ] Usage of responsive images
  • [ ] Images are optimized
  • [ ] Image size served is only what is required
  • [ ] 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
  • [ ] 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
  • [ ] Affiliate links have rel="nofollow"
  • [ ] Website uses HTTPS

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
  • [ ] 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

Split, Fractured Text

See the Pen Strikethrough, Fractured, Split Text by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<h1 contenteditable data-heading="Split">Split</h1>

CSS

h1 {
  color: black;
}
h1::before, h1::after {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  overflow: hidden;
}
h1::before {
  height: 50%;
  color: white;
  text-shadow: 3px -2px 5px white, -3px 3px 4px white;
}
h1::after {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  height: 49%;
  color: black;
}

html {
  height: 100vh;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
}

h1 {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  margin: 0;
  font-size: 10vw;
  font-weight: 900;
  text-transform: uppercase;
}

JavaScript

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});

Highlight Text

See the Pen Highlight Text by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<p class="">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac <span class="highlighted">tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo</span>.</p>

CSS

html {
  font-family: Avenir, Helvetica, san-serif;
  margin: 3rem 5rem;
}
p {
  font-size: 200%;
}
.highlighted {
  background-color: yellow;  
}

Vertical Text

See the Pen Vertical Text by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

CSS

html {
  font-family: Avenir, Helvetica, san-serif;
  margin: 3rem  auto;
}
p {
  writing-mode: vertical-rl;
  font-size: 200%;
  margin: auto;
}

Box Theme

Version:

Framework:
Style Sheet Language:
JavaScript Task Runner:

Platform:

Box is a Twitter Bootstrap theme that wraps a box around the body of your web page, by adding a class named wrapper to the first div. The background can easily be changed by modifying the colour of the body background. You can even add a background image with ease. All elements of Bootstrap are gradient.

As with all other Bootstrap themes of mine, the Box Bootstrap Theme is based upon my Skeleton Bootstrap Theme, so updating to the latest Twitter Bootstrap version is quick and easy.

Bumblebee Theme

Version:

Framework:
Style Sheet Language:
JavaScript Task Runner:

Platform:

Bumblebee is a Twitter Bootstrap theme, with a multi-layered striped yellow and black header, and width a single striped yellow and black footer. Yellow is the dominant colour in this theme’s CSS and components, and black is used as the secondary colour.

Font Awesome is also integrated with the Bumblebee Bootstrap theme. By default, Font Awesome icons appear in the footer as social media links.

Bumblebee features a unique component, a top nav with right floated links, so you can have a secondary navbar for links that are not so important.

The HTML template displays HTML elements and bootstrap elements, so when you are customizing the template, you can see it all.

Blue Pink Theme

Version:

Framework:
Style Sheet Language:
JavaScript Task Runner:

Platform:

Blue Pink is a bootstrap theme designed for techie designers. It features a dark blue navbar and dropdown menu, a pink connect bar, a sticky mid-blue footer with a cool blue top border and gradient buttons. The HTML template displays HTML elements and bootstrap elements, so when you are customizing the template, you can see it all.