SlideShare uma empresa Scribd logo
1 de 46
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

Mais conteúdo relacionado

Destaque

Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video PlayerJim 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 DesignKate Rutter
 
Say Goodbye to Bullet Points
Say Goodbye to Bullet PointsSay Goodbye to Bullet Points
Say Goodbye to Bullet PointsPerpa Hsieh
 
Basic Chemistry on Your Slide
Basic Chemistry on Your SlideBasic Chemistry on Your Slide
Basic Chemistry on Your SlidePerpa 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 LaterMartafy!
 
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 & ResourcesShelly 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 TechnologyDavid 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 2016Aurion 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 OnlineRob Cubbon
 
Zara Marketing Campaign Design
Zara Marketing Campaign DesignZara Marketing Campaign Design
Zara Marketing Campaign DesignCarmen 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 CarsLinkedIn
 
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 PresentersHubSpot
 
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 ExplainerLuminary Labs
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 

Destaque (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
 

Mais de M. Jackson Wilkinson

Mais de 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
 

Último

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 

Último (20)

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

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