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.
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
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
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
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
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
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
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
51. Web Performance Tools
F12
Performance Budget
Google Page Insights
LOVE2DEV.COM
What Does My Site Cost?
3rd party script visualization
WebPageTest.org
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
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
64. Responsive Images
• Allow Us to Create and Use an Array of properly sized
images
• Browser downloads ‘best’ image for browser viewport
LOVE2DEV.COM
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
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
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
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
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
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
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
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