Author: Dirk Watkins

Performance Optimized MVC Starter Project

I’ve added a starter project for MVC that includes a bunch of good performance fixes.  It’s published on GitHub and you can grab whatever piece that you need.  It includes HTTP compression, HTTP cache headers, correct mime-types, minification of JavaScript and CSS, Bootstrap SCSS so you can pick and choose components, and a cache control attribute for use on MVC views and WebAPI methods.

This is the example project from my Web Performance Quick Wins presentation.

Here’s the slides too:

Disable Mac OS Boot Sound

My gosh that Mac boot sound is annoying. Turn it off with this terminal command:

sudo nvram SystemAudioVolume=%00

When you restart your Mac, the OS X boot chime should no longer play!

If you somehow decide you want the boot sound back, simply fire up Terminal again and use sudo nvram -d SystemAudioVolume

Web Performance Quick Wins

I spoke at the Milwaukee Code Camp on Sat 10/24. This is the presentation for those who need it:

The main take away is that web site performance is important and the easiest ways to improve your site is to try these things first:

  1. Optimize images
  2. Set HTTP Cache Headers
  3. Minify JavaScript and CSS (Use a CDN)
  4. Bundle JavaScript and CSS
  5. Minify HTML
  6. Remove unnecessary JavaScript and CSS

Your Images are Too Fat!

I’m not really sorry.  You need to know, and I’m not too shy to tell you.

Your images are fat. 

They need to go on a big-time diet.  Run on a treadmill or something. Stop eating barbeque potato chips drizzled in melted cheddar.  Optimize man. Optimize!

Seriously, in today’s day and age! You still aren’t compressing your images?  You’re still putting in 12 megapixel images in for thumbnails!?!  I sure hope not. You’re not alone, but that’s no excuse. There are TONS of resources out there to help.

Yes yes…  you use Photoshop’s save for web and know when to use a GIF vs PNG vs JPG. And you’ve even tried SVG.  But wait? You can do more?

YES! There are LOSS-LESS compressions that you can run on top!  And you can run them in gulp or just point them at a folder.

I’ve had really good results with ImageOptim on the Mac, RIOT on Windows, and the Image Optimizer Extension in Visual Studio. But you can use whatever you want, so long as you DO IT.

Optimize! Compress! Make the web better!

*Psst. Sprite-sheets are a fairy-tale land and are only for those with massive budgets and/or know that the images will NEVER CHANGE.. hehehe

Throttled-Connection Website Testing

There’s a huge gap in a lot of web development projects: testing on slow connections!  More often than not, the sites are tested on the same network as the web server or at least on some crazy business level broadband connection.  No latency whatsoever.  What you really need to see is how your site performs on 3G.  Yes. 3G. A slow cell connection. Then you’ll start to realize what your time-to-first-load is and where the real pain points for your users lay.

This type of throttled-connection testing is also super easy.  So you really don’t have any excuse not to test, do you?

Here’s a very simple way to throttle your connection down to 3G.  It’s not a full-out real-world test, but it’s close enough for 99% of you.

Open Chrome Dev Tools.  Open the network tab, and check out the throttle:

Chrome Dev Tools - Connection Throttling
Chrome Dev Tools – Connection Throttling

There’s some very cool stuff in this network tab, eh?  You can change your connection throttle and limit how fast your site “downloads.” You can even take yourself offline to work out any application-cache / local storage issues.

Also, a HUGE feature for devs is the disable cache toggle.  As long as you have the dev tools open and this checked, it won’t cache anything from the server. Great for testing! Tell your testers/PMs/etc about this so you don’t have to constantly tell them to clear their cache when they don’t see your bug fixes.

Preserve log will help you watch traffic between pages. With the disable-cache toggle UNchecked, this will show how your site behaves with http-caching on.

Explore the network tab.  It’s amaze-balls. So much good stuff in a browser. And Chrome’s not even an IDE!  THANK GOODNESS FOR THE CHROME DEV TEAM!