Embed

Styles at the top, script at the bottom

http://blog.arkency.com/2014/10/frontend-performance-tips-for-web-developers/

Try async

Embed

Using content delivery networks(CDN)

Embed

Remove duplicate JS/CSS/FONT files

Request

Minimizing HTTP requests

Request

Concat css/js

CSS sprites

Request

Avoid making bad requests

Request

Reduce cookie size

Minifying

Minify css/js

Optimize image

Progessive JPGs

Minifying

Remove unsupported components

Framework

Use faster framework/library

Framework

Avoid repaint

Framework

Avoid DOM manipulation

Framework

Use latest version

Cache

Browser cache

Cache

Browser cache - JS & CSS

Cache

Browser cache - Cache-Control policy

Image

Sprites:

Image

Using base64:

<img alt="Embedded Image" 
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

Image

Don't scale image in HTML

Image

Select the right image format:

Image

Select the right image format:

CSS

Use both local() and url()

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'), 
       url('/fonts/awesome-i.woff') format('woff'),
       url('/fonts/awesome-i.ttf') format('ttf'),
       url('/fonts/awesome-i.eot') format('eot');
}

CSS

Use unicode-range

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2'), 
       url('/fonts/awesome-jp.woff') format('woff'),
       url('/fonts/awesome-jp.ttf') format('ttf'),
       url('/fonts/awesome-jp.eot') format('eot');
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

CSS

Font loading???

https://drafts.csswg.org/css-font-loading/

CSS

Avoid CSS expressions

CSS

Reduce the unnessesary CSS rules

JS

Minimize DOM access

JS

Develop smart event handlers