SlideShare a Scribd company logo
1 of 48
Download to read offline
Optimize Your Website
           to Load Faster!




By Mike Wilcox
June 1st 2010
What is a "fast" website?
Scientific Questionnaire to determine if a
site is slow or not:
1) Does it feel slow?
! A) Yes
! B) No
2) Does anyone care?
! A) Yes
! B) No
END.
What is a "fast" website?
“My boss needs a number.”

        The Mike Wilcox 7 second rule
http://useit.com
http://webpagetest.org
http://alexa.com

10 seconds is about the limit for
keeping the user's attention
focused
It is a slow website.



“How can I convince my boss/client that
   we need to invest in site speed?”
Time is Money




          http://compuware.com
Affects Search Ranking
  Google announced they are factoring the load time of
  the page in rankings.




                                             Fast
                                                    Web
                                                       site




http://googlewebmastercentral.blogspot.com
Mobile
How most pages will be viewed in the future
   Mobile phones hate lookups

   Graceful degradation




                   iP hone 5.0
                   pro totype I
                  foun  d at the
                        bar
Tethering
More and more users connect by tethering their
laptops to their cell phones. They are also using G3
cards, WiFi hotspots and various other ways of
connecting.
Broadband - Good News
US broadband penetration among active Internet
users in December 2009




                                 94.5
                                     5%!




http://websiteoptimization.com
Broadband - Bad News
Broadband penetration for the US was still out of the
top 20, coming in at 22nd place worldwide at 73.2%




                                             es
                                             at
                                          St
                                         d
                                      ite
http://websiteoptimization.com       Un
Bandwidth - How Much?
    Increasing bandwidth results in diminishing returns
    Decreasing round-trip-times are more effective




http://belshe.com
Okay. So where do I
       start?
Steve Souders Performance
Golden Rule

80-90% of the end-user response time is
  spent on the front-end. Start there.

Svelte
Java Guy!

            Front End Developer
Who’s Steve Souders???
Yahoo Google Performance Specialist

Created YSlow!    (which is
awesome)
And Hammerhead          (which
sucks)




                                              Hey Potts!
                                              Let’s go to
                                               Arnold’s!

           He wrote these books
                                .
                                    http://www.stevesouders.com/
Cache
Cache
 Temporary storage of frequently accessed data

 Avoids round trips to the origin server

 Reduces bandwidth consumption

 Eases server load

 Improves latency    <Directory "/home/website/public_html">
                         ExpiresDefault A300
                         <FilesMatch ".html$">
                             Expires A86400
                         </FilesMatch>
                         <FilesMatch ".(gif|jpg|png|js|css)$">
                             Expires A2592000
                         </FilesMatch>
                     </Directory>
Cache
 “I’ll just cache everything! I’ll cache it
                   ALL!!”
Cache - not 100%
40-60% of Yahoo!’s users have an empty cache experience
and ~20% of all page views are done with an empty cache.
  Safari cache buggy
                                           Always clears
  User’s first time on page                    cache.
  Cache was automatically cleared

  User cleared the browser cache

  User’s cache is full

      IE cache could be set to as little
      as 8MB

http://yuiblog.com/blog/
GZIP
 Easiest and most effective way to speed up site

 All major browsers support it
                                 US Pat
                                       ent for
                                               GZIP
GZIP - compared

                   20 / 12


                  17.9 / 11.9


                  17.6 / 11.6


                  5.9 / 4.4
GZIP Best Practices
Write code with a proper convention - major attribute
first, then alphabetical

Good:
<a href=”foo.html” class=”zap” tabIndex=”-1”>
<a href=”bar.html” class=”zap” tabIndex=”-1”>

Bad:
<A class=zap href=”foo.html” tabIndex=’-1’ >
<a href=”bar.html” class=”zap” tabIndex=”-1”>
GZIP Best Practices
 Don’t abuse it. JavaScript != Java

 Good:
var id = lib.byId(“list”);

 Bad:
var uniqueIdentifier =
  myVerboseLibrary.returnElementById(“firstPageRightList”)
Mike Wilcox 3 Keys to Page
Performance:

         1) Resources
         2) Resources
         3) Resources
Who’s Mike Wilcox???                                    ight
                                               ndi ng r
                                     He’ s sta       th  ere.
•Front-end Engineer
•AJAX Developer
•Web & Graphics Artist
•Web-Multimedia Specialist
•AS3 Programmer
•Dojo Committer        Worked on
                                 Dojo
                                  Resource L
                                             oader

             Dudley Do-Right
            will never save her
                  in time!!


                                              http://clubajax.org/
Image Types
Be sure to use the correct image type for the job


   JPEG

   GIF

   PNG
Image Types
JPEG                                                    JPG

  Created by the Joint Photographic Experts Group in
  1992

  Best on photographs of realistic scenes with smooth
  variations of tone and color

  Poorly handles redundant data

  JPEG is the compression codec, not a file

  JFIF or Exif (with meta data) are actually the files

  In 2003 Forgent Networks claimed patent rights,
  which expired in 2006
Image Types
GIF                                                 GIF
  Introduced in 1987 by CompuServe

  Suitable for sharp-edged line art with flat areas of
  color (such as logos)

  Used to store low-color data (game sprites)

  256 color (8 bit), 1 bit alpha

  Handles redundant data very well

  Animation

  Lempel-Ziv-Welch (LZW) Lossless Compression which
  was patented in 1985 by Unisys which expired in 2005
Image Types
PNG                                               PNG

 Portable Network Graphics format introduced by the
 W3C in 1996 in response to the Unisys patent fiasco

 Adoption was slow. IE7 support is buggy. IE6 support
 is uber buggy.

 Uses DEFLATE, a non-patented lossless compression;
 better than GIF, less than JPEG

 8 or 24 bit color, 1 or 8 bit alpha

 No animation, but there is MNG and APNG
Image Types
              demo
Image Sprites
 For the hover and active states, instead of swapping
 the background-image URL, use one image containing
 all three states, and change the background-position
  DIV                   button{
        Click Me          background-image:url(btn.png);
                          background-position:0px 0px;
                        }
        Click Me        button:hover{
                          background-position:0px -75px;

        Click Me
                        }
                        button:active{
                          background-position:0px -150px;

                 ojoX
                        }

        s fro mD
Sp rite
        Dra wing
Stylesheets
 Combine all styles into one sheet or modular sheets

 Set cache-expire headers

 Avoid inline styles. Use an external stylesheet that
 can be cached.

 Avoid using @import. Besides the additional
 requests, they may not load at predictable times.

 Should be inserted at the top of the page to avoid a
 layout shift on load, and because of “blocking” in
 older browsers.
Resource Waterfalls
To get a firm understanding of page load time, it’s
imperative to analyze network resource waterfall charts.




            or...
 Why is it taking m
                    y
20 JQuery scripts
                   so
   long to load??
Anatomy of a Page Load
   <head>
     <script src=”script1.js”></script>
     <script src=”script2.js”></script>
   </head>
   <body>
                                Two scripts loa
     <img src=”agent.png” />                    d at
                               once - new bro
                                              wsers     DOM (body)
     <img src=”access.png” />          only!
                                                         starts and
   </body>                                               ends here
                                        scripts finish
                                           loading
scripts start
  loading




        script
      execution               Images                     Done!
         time
Blocking
In older browsers (IE < 7 and FF < 3.5), scripts do not
load in parallel, they are “blocked”. One needs to finish
loading and execute in case it contains dependencies for
the next.
                           s
      No parallel download
        for Opera 10.5?!       execution
                                 times     Took longer
                                            to finish!


First script

second
 script
Parallel Loads
Modern browsers can load up to six (or more) resources
in parallel at one time. The execution is deferred until
the set is downloaded.

             First six         Last two
              scripts           scripts
             execute           execute
               here              here
IE8 Parallel Loads like a MoFo
                       Wow, 12!
                      Sometimes
                      as high as
IE8 is the first           20

browser to
implement parallel
downloads. Tests
vary but leave no
                       500ms is
doubt that it          very fast
exceeds other        and over the
                       net, not
browsers in this      localhost
area.
Domain Sharding
  By loading scripts from another domain, The 6-resource
  limit can be subverted, allowing FF 3.5+ and Webkit to
  attain similar parallelism as that of IE8.       Opera
                                                  doesn
                          A dozen                       ’t
                                                  count
                         scripts at                     .
                           once!
this.com




that.co
       m
Defer Scripts
   Scripts should be placed at the bottom of the document.




 DOM and
images start
   loading
 right away                                          Faster
                                                    because
                                                   execution
                                                    time is
                                                   deferred
Firebug Net Detail
Other factors need to be considered other than just
download time.

                                             Download
                              Wait time
        Connection time                        time

 DNS Lookup time




                                        Blocked time
                                         (not shown)
Best Practice Checklist
1. Caching
   1.1. Set headers properly for Expires, Last-Modified,
        and ETags

   1.2. Version slow-changing resources:

     1.2.1. <script src=”dojo.js?v=0151”>

   1.3. Keep components under 25k

2. Minimize DNS Lookups
   2.1. Can be expensive; balance this with domain
        sharding
Best Practice Checklist
3. Use CDNs
   3.3. Better chance for caching

   3.4. Domain Sharded

   3.5. Multiple server locations

4. Use Subdomains
   4.3. Domain sharding

   4.4. Use “cookieless” subdomain to reduce even more
        bytes
Best Practice Checklist
5. Turn on GZIP
6. JavaScript
   6.1. More than 3 JS files means you need to re-
        evaluate the situation

   6.2. Use Minification tools

   6.3. Minimal inline script

   6.4. Place scripts at bottom of page

   6.5. Be aware of slow-running code
Best Practice Checklist
7. CSS
  7.1. More than 2 CSS files means you need to re-
       evaluate the situation

  7.2. Strip comments, line breaks and tabs

  7.3. <link />, not @import

  7.4. Place stylesheets at top of page

  7.5. Be aware of slow-running selectors

  7.6. Use a design professional who knows how to
       write CSS properly
Best Practice Checklist
8. Images
   8.1. Use the proper image type (PNG/GIF/JPG)

   8.2. Use image sprites

   8.3. Do not resize images in the browser

   8.4. Use CSS styling where possible (ergo, rounded
        corners)

   8.5. Use a PNG compressor tool (PNGOUT, PNGCrush)

   8.6. Use a design professional who knows how to work
        with images properly
Best Practice Checklist
9. Reduce the Number of DOM Elements
   9.1. Do you really need all those tables for that
        form? It’s not 1999.

   9.2. Make use of unique tag names and selectors
        instead of verbose classes

   9.3. Use background-images instead of <img />

   9.4. No iframes! (or back up your reasoning)

   9.5. Use a design professional who knows how to
        write HTML properly
Tools
                 Google PageSpeed

  YSlow!
            WebPageTest

  Firebug        ZoomPF
References
http://blog.dynatrace.com/2009/09/18/top-low-hanging-fruit-to-performance-optimize-your-web-site-and-boost-
business/

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

http://www.stevesouders.com/

http://developer.yahoo.com/performance/rules.html

http://www.compuware.com/fastcalc/

http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

http://www.useit.com/papers/responsetime.html
end.

More Related Content

More from Mike Wilcox

Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itMike Wilcox
 
Web Components v1
Web Components v1Web Components v1
Web Components v1Mike Wilcox
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Professional JavaScript: AntiPatterns
Professional JavaScript: AntiPatternsProfessional JavaScript: AntiPatterns
Professional JavaScript: AntiPatternsMike Wilcox
 
Model View Madness
Model View MadnessModel View Madness
Model View MadnessMike Wilcox
 
Hardcore JavaScript – Write it Right
Hardcore JavaScript – Write it RightHardcore JavaScript – Write it Right
Hardcore JavaScript – Write it RightMike Wilcox
 
The Great Semicolon Debate
The Great Semicolon DebateThe Great Semicolon Debate
The Great Semicolon DebateMike Wilcox
 
AMD - Why, What and How
AMD - Why, What and HowAMD - Why, What and How
AMD - Why, What and HowMike Wilcox
 
Webpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersWebpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersMike Wilcox
 
Why You Need a Front End Developer
Why You Need a Front End DeveloperWhy You Need a Front End Developer
Why You Need a Front End DeveloperMike Wilcox
 
A Conversation About REST
A Conversation About RESTA Conversation About REST
A Conversation About RESTMike Wilcox
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5Mike Wilcox
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5Mike Wilcox
 
How to get a Job as a Front End Developer
How to get a Job as a Front End DeveloperHow to get a Job as a Front End Developer
How to get a Job as a Front End DeveloperMike Wilcox
 
The History of HTML5
The History of HTML5The History of HTML5
The History of HTML5Mike Wilcox
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?Mike Wilcox
 
The JavaScript Programming Primer
The JavaScript  Programming PrimerThe JavaScript  Programming Primer
The JavaScript Programming PrimerMike Wilcox
 

More from Mike Wilcox (20)

Advanced React
Advanced ReactAdvanced React
Advanced React
 
Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need it
 
Dangerous CSS
Dangerous CSSDangerous CSS
Dangerous CSS
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Professional JavaScript: AntiPatterns
Professional JavaScript: AntiPatternsProfessional JavaScript: AntiPatterns
Professional JavaScript: AntiPatterns
 
Model View Madness
Model View MadnessModel View Madness
Model View Madness
 
Hardcore JavaScript – Write it Right
Hardcore JavaScript – Write it RightHardcore JavaScript – Write it Right
Hardcore JavaScript – Write it Right
 
The Great Semicolon Debate
The Great Semicolon DebateThe Great Semicolon Debate
The Great Semicolon Debate
 
AMD - Why, What and How
AMD - Why, What and HowAMD - Why, What and How
AMD - Why, What and How
 
Dojo & HTML5
Dojo & HTML5Dojo & HTML5
Dojo & HTML5
 
Webpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersWebpage Design Basics for Non-Designers
Webpage Design Basics for Non-Designers
 
Why You Need a Front End Developer
Why You Need a Front End DeveloperWhy You Need a Front End Developer
Why You Need a Front End Developer
 
A Conversation About REST
A Conversation About RESTA Conversation About REST
A Conversation About REST
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5
 
How to get a Job as a Front End Developer
How to get a Job as a Front End DeveloperHow to get a Job as a Front End Developer
How to get a Job as a Front End Developer
 
The History of HTML5
The History of HTML5The History of HTML5
The History of HTML5
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
 
The JavaScript Programming Primer
The JavaScript  Programming PrimerThe JavaScript  Programming Primer
The JavaScript Programming Primer
 

Recently uploaded

IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 

Recently uploaded (20)

IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 

Faster Websites! Kill Kill!

  • 1. Optimize Your Website to Load Faster! By Mike Wilcox June 1st 2010
  • 2. What is a "fast" website? Scientific Questionnaire to determine if a site is slow or not: 1) Does it feel slow? ! A) Yes ! B) No 2) Does anyone care? ! A) Yes ! B) No END.
  • 3. What is a "fast" website? “My boss needs a number.” The Mike Wilcox 7 second rule http://useit.com http://webpagetest.org http://alexa.com 10 seconds is about the limit for keeping the user's attention focused
  • 4. It is a slow website. “How can I convince my boss/client that we need to invest in site speed?”
  • 5. Time is Money http://compuware.com
  • 6. Affects Search Ranking Google announced they are factoring the load time of the page in rankings. Fast Web site http://googlewebmastercentral.blogspot.com
  • 7. Mobile How most pages will be viewed in the future Mobile phones hate lookups Graceful degradation iP hone 5.0 pro totype I foun d at the bar
  • 8. Tethering More and more users connect by tethering their laptops to their cell phones. They are also using G3 cards, WiFi hotspots and various other ways of connecting.
  • 9. Broadband - Good News US broadband penetration among active Internet users in December 2009 94.5 5%! http://websiteoptimization.com
  • 10. Broadband - Bad News Broadband penetration for the US was still out of the top 20, coming in at 22nd place worldwide at 73.2% es at St d ite http://websiteoptimization.com Un
  • 11. Bandwidth - How Much? Increasing bandwidth results in diminishing returns Decreasing round-trip-times are more effective http://belshe.com
  • 12. Okay. So where do I start?
  • 13. Steve Souders Performance Golden Rule 80-90% of the end-user response time is spent on the front-end. Start there. Svelte Java Guy! Front End Developer
  • 14. Who’s Steve Souders??? Yahoo Google Performance Specialist Created YSlow! (which is awesome) And Hammerhead (which sucks) Hey Potts! Let’s go to Arnold’s! He wrote these books . http://www.stevesouders.com/
  • 15. Cache
  • 16. Cache Temporary storage of frequently accessed data Avoids round trips to the origin server Reduces bandwidth consumption Eases server load Improves latency <Directory "/home/website/public_html"> ExpiresDefault A300 <FilesMatch ".html$"> Expires A86400 </FilesMatch> <FilesMatch ".(gif|jpg|png|js|css)$"> Expires A2592000 </FilesMatch> </Directory>
  • 17. Cache “I’ll just cache everything! I’ll cache it ALL!!”
  • 18. Cache - not 100% 40-60% of Yahoo!’s users have an empty cache experience and ~20% of all page views are done with an empty cache. Safari cache buggy Always clears User’s first time on page cache. Cache was automatically cleared User cleared the browser cache User’s cache is full IE cache could be set to as little as 8MB http://yuiblog.com/blog/
  • 19. GZIP Easiest and most effective way to speed up site All major browsers support it US Pat ent for GZIP
  • 20. GZIP - compared 20 / 12 17.9 / 11.9 17.6 / 11.6 5.9 / 4.4
  • 21. GZIP Best Practices Write code with a proper convention - major attribute first, then alphabetical Good: <a href=”foo.html” class=”zap” tabIndex=”-1”> <a href=”bar.html” class=”zap” tabIndex=”-1”> Bad: <A class=zap href=”foo.html” tabIndex=’-1’ > <a href=”bar.html” class=”zap” tabIndex=”-1”>
  • 22. GZIP Best Practices Don’t abuse it. JavaScript != Java Good: var id = lib.byId(“list”); Bad: var uniqueIdentifier = myVerboseLibrary.returnElementById(“firstPageRightList”)
  • 23. Mike Wilcox 3 Keys to Page Performance: 1) Resources 2) Resources 3) Resources
  • 24. Who’s Mike Wilcox??? ight ndi ng r He’ s sta th ere. •Front-end Engineer •AJAX Developer •Web & Graphics Artist •Web-Multimedia Specialist •AS3 Programmer •Dojo Committer Worked on Dojo Resource L oader Dudley Do-Right will never save her in time!! http://clubajax.org/
  • 25. Image Types Be sure to use the correct image type for the job JPEG GIF PNG
  • 26. Image Types JPEG JPG Created by the Joint Photographic Experts Group in 1992 Best on photographs of realistic scenes with smooth variations of tone and color Poorly handles redundant data JPEG is the compression codec, not a file JFIF or Exif (with meta data) are actually the files In 2003 Forgent Networks claimed patent rights, which expired in 2006
  • 27. Image Types GIF GIF Introduced in 1987 by CompuServe Suitable for sharp-edged line art with flat areas of color (such as logos) Used to store low-color data (game sprites) 256 color (8 bit), 1 bit alpha Handles redundant data very well Animation Lempel-Ziv-Welch (LZW) Lossless Compression which was patented in 1985 by Unisys which expired in 2005
  • 28. Image Types PNG PNG Portable Network Graphics format introduced by the W3C in 1996 in response to the Unisys patent fiasco Adoption was slow. IE7 support is buggy. IE6 support is uber buggy. Uses DEFLATE, a non-patented lossless compression; better than GIF, less than JPEG 8 or 24 bit color, 1 or 8 bit alpha No animation, but there is MNG and APNG
  • 29. Image Types demo
  • 30. Image Sprites For the hover and active states, instead of swapping the background-image URL, use one image containing all three states, and change the background-position DIV button{ Click Me background-image:url(btn.png); background-position:0px 0px; } Click Me button:hover{ background-position:0px -75px; Click Me } button:active{ background-position:0px -150px; ojoX } s fro mD Sp rite Dra wing
  • 31. Stylesheets Combine all styles into one sheet or modular sheets Set cache-expire headers Avoid inline styles. Use an external stylesheet that can be cached. Avoid using @import. Besides the additional requests, they may not load at predictable times. Should be inserted at the top of the page to avoid a layout shift on load, and because of “blocking” in older browsers.
  • 32. Resource Waterfalls To get a firm understanding of page load time, it’s imperative to analyze network resource waterfall charts. or... Why is it taking m y 20 JQuery scripts so long to load??
  • 33. Anatomy of a Page Load <head> <script src=”script1.js”></script> <script src=”script2.js”></script> </head> <body> Two scripts loa <img src=”agent.png” /> d at once - new bro wsers DOM (body) <img src=”access.png” /> only! starts and </body> ends here scripts finish loading scripts start loading script execution Images Done! time
  • 34. Blocking In older browsers (IE < 7 and FF < 3.5), scripts do not load in parallel, they are “blocked”. One needs to finish loading and execute in case it contains dependencies for the next. s No parallel download for Opera 10.5?! execution times Took longer to finish! First script second script
  • 35. Parallel Loads Modern browsers can load up to six (or more) resources in parallel at one time. The execution is deferred until the set is downloaded. First six Last two scripts scripts execute execute here here
  • 36. IE8 Parallel Loads like a MoFo Wow, 12! Sometimes as high as IE8 is the first 20 browser to implement parallel downloads. Tests vary but leave no 500ms is doubt that it very fast exceeds other and over the net, not browsers in this localhost area.
  • 37. Domain Sharding By loading scripts from another domain, The 6-resource limit can be subverted, allowing FF 3.5+ and Webkit to attain similar parallelism as that of IE8. Opera doesn A dozen ’t count scripts at . once! this.com that.co m
  • 38. Defer Scripts Scripts should be placed at the bottom of the document. DOM and images start loading right away Faster because execution time is deferred
  • 39. Firebug Net Detail Other factors need to be considered other than just download time. Download Wait time Connection time time DNS Lookup time Blocked time (not shown)
  • 40. Best Practice Checklist 1. Caching 1.1. Set headers properly for Expires, Last-Modified, and ETags 1.2. Version slow-changing resources: 1.2.1. <script src=”dojo.js?v=0151”> 1.3. Keep components under 25k 2. Minimize DNS Lookups 2.1. Can be expensive; balance this with domain sharding
  • 41. Best Practice Checklist 3. Use CDNs 3.3. Better chance for caching 3.4. Domain Sharded 3.5. Multiple server locations 4. Use Subdomains 4.3. Domain sharding 4.4. Use “cookieless” subdomain to reduce even more bytes
  • 42. Best Practice Checklist 5. Turn on GZIP 6. JavaScript 6.1. More than 3 JS files means you need to re- evaluate the situation 6.2. Use Minification tools 6.3. Minimal inline script 6.4. Place scripts at bottom of page 6.5. Be aware of slow-running code
  • 43. Best Practice Checklist 7. CSS 7.1. More than 2 CSS files means you need to re- evaluate the situation 7.2. Strip comments, line breaks and tabs 7.3. <link />, not @import 7.4. Place stylesheets at top of page 7.5. Be aware of slow-running selectors 7.6. Use a design professional who knows how to write CSS properly
  • 44. Best Practice Checklist 8. Images 8.1. Use the proper image type (PNG/GIF/JPG) 8.2. Use image sprites 8.3. Do not resize images in the browser 8.4. Use CSS styling where possible (ergo, rounded corners) 8.5. Use a PNG compressor tool (PNGOUT, PNGCrush) 8.6. Use a design professional who knows how to work with images properly
  • 45. Best Practice Checklist 9. Reduce the Number of DOM Elements 9.1. Do you really need all those tables for that form? It’s not 1999. 9.2. Make use of unique tag names and selectors instead of verbose classes 9.3. Use background-images instead of <img /> 9.4. No iframes! (or back up your reasoning) 9.5. Use a design professional who knows how to write HTML properly
  • 46. Tools Google PageSpeed YSlow! WebPageTest Firebug ZoomPF
  • 48. end.

Editor's Notes

  1. 1) Images 2) JavaScript 3) CSS