website speed :: fox valley computing professionals, september 2014
DESCRIPTION
A talk on making websites faster, touching on various topics such as testing and load testingTRANSCRIPT
![Page 1: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/1.jpg)
Ready?
![Page 2: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/2.jpg)
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...
![Page 3: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/3.jpg)
Faster / Stronger / Better
![Page 4: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/4.jpg)
Covering What Tonight
● Speed Overview● Measuring Results● Tools
o Browsero Servero HAR Files (http archive)
● What is happening under the hood● Working Under Pressure
![Page 5: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/5.jpg)
...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
![Page 6: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/6.jpg)
Incremental Changes
Start Simple and Big move from Little and Complex
![Page 7: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/7.jpg)
Simple
● Build your site● Browser Web Tools Inspector | Network● Google PageSpeed Insights
![Page 8: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/8.jpg)
umm…?
Notice I did not say “Turn on caching”.Nor did I say minify, compress or otherwise put into effect:
“Make rocket go now!”
![Page 9: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/9.jpg)
● btools Inspector | Networ
![Page 10: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/10.jpg)
![Page 11: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/11.jpg)
YSlow
![Page 12: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/12.jpg)
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
![Page 13: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/13.jpg)
HAR Viewer
![Page 14: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/14.jpg)
Hey, Nice Picture!
● Sprites● CSS (rounded corners, drop
shadows..etc)● SVG● Compress
![Page 15: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/15.jpg)
Responsive SVG re-sizing
http://codepen.io/dudleystorey/pen/azLcy
![Page 16: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/16.jpg)
Tricks & Tips & other Lovely Things
● Incremental changes● Understand your REAL
bottlenecks● Code for Mobile First● Checkout HTML5 Prefetch
![Page 17: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/17.jpg)
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
![Page 18: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/18.jpg)
New Relic Example
Logging into newrelic.com
![Page 20: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/20.jpg)
Let’s Test What We’ve Learned
![Page 21: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/21.jpg)
Apache JMeter
● Deskop application● 100% Open Source● Designed for testing website loads● Can work “out of the box”● Added scripts for more indepth data
![Page 22: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/22.jpg)
In Depth Data
● CPU● Memory
All fine and dandy...so long as...
![Page 23: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/23.jpg)
BlazeMeter
● Based on JMeter● SaaS● Easier to configure and use● Prettier● ...and not free
![Page 24: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/24.jpg)
![Page 25: Website Speed :: Fox Valley Computing Professionals, September 2014](https://reader036.vdocuments.us/reader036/viewer/2022062513/5566a21dd8b42acd288b4b88/html5/thumbnails/25.jpg)
Show Notes
● https://gist.github.com/michalsen/8625e0736d1c9fb4a564
Eric [email protected]@michalsenGoogle+