Design Fast Websites

40 %
60 %
Information about Design Fast Websites

Published on October 14, 2008

Author: stubbornella



don't blame the rounded corners!

Yahoo! F2E Summit 2008

NICOLE SULLIVAN Design Fast Websites don’t blame the rounded corners!

Exceptional Performance at Yahoo!

Quantify and improve the performance of all Yahoo! products worldwide

Y! Performance Research Engineering Team Nicole Sullivan, Anande Kishore (intern), Stoyan Stefanov, Philip Tellis, Swapnil Shinde

Make your users happy • Users care if sites are fast. • I can’t give you the solution • I can help you understand the problem.

Why talk about performance?

1: Because fast is better

2: Because sites are bigger

Modern web sites & applications have changed architecturally.

From 2003 to 2008: 97K to 312K. 25.7 to 49.9 objects.

In past 12 months, Top 1000 sites: From 250K to 310.4K.

3: Time is money

+100 ms

Amazon:1% drop in sales +100 ms

+400 ms

Yahoo!: 5-9% drop in full-page traffic +400 ms

+500 ms

Google: 20% fewer searches +500 ms

Users care about performance!

Performance Fruit (some low, some high)

Web Dev Philosophy • Work out of respect for the design. • Designers make our code as beautiful and clever on the outside as it is on the inside. • Respect the original design vision. consistent design = clean code = fast site.

9 Best Practices 1. Create a component 5. Avoid non-standard library of smart objects browser fonts. 2. Use consistent semantic 6. Use columns rather than styles rows. 3. Design modules to be 7. Choose your bling transparent on the carefully. inside. 8. Be flexible. 4. Optimize images and sprites. 9. Learn to love grids.

1 Create a component library of smart objects

Components are like legos Mix and match to create diverse and interesting pages.

Site-wide legos: • Headings • Lists (e.g. action list, external link list, product list, or feature list) • Module headers and footers • Grids • Buttons • Anything else that should be consistent site-wide.

Reusing elements makes them performance “freebies”

Legos first Design individual pages only once all the legos have been defined.

Avoid redundancy

Nearly identical modules Headings 3 and 5 are too similar.

Rule of thumb: If two modules look too similar to include on the same page, they are too similar to include together in a site, choose one!

2 Use consistent semantic styles

A Heading should not become a Heading in another part of the page.

Consistent site-wide

Consistency Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.

How about an example? Personal finance

3 Design modules to be transparent on the inside.

Contour blocks Background blocks Content Objects - headings, paragraphs, lists, headers, footers, buttons, etc. Capital of the Canterbury region and the largest city on the South Island (population just over 300,000) exudes a palpable air of gentility and a connectedness with the mother country. Read more... X X 1:n

Making it look fab Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement

Pitfalls Variable or gradient backgrounds.

4 Optimize images and sprites

Optimize sprites 1. How many pages does your property have? 2. Is your site modular? (hint: it should be!) 3. How much time can your team spend on site maintenance?

9 Image Optimizations 1. Combine like colors 6. Reduce anti-aliased pixels - via size and alignment 2. Avoid whitespace 7. Avoid diagonal gradients 3. Horizontal better than vertical 8. Avoid alpha transparency 4. Limit colors 9. Change gradient color every 2-3 pixels 5. Optimize individual images, then sprite

Careful with Logos Very recognizable so small changes will be noticed more easily.

Try progressively enhanced PNG8

Avoid filters Why is the AlphaImageLoader used? IE6 and earlier don’t natively support alpha transparency. This filter forces that support.

Problem with filters • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image!

Solution: Avoid AlphaImageLoader 1. BEST: avoid completely, use PNG8 which degrades gracefully in IE < 7 2. Fallback: use underscore hack so the filter is applied only to IE < 7 #elem { background: url(some.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='some.png', sizingMethod='crop'); }

Progressively enhanced PNG8 Build a binary transparency image. In Fireworks, add a few alpha transparent pixels.

IE6 Firefox Opera IE7+ Safari Good browsers get more And the dinosaurs get an acceptable fallback

Experimental Data Removing Alpha Image Loader 100ms Yahoo! search

Crush images Step 1: Quality, Designer chooses quality (e.g. via save for the web) Step 2: Non-lossy compression to squeak the last bytes out of the image.


5 Avoid non-standard browser fonts.

6 Use columns rather than rows.

7 Choose your bling carefully. Consider your market and users.

8 Be flexible. Extensible height and width.

• Grids control width • Content controls height

9 Learn to love grids.

Flickr Photo Credits: • idigit_teddy: • lucianvenutian: • Gimli_36: • NathanFromDeVryEET: thatguyfromcchs08/2300190277/ • Stabilo Boss: set-72057594060779001/

Thanks! Nate Koechley - YUI. High Performance Websites: ✴ Yahoo! Exceptional Performance Team: ✴ A list apart: ✴ Tom Chi - Yahoo! Search

Let’s keep talking... “stubbornella” on the web... twitter, dopplr, everywhere...

#elem presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Co.Design | business + design

Fast Forward. Created for and commissioned by Workday. Startup Report. ... Get the latest Co.Design stories to your inbox daily. Send. Must Reads. 1
Read more

Fast Website Design | Phoenix Logo Design & Awesome ...

About Fast Website Design... Fast Website Design is in business to help your company or non-profit grow! Whether it's a custom website, business logo, or ...
Read more

Fastwebsites - Domain Names,Web Hosting,Web Design and SEO ...

domain names, domain name, domain name registration, hosting, domains, register domain, cheap web hosting, website hosting, domain name register, email ...
Read more

Create Me Quick | Quick web design | Fast website design

Here at Create Me Quick we specialise in creating websites fast and at an affordable price. We can have sites turned around in five working days (or faster!).
Read more

Fast Website Design | Lightspeed Websites

Fast website design means better ranking in the search results, more traffic to your website, a lower bounce rate, and higher conversion rate.
Read more

A Short Guide to Building Fast Websites | Web Design ...

When you're first starting out in web design, website speed can seem like someone else's problem. At least, when I was a newbie, it seemed that way.
Read more

The Best Designs - Web Design Inspiration

The best of web design and web design inspiration - updated regularly with new designs and web designers, and featuring the best Wordpress Themes.
Read more

WL Webdesign, für (fast) alle Arten von websites

WLWEBDESIGN macht einfache, aber sehr persönliche und klare Websites, die Sie kaufen oder mieten. Besuchen Sie z.B. Foto Godderij für einen foto-reportage.
Read more

Designs - Microsoft Windows

Holen Sie sich aktuelle kostenlose Designs für Windows 7, Windows 8.1, Windows RT 8.1 und Windows 10.
Read more