Advanced performance

Some more complex performance metrics that should be taken into account when creating websites with lots of assets.

Go fullscreen: ⌃⌥F

Advanced performance

Slow websites suck.

Slow portfolios lose job leads.

Why performance matters

  1. We all hate waiting for websites
  2. People don’t purchase (or hire) from slow websites
    Amazon has done lots of studies on this
  3. Mobile networks are unreliable
    In many countries mobile is the only web access
  4. Google takes speed into account when ranking

and more…

Tools to check performance

Basic techniques

  • Use as few images as possible
  • Properly export, compress & smush images
  • Use as few fonts as possible (none is ideal)
  • Remove duplicate code
  • Fix broken links & images, which make websites slower
  • Remove social media buttons and stick to simple icons
  • Remove ads and tracking scripts

Advanced techniques

  • Blur unnecessary parts of JPGs
  • Smush & optimize favicons
  • Subset and delay web fonts
  • Use data URIs for small, single use images
  • Concatenate & minify CSS and JS
  • Set up the server & CloudFlare for performance

Videos & tutorials

Start

Advanced performance

Some more complex performance metrics that should be taken into account when creating websites with lots of assets.