Category Archives: Web Performance

A framework for web performance

A simple yet effective spreadsheet that you or your company can use to prioritize web performance goals.

First visit factors Repeat visit factors First visit time Repeat visit time First visit goal Repeat visit goal Priority
1st byte
  • server speed
  • network speed
  • server speed
  • network speed
  • caching
1st render
  • network speed
  • critical path assets
  • network speed
  • critical path assets
  • caching
1st meaningful paint
  • network speed
  • font-loading strategy
  • image optimisation
  • network speed
  • font-loading strategy
  • image optimisation
  • caching
1st meaningful interaction
  • network speed
  • device processing power
  • JavaScript size
  • network speed
  • device processing power
  • JavaScript size
  • caching

Thanks to, Jeremy Keith

CSS Font Subsetting

In short, depending on what foundry/font provider you choose to use (ie. Google Fonts, Font Squirrel, etc.) you can be selective in terms of what glyphs you want to leverage versus calling the entire set of glyphs in one large request.
By being selective, you can craft a much lighter request by using additional parameters in your src.

The trade-offs are evident. This has to be applied to a set of glyphs that are more predictable to manage and which don’t change that often (ie logos).

It’s a very nickel-and-dimed approach in my opinion, but it’s definitely useful.

Thanks to, demosthenes.


Page speed seems to be one of the bigger priorities as of late and I was designated with the RND task in making one of our subdomains, a bit…faster. In summary, this is a single-page design intended to support our Marketing campaigns during the 2014 Winter Olympics.

In one sprint (2 weeks in my case), we were able to set some benchmarks and reduce our network requests, optimize our images, minify our CSS, minify our JavaScript, compress and cache our assets by tweaking our server-side configurations.

The before benchmarks are listed below for 03/19/2014 unless otherwise stated:

  1. Google PageSpeed – Mobile: 55/100
  2. Google PageSpeed – Desktop: 71/100
  3. Y-SLOW: 67/100
  4. Network Requests: 112 (03/21/2014)

The after benchmarks are listed below for 03/27/2014:

  1. Google PageSpeed – Mobile: 64/100
  2. Google PageSpeed – Desktop: 83/100
  3. Y-SLOW: 79/100
  4. Network Requests: 87

Tools and methods I used to compliment our page speed via server-side:

Tools and methods I used to compliment our page speed via client-side,:

I still have some items to solve—Youtube iframes ultimately being the culprit. Getting into a 1-second threshold with mobile is another instigator. I’m suspecting a JavaScript solution is on the horizon but we shall see.

Minify, a PHP5 app for client-side performance

If you need a minifier for CSS and JS assets, feel free to explore Minify.

Minify is a PHP5 app that helps you follow several rules for client-side performance. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Ensure the min directory lives at the project root of your file server, then you can begin concatenating and minifiying your css and js assets into one source. See below,

//If you externally link assets such as,
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/"></script>

//Concatenate them like so,
<link rel="stylesheet" href="min/?f=css/bootstrap.min.css,css/main.css">
<script src="min/?f=js/jquery-1.8.0.min.js,js/,js"></script>

Leverage browser cache with .htaccess

A quick win for web performance. Modify your root directory’s .htaccess file to leverage browser cache. I’ve applied this solution several times and you receive instant results when testing on Google PageSpeed. This example illustrates this solution in seconds – in this case 2592000 (30 days).

<ifModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 2592000 seconds"
	ExpiresByType image/x-icon "access plus 2592000 seconds"
	ExpiresByType image/jpeg "access plus 2592000 seconds"
	ExpiresByType image/png "access plus 2592000 seconds"
	ExpiresByType image/gif "access plus 2592000 seconds"
	ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
	ExpiresByType text/css "access plus 2592000 seconds"
	ExpiresByType text/javascript "access plus 2592000 seconds"
	ExpiresByType application/javascript "access plus 2592000 seconds"
	ExpiresByType application/x-javascript "access plus 2592000 seconds"
	ExpiresByType text/html "access plus 2592000 seconds"
	ExpiresByType application/xhtml+xml "access plus 2592000 seconds"

Thanks to, Samuel Santos