尊敬的 微信汇率:1円 ≈ 0.046166 元 支付宝汇率:1円 ≈ 0.046257元 [退出登录]
SlideShare a Scribd company logo
SKILLFULLY USING ALL OF YOUR


ASSETS
FOR IMPROVED PERFORMANCE

           VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
THE PREMISE

    VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
FASTER SITES
 ARE BETTER

   VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
FACEBOOK.COM: EMPTY CACHE
  BACK-END   FRONT-END



                                  5%




                            95%




                            VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
FACEBOOK.COM: PRIMED CACHE
  BACK-END   FRONT-END




                                          19%




                         81%




                               VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
FRONT-END
PERFORMANCE MATTERS

       VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
THE FACTORS

    VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IMAGE SIZES
   VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IMAGE SIZES
HTTP REQUESTS
    VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IMAGE SIZES
   HTTP REQUESTS
GZIPPED COMPONENTS
       VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IMAGE SIZES
   HTTP REQUESTS
GZIPPED COMPONENTS
 CACHE MANAGEMENT
       VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IMAGE SIZES
   HTTP REQUESTS
GZIPPED COMPONENTS
 CACHE MANAGEMENT
  CSS EXPRESSIONS
       VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IMAGE SIZES
   HTTP REQUESTS
GZIPPED COMPONENTS
 CACHE MANAGEMENT
  CSS EXPRESSIONS
CSS & JS POSITIONING
       VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
CSS & JS POSITIONING


       VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
THE RULES

   VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
Rule #1:
TWO AT A TIME


    VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
Rule #2:
SCRIPTS CAN BLOCK


      VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
Part 1:

STYLESHEETS

    VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
DON’T USE @IMPORT


      VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
DON’T USE @IMPORT
   unless it’s all you use
  & it’s all at a single level

           VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: @import “a.css”
HTML: @import “b.css”




     VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: @import “a.css”
       HTML: @import “b.css”


HTML

                       a.css

                       b.css




            VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: @import “a.css”
            HTML: @import “b.css”


     HTML

                            a.css

                            b.css




Single-level @import only: not so bad

                 VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
HTML: @import “b.css”




     VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
       HTML: @import “b.css”


HTML

        a.css

                                             b.css




                VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
          HTML: @import “b.css”


HTML

           a.css

                                                b.css




 Mixed LINK and @import: Breaks IE

                   VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
          a.css: @import “b.css”


HTML

           a.css

                                                b.css




   @import inside LINK: Breaks ALL

                   VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
          a.css: @import “b.css”


HTML

           a.css

                                                b.css




   @import inside LINK: Breaks ALL

                   VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
               HTML: LINK “b.css”
               b.css: @import “c.css”


HTML

                a.css

       b.css

                                                     c.css



       LINK blocks @import on IE
                        VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
               HTML: LINK “b.css”
               b.css: @import “c.css”


HTML

                a.css

       b.css

                         c.css



        but NOT on other browsers
                        VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: LINK “a.css”
           HTML: LINK “b.css”
           HTML: LINK “c.css”


HTML

            a.css

            b.css

                                                 c.css



       All LINKs work as expected
                    VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
WHY NOT JUST USE
 @IMPORT ONLY?

      VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
Part 2:

SCRIPTS

  VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IE PRIORITIZES SCRIPTS


        VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
HTML: @import “a.css”
                 HTML: @import “b.css”
                 HTML: @import “c.css”
                 HTML: SCRIPT “test.js”
HTML

                 test.js

         a.css

                                       b.css

                                                        c.css



@import is prioritized below header SCRIPT
                           VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
SCRIPTS CAN BLOCK


      VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IE 6/7, FIREFOX 2/3, SAFARI 3, CHROME 1, OPERA:

 HTML

          test.js

                               test2.js

                                                             a.css

                                                            img.jpg




                    VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
IE8, SAFARI 4, CHROME 2

HTML

       test.js

       test2.js

                       a.css

                                                          img.jpg




                  VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
SCRIPT DOM ELEMENTS


       VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
SCRIPT DOM ELEMENTS
       DON’T BLOCK
        CROSS-SITE
    EASILY-UNDERSTOOD
 TRIGGERS BUSY INDICATORS

          VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
SCRIPT DOM ELEMENTS

 DOESN’T PRESERVE SCRIPT
 ORDER EXCEPT FOR FIREFOX
        AND OPERA


          VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
SCRIPT DEFERRAL


     VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
SCRIPT DEFERRAL
       defer=”defer”

ENFORECES LOAD ORDER IN IE,
 SAFARI 4, CHROME 2, FF 3.1

          VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
SCRIPTS AT THE BOTTOM
   unless you need them sooner



            VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
FIN

VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
Get in Touch!

speakerrate.com/whafro
  jackson@jounce.net
       @whafro
          VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009

More Related Content

Viewers also liked

Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
Jim Jeffers
 
Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?
M. Jackson Wilkinson
 
Pen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to DesignPen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to Design
Kate Rutter
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
Benjamin Wiederkehr
 
Say Goodbye to Bullet Points
Say Goodbye to Bullet PointsSay Goodbye to Bullet Points
Say Goodbye to Bullet Points
Perpa Hsieh
 
Basic Chemistry on Your Slide
Basic Chemistry on Your SlideBasic Chemistry on Your Slide
Basic Chemistry on Your Slide
Perpa Hsieh
 
Social Media Is Dead: Long Live Common Sense.
Social Media Is Dead: Long Live Common Sense.Social Media Is Dead: Long Live Common Sense.
Social Media Is Dead: Long Live Common Sense.
David Armano
 
What the F**K is Social Media: One Year Later
What the F**K is Social Media: One Year LaterWhat the F**K is Social Media: One Year Later
What the F**K is Social Media: One Year Later
Martafy!
 
Bring Your Textbook to Life! Ideas & Resources
Bring Your Textbook to Life! Ideas & ResourcesBring Your Textbook to Life! Ideas & Resources
Bring Your Textbook to Life! Ideas & Resources
Shelly Sanchez Terrell
 
The Now and Next of Learning and Technology
The Now and Next of Learning and TechnologyThe Now and Next of Learning and Technology
The Now and Next of Learning and Technology
David Kelly
 
10 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 201610 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 2016
Aurion Learning
 
16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online
16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online
16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online
Rob Cubbon
 
Zara Marketing Campaign Design
Zara Marketing Campaign DesignZara Marketing Campaign Design
Zara Marketing Campaign Design
Carmen Neghina
 
Shall we play a game?
Shall we play a game?Shall we play a game?
Shall we play a game?
Maciej Lasyk
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
HubSpot
 
Can We Assess Creativity?
Can We Assess Creativity?Can We Assess Creativity?
Can We Assess Creativity?
John Spencer
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Luminary Labs
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian
 

Viewers also liked (19)

Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?Jacks of All Trades or Masters of One?
Jacks of All Trades or Masters of One?
 
Pen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to DesignPen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to Design
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
 
Say Goodbye to Bullet Points
Say Goodbye to Bullet PointsSay Goodbye to Bullet Points
Say Goodbye to Bullet Points
 
Basic Chemistry on Your Slide
Basic Chemistry on Your SlideBasic Chemistry on Your Slide
Basic Chemistry on Your Slide
 
Social Media Is Dead: Long Live Common Sense.
Social Media Is Dead: Long Live Common Sense.Social Media Is Dead: Long Live Common Sense.
Social Media Is Dead: Long Live Common Sense.
 
What the F**K is Social Media: One Year Later
What the F**K is Social Media: One Year LaterWhat the F**K is Social Media: One Year Later
What the F**K is Social Media: One Year Later
 
Bring Your Textbook to Life! Ideas & Resources
Bring Your Textbook to Life! Ideas & ResourcesBring Your Textbook to Life! Ideas & Resources
Bring Your Textbook to Life! Ideas & Resources
 
The Now and Next of Learning and Technology
The Now and Next of Learning and TechnologyThe Now and Next of Learning and Technology
The Now and Next of Learning and Technology
 
10 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 201610 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 2016
 
16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online
16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online
16 Tips on How To Make Money on Udemy – Passive Income from Teaching Online
 
Zara Marketing Campaign Design
Zara Marketing Campaign DesignZara Marketing Campaign Design
Zara Marketing Campaign Design
 
Shall we play a game?
Shall we play a game?Shall we play a game?
Shall we play a game?
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
 
Can We Assess Creativity?
Can We Assess Creativity?Can We Assess Creativity?
Can We Assess Creativity?
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 

More from M. Jackson Wilkinson

Rebooting the Blue Button
Rebooting the Blue ButtonRebooting the Blue Button
Rebooting the Blue Button
M. Jackson Wilkinson
 
Designing for Silence
Designing for SilenceDesigning for Silence
Designing for Silence
M. Jackson Wilkinson
 
Tips for Presenting
Tips for PresentingTips for Presenting
Tips for Presenting
M. Jackson Wilkinson
 
How MacGyver Would Do Design Research
How MacGyver Would Do Design ResearchHow MacGyver Would Do Design Research
How MacGyver Would Do Design Research
M. Jackson Wilkinson
 
UX Matters
UX MattersUX Matters
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
 
Design and UX in an Agile Process
Design and UX in an Agile ProcessDesign and UX in an Agile Process
Design and UX in an Agile Process
M. Jackson Wilkinson
 

More from M. Jackson Wilkinson (7)

Rebooting the Blue Button
Rebooting the Blue ButtonRebooting the Blue Button
Rebooting the Blue Button
 
Designing for Silence
Designing for SilenceDesigning for Silence
Designing for Silence
 
Tips for Presenting
Tips for PresentingTips for Presenting
Tips for Presenting
 
How MacGyver Would Do Design Research
How MacGyver Would Do Design ResearchHow MacGyver Would Do Design Research
How MacGyver Would Do Design Research
 
UX Matters
UX MattersUX Matters
UX Matters
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
Design and UX in an Agile Process
Design and UX in an Agile ProcessDesign and UX in an Agile Process
Design and UX in an Agile Process
 

Recently uploaded

Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google CloudRadically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
ScyllaDB
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
From NCSA to the National Research Platform
From NCSA to the National Research PlatformFrom NCSA to the National Research Platform
From NCSA to the National Research Platform
Larry Smarr
 
APJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes WebinarAPJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes Webinar
ThousandEyes
 
ScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDCScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDC
ScyllaDB
 
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to SuccessDynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
ScyllaDB
 
Multivendor cloud production with VSF TR-11 - there and back again
Multivendor cloud production with VSF TR-11 - there and back againMultivendor cloud production with VSF TR-11 - there and back again
Multivendor cloud production with VSF TR-11 - there and back again
Kieran Kunhya
 
TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...
TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...
TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...
TrustArc
 
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
anilsa9823
 
An Introduction to All Data Enterprise Integration
An Introduction to All Data Enterprise IntegrationAn Introduction to All Data Enterprise Integration
An Introduction to All Data Enterprise Integration
Safe Software
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
Fuxnet [EN] .pdf
Fuxnet [EN]                                   .pdfFuxnet [EN]                                   .pdf
Fuxnet [EN] .pdf
Overkill Security
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My IdentityCNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
Cynthia Thomas
 
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
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
Knoldus Inc.
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to SuccessMongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
ScyllaDB
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
Tobias Schneck
 
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - MydbopsMySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
Mydbops
 

Recently uploaded (20)

Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google CloudRadically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
Radically Outperforming DynamoDB @ Digital Turbine with SADA and Google Cloud
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
From NCSA to the National Research Platform
From NCSA to the National Research PlatformFrom NCSA to the National Research Platform
From NCSA to the National Research Platform
 
APJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes WebinarAPJC Introduction to ThousandEyes Webinar
APJC Introduction to ThousandEyes Webinar
 
ScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDCScyllaDB Real-Time Event Processing with CDC
ScyllaDB Real-Time Event Processing with CDC
 
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to SuccessDynamoDB to ScyllaDB: Technical Comparison and the Path to Success
DynamoDB to ScyllaDB: Technical Comparison and the Path to Success
 
Multivendor cloud production with VSF TR-11 - there and back again
Multivendor cloud production with VSF TR-11 - there and back againMultivendor cloud production with VSF TR-11 - there and back again
Multivendor cloud production with VSF TR-11 - there and back again
 
TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...
TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...
TrustArc Webinar - Your Guide for Smooth Cross-Border Data Transfers and Glob...
 
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
Call Girls Chennai ☎️ +91-7426014248 😍 Chennai Call Girl Beauty Girls Chennai...
 
An Introduction to All Data Enterprise Integration
An Introduction to All Data Enterprise IntegrationAn Introduction to All Data Enterprise Integration
An Introduction to All Data Enterprise Integration
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
Fuxnet [EN] .pdf
Fuxnet [EN]                                   .pdfFuxnet [EN]                                   .pdf
Fuxnet [EN] .pdf
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My IdentityCNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
CNSCon 2024 Lightning Talk: Don’t Make Me Impersonate My Identity
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to SuccessMongoDB to ScyllaDB: Technical Comparison and the Path to Success
MongoDB to ScyllaDB: Technical Comparison and the Path to Success
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
 
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - MydbopsMySQL InnoDB Storage Engine: Deep Dive - Mydbops
MySQL InnoDB Storage Engine: Deep Dive - Mydbops
 

Asset Positioning for Performance

  • 1. SKILLFULLY USING ALL OF YOUR ASSETS FOR IMPROVED PERFORMANCE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 2. THE PREMISE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 3. FASTER SITES ARE BETTER VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 4. FACEBOOK.COM: EMPTY CACHE BACK-END FRONT-END 5% 95% VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 5. FACEBOOK.COM: PRIMED CACHE BACK-END FRONT-END 19% 81% VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 6. FRONT-END PERFORMANCE MATTERS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 7. THE FACTORS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 8. IMAGE SIZES VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 9. IMAGE SIZES HTTP REQUESTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 10. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 11. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 12. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT CSS EXPRESSIONS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 13. IMAGE SIZES HTTP REQUESTS GZIPPED COMPONENTS CACHE MANAGEMENT CSS EXPRESSIONS CSS & JS POSITIONING VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 14. CSS & JS POSITIONING VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 15. THE RULES VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 16. Rule #1: TWO AT A TIME VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 17. Rule #2: SCRIPTS CAN BLOCK VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 18. Part 1: STYLESHEETS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 19. DON’T USE @IMPORT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 20. DON’T USE @IMPORT unless it’s all you use & it’s all at a single level VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 21. HTML: @import “a.css” HTML: @import “b.css” VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 22. HTML: @import “a.css” HTML: @import “b.css” HTML a.css b.css VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 23. HTML: @import “a.css” HTML: @import “b.css” HTML a.css b.css Single-level @import only: not so bad VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 24. HTML: LINK “a.css” HTML: @import “b.css” VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 25. HTML: LINK “a.css” HTML: @import “b.css” HTML a.css b.css VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 26. HTML: LINK “a.css” HTML: @import “b.css” HTML a.css b.css Mixed LINK and @import: Breaks IE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 27. HTML: LINK “a.css” a.css: @import “b.css” HTML a.css b.css @import inside LINK: Breaks ALL VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 28. HTML: LINK “a.css” a.css: @import “b.css” HTML a.css b.css @import inside LINK: Breaks ALL VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 29. HTML: LINK “a.css” HTML: LINK “b.css” b.css: @import “c.css” HTML a.css b.css c.css LINK blocks @import on IE VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 30. HTML: LINK “a.css” HTML: LINK “b.css” b.css: @import “c.css” HTML a.css b.css c.css but NOT on other browsers VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 31. HTML: LINK “a.css” HTML: LINK “b.css” HTML: LINK “c.css” HTML a.css b.css c.css All LINKs work as expected VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 32. WHY NOT JUST USE @IMPORT ONLY? VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 33. Part 2: SCRIPTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 34. IE PRIORITIZES SCRIPTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 35. HTML: @import “a.css” HTML: @import “b.css” HTML: @import “c.css” HTML: SCRIPT “test.js” HTML test.js a.css b.css c.css @import is prioritized below header SCRIPT VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 36. SCRIPTS CAN BLOCK VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 37. IE 6/7, FIREFOX 2/3, SAFARI 3, CHROME 1, OPERA: HTML test.js test2.js a.css img.jpg VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 38. IE8, SAFARI 4, CHROME 2 HTML test.js test2.js a.css img.jpg VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 39. SCRIPT DOM ELEMENTS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 40. SCRIPT DOM ELEMENTS DON’T BLOCK CROSS-SITE EASILY-UNDERSTOOD TRIGGERS BUSY INDICATORS VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 41. SCRIPT DOM ELEMENTS DOESN’T PRESERVE SCRIPT ORDER EXCEPT FOR FIREFOX AND OPERA VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 42. SCRIPT DEFERRAL VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 43. SCRIPT DEFERRAL defer=”defer” ENFORECES LOAD ORDER IN IE, SAFARI 4, CHROME 2, FF 3.1 VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 44. SCRIPTS AT THE BOTTOM unless you need them sooner VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 45. FIN VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  • 46. Get in Touch! speakerrate.com/whafro jackson@jounce.net @whafro VIGET LABS DESIGNSHARE | M. JACKSON WILKINSON | MAY 12, 2009
  翻译: