High Performance Websites

High Performance Websites

Alla Gringaus
Daniel Mendelsohn
Aaron Grogg
Time Inc. Interactive
Front-end Web Development Team.
Lunch & Learn.
02.12.2008

In 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 much information is out there?

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

Innovation in wireless products is accelerating

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

Broadband Statistics
In high traffic site, if pages are optimized for
lower weight, the company can save a lot of
money on bandwidth charges. And why
should
For example, 100,000 pages of 150Kb weight will I care?
need twice the bandwidth as the same number of
pages at 75Kb.

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.

Impatience Index
There are still a large number of outdated computers and slower speed
connection than advanced reliable computers and fast connection.

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%

Poor website performance can be costly in many ways: downtime, slow response
times, increased bailout rates ($$$$$!!!).

Page weight has a direct correlation to the download times of your landing
page and every other page within your site.

Benefits of Maximizing Performance

• Better User Experience • Improved Visitor Retention Rate
• Conversion Rate • Increased Visibility
• PageRank • Increased Positive Responses
• Search Engine Placement • Increased Brand Awareness
• Reduced Development Cost • Increased Traffic
• Reduced Maintenance Cost • Improved Ad Sales
• Lower Bandwidth Charges • Increased Revenues

How the web works in 5 minutes,
hold on tight...

DNS HTML

CSS

JS

IMAGES

DNS HTML

IMAGES CSS
JS

IMAGES JS
JS

DNS IMAGES

Optimization Strategies

Reduce Latency Time
HTTP Requests
Server-Side Optimization (Expired Headers, E-tags)

Reduce Download Time
K-Size of page objects (HTML, JS, CSS, Images)
Improve Page Rendering

Load order
Code execution

UI and Design Elements
Page Architecture (Hidden Content, Image-based headers
Less Images-involved Design, more use of CSS

Latency time is reduced by making as few
Reduce Latency Time requests for objects as possible:
HTTP Requests
For code, this means consolidating JavaScript
Server-Side Optimization and CSS files into global, site, and page-
(Expired Header, E-tags) specific libraries.

For design, it means combining graphics, and
Reduce Download Time using less of them.
K-Size of page objects (HTML, JS, CSS,
Images) On the server, putting cache controls on
objects can greatly improve the user’s return
Improve Page Rendering experience.

Load order
Code execution

Page Architecture (Hidden Content, Image-
based headers


HTML

redirect

HTML


the slash of DOOM

http://www.ew.com/ew/tv
http://www.ew.com/ew/tv/


Effective Caching
Expires
Cache Controls
Etags


HTTP Response Headers
Server: Apache
Last-Modified: Thu, 18 Jan 2007 12:35:23 GMT
Accept-Ranges: bytes
Content-Length: 627
Content-Type: application/x-javascript
Date: Tue, 12 Feb 2008 14:42:13 GMT
Connection: keep-alive
Etag: "9cd9a-273-45af698b"
Cache-Control: max-age=315360000
Expires: Thu, 12 Feb 2009 20:00:00 GMT

Reduce Latency Time
HTTP Requests Download time is reduced by making every
Server-Side Optimization byte count in every object sent down the
(Expired Header, E-tags) pipe.

For code, this means using as few characters
Reduce Download Time as possible.
K-Size of page objects
For design, it means ensuring images are as
(HTML,JS, CSS, Images) compressed as they possibly can be, and
using less of them.
Optimizations such as GZip can also be made
Load order on the server side to improve download time.
Code execution

based headers


HTML, CSS, JS, XML, JSON, TXT
Reduce white-space
Remove comments
Minify / Obfuscate

Optimize images
Use Sprites
Replace with CSS


GZip on servers

Compress: HTML, CSS, JS, XML,JSON, TXT

Don’t 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)

Reduce Latency Time
HTTP Requests
Server-Side Optimization
(Expired Header, E-tags)

K-Size of page objects Page rendering can be improved by the
(HTML,JS, CSS, Images) semantic and valid use of XHTML and other
web standards.

Improve Page Rendering Design can impact rendering by using CSS
Load order styles as opposed to art.

Code execution Technologies such as JavaScript and Flash can
be optimized to control when objects are
UI and Design Elements downloaded, affording the best progressive
load experience.
based headers


HTML

Aside from ads,
external CSS / JS mostly good

Move JS/CSS from page CSS
JS to external files

Link CSS, do not @import
Internal code cannot be cached


CSS

HTML

CSS goes at the top
Browser won’t render until all CSS is downloaded


HTML

JS

JS can go at the bottom
JS downloads disable parallel downloads
Browser stops all processing until JS is downloaded
Allows content to download before JS files
Issue with ads

Reduce Latency Time
HTTP Requests
Server-Side Optimization
(Expired Header, E-tags)

K-Size of page objects
(HTML,JS, CSS, Images)

Load order
Code execution
Anything styled using code shows up first in
UI and Design Elements the load order, allowing the user to get a feel
for the page faster.
Page Architecture
Hidden Content (SEO) Reducing art assets saves on “latency time”,
No image-based headers which could grow exponentially in bad
network conditions, even if “cached.”
More use of CSS

Hidden content (tabs, slideshows)
Download only when needed or post-load
Be mindful of SEO
Image-less headers: use text, not images
(SEO-friendly pages)

Reduce image-heavy designs
Use 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.

Leaderboard Optimization: GOLF.com

Before After

“What’s a few seconds of wait time among friends”, Given GOLF.com lives under older technology
right? Well, the difference in download times has a platform, we could only implement a few steps to
direct impact on the number of GOLF.com optimize the Leaderboard landing page, which
tournament’s fans who actually may not stick around kept traffic up, page down, and encouraged much
while the blue line makes its slow crawl from left to more visitors to return and stay on site much
right. We captured the movie clip of ‘Before’ the longer than previously…
landing page optimization. If you’re curios, shoot us
an email: tii-frontend@timeinc.net

Why Maximize Performance

A few, small improvements to the overall page weight can deliver
substantial 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

‘s 10 Rules
1. Focus on user and all else will follow
2. It’ best to do one thing really do really really well
3. Fast is better than slow
4. 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 evil
7. 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

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

High Performance Websites

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (19)

Similaire à High Performance Websites

Similaire à High Performance Websites (20)

Dernier

Dernier (20)

High Performance Websites