#FVCP Sep2014

gistfile1.txt

/**
 * Notes and various links mentioned in
 * FVCP and FVDrupalCamp 2014
 * on web page speed, testing and loading
 */
 
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
  *
  */
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 examplesd

jpegoptim
http://freecode.com/projects/jpegoptim
<code>
#/bin/sh
 for f in *.jpg;
  do jpegoptim $f -f --strip-all -m50
 done
</code>

optipng
http://optipng.sourceforge.net/
<code>
#/bin/sh
 for f in *.png;
  do optipng $f -clobber -strip all
 done
</code>


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/