Post on 15-May-2015
description
Web Performance Optimization for Modern Web Applications
Chris Love
@ChrisLove
ProfessionalASPNET.com
Slide Deck & Source Code
Slide Deck – http://slidesha.re/SzoqKs
Source Code – http://GitHub.com/docluv
Web Performance Optimization Resources
High Performance Web Sites - http://bitly.com/U7GStY
Even Faster Web Sites - http://amzn.to/WTiDFM
Web Performance Daybook - http://amzn.to/VV4Grz
High Performance JavaScript - http://amzn.to/Sq9IFC
Steve Souders - http://www.stevesouders.com/
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(Click the arrow when in Slide Show mode)
Matt Cutts
"Also take a step back for a minute and
consider the intent of this change: a faster
web is great for everyone, but especially for
users. Lots of websites have demonstrated
that speeding up the user experience
results in more usage. So speeding up your
website isn’t just something that can affect
your search rankings–it’s a fantastic idea for
your users."
http://bit.ly/SPPB4k(Click the arrow when in Slide Show mode)
Time === $$$$
Faster Sites Have Higher Conversion Rates
WalMart - http://bit.ly/S1fHSZ
Google – http://bit.ly/WajJbB
Amazon – http://bit.ly/S3UoAj
ShopZilla - http://bit.ly/RIQMDM
WalMart
Folks at Walmart knew their pages were slow. As a for
instance, initial measurement showed that an item page
took about 24 seconds to load for the slowest 5% of users.
Why? The usual culprits: too many page elements, slow
third-party scripts, multiple hosts (25% of page content is
served by partners, affiliates, and Marketplace), and various
best practice no-nos
http://bit.ly/WajJbB
½ Second Delay
Half a second delay caused a 20% drop in
traffic. Half a second delay killed user
satisfaction.
The lesson, Marissa said, is that speed matters.
People do not like to wait. Do not make them.
http://bit.ly/TPPhUp
WPO Fast Facts
• 57% 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
http://bit.ly/SuBLDR
Web Sites/Apps Are Getting Larger
http://bit.ly/PVlLOC
86 Files
Requests
1.25MB
15 JavaScript
Files
214KB
53 Images
750KB
14 Domains
Web Sites/Apps Are Getting Larger
We Are Getting More Mobile
Assume Everyone is on Sprint 3G
http://bit.ly/WebIqD
And Is Using Android
http://bit.ly/ZGMm4A
YSlow Rules
1. Minimize HTTP Requests2. Use a Content Delivery Network3. Avoid empty src or href4. Add an Expires or a Cache-Control Header5. Gzip Components6. Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS Expressions9. Make JavaScript and CSS External10.Reduce DNS Lookups11.Minify JavaScript and CSS12.Avoid Redirects13.Remove Duplicate Scripts
14.Configure ETags15.Make AJAX Cacheable16.Use GET for AJAX Requests17.Reduce the Number of DOM Elements18.No 404s19.Reduce Cookie Size20.Use Cookie-Free Domains for Components21.Avoid Filters22.Do Not Scale Images in HTML23.Make favicon.ico Small and Cacheable
http://yhoo.it/W7BFIw
YSlow Rules – That Will Play A Part Today
1. Minimize HTTP Requests2. Use a Content Delivery Network3. Avoid empty src or href4. Add an Expires or a Cache-Control
Header5. Gzip Components6. Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS Expressions9. Make JavaScript and CSS External10.Reduce DNS Lookups11.Minify JavaScript and CSS12.Avoid Redirects
13.Remove Duplicate Scripts14.Configure ETags15.Make AJAX Cacheable16.Use GET for AJAX Requests17.Reduce the Number of DOM Elements18.No 404s19.Reduce Cookie Size20.Use Cookie-Free Domains for
Components21.Avoid Filters22.Do Not Scale Images in HTML23.Make favicon.ico Small and Cacheable
http://yhoo.it/W7BFIw
Mike Krieger “Most of your scaling problems wont be
glamorous"
http://bit.ly/QeKZsO(Click the arrow when in Slide Show mode)
Make FavIcon Small and Cacheable
Don’t Return 404
Make Sure Its Compatible
PNG/ICO
It Carries Cookie Weight
Instagram Lesson #1
http://bit.ly/RUXEiL
Speaking Of Cookies
• Cookies Add Weight
• Place Resources (img/css/js) on Cookieless Domains
• Consider Local Storage Instead
Impact of Cookies on Response Time
Use LocalStorage For Storage & Caching
• Allows You to Keep Data Locally in a Hash Table
• localStorage
• sessionStorage
• Approximately 5MB
• Replace Cookies
• Great For Caching
Let’s Examine Southwest.com
• 95 File Requests
• 6 Domains
• 2 CSS
• 17 Documents
• 49 Images
• 30 JavaScript Files
• 4 AJAX Calls
• 786 KB – 1.25MB
• 2042 KB Request Header
• 16.5KB Cookie
• 1430 DOM Elements
Combine 19 JavaScript Files
Combine 19 JavaScript Files
• Eliminated 18 file Requests
• 42.6KB Header Data
• Eliminated 18 Gzip Decompress
Operations
• Probably Shave ~ 1 Second
Southwest.com Page Structure
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<link rel="shortcut icon" href="/assets/images/favicon.ico"/>
<style> … </style>
<script> … </script> - 22 Times
Script References in the HEAD – Should be at the Bottom
Southwest.com Improvements
Over the past few months I have been analyzing Southwest.com and have seen some tremendous improvements. Data transfer size has been cut in half this week alone. I have seen the complete load time reduced around 2 seconds in the past few weeks. The number of file requests has been reduced. So many be we will be privileged to a new WPO case study soon ;)
Let’s Look at Some Code!
Asynchronous Script Loading
http://bit.ly/TKdo6C
• Allows You to lazy Load Scripts• Great Way to Isolate 3rd Party Scripts• Helps Avoid Single Points of Failure
• Check For Existing Script Reference• Creates New Element• Executes a Callback When the Document is loaded• Appends the Script to the BODY
Image Optimization Tricks
• CSS Sprites
• Data URIs
<img src="data:image/png;base64,iVBORw0KGHAAAD…Zw4PIXZORK5CYII="/>
• CSS3 Features
• Rounded Corners
• Gradients
Use Native Selectors Instead of jQuery
http://bit.ly/S0bwby
Optimize CSS
• Good Structure• Size
• Colors
• Views/Controls
• Languages
• Avoid ID References
#