high performance websites

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: tii-frontend@timeinc.net

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