1. Optimizing
Web Performance
Dave Olsen, @dmolsen
West Virginia University
http://flic.kr/p/7A8xxN

2. What I’ll Talk About
• Quick Intro About Why We
Should Care About Web Perf
• Diagnosing Perf Problems
• Easy Web Performance
Optimization Wins
• Tools to Help Test &
Automate Perf Optimizations
• Setting Up a Device Lab

3. WHY SHOULD WE CARE ABOUT
WEB PERFORMANCE?
http://flic.kr/p/4JY1Yr

4. brad’s iceberg
© Brad Frost
© Brad Frost

5. The way in which CSS media
queries have been promoted for
mobile hides tough problems and
gives developers a false promise
of a simple solution for designing
for small screens.
Source: Jason Grigsby on Speakerdeck
- Jason Grigsby, @grigs

6. brad’s iceberg
© Brad Frost© Brad Frost
© Brad Frost

7. The average weight of a web page today:
Source: HTTP Archive
Images JavaScript
Flash
HTML
CSS
Other
78%
1.8 MB

8. RWD sites whose
small screen design
weighs the same as the
large screen design.
Source: Podjarny, 2013
72%

9. Users expect your
mobile site to load
as quickly as your
desktop site.
71%
Source: Gomez

10. Bounce Rate
Conversion
Rate Cart Size PageViews
200ms - - - -1.2%
500ms -4.7% -1.9% - -5.7%
1000ms -8.3% -3.5% -2.1% -9.4%
CASE STUDY:
MOBILE PERFORMANCE EFFECT ON BUSINESS
Source: Web Performance Today

11. Mobile first means
performance first.

12. Over Downloading
Download & Hide
Download & Shrink
Download & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High Latency
Variable Bandwidth
Packet Loss

13. Current Dev Practices
+ Desktop First RWD
Web Performance Blues
REVIEWING WHY WE SHOULD CARE

14. sad face
https://flic.kr/p/9g5Gg8

15. https://flic.kr/p/6DBSCi
DIAGNOSING WEB
PERFORMANCE ISSUES

16. THE BASICS: PAGESPEED INSIGHTS
developers.google.com/speed/pagespeed/insights

17. NEXT STEPS: CHROME DEV TOOLS
dev tools is more than just the elements view!

18. NEXT STEPS: CHROME DEV TOOLS COURSE
udacity.com/course/ud884/

19. DEEP CUTS: WEBPAGETEST
www.webpagetest.org

20. DEEP CUTS: WEBPAGETEST
note the big red F :(

21. WEBPAGETEST FEATURES
• Test real browsers from mult. locations
• Modify connection speeds
• Video capture
• Content blocking
• Script the session
• Use with continuous integration
• Collect tests over time
• Free

22. REVIEW OF DIAGNOSTIC TOOLS
• Fast & easy? Pagespeed Insights
• Local development? Chrome Dev Tools
• Customization? WebPagetest

23. http://flic.kr/p/4zzKee
easy web performance optimization wins
EASY WEB
OPTIMIZATION WINS
https://flic.kr/p/nYDzXn

24. Performance
http://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6e
A budget is a guide, not a hard & fast limit.
Performance tweaks are compromises.

25. MOBILE
OPTIMIZATION
TENETS
1. Reduce requests
2.Reduce asset size
3.Speed-up page render
http://flic.kr/p/4zzKee

26. Best request is no request.
Source: Ilya Grigorik
- Ilya Grigorik, @ilyagrigorik

27. WEB PERF & SERVER-SIDE: EASY WINS
Compress
HTML & CSS
If you’re using Apache make sure to use
mod_deflate so text-based assets are compressed
for transfer.
Browser
cache
The simplest way to reduce requests is to make sure
the browser doesn’t need to make them. Make sure
assets are bring cached on the browser. Try
redbot.org to see if you’re caching.
Avoid AJAX
requests
Think critically about how you use AJAX. You may be
able to increase perceived performance by “caching”
mark-up in script tags.

28. WEB PERFORMANCE & IMAGES: EASY WINS
Try to avoid
images
When possible think about avoiding images.
Implement with CSS or Canvas. Or use SVG or
Progressive JPEGs.
Image
compression
Choose appropriate image formats and compress
within reason. Consider using CSS sprites.
Responsive
images
Use srcset to serve regular images. You can use
picture to serve art directed responsive images.
Avoid dark
matter
display: none; hides content. It doesn’t stop
content from loading. Properly set media queries.

29. WEB PERF & IMAGES: TOOLS
Grunt &
Gulp Tools
imagemin, image-resize,
spritesmith, svgmin
On the Web kraken.io, smushit.com,
spriteme.org, imigix.com

30. CDNs Consider using CDNs to serve common JS libraries to
help reduce RTT for requests.
WEB PERF & JAVASCRIPT: EASY WINS
MicroJS or,
even better,
Vanilla JS
Avoid using bulky frameworks if you’re using them for
simple tasks like selectors. Try microjs.com to find
libraries that may be smaller & more suitable.
JavaScript also blocks the rendering of the page.
Use Touch
or FastClick
While not directly related to page render, by making
sure your links use a Touch event or FastClick rather
than an onClick event user interactions will speed up
by 300ms.
Avoid DOM
reflows &
repaints
By using JS to modify the DOM you can cause
unnecessary reflows & repaints of your browser. They
slow down page render time as well as burn battery.

31. WEB PERF & JAVASCRIPT: TOOLS
Grunt &
Gulp Tools
uglify, concat, closure-
compiler, google-cdn
On the Web microjs.com,
developer.mozilla.org,
developers.google.com

32. CONTENT BREAKDOWN

33. WEB PERF & 3rd PARTY CODE: EASY WINS
Beware the
SPOF
Be careful regarding what 3rd-party code you use on
your pages. Downtime for them can mean slow
loading pages for you. Try using spof-o-matic in the
Chrome Web Store to see how your page is affected.
Avoid SM
widgets
Try using simple links to services rather than utilizing
their JavaScript widgets. They’re performance hogs.
Removing the widgets also increases user privacy. 2-
click social widgets from Heise is a good solution.

34. TESTING SPOF

35. Worst request is one that
blocks the parser.
Source: Ilya Grigorik
- Ilya Grigorik, @ilyagrigorik

36. Image source:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
THE CRITICAL RENDERING PATH

37. LEARN TO LOVE THE WATERFALL

38. LEARN TO LOVE THE WATERFALL
onload
start render
domcontentloaded

39. CRITICAL RENDERING PATH: FILMSTRIP VIEW

40. CRITICAL RENDERING PATH: % COMPLETE

41. CRITICAL RENDERING PATH: EASY WINS
Defer
loading of
JavaScript
Place script elements just above the body tag.
Otherwise use HTML5’s script defer & async
attributes to avoid blocking the parser. Can also insert
script elements into the DOM using the onload
event.
Inline
Critical CSS
& Defer Rest
Place critical CSS directly within your document and
load the rest of the CSS after onload with JavaScript.
Use a service like Penthouse to find critical CSS.
Same DNS
origin
Above the fold elements should be on the same
hostname. Reduces DNS look-ups. Possible to try for a
single request for all above the fold content?

42. The ultimate goal is a narrower,
shorter waterfall. Also focus on
getting a fast initial render.

43. http://flic.kr/p/bMdzZ2
TEST THE SQUISHY
default styles vs. min-width vs. max-width

44. SCRIPTING & CUSTOM VIEWPORTS

45. SCRIPTING & CUSTOM VIEWPORTS

46. Google Analytics Site Speed
www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics
WebPagetest - BEYOND THE BASICS

47. REVIEWING TOP TIPS FOR EASY WINS
• Budget to give yourself and a client
a performance goal
• Enable cache headers
• Enable compression
• Properly format or reduce images
• Defer as much as you can
• Use a task runner to build web
performance into your workflow

48. RESS can be a scalpel
for your responsive designs.
REsponsive Design + Server Side Components
http://flic.kr/p/a4VsPv

49. RESS: AN EVOLUTION OF
RESPONSIVE DESIGN
slidesha.re/KtByzQ
it is not an “evolution” but just another tool

50. Testing Tools
toolbox, tools
MORE WEB
PERFORMANCE TOOLS
http://flic.kr/p/4BZsQJ

51. LIST OF PERF TOOLS
perf-tooling.today

52. Google Analytics Site Speed
GOOGLE ANALYTICS’ SITE SPEED

53. PERFORMANCE MONITORING
speedcurve.com

54. PERFMAP (alpha)
github.com/zeman/perfmap

55. REAL USER TESTING
yahoo.github.io/boomerang/doc/

56. MOD_PAGESPEED: PERF AUTOMATION
developers.google.com/speed/pagespeed/mod
add_head
combine_css
convert_jpeg_to_progressive
convert_meta_tags
extend_cache
flatten_css_imports
inline_css
inline_import_to_link
inline_javascript
rewrite_css
rewrite_images
rewrite_javascript
rewrite_style_attributes_with_url
Default Filters

57. DEVICES
http://flic.kr/p/cfkZhN

58. REMOTE DEBUGGING

59. charlesproxy.com
SLOWING THINGS DOWN
NLCCharles

60. USING CHARLES PROXY
blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/

61. eBay
MobileKarma.com
Cellphone store leftovers
Open device labs
GET YOUR HANDS ON
REAL DEVICES
http://flic.kr/p/7972f6

62. OPENDEVICELAB.COM

63. SUMMING IT ALL UP
• Open conversations using a
performance budget
• First render speed is more
important than pure resource size
• Integrate perf into your workflow
• Test, evaluate, and monitor

64. WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders
@patmeenan
@stoyanstefanov
@bbinto
@scottjehl
just a sampling
@tameverts

65. Dave Olsen
Professional Technologist
West Virginia University
@dmolsen
THANKS FOR LISTENING

66. QUESTIONS?

67. Dave Olsen
Professional Technologist
West Virginia University
@dmolsen
THANKS AGAIN FOR LISTENING