According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate. - Why has the web become obese? - What actions can developers and stakeholders do to combat their morbid obesity? - Are these actions expensive or hard to implement? This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.

2. My Fitness Journey
Lost over 90 pounds
Regained my health
Became a fit athlete again
AND
Noticed many parallels with
the modern web
LOVE2DEV.COM

3. 10 Days to HTML5 Fitness
A 10 Day Email Course to
Help You Get Your Web Sites
In Shape.
http://bit.ly/html5fit
LOVE2DEV.COM

4. “We have remade the web in
our own image...obese"
Jason Grigsby,
Mobile and Web Strategist and Co-Founder
Cloud Four
LOVE2DEV.COM

5. Average web
page is now
larger than
DOOM
installation.
LOVE2DEV.COM

6. HTML5 Fitness
LOVE2DEV.COM
HTML5 fitness is more than just having
clean, performant code.
It is about a development lifestyle that
produces consistent, maintainable
applications your customers will love.
Developed in parallel with my personal
journey to health & fitness.

7. Web Sites Are Obese &
Out of Shape
LOVE2DEV.COM
http://httpArchive.org as of 5/15/2016
117 File Requests – 2.4+MB
22 JavaScript Files - 399KB
7 CSS Files – 75KB
60 Images – 1.5MB
40 TCP Connections
21 Domains
43% Cacheable

8. Web Sites Are Obese & Out of Shape
LOVE2DEV.COM

9. LOVE2DEV.COM
Original Web was
Lean & Fit
During dial-up days, HTML
was pre-rendered on server
We assumed little to no
bandwidth available

10. Broadband expansion
Browsers got better,
stronger and faster
Mobile devices
proliferated
We assumed broadband
was ubiquitous
We moved processing to
the client
Developers ignored
mobile
Web Got Older & Obese
Web (WWW) Developers
LOVE2DEV.COM

11. We are
obese
because…
We Eat Too Much
LOVE2DEV.COM

12. Web
became
obese
because…
LOVE2DEV.COM
We Load Too Much

13. We Eat the Wrong Things
LOVE2DEV.COM
We are
obese
because…

14. LOVE2DEV.COM
Web became obese because…
We Load the Wrong Things

15. We don’t know how to cook
LOVE2DEV.COM
We are
obese
because…

16. LOVE2DEV.COM
Web
became
obese
because…
We Don't Know How to Code the Web

17. We Don't Eat Real Food Anymore
LOVE2DEV.COM
We are
obese
because…

18. LOVE2DEV.COM
Web
became
obese
because…
We Don't Write Real Web Code Anymore

19. LOVE2DEV.COM
We are
obese
because…
We Rely on Fast and
Processed Food

20. LOVE2DEV.COM
Web
became
obese
because…
We Rely on Fast Food Frameworks

21. LOVE2DEV.COM
Web
became
obese
because…
We Rely on Fast Food Frameworks

22. We are
out of
shape
because…
We Don't Exercise
LOVE2DEV.COM

23. Web is out
of shape
because…
We Don't Analyze Our
Web Sites or Apps
LOVE2DEV.COM

24. We are
out of
shape
because…
We Assume Exercise Is Hard
LOVE2DEV.COM

25. Web is out
of shape
because…
We Assume Analyzing
Web Client is Hard
LOVE2DEV.COM

26. We are
out of
shape
because…
We Don't Know How to Exercise
LOVE2DEV.COM

27. Web is out
of shape
because…
We Don't Know
How to Analyze Our
Web Clients
LOVE2DEV.COM

28. We are
out of
shape
because…
We Think We Don't
Have Enough Time
LOVE2DEV.COM

29. Web is out
of shape
because…
We Don't Budget
Time or
Resources to
Analysis
LOVE2DEV.COM

30. We are
out of
shape
because…
We Let Real Life Get in Our Way
LOVE2DEV.COM

31. Web is out
of shape
because…
We are distracted by
too many shiny balls
and suffer from
JavaScript fatigue
LOVE2DEV.COM

32. Why Is HTML5 Fitness
Important?
LOVE2DEV.COM

33. User Experience is
to the customer.
EVERYTHING
LOVE2DEV.COM

34. IS KEY TO YOUR BUSINESS
PERFORMANCE
LOVE2DEV.COM

35. LOVE2DEV.COM
Matt Young
Technology Evangelist & Writer,
Radware
http://bit.ly/1S8NCFE
“Every second is absolutely critical in ensuring a
user experience that will yield the maximum
likelihood of conversion, meaning a site visitor
follows through and makes a purchase.”
http://bit.ly/1S8NCFE

36. Speed Matters!
LOVE2DEV.COM

37. Faster Sites Rank Higher
Faster is Better User Experience http://bit.ly/1Ezmko6
Mobile First Web Applications Rank Higher
Mobilegeddon http://bit.ly/1JFpsmE
SEO & Web Performance
LOVE2DEV.COM

38. Faster Sites Have Higher Conversion
Rates
http://bit.ly/S1fHSZ
http://bit.ly/WajJbB
http://bit.ly/S3UoAj
http://bit.ly/RIQMDM
LOVE2DEV.COM

39. Speed does not mean difficult for the
developer
LOVE2DEV.COM
“Making your web experience quicker and more enjoyable for visitors… may be as
simple as making sure the basic HTML, CSS, and JavaScript components of your
site—the foundational front end building blocks of the Web for nearly 20 years—
have been optimized.”
Web page size, speed, and performance
By Terrence Dorsey
http://oreil.ly/1UZu2Tl

40. Performance Affects User Experience
Over 50% Will Abandon a Slow Site After 3 Seconds
We Have to Concentrate 50% Harder for Slow Sites
78% Have Felt Stress or Anger With Slow Sites
44% Say Slow Sites Make Them Anxious
4% Have Thrown Their Phone
LOVE2DEV.COM
http://bit.ly/SuBLDR

41. “Web pages are trying to do too many things,
and often failing to optimize along the way.
It’s not just ecommerce sites, either: ... we learned
quite a bit in analyzing news, travel and sports
sites, along with ecommerce.”
Kent Alstad, VP of Acceleration
at Radware
http://bit.ly/1ooJQQx

42. “As we’ve found in the past:
 Pages keep getting bigger in their total size
 The number of resource requests is
increasing dramatically
 Performance takes a hit due to page
complexity and large, unoptimized images.
These trends threaten user retention and can
have a huge impact on the bottom line.”
Kent Alstad, VP of Acceleration
at Radwarehttp://bit.ly/1ooJQQx

43. Where to Start?
LOVE2DEV.COM

44. Web Performance Optimization
Web performance optimization, WPO, or website
optimization involves ongoing monitoring and testing
of websites to achieve optimum performance under
given constraints.
Usually optimization is restricted due to lack of complete
information and metrics to evaluate the performance of a
website.
http://bit.ly/SWEh6E
LOVE2DEV.COM

45. Measure Web Fitness
LOVE2DEV.COM

46. Set A Performance Budget
“This may be a specific load time, but
it is usually an easier conversation to
have when you break the budget
down into the number of requests or
size of the page.”
LOVE2DEV.COM
Tim Kadlec
http://bit.ly/1CUAfGx

47. Set Performance Baseline
Page Load Time
Time to Full Render
Time to First Interaction
Page Speed Index
LOVE2DEV.COM

48. Select Performance Metrics
Typical Load Time
Shoot for < 2 Seconds Over Broadband
My Standard
< 1 Second
LOVE2DEV.COM

49. Select Performance Metrics
Page Weight
What Does My Web Site Cost?
http://whatdoesmysitecost.com
LOVE2DEV.COM

50. Select Performance Metrics
HTTP Chattiness
# of Requests
LOVE2DEV.COM

51. Web Performance Tools
F12
Performance Budget
Google Page Insights
LOVE2DEV.COM
What Does My Site Cost?
3rd party script visualization
WebPageTest.org

52. webpagetest.org
LOVE2DEV.COM
http://bit.ly/1dibffr
Online Tool
Identifies Common Performance Issues
Must be Public URL

53. webpagetest.org
LOVE2DEV.COM
http://bit.ly/1dibffr
Open Source
Available to Create Private Instance
Can be Scripted & Automated

54. http://bit.ly/1dibffr
LOVE2DEV.COM

55. webpagetest.org – film strip view
LOVE2DEV.COM

56. Identify Performance Issues
LOVE2DEV.COM

57. Identify Your Focus
LOVE2DEV.COM
What is Increasing Load time?
What is Delaying Rendering?
Is Overall User Experience Poor?
(e.g. users wait for action confirmation)

58. Act Now to Get
Rid of Your Web
Site's Love
Handles
LOVE2DEV.COM

59. Image
Fitness
LOVE2DEV.COM

60. Image Problems
• Too Large
• Not Optimized
LOVE2DEV.COM

61. Tools to Optimize Images
• pngCrush
• ImageOptm
• GruntIcon
• Kraken.io
LOVE2DEV.COM

62. Improper Dimensions
• Developers/Designers tend to
use the largest image to avoid
grainy images
• This means everyone gets super
large images
• Forces browsers to resize them
on the fly
• Browsers are not Optimized For Image
Resizing
LOVE2DEV.COM

63. <html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- logo.gif dimensions: 500 x 400 -->
<img src="logo.png" width="50" height="40" />
…
</body>
</html>
Use Native Image Resolutions
Optimize Media Usage

64. Responsive Images
• Allow Us to Create and Use an Array of properly sized
images
• Browser downloads ‘best’ image for browser viewport
LOVE2DEV.COM

65. LOVE2DEV.COM

66. LOVE2DEV.COM
<img srcset="/img/awesome-photo-3300x6600.jpg 6600w,
/img/awesome-photo-6600x3300.jpg 3300w,
/img/awesome-photo-5960x2980.jpg 2980w,
/img/awesome-photo-5320x2660.jpg 2660w,
/img/awesome-photo-4680x2340.jpg 2340w,
/img/awesome-photo-4040x2020.jpg 2020w,
/img/awesome-photo-3400x1700.jpg 1700w,
/img/awesome-photo-2760x1380.jpg 1380w,
/img/awesome-photo-2120x1060.jpg 1060w,
/img/awesome-photo-1480x740.jpg 740w,
/img/awesome-photo-840x420.jpg 420w"
src="/img/awesome-photo.jpg"
sizes="(max-width: 480px) 100vw, 30vw"
alt="Awesome Photo">

67. Image Optimization Workflow
• Images Added to ‘watched’ location
• Invokes Optimization Process
• Creates Responsive Set
• Optimizes Images
• Process Pushes Optimized Images to CDN File Storage
• Returns Image URLS & srcset value
LOVE2DEV.COM

68. Image Formats: PNG, JPEG, JPEG-XR
Optimize Media Usage
PNG (Default)
Website Elements, Logos
JPEG
Photographs
JPEG-XR
High Resolution Photographs
Don’t Get Distracted
GIF, TIFF, BMP, WebP, etc.

69. Consider A Static Web Application
Bypasses server-side rendering systems like ASP.NET, PHP,
etc​.
Can be hosted in cloud file storage (S3, Azure Blobs)​
Client-side rendering in a SPA​
Many Generators Available
LOVE2DEV.COM

70. CSS Optimizations
LOVE2DEV.COM

71. CSS Selector Specificity
• Complex Specificity
• .main-content > article #myArticleId p
• Leads to large CSS files
• Makes Code Unmanageable
• Lower the Score the Better
• Browsers Parse Selectors Right to Left
• * Avoid Universal Selector

72. Right-Left Rule
• .main-content > article #myArticleId p
• Translates to:
• #myArticleId p
• Think More Like the Browser When Defining Selectors

73. Calculate CSS Specificity
• Count the Inline Style
• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and
pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the
selector (= c)
• ignore the universal selector

74. Calculate CSS Specificity
http://specificity.keegan.st/

75. BEM Naming Convention
• Block
• Element
• Modifier
• Bootstrap and Primer Good Examples
• Create Rules Based on UI Expectations, Not Specific
Elements

76. BEM Naming Convention
• .btn {…}
• .btn-primary {…}
• .btn-primary:disabled {…}
• .btn-xs {…}
• Might also see __ between words

77. BEM Naming Convention
• <button type="button" class="btn btn-primary">Primary</button>
• <button type="button" class="btn btn-success">Success</button>
• <button type="button" class="btn btn-info">Info</button>
• <button type="button" class="btn btn-warning">Warning</button>

78. Inline CSS
• AMP Requires CSS Be Inlined in HEAD
• Eliminates HTTP Requests
• Enables Browser to Render as Fast As Possible
LOVE2DEV.COM

79. Loading CSS Optimization
Load Only Used CSS / Remove Unused CSS
UNCSS Module
Identify Critical CSS
Example: Most Bootstrap Sites Use <10% of Bootstrap
Bootstrap Adds up to 600kb to Page Weight
LOVE2DEV.COM

80. Javascript Optimization
• Still Blocking Call
• Use Async & Defer
• Load Only Scripts you will use
• Think Portion Control
LOVE2DEV.COM

81. <script src="jquery.js" … ></script>
<script src="prototype.js" … ></script>
<script src="dojo.js" … ></script>
<script src="animater.js" … ></script>
<script src="extjs.js" … ></script>
<script src="yahooui.js" … ></script>
<script src="mochikit.js" … ></script>
<script src="lightbox.js" … ></script>
<script src="jslibs.js" … ></script>
<script src=“gsel.js" … ></script>
Standardize on a Single Architecture
Efficiently Structure Markup

82. <script src="facebookconnect.js" … ></script>
<script src="facebooklike.js" … ></script>
<script src="facebookstats.js" … ></script>
<script src="tweetmeme.js" … ></script>
<script src="tweeter.js" … ></script>
<script src="tweetingly.js" … ></script>
<script src="googleanalytics.js" … ></script>
<script src="doubleclick.js" … ></script>
<script src="monitor.js" … ></script>
<script src="digg.js" … ></script>
Don’t Include Script To Be Cool
Efficiently Structure Markup

83. Javascript Optimization
Avoid using fast food frameworks
- mostly fat and syntatic sugar
Avoid Transpiling
- just adds fat to code
- JavaScript is not that Difficult To Learn
LOVE2DEV.COM

84. LOVE2DEV.COM
Chris Wharton
http://chriswharton.me

85. Javascript Optimization
• Avoid polyfils without proper
feature detection and on demand
loading
• Only support N-1 browser
version and IE 11
• Microsoft No Longer Supports IE 10 and
below and neither should you
LOVE2DEV.COM

86. Bundle & Minify Text Assets
Eliminate Excess HTTP Requests
Reduce Data Footprint
If Production Version
Bundle & aim for a Single JS and Single CSS file
LOVE2DEV.COM

87. Gzip Text Content
Browsers support Gzip & deflate algorithms
Reduces text base content size
Makes it easier to traverse Intertubes
14kb Critical Packet Size
This is due to HTTP’s Slow Start
This is the goal for Optimal Mobile Performance
LOVE2DEV.COM

88. • Request
• GET / HTTP/1.1
• Accept: */*
• Accept-Language: en-us
• UA-CPU: x86
• Accept-Encoding: gzip, deflate
• Host: www.live.com
Response
HTTP/1.1 200 OK
Content-Length: 3479
Expires: -1
Date: Sun, 14 Mar 2017 21:30:46 GMT
Pragma: no-cache
Content-Encoding: gzip
GZIP Compress Network Traffic
Minimize Bytes Downloaded

89. Configure Gzip in IIS
LOVE2DEV.COM

90. Configure Gzip in Amazon S3 | CloudFront
LOVE2DEV.COM

91. Use a CDN
1. Globally Distributes Resources Closer to Client
2. Was Expensive
3. Amazon CloudFront & Azure cost pennies a month
LOVE2DEV.COM

92. Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests

93. Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests

94. Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests

95. Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests

96. Use Content Distribution Networks (CDN’s)
Quickly Respond to Network Requests

97. Far Future Expires Header
Lets the browser cache resources locally
Eliminates future Http requests
The fastest Http request is the one not made
Only updates resource if changed on server
LOVE2DEV.COM

98. • Request
• GET /images/banner.jpg
HTTP/1.1
• Host: www.microsoft.com
Response
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 20 Apr 2017
00:00:00 GMT
Provide Cacheable Content
Minimize Bytes Downloaded

99. jQuery Data Request
jQuery.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
Cached jQuery Data Request
jQuery.ajax({
url: url,
dataType: 'json',
data: data,
cache: true,
success: callback
});
Cache Data Requests
Minimize Bytes Downloaded

100. Use LocalStorage For Storage & Caching
LOVE2DEV.COM
Allows You to Keep Data Locally in a Hash Table
localStorage
sessionStorage
Approximately 5-10MB
Replace Cookies
Great For Caching
Use IndexDB for Larger Data Sets

101. Use A Client Build System
Bundling & Minification is OK
Grunt Is Very Easy & Extensive
• Validate Scripts
• Combine & Minify Scripts
• Validate CSS
• Combine & Minify CSS
• Critical CSS
• UNCSS
• Many Other Tasks
Gulp, Broccoli, Webpac are also good tools
http://bit.ly/1kcrpuo
LOVE2DEV.COM

102. Slide Deck & Source Code
http://GitHub.com/docluv
LOVE2DEV.COM
slidesha.re/15YTrTT