5 critical-optimizations.v2
Upcoming SlideShare
Loading in...5
×
 

5 critical-optimizations.v2

on

  • 3,501 views

There are many ways to optimize your website, and it’s hard to know where to start. In this webinar we’ll show you five top performance optimizations and explain how each will impact your load ...

There are many ways to optimize your website, and it’s hard to know where to start. In this webinar we’ll show you five top performance optimizations and explain how each will impact your load time and order. We’ll also share tips and tricks on how to apply each, since the devil’s in the details. We’ll focus on the following five optimizations:

* Domain Sharding
* Consolidation
* Inlining
* Predict Head
* Asynchronous Javascript Loading

Statistics

Views

Total Views
3,501
Views on SlideShare
3,487
Embed Views
14

Actions

Likes
2
Downloads
42
Comments
0

2 Embeds 14

http://g.dev.gree.jp 13
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

5 critical-optimizations.v2 5 critical-optimizations.v2 Presentation Transcript

  • 5 Critical WPO Techniques
    Guy Podjarny, CTO
  • Agenda
    Introduction
    Waterfalls charts
    WPO & Front-End Optimization
    5 Critical Optimizations
    Domain Sharding
    Consolidation
    Inlining
    Predict Head
    Async JavaScript Execution
    Summary
  • Intro to Waterfall Charts – High Level
    3
    Timeline (Seconds)
    Individual
    Resource
    Requests
  • WebPageTest Waterfall - Legend
    4
    Detailed Breakdown of resource retrieval
    Helps identify bottlenecks and problems
    Page Load milestones
    “Standardized” points in time to measure against
  • Front-End vs. Back-End Performance
    Back-End: Time to get the HTML
    Front-End: Time after the HTML
    WPO= Back-End + Front-End Performance
    5
    Back-end
    Front-End
  • 5 Critical Optimizations
    Front-End Optimization is complicated
    Many bottlenecks
    Many browsers
    Many techniques
    Moving Target
    We’ll discuss 5 key optimizations
    Explain the optimization
    Demonstrate its impact
    Share Tips & Tricks
    6
  • Domain Sharding
    Problem: Too Few Hosts
    Browsers limit connections per host
    Less requests are done in Parallel
    Solution: “Shard” a domain into sub-domains
    E.g. 1.blaze.io, 2.blaze.io, 3.blaze.io…
    All domains will get to the same place
    Browser sees different domains, opens more connections
    7
  • Single Domain, IE7
    2 connections per domain
    Total time ~8.5 seconds
    8
  • Sharded Domain, IE7
    2 connections per domain, 8 total
    Total time ~2.5 seconds
    9
  • Single Domain, IE8
    Problem mitigated by newer browsers
    Open more connections per domain
    Not fully resolved
    10
  • Single Domain, iPhone 4.3
    Problem repeats on iPhone/iPad
    4 Connections per domain, 30 connections max
    11
  • Single Domain, Android 2.3
    But on Android, Domain Sharding is moot
    4 connections per host, 4 connections max
    12
  • Domain Sharding – Tips & Tricks
    Too many domains = long DNS
    Older axiom states 2 is best
    Our measurements show 3-5 works best
    Depends on number of resources on the site
    Always serve resources from the same shard
    Inconsistency will harm caching
    Use different number of domains by browser
    Older browsers would benefit from more
    Android would benefit from no sharding
    13
  • Consolidation
    Problem: Too many requests during page load
    Each request is a costly round-trip to the server
    Browsers limit number of concurrent requests
    Even more expensive on Mobile (asymmetric communication)
    Solution: Consolidate multiple files into one
    Single round-trip for multiple files
    Less round-trips, faster delivery
    Improved compression ratios
    14
  • What can be consolidated?
    Textual Resources
    Stylesheets (CSS)
    JavaScript
    CSS Images
    Spriting
    Details: http://www.alistapart.com/articles/sprites
    Images and… anything else
    Data URIs
    15
    Google Sprite
  • Data URIs
    Textual Representation of data
    data:image/gif;base64,AAAA
    Supported in all latest browsers
    Includes IE8+, Chrome, Safari, Opera, Firefox
    Not supported in IE7
    Supported in WebKit-based Mobile Browsers
    iPhone, Android, Blackberry 6, WinPho 7
    16
    prefix
    Encoding
    Data
    Content-type
  • JS & CSS Consolidation - Waterfall
    17
    www.cnn.com
    After:89 Requests
    Before:160 Requests
  • Consolidation – Tips & Tricks
    Ensure browsers support the technology
    Data URIs not supported on IE6 & IE7
    Beware large blocking files
    On some browsers, CSS & JS files may block
    Making them larger may slow down the page
    JavaScript Complications
    Inline and external scripts may be co-dependent
    Document.write() makes scripts hard to move
    Some scripts are more “sensitive” than others…
    18
  • Inlining
    Problems
    Too many requests during page load
    Same problem Consolidation relates to
    Consolidated file take longer to fetch
    Increases page speed, but can slow down specific script
    Solution: Embed data into the parent
    Embed scripts & images into web page
    Embed images into CSS files
    19
  • Inlining & Consolidation - Comparison
    20
    www.cnn.com
    Before:160 Requests
    Both:57 Requests
    Consolidation:89 Requests
  • Inlining & Consolidation - Waterfall
    21
    Larger HTML
    Large CSS
    Dynamic Resources
    Generated in the browser
    Ads, Analytics, …
  • Inlining – Tips & Tricks
    Inlined resources are not cached
    Inlining best suited for landing pages
    Small resources can be inlined always
    Inlining overhead minor for small scripts
    Especially when compression is in use
    Don’t inline client-sensitive requests
    Analytics, beacons, ads…
    22
  • Flushing the Buffer Early
    Problem
    It takes time to generate a full HTML page
    Inlining makes pages big and slow to download
    Solution
    Send back the document start earlier
    Document “Head” is often static and easy to generate
    Ensure CSS, JS and more are included in head
    Note: Dubbed “Predict Head” in Blaze
    After the feature that delivers it
    23
  • Predict Head - Waterfall
    24
    Before:TTFB is 1.4 seconds,Doc Complete at 3.8 Seconds
    After:
    TTFB is 0.3 seconds,Doc Complete at 2.8 Seconds
  • Async JS
    Problem
    3rd Party resources still load slowly
    Ads, Analytics, “Like” button, etc.
    Dynamically generated content slows page down
    Solution
    De-couple script execution from page load
    Most 3rd party tools are included as scripts
    Many 3rd party tools are secondary in page functionality
    25
  • Async JS – Comparison
    26
    Before:Doc Complete at 2.8 Seconds
    After:
    Doc Complete at 1.5 Seconds
  • Async JS – Waterfall
    Similar Waterfall
    Earlier Doc Complete
    Ads loaded late
    Metrics loaded late
    Page functional faster
    3rd party tools follow up quickly after
    27
  • Async JS - Implementation
    Requires HTML & JavaScript Changes
    HTML:
    Modify script tags’ type to “text/myscript”
    Will make the browser skip them
    JavaScript:
    Add script to bottom of page to invoke the scripts
    Can use a 3rd party package, such as controljs(http://stevesouders.com/controljs/)
    28
  • Async JS – Tips & Tricks
    Many pitfalls due to JavaScript flexibility
    Event registration, document.write(), etc.
    External scripts will be invoked serially
    Will slow down total time to execute scripts
    Can be improved with preloading scripts
    Requires cacheable scripts & browser-specific code
    Optionally only “Async” specific script
    Whitelist: Leave key scripts “in sync” with page
    Blacklist: Only “async” specific scripts
    29
  • Summary
    30
    FEO Can do A Lot
    These 5 optimizations matter
    But many others exist
    Beware the pitfalls
    Don’t try it all at once..
    Focus on select browsers
    Tackle key pages/sites
    Stay up-to-date
    Performance is a moving target
    59 Requests
    (9 by Onload)
    1.5 Seconds
    Measured using:4Mbps/500KbpsDownload/Upload
    160 Requests
    4.6 Seconds
  • Blaze Automated Front-End Optimization
    Blaze automates Front-End Optimization
    No Software, Hardware or Code Changes needed
    All the pitfalls and complexities taken care of
    Blaze applied the optimizations in these slides
    And can apply many other optimizations
    Submit your URL onblaze.io for your ownoptimization report
    31
  • 32
    Questions?
    Contact us at
    contact@blaze.io
    Thank You!