Speed Check

Developer Tools in browser. Load page under Network Can save load meta data as HAR file (rt click / save as HAR with content)

Google Page Insight

Make your web pages fast on all devices https://developers.google.com/speed/pagespeed/insights/

Web Page Test

http://www.webpagetest.org/

YSlow

Improve performance based on a set of rules https://developer.yahoo.com/yslow/ http://yslow.org/phantomjs/

cli goodness

npm install yslow -g

PLAIN TEXT

yslow --info all --format plain YOURSITE.har

size: 1062.1K (1062103 bytes) overall score: C (72) url: http:YOURSITE

of requests: 60

ruleset: ydefault page load time: 6998

JSON

yslow --info basic --format json YOURSITE.har {"w":1062103,"o":72,"u":"http%3A%2F%2FYOURSITE%2F","r":60,"i":"ydefault","lt":6998}

(Switch basic to all for more complete detailed output)

Pingdom

Test load time, analyze and find bottlenecks http://tools.pingdom.com/fpt

HAR Viewer

http://www.softwareishard.com/har/viewer/index.php

Load Testing

jMeter

Load test functional behavior and measure performance http://jmeter.apache.org/

Phantom JS

PhantomJS is a headless WebKit scriptable with a JavaScript API. http://phantomjs.org/ bin/phantomjs examples/netsniff.js http://YOURSITE > YOURSITE.har

HAR Viewers

http://ericduran.github.io/chromeHAR/ https://code.google.com/p/harviewer/

Image Compression

http://www.smushit.com/ysmush.it/

http://compresspng.com/

cli image compression examples

jpegoptim

http://freecode.com/projects/jpegoptim

#/bin/sh
 for f in *.jpg;
  do jpegoptim $f -f --strip-all -m50
 done

optipng

http://optipng.sourceforge.net/

#/bin/sh
 for f in *.png;
  do optipng $f -clobber -strip all
 done

SVG

Create SVG's

http://inkscape.org/en/

SVG vs. Image

http://robandlauren.com/2013/03/15/svg-vs-image/

Dynamic SVG graphics

http://demosthenes.info/blog/675/Create-Adaptive-SVG-Illustrations-With-CSS example:

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

http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

Site Check

redbot

http://mnot.github.io/redbot/

https://redbot.org/

Blog Posts

Responsive Design and Performance for Drupal 7

http://friendlymachine.net/posts/responsive-design-and-performance-drupal-7

THE REAL BOTTLENECK

REDUCE WIDGET USE

Build Fast Loading Mobile Websites

http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/ LOAD IMAGES THROUGH CSS KEEP EXTERNAL STYLE SHEETS TO A MINIMUM CSS3 INSTEAD OF IMAGES DATA URI INSTEAD OF IMAGES OR WEB FONT FILES INLINE SCALABLE VECTOR GRAPHICS (SVG) INSTEAD OF IMAGES IMAGE SPRITES CODE FOR MOBILE-FIRST

What is a HAR File and what do I use it for?

http://www.speedawarenessmonth.com/what-is-a-har-file-and-what-do-i-use-it-for/

VISUALIZING

WHAT TO LOOK FOR

Speed Increasers

HTML5 prefetch https://medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d http://www.onlywebpro.com/2013/11/22/speed-up-page-loads-time-using-prefetch-prerender/