Website Speed :: Fox Valley Computing Professionals, September 2014

Ready?

Hi….I’m Eric

Just a bit about me● Drupal developer at Straight North● Builds things out of wood● Likes fast things● Has written 5 novels● New dad...so pretty much not doing

anything anymore...

Faster / Stronger / Better

Covering What Tonight

● Speed Overview● Measuring Results● Tools

o Browsero Servero HAR Files (http archive)

● What is happening under the hood● Working Under Pressure

...and not covered.

● Responsive Images (we’ll touch on this)● Fonts (we won’t touch this at all)

o Google Make Web Fast Video on Fonts

Link

Incremental Changes

Start Simple and Big move from Little and Complex

Simple

● Build your site● Browser Web Tools Inspector | Network● Google PageSpeed Insights

umm…?

Notice I did not say “Turn on caching”.Nor did I say minify, compress or otherwise put into effect:

“Make rocket go now!”

● btools Inspector | Networ

YSlow

CLI

● PhantomJSo Headless WebKit scriptable w/a javascript API

To HAR file bin/phantomjs netsniff.js SITE > site.har

● YSlowo from site or HAR fileo to plain text or JSON

yslow ● --info {basic | all} ● --format {plain | json}● site.har

HAR Viewer

Hey, Nice Picture!

● Sprites● CSS (rounded corners, drop

shadows..etc)● SVG● Compress

Responsive SVG re-sizing

http://codepen.io/dudleystorey/pen/azLcy

Tricks & Tips & other Lovely Things

● Incremental changes● Understand your REAL

bottlenecks● Code for Mobile First● Checkout HTML5 Prefetch

What is happening under the hood

“New Relic gets you immediate code-level visibility to build faster software, create better products, and delight your customers.” - sales pitch

New Relic Example

Logging into newrelic.com

Let’s Test What We’ve Learned

Apache JMeter

● Deskop application● 100% Open Source● Designed for testing website loads● Can work “out of the box”● Added scripts for more indepth data

In Depth Data

● CPU● Memory

All fine and dandy...so long as...

BlazeMeter

● Based on JMeter● SaaS● Easier to configure and use● Prettier● ...and not free

Show Notes

● https://gist.github.com/michalsen/8625e0736d1c9fb4a564

Eric Michalseneric.michalsen@gmail.com@michalsenGoogle+