Web Performance Workshop

by Diego Cardozo @ JSConfUY 2016

View the Project on GitHub diegocard/web-performance-workshop

Optimize static assets

Minify CSS and JS

One JavaScript file and one CSS file are not currently minified in this page.

  1. Find them using PageSpeed Insights
  2. Minify them using refresh-sf.com
  3. Alternatively, run the gulp task that compresses the JS and CSS. This also concatenates all files into a single output. Be careful, this does not remove dead code!

> gulp minify

[01:17:26] Using gulpfile ~\Documents\GitHub\web-performance-workshop\gulpfile.js
[01:17:26] Starting 'minify-styles'...
[01:17:26] Starting 'minify-scripts'...
[01:17:26] Finished 'minify-scripts' after 272 ms
[01:17:27] Finished 'minify-styles' after 1.27 s
[01:17:27] Starting 'minify'...
[01:17:27] Finished 'minify' after 13 μs

Compress CSS and JS

Cache CSS and JS

Cache Control Example

In this example exchange the server returns a 1024 byte response, instructs the client to cache it for up to 120 seconds, and provides a validation token (“x234dff”).

The second request is sent after the cache has expired. However, using etags we can detect that the content has not changed and prevent a download.

HTTP request

Remove unused styles

> gulp unused-css

[01:43:03] Using gulpfile ~\Documents\GitHub\web-performance-workshop\gulpfile.js
[01:43:03] Starting 'unused-css'...
[01:43:04] Finished 'unused-css' after 1.49 s