This document provides an overview of a presentation on speeding up websites. The presentation will cover measuring performance, tools for analysis, optimizations that can be made, and testing performance. It mentions looking at network requests, server response times, prefetching, sprites, responsive images, fonts, and minification. Testing tools to be discussed include the browser developer tools, PageSpeed Insights, YSlow, PhantomJS, JMeter, and BlazeMeter.

1. Ready?

2. 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...

3. Faster / Stronger / Better

4. Covering What Tonight
● Speed Overview
● Measuring Results
● Tools
o Browser
o Server
o HAR Files (http archive)
● What is happening under the hood
● Working Under Pressure

5. ...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

6. Incremental Changes
Start Simple and Big
move from
Little and Complex

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

8. umm…?
Notice I did not say “Turn on caching”.
Nor did I say minify, compress or otherwise
put into effect:
“Make rocket go now!”

9. ● btools Inspector | Networ

11. YSlow

12. CLI
● PhantomJS
o Headless WebKit scriptable w/a javascript API
 To HAR file
 bin/phantomjs netsniff.js SITE > site.har
● YSlow
o from site or HAR file
o to plain text or JSON
 yslow
● --info {basic | all}
● --format {plain | json}
● site.har

13. HAR Viewer

14. Hey, Nice Picture!
● Sprites
● CSS (rounded corners, drop shadows..etc)
● SVG
● Compress

15. Responsive SVG re-sizing
http://codepen.io/dudleystorey/pen/azLcy

16. Tricks & Tips & other Lovely Things
● Incremental changes
● Understand your REAL bottlenecks
● Code for Mobile First
● Checkout HTML5 Prefetch

17. 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

18. New Relic Example
Logging into newrelic.com

20. Let’s Test What We’ve Learned

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

22. In Depth Data
● CPU
● Memory
All fine and dandy...so long as...

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

25. Show Notes
● https://gist.github.com/michalsen/8625e0
736d1c9fb4a564
Eric Michalsen
eric.michalsen@gmail.com
@michalsen
Google+