SlideShare a Scribd company logo
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.
WebSiteOptimization.com/speed/tweak/average-web-page
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



http://alistapart.com/articles/mountaintop/
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.
demo




http://smushit.com
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: http://www.flickr.com/photos/design_inspiration/238542495/


•   lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/


•   Gimli_36: http://www.flickr.com/photos/navillot/1878124531/


•   NathanFromDeVryEET: http://www.flickr.com/photos/
    thatguyfromcchs08/2300190277/


•   Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/
    set-72057594060779001/
Thanks!
Nate Koechley - YUI. High Performance
Websites:
✴   http://www.slideshare.net/natekoechley/high-performance-web-sites-2008




Yahoo! Exceptional Performance Team:
✴   http://developer.yahoo.com/performance/




A list apart:
✴   http://alistapart.com/articles/mountaintop/




Tom Chi - Yahoo! Search
Let’s keep talking...
 http://developer.yahoo.com/performance/
           http://stubbornella.org
          nicole@stubbornella.org
“stubbornella” on the web... twitter, dopplr,
                everywhere...

More Related Content

What's hot

Sample PPC Audit Report
Sample PPC Audit ReportSample PPC Audit Report
Sample PPC Audit Report
Mobile SEO Pros
 
Brighton SEO July 2021 - Google Discover - optimisation, measurement, tech seo
Brighton SEO July 2021 - Google Discover - optimisation, measurement, tech seoBrighton SEO July 2021 - Google Discover - optimisation, measurement, tech seo
Brighton SEO July 2021 - Google Discover - optimisation, measurement, tech seo
Tom Capper
 
Tips for optimising for Google Discover
Tips for optimising for Google DiscoverTips for optimising for Google Discover
Tips for optimising for Google Discover
Lucinda Wood
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Vertical & Horizontal Integration
Vertical & Horizontal IntegrationVertical & Horizontal Integration
Vertical & Horizontal Integration
npamediastudies
 
ID2013 - Optimizing Your Website’s Architecture For SEO
ID2013 - Optimizing Your Website’s Architecture For SEOID2013 - Optimizing Your Website’s Architecture For SEO
ID2013 - Optimizing Your Website’s Architecture For SEO
John Doherty
 
CSS
CSSCSS
CSS Architecture: Writing Maintainable CSS
CSS Architecture: Writing Maintainable CSSCSS Architecture: Writing Maintainable CSS
CSS Architecture: Writing Maintainable CSS
Alexei Skachykhin
 
Seo onpage & offpage
Seo onpage & offpageSeo onpage & offpage
Seo onpage & offpage
John Yadav
 
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
SURBHI SAROHA
 
Drawing and selecting
Drawing and selectingDrawing and selecting
Drawing and selecting
SanthiNivas
 
How to Create a YouTube Channel
How to Create a YouTube ChannelHow to Create a YouTube Channel
How to Create a YouTube Channel
Crackerjack Scribe
 
Google Adwords Reports
Google Adwords ReportsGoogle Adwords Reports
Google Adwords Reports
Janaradhan Shetty
 
SEO Audit Report by Howl India for client
SEO Audit Report by Howl  India for clientSEO Audit Report by Howl  India for client
SEO Audit Report by Howl India for client
Shrikant Subramaniam
 
Black Hat SEO
Black Hat SEOBlack Hat SEO
Black Hat SEO
James Brown
 
Presentation on Photoshop Tools By Batra Computer Centre
Presentation on Photoshop Tools By Batra Computer CentrePresentation on Photoshop Tools By Batra Computer Centre
Presentation on Photoshop Tools By Batra Computer Centre
Batra Computer Centre
 
SEO link juice
SEO link juiceSEO link juice
SEO link juice
shilpishah10
 

What's hot (18)

Sample PPC Audit Report
Sample PPC Audit ReportSample PPC Audit Report
Sample PPC Audit Report
 
Brighton SEO July 2021 - Google Discover - optimisation, measurement, tech seo
Brighton SEO July 2021 - Google Discover - optimisation, measurement, tech seoBrighton SEO July 2021 - Google Discover - optimisation, measurement, tech seo
Brighton SEO July 2021 - Google Discover - optimisation, measurement, tech seo
 
Tips for optimising for Google Discover
Tips for optimising for Google DiscoverTips for optimising for Google Discover
Tips for optimising for Google Discover
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Vertical & Horizontal Integration
Vertical & Horizontal IntegrationVertical & Horizontal Integration
Vertical & Horizontal Integration
 
ID2013 - Optimizing Your Website’s Architecture For SEO
ID2013 - Optimizing Your Website’s Architecture For SEOID2013 - Optimizing Your Website’s Architecture For SEO
ID2013 - Optimizing Your Website’s Architecture For SEO
 
CSS
CSSCSS
CSS
 
CSS Architecture: Writing Maintainable CSS
CSS Architecture: Writing Maintainable CSSCSS Architecture: Writing Maintainable CSS
CSS Architecture: Writing Maintainable CSS
 
Seo onpage & offpage
Seo onpage & offpageSeo onpage & offpage
Seo onpage & offpage
 
Css
CssCss
Css
 
Concept of CSS unit3
Concept of CSS unit3Concept of CSS unit3
Concept of CSS unit3
 
Drawing and selecting
Drawing and selectingDrawing and selecting
Drawing and selecting
 
How to Create a YouTube Channel
How to Create a YouTube ChannelHow to Create a YouTube Channel
How to Create a YouTube Channel
 
Google Adwords Reports
Google Adwords ReportsGoogle Adwords Reports
Google Adwords Reports
 
SEO Audit Report by Howl India for client
SEO Audit Report by Howl  India for clientSEO Audit Report by Howl  India for client
SEO Audit Report by Howl India for client
 
Black Hat SEO
Black Hat SEOBlack Hat SEO
Black Hat SEO
 
Presentation on Photoshop Tools By Batra Computer Centre
Presentation on Photoshop Tools By Batra Computer CentrePresentation on Photoshop Tools By Batra Computer Centre
Presentation on Photoshop Tools By Batra Computer Centre
 
SEO link juice
SEO link juiceSEO link juice
SEO link juice
 

Viewers also liked

The Designer Startup
The Designer StartupThe Designer Startup
The Designer Startup
adii
 
Uncle Sam Wants You (To Optimize Your Content For Mobile)
Uncle Sam Wants You (To Optimize Your Content For Mobile)Uncle Sam Wants You (To Optimize Your Content For Mobile)
Uncle Sam Wants You (To Optimize Your Content For Mobile)
Karen McGrane
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Nicole Sullivan
 
Rhyme scheme
Rhyme schemeRhyme scheme
Rhyme scheme
Rhyme schemeRhyme scheme
Rhyme scheme
Andy Lombardo
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
Nicole Sullivan
 
Depression
DepressionDepression
Depression
Sathish Rajamani
 

Viewers also liked (7)

The Designer Startup
The Designer StartupThe Designer Startup
The Designer Startup
 
Uncle Sam Wants You (To Optimize Your Content For Mobile)
Uncle Sam Wants You (To Optimize Your Content For Mobile)Uncle Sam Wants You (To Optimize Your Content For Mobile)
Uncle Sam Wants You (To Optimize Your Content For Mobile)
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
Rhyme scheme
Rhyme schemeRhyme scheme
Rhyme scheme
 
Rhyme scheme
Rhyme schemeRhyme scheme
Rhyme scheme
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Depression
DepressionDepression
Depression
 

Similar to Design Fast Websites

Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Anna Migas
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
Anna Migas
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
 
Yahoo - Web Images optimization
Yahoo - Web Images optimizationYahoo - Web Images optimization
Yahoo - Web Images optimization
Eduard Bondarenko
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
Emma Jane Hogbin Westby
 
20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide
Katya Kean
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Emma Jane Hogbin Westby
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 
The Good, the Bad and the Ugly things to do with android
The Good, the Bad and the Ugly things to do with androidThe Good, the Bad and the Ugly things to do with android
The Good, the Bad and the Ugly things to do with android
Stanojko Markovik
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in Android
Rakesh Jha
 
TAPES.pptx
TAPES.pptxTAPES.pptx
TAPES.pptx
PurushottamPurshi
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
FITC
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
Nicole Sullivan
 
Web Zurich - Make your animations perform well
Web Zurich - Make your animations perform wellWeb Zurich - Make your animations perform well
Web Zurich - Make your animations perform well
Anna Migas
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
David Goemans
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
DevGAMM Conference
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
Chad Currie
 
Deliver perfect images at any size
Deliver perfect images at any sizeDeliver perfect images at any size
Deliver perfect images at any size
Anne Thomas
 
Deliver Perfect Images At Any Size
Deliver Perfect Images At Any SizeDeliver Perfect Images At Any Size
Deliver Perfect Images At Any Size
FITC
 
Design Best Practices for WordPress
Design Best Practices for WordPressDesign Best Practices for WordPress
Design Best Practices for WordPress
Suzette Franck
 

Similar to Design Fast Websites (20)

Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...Fullstack 2018 -  Fast but not furious: debugging user interaction performanc...
Fullstack 2018 - Fast but not furious: debugging user interaction performanc...
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Yahoo - Web Images optimization
Yahoo - Web Images optimizationYahoo - Web Images optimization
Yahoo - Web Images optimization
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 
20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
The Good, the Bad and the Ugly things to do with android
The Good, the Bad and the Ugly things to do with androidThe Good, the Bad and the Ugly things to do with android
The Good, the Bad and the Ugly things to do with android
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in Android
 
TAPES.pptx
TAPES.pptxTAPES.pptx
TAPES.pptx
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Web Zurich - Make your animations perform well
Web Zurich - Make your animations perform wellWeb Zurich - Make your animations perform well
Web Zurich - Make your animations perform well
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
Deliver perfect images at any size
Deliver perfect images at any sizeDeliver perfect images at any size
Deliver perfect images at any size
 
Deliver Perfect Images At Any Size
Deliver Perfect Images At Any SizeDeliver Perfect Images At Any Size
Deliver Perfect Images At Any Size
 
Design Best Practices for WordPress
Design Best Practices for WordPressDesign Best Practices for WordPress
Design Best Practices for WordPress
 

More from Nicole Sullivan

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
Nicole Sullivan
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
Nicole Sullivan
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
Nicole Sullivan
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
Nicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
Nicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Nicole Sullivan
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
Nicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
Nicole Sullivan
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
Nicole Sullivan
 

More from Nicole Sullivan (13)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 

Recently uploaded

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 

Recently uploaded (20)

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 

Design Fast Websites

  • 1. NICOLE SULLIVAN Design Fast Websites don’t blame the rounded corners!
  • 3. Quantify and improve the performance of all Yahoo! products worldwide
  • 4. Y! Performance Research Engineering Team Nicole Sullivan, Anande Kishore (intern), Stoyan Stefanov, Philip Tellis, Swapnil Shinde
  • 5. Make your users happy • Users care if sites are fast. • I can’t give you the solution • I can help you understand the problem.
  • 7. 1: Because fast is better
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. 2: Because sites are bigger
  • 16. Modern web sites & applications have changed architecturally.
  • 17. From 2003 to 2008: 97K to 312K. 25.7 to 49.9 objects.
  • 18. In past 12 months, Top 1000 sites: From 250K to 310.4K. WebSiteOptimization.com/speed/tweak/average-web-page
  • 19. 3: Time is money
  • 21. Amazon:1% drop in sales +100 ms
  • 23. Yahoo!: 5-9% drop in full-page traffic +400 ms
  • 25. Google: 20% fewer searches +500 ms
  • 26. Users care about performance!
  • 28. 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.
  • 29. 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.
  • 30. 1 Create a component library of smart objects
  • 31. Components are like legos Mix and match to create diverse and interesting pages.
  • 32. 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.
  • 33. Reusing elements makes them performance “freebies”
  • 34. Legos first Design individual pages only once all the legos have been defined.
  • 36. Nearly identical modules Headings 3 and 5 are too similar.
  • 37. 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!
  • 38. 2 Use consistent semantic styles
  • 39. A Heading should not become a Heading in another part of the page.
  • 41. Consistency Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
  • 42. How about an example? Personal finance
  • 43. 3 Design modules to be transparent on the inside.
  • 44. 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
  • 45. Making it look fab Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement http://alistapart.com/articles/mountaintop/
  • 47. 4 Optimize images and sprites
  • 48. 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?
  • 49. 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
  • 50. Careful with Logos Very recognizable so small changes will be noticed more easily.
  • 52. Avoid filters Why is the AlphaImageLoader used? IE6 and earlier don’t natively support alpha transparency. This filter forces that support.
  • 53. Problem with filters • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image!
  • 54. 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'); }
  • 55. Progressively enhanced PNG8 Build a binary transparency image. In Fireworks, add a few alpha transparent pixels.
  • 56. IE6 Firefox Opera IE7+ Safari Good browsers get more And the dinosaurs get an acceptable fallback
  • 57. Experimental Data Removing Alpha Image Loader 100ms Yahoo! search
  • 58. 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.
  • 60.
  • 61. 5 Avoid non-standard browser fonts.
  • 62. 6 Use columns rather than rows.
  • 63. 7 Choose your bling carefully. Consider your market and users.
  • 64. 8 Be flexible. Extensible height and width.
  • 65. • Grids control width • Content controls height
  • 66. 9 Learn to love grids.
  • 67. Flickr Photo Credits: • idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/ • lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/ • Gimli_36: http://www.flickr.com/photos/navillot/1878124531/ • NathanFromDeVryEET: http://www.flickr.com/photos/ thatguyfromcchs08/2300190277/ • Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/ set-72057594060779001/
  • 68. Thanks! Nate Koechley - YUI. High Performance Websites: ✴ http://www.slideshare.net/natekoechley/high-performance-web-sites-2008 Yahoo! Exceptional Performance Team: ✴ http://developer.yahoo.com/performance/ A list apart: ✴ http://alistapart.com/articles/mountaintop/ Tom Chi - Yahoo! Search
  • 69. Let’s keep talking... http://developer.yahoo.com/performance/ http://stubbornella.org nicole@stubbornella.org “stubbornella” on the web... twitter, dopplr, everywhere...