Journey to New Areas of Optimization Trends in Modern Optimization Feb., 2007 Kyungchul Park.
Web performance optimization for modern web applications
-
Upload
chris-love -
Category
Documents
-
view
1.651 -
download
3
description
Transcript of Web performance optimization for modern web applications
![Page 1: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/1.jpg)
Web Performance Optimization for Modern Web Applications
Chris Love
@ChrisLove
ProfessionalASPNET.com
![Page 2: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/2.jpg)
Slide Deck & Source Code
Slide Deck – http://slidesha.re/SzoqKs
Source Code – http://GitHub.com/docluv
![Page 3: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/3.jpg)
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/
![Page 4: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/4.jpg)
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)
![Page 5: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/5.jpg)
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)
![Page 6: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/6.jpg)
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
![Page 7: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/7.jpg)
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
![Page 8: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/8.jpg)
![Page 9: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/9.jpg)
![Page 10: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/10.jpg)
½ 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
![Page 11: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/11.jpg)
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
![Page 12: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/12.jpg)
Web Sites/Apps Are Getting Larger
http://bit.ly/PVlLOC
86 Files
Requests
1.25MB
15 JavaScript
Files
214KB
53 Images
750KB
14 Domains
![Page 13: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/13.jpg)
Web Sites/Apps Are Getting Larger
![Page 14: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/14.jpg)
We Are Getting More Mobile
![Page 15: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/15.jpg)
Assume Everyone is on Sprint 3G
http://bit.ly/WebIqD
![Page 16: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/16.jpg)
And Is Using Android
http://bit.ly/ZGMm4A
![Page 17: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/17.jpg)
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
![Page 18: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/18.jpg)
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
![Page 19: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/19.jpg)
Mike Krieger “Most of your scaling problems wont be
glamorous"
http://bit.ly/QeKZsO(Click the arrow when in Slide Show mode)
![Page 20: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/20.jpg)
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
![Page 21: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/21.jpg)
Speaking Of Cookies
• Cookies Add Weight
• Place Resources (img/css/js) on Cookieless Domains
• Consider Local Storage Instead
![Page 22: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/22.jpg)
Impact of Cookies on Response Time
![Page 23: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/23.jpg)
Use LocalStorage For Storage & Caching
• Allows You to Keep Data Locally in a Hash Table
• localStorage
• sessionStorage
• Approximately 5MB
• Replace Cookies
• Great For Caching
![Page 24: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/24.jpg)
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
![Page 25: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/25.jpg)
Combine 19 JavaScript Files
![Page 26: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/26.jpg)
Combine 19 JavaScript Files
• Eliminated 18 file Requests
• 42.6KB Header Data
• Eliminated 18 Gzip Decompress
Operations
• Probably Shave ~ 1 Second
![Page 27: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/27.jpg)
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
![Page 28: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/28.jpg)
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 ;)
![Page 29: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/29.jpg)
Let’s Look at Some Code!
![Page 30: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/30.jpg)
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
![Page 31: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/31.jpg)
Image Optimization Tricks
• CSS Sprites
• Data URIs
<img src="data:image/png;base64,iVBORw0KGHAAAD…Zw4PIXZORK5CYII="/>
• CSS3 Features
• Rounded Corners
• Gradients
![Page 32: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/32.jpg)
Use Native Selectors Instead of jQuery
http://bit.ly/S0bwby
![Page 33: Web performance optimization for modern web applications](https://reader035.fdocuments.us/reader035/viewer/2022062418/5555c7afd8b42aaf158b48c2/html5/thumbnails/33.jpg)
Optimize CSS
• Good Structure• Size
• Colors
• Views/Controls
• Languages
• Avoid ID References
#