Webpage optimization tips

web_optimization.md

Building for Performance and Resilience

Web optimization and resilience tips from this video (SmashingConf New York 2014)

Preformance

Before anything else, we need to measure using Website speed test, SpeedCurve, or anything works for your project

Web Performance 101

• Content-Encoding: gzip
• Cache-Control: max-age=315360000

Optimizing: First byte

DNS lookup --> TCP connect --> HTTP request --> Server time --> HTTP resp

• HTTP reques

  • SSL handshake
  • HTTP redirect: back to DNS lookup

• Eliminate redirects

• Flush the document early?

• Prefetch DNS?

• JUST eliminate redirects

Optimizing: Start render

HTML parser --1--> DOM Tree --2--> Render tree --> Layout --> Paint

• Proc 1

  • remote JS
  • inline script waiting on remote CSS

• Proc 2

  • fetching remote stylesheets

• HTML pre-parser

  • in modern browsers, helping Proc 1 and Proc 2
  • quick analysis and find urls which are probably needed
  • start fetching those files in parallel

• Avoid blocking scripts

  • Move script elements to the end of

  <script>
  var script = document.createElement('script');
  script.src = 'app.js';
  document.head.appendChild(script);
  </script>
  // Above script breaks the pre-parser

  • Or add async attribute to script elements

  <script src="app.js" async defer></script>

• Inline critical CSS

  • penthouse

Optimizing: Load time & fully loaded

• gzip compression
• Far-future caching
• Concatenate files

Resilience

• Progressive enhancement

Future

• HTTP/2, SPDY
  • Multiplexing
  • Cache pushing
• ServiceWorker

this.addEventListener('fetch', function (e) {
    if (window.innerWidth > 500) {
        e.forwardTo(e.request.url + '?width=large');
    }
});
// possibly not possible

Experiment and measure

• Theorize
• Experiment, and...
• Measure