SlideShare uma empresa Scribd logo
1 de 69
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
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
Design Fast Websites
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
Design Fast Websites
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...

Mais conteúdo relacionado

Mais procurados

Creating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash PlatformCreating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash PlatformHemanth Sharma
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupDoug Sillars
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 
Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulDoug Sillars
 
The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101kellyhousholder
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
Building Responsive Applications Using XPages
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPagesTeamstudio
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applicationsbeglee
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web DesignMindy McAdams
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhonekentbrew
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performanceSagar Desarda
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
 
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.James Christie
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
 
Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)Dave Olsen
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 
Rock Your Blocks! Web Design Acceleration with Genesis Pro
Rock Your Blocks! Web Design Acceleration with Genesis ProRock Your Blocks! Web Design Acceleration with Genesis Pro
Rock Your Blocks! Web Design Acceleration with Genesis ProWP Engine
 

Mais procurados (20)

Creating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash PlatformCreating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash Platform
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
 
The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Building Responsive Applications Using XPages
Building Responsive Applications Using XPagesBuilding Responsive Applications Using XPages
Building Responsive Applications Using XPages
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
 
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile Web
 
Rock Your Blocks! Web Design Acceleration with Genesis Pro
Rock Your Blocks! Web Design Acceleration with Genesis ProRock Your Blocks! Web Design Acceleration with Genesis Pro
Rock Your Blocks! Web Design Acceleration with Genesis Pro
 

Destaque

The Designer Startup
The Designer StartupThe Designer Startup
The Designer Startupadii
 
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 PerformanceNicole Sullivan
 

Destaque (6)

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
 
Depression
DepressionDepression
Depression
 

Semelhante a 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 furiousAnna Migas
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Yahoo - Web Images optimization
Yahoo - Web Images optimizationYahoo - Web Images optimization
Yahoo - Web Images optimizationEduard Bondarenko
 
20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling Guide20170112 Agile Sketchup Modeling Guide
20170112 Agile Sketchup Modeling GuideKatya Kean
 
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 androidStanojko Markovik
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in AndroidRakesh Jha
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
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 wellAnna Migas
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationDavid 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 performanceDevGAMM Conference
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
 
Deliver perfect images at any size
Deliver perfect images at any sizeDeliver perfect images at any size
Deliver perfect images at any sizeAnne Thomas
 
Deliver Perfect Images At Any Size
Deliver Perfect Images At Any SizeDeliver Perfect Images At Any Size
Deliver Perfect Images At Any SizeFITC
 
Design Best Practices for WordPress
Design Best Practices for WordPressDesign Best Practices for WordPress
Design Best Practices for WordPressSuzette Franck
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyZoe Gillenwater
 
PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.docbutest
 

Semelhante a 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
 
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
 
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
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.doc
 

Mais de 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
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole 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
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?Nicole Sullivan
 

Mais de Nicole Sullivan (12)

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
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 

Último

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Último (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

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
  • 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.
  • 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...