• Stars
    star
    277
  • Rank 148,875 (Top 3 %)
  • Language
  • Created almost 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ“‹ 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

More Repositories

1

css-modal

A modal built with pure CSS, enhanced with JavaScript
JavaScript
1,821
star
2

Sass-Mixins

Sass mixins for general use
CSS
523
star
3

less-mixins

LESS mixins for general use
CSS
99
star
4

contentful-to-algolia

⚑️ Transmit content from any Contentful type to Algolia indexes
JavaScript
52
star
5

hongkong

A parallax scroll effect plugin
HTML
44
star
6

PubSub

A JS pub/sub implementation
JavaScript
43
star
7

jsFiddle-Chrome-App

The jsFiddle Chrome-App
17
star
8

slider

Wrecking Slide – A jQuery slider.
JavaScript
12
star
9

resumerx

ResumerX is a CV enhancement tool utilizing OpenAI's GPT-3 API
TypeScript
8
star
10

isMothereffinjQueryUp

6
star
11

WordPress-Admin-Kit

Some functions and hooks to add to a WordPress theme
PHP
6
star
12

drublic-blog

This is my blog
PHP
5
star
13

gulp-css-background-remove

Remove `background-image` from CSS file to load asynchron
JavaScript
5
star
14

drublic

My vCard on the web
TypeScript
4
star
15

dotfiles

My Mac OSX dotfiles
Shell
4
star
16

TYPO3.PackageBuilder

PHP
4
star
17

dabblet-chrome-app

A Chrome App for Dabblet
JavaScript
4
star
18

Store

A JavaScript lib for storing stuff
JavaScript
3
star
19

jQuery.baseSVG

A jQuery-Plugin for SVG encoding into Base64
JavaScript
3
star
20

EB-modeller-prototype

Compare jsPlumb and JointJS
JavaScript
3
star
21

socoded-init

My slides for SoCoded Conference on Sept. 19 2013 - Starting Front-end Projects
JavaScript
3
star
22

h5bp-stylus

The HTML5Boilerplate's CSS in Stylus
2
star
23

component-based-development

My slides from Beyond Tellerrand 2013 - Component Based Development
JavaScript
2
star
24

takeoff-awesome-code

The slides of my talk at TakeOff Conf in January 2013 on
JavaScript
2
star
25

uxm-styleguides

Slides for talk at UX Munich 2013
JavaScript
1
star
26

EB

JavaScript
1
star
27

fetch-rest-connect

Opinionated fetch interface for RESTful APIs
TypeScript
1
star
28

code-examples

Tooling- and code-examples
JavaScript
1
star
29

jquery.modals

A jQuery-plugin for lightboxes
JavaScript
1
star
30

Templates

Template parsing with Hogan
JavaScript
1
star
31

kjs-components

My slides for Karlsruhe JS on Sept. 18 2013 - Component Based Webdevelopment
CSS
1
star