High Performance Websites
Alla GringausDaniel MendelsohnAaron Grogg
Time Inc. InteractiveFront-end Web Development Team. Lunch & Learn.02.12.2008
In the blink of an eyeIn the blink of an eye……
You only have one chance to make a first impression.
"In the blink of an eye" your site (blog or website) is judged.
With so many sites and blogs to choose from, a site that loads
at a snail's pace or is hard to navigate will send frustrated
potential visitors on to their next destination.
Good design, effective usability and speedy site performance
are three very important considerations for building and
keeping an audience. They add to your credibility and help
build your audience’s trust, which is the only way to achieve
user loyalty.
How large is the Web?
Tens of billions of documents? Hundreds?
10KB/doc => 100s of Terabytes
Email, personal files, databases, broadcast media, archives
Estimated 5 Exabyte/year (growing at 30%)
800MB/Year/Person – 90% in magnetic media
Web is just a tiny starting point
Google is working on how to organize all this information
How much information is out there?How much information is out there?
Apple iPhone, 3 Skype Phone, Amazon Kindle, Google ‘GPhone’…
91% of mobile users keep phone within 1 met reach 24x7
15-20% of mobiles have GPS,50% within 5 years
Watch for new generation of Internet leaders to capitalize on growing access to fast Internet access on mobiles
Innovation in wireless products is acceleratingInnovation in wireless products is accelerating
Broadband StatisticsBroadband Statistics
In high traffic site, if pages are optimized for lower weight, the company can save a lot of money on bandwidth charges.
For example, 100,000 pages of 150Kb weight will need twice the bandwidth as the same number of pages at 75Kb.
Broadband StatisticsBroadband Statistics
So, if the ISP, charges by the amount of bandwidth we use, that’s how reducing page weight can save the company big time on monthly bandwidth charges.
And why shouldI care?
Connection Speed 20kb Page Weight 40kb Page Weight 100kb Page Weight
128 kbps (DSL) 1 second 2 seconds 6 seconds
256 kbps (DSL) < 1 second 1 second 3 seconds
Time to Download a Page Percent of users who wait for download
10 seconds download 84%
15 seconds download 51%
20 seconds download 26%
30 seconds download 5%
Poor website performance can be costly in many ways: downtime, sPoor website performance can be costly in many ways: downtime, slow response low response times, increased bailout rates ($$$$$!!!).times, increased bailout rates ($$$$$!!!).
Page weight has a direct correlation to the download times of yoPage weight has a direct correlation to the download times of your landing ur landing page and every other page within your site.page and every other page within your site.
Impatience IndexImpatience IndexThere are still a large number of outdated computers and slower speed connection than advanced reliable computers and fast connection.
Benefits of Maximizing PerformanceBenefits of Maximizing Performance
•• Better User ExperienceBetter User Experience•• Conversion RateConversion Rate•• PageRankPageRank•• Search Engine PlacementSearch Engine Placement• Reduced Development CostReduced Development Cost•• Reduced Maintenance CostReduced Maintenance Cost•• Lower Bandwidth ChargesLower Bandwidth Charges
•• Improved Visitor Retention RateImproved Visitor Retention Rate•• Increased VisibilityIncreased Visibility•• Increased Positive ResponsesIncreased Positive Responses•• Increased Brand AwarenessIncreased Brand Awareness•• Increased TrafficIncreased Traffic•• Improved Ad SalesImproved Ad Sales•• Increased RevenuesIncreased Revenues
How the web works in 5 minutes,How the web works in 5 minutes,hold on tight...hold on tight...
DNS
152.255.255.37
DNS
DNS HTML
HTML
DNS HTML
CSS
CSS
DNS HTML
CSS
JS
JS
DNS HTML
CSS
JS
IMAGES
IMAGES
DNSDNS HTMLHTML
CSSCSS
JSJS
IMAGESIMAGESDNSDNS
IMAGESIMAGES JSJS
IMAGESIMAGESJSJS
Optimization StrategiesOptimization Strategies
Reduce Latency TimeHTTP RequestsServer-Side Optimization (Expired Headers, E-tags)
Reduce Download TimeK-Size of page objects (HTML, JS, CSS, Images)Improve Page Rendering
Load orderCode execution
UI and Design ElementsPage Architecture (Hidden Content, Image-based headersLess Images-involved Design, more use of CSS
Reduce Latency TimeHTTP RequestsServer-Side Optimization (Expired Header, E-tags)
Reduce Download TimeK-Size of page objects (HTML, JS, CSS, Images)Improve Page Rendering
Load orderCode execution
UI and Design ElementsPage Architecture (Hidden Content, Image-based headersLess Images-involved Design, more use of CSS
Latency time is reduced by making as few requests for objects as possible:
For code, this means consolidating JavaScript and CSS files into global, site, and page-specific libraries.
For design, it means combining graphics, and using less of them.
On the server, putting cache controls on objects can greatly improve the user’s return experience.
Optimization StrategiesOptimization Strategies
redirect
HTML
HTML
Optimization StrategiesOptimization Strategies
the slash of DOOM
http://www.ew.com/ew/tvhttp://www.ew.com/ew/tv/
Optimization StrategiesOptimization Strategies
Effective CachingEffective CachingExpiresExpires
Cache ControlsCache ControlsEtagsEtags
Optimization StrategiesOptimization Strategies
HTTP Response HeadersServer: ApacheLast-Modified: Thu, 18 Jan 2007 12:35:23 GMTAccept-Ranges: bytesContent-Length: 627Content-Type: application/x-javascriptDate: Tue, 12 Feb 2008 14:42:13 GMTConnection: keep-aliveEtag: "9cd9a-273-45af698b"Cache-Control: max-age=315360000Expires: Thu, 12 Feb 2009 20:00:00 GMT
Optimization StrategiesOptimization Strategies
Reduce Latency TimeHTTP RequestsServer-Side Optimization (Expired Header, E-tags)
Reduce Download TimeK-Size of page objects (HTML,JS, CSS, Images)
Improve Page RenderingLoad orderCode execution
UI and Design ElementsPage Architecture (Hidden Content, Image-based headersLess Images-involved Design, more use of CSS
Download time is reduced by making every byte count in every object sent down the pipe.
For code, this means using as few characters as possible.
For design, it means ensuring images are as compressed as they possibly can be, and using less of them.
Optimizations such as GZip can also be made on the server side to improve download time.
Optimization StrategiesOptimization Strategies
HTML, CSS, JS, XML, JSON, TXT
Reduce whiteReduce white--spacespace
Remove commentsRemove comments
Minify / ObfuscateMinify / Obfuscate
Optimization StrategiesOptimization Strategies
Optimize imagesUse Sprites
Replace with CSS
GZip on serversGZip on servers
Compress: HTML, CSS, JS, XML,Compress: HTML, CSS, JS, XML,JSON, TXTJSON, TXT
DonDon’’t compress: JPEG, GIF, SWF, PDFt compress: JPEG, GIF, SWF, PDF
Server-side compression can be made to improve download times. This effective technique requires additional work and project management but undoubtedly impacts your bottom line (see Benefits of Maximizing Performance)
Optimization StrategiesOptimization Strategies
Reduce Latency TimeHTTP RequestsServer-Side Optimization (Expired Header, E-tags)
Reduce Download TimeK-Size of page objects (HTML,JS, CSS, Images)
Improve Page RenderingLoad orderCode execution
UI and Design ElementsPage Architecture (Hidden Content, Image-based headersLess Images-involved Design, more use of CSS
Page rendering can be improved by the semantic and valid use of XHTML and other web standards.
Design can impact rendering by using CSS styles as opposed to art.
Technologies such as JavaScript and Flash can be optimized to control when objects are downloaded, affording the best progressive load experience.
Optimization StrategiesOptimization Strategies
HTML
Aside from ads, external CSS / JS mostly good
Move JS/CSS from pageto external files
Link CSS, do not @importInternal code cannot be cached
JS CSS
Optimization StrategiesOptimization Strategies
CSS goes at the topBrowser won’t render until all CSS is downloaded
HTML
CSS
Optimization StrategiesOptimization Strategies
JS can go at the bottomJS downloads disable parallel downloads
Browser stops all processing until JS is downloadedAllows content to download before JS files
Issue with ads
HTML
JS
Optimization StrategiesOptimization Strategies
Reduce Latency TimeHTTP RequestsServer-Side Optimization (Expired Header, E-tags)
Reduce Download TimeK-Size of page objects (HTML,JS, CSS, Images)
Improve Page RenderingLoad orderCode execution
UI and Design ElementsPage ArchitectureHidden Content (SEO)No image-based headersMore use of CSS
Anything styled using code shows up first in the load order, allowing the user to get a feel for the page faster.
Reducing art assets saves on “latency time”, which could grow exponentially in bad network conditions, even if “cached.”
Optimization StrategiesOptimization Strategies
Hidden content (tabs, slideshows)Download only when needed or post-load
Be mindful of SEOImage-less headers: use text, not images
(SEO-friendly pages)
Reduce image-heavy designsUse CSS when possible:
Fonts, Borders, Backgrounds
Image-heavy Design: Back to Latency
The number of assets on page and latency impact
This chart shows the average latency time when averaged across the page’s assets.
Photo Optimization
Photo Optimization
Before After
Leaderboard Optimization: GOLF.com
“What’s a few seconds of wait time among friends”, right? Well, the difference in download times has a direct impact on the number of GOLF.com tournament’s fans who actually may not stick around while the blue line makes its slow crawl from left to right. We captured the movie clip of ‘Before’ the landing page optimization. If you’re curios, shoot us an email: [email protected]
Given GOLF.com lives under older technology platform, we could only implement a few steps to optimize the Leaderboard landing page, which kept traffic up, page down, and encouraged much more visitors to return and stay on site much longer than previously…
Why Maximize PerformanceWhy Maximize Performance
A few, small improvements to the overall page weight can deliversubstantial improvements to your visitor retention rate, conversion rate and PageRank, moving us up on the results page generated by a user query.
And, since most SE users rarely look beyond the first or second page of search results delivered by any search engine, getting the site listed higher in the results page is a guarantee of increased site traffic.
And, that gets us to the bottom line
Benefits of Maximizing PerformanceBenefits of Maximizing Performance
•• Better User ExperienceBetter User Experience•• Conversion RateConversion Rate•• PageRankPageRank•• Search Engine PlacementSearch Engine Placement• Reduced Development CostReduced Development Cost•• Reduced Maintenance CostReduced Maintenance Cost•• Lower Bandwidth ChargesLower Bandwidth Charges
•• Improved Visitor Retention RateImproved Visitor Retention Rate•• Increased VisibilityIncreased Visibility•• Increased Positive ResponsesIncreased Positive Responses•• Increased Brand AwarenessIncreased Brand Awareness•• Increased TrafficIncreased Traffic•• Improved Ad SalesImproved Ad Sales•• Increased RevenuesIncreased Revenues
1. Focus on user and all else will follow2. It’ best to do one thing really do really really well
3. Fast is better than slow4. Democracy on the web works
5. You don’t need to be at your desk to need an answer
6. You can make money without doing evil7. There is always more information out there
8. The need for information crosses all borders
9. You can be serious without a suit
10. Great Just isn’t good enough
‘‘ss 1010 RRuulleess
We picked 3 for a better online performance
1. Focus on user and all else will follow
3. Fast is better than slow
6. You can make money without doing evil
“…and likewise all parts of the system must be constructed with reference to all other parts, since, in one sense, all the parts form one machine…”
Thomas Edison
Top Related