Web Performance Lightning Talk

506 views

Published on

This is the lightning talk I gave at Seattle Google Dev Group.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
506
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Its important to visualize what happens from customer standpoint. Its important to test. Network and Round trip time has a lot of impact on the performance of the website. Show Demo of how it peforms on Cloud drive Manage Page and files website.
  • Not all browsers support this. Safari does not support performance timingapinavigationStart, requestStart - https://developer.mozilla.org/en-US/docs/Navigation_timingrequestAnimationFrame - http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/.Date.now – gives you time in milliseconds. Now its in sub milliseconds
  • Web Performance Lightning Talk

    1. 1. Web Performance Learning's from Velocity Conference- New York Hardik Shah @hardikjs http://hardikjs.wordpress.com
    2. 2. Favorite Quotes from Velocity • Don't optimize anything unless you measure it – Patrick Meenan • Don’t take performance advice. Test it – Jake Archibald • Embrace the pain. Become a performance masochist – Tim Kadlec
    3. 3. Summary • • • • Testing – WebPageTest Latency on Mobile Optimizing Critical Rendering Path New API’s for Web Development
    4. 4. Testing WebPageTest.org Demo
    5. 5. If we were given a budget of 1000ms on Mobile… Let’s work backward and identify where we spend our time Ilya Grigorik from Google
    6. 6. Input latency Hardware 55 - 120+ ms Software 0 - 300 ms 3G (200 ms 4G(100 ms RTT) RTT) Cell Network (200-2500 ms) (50-100 ms) DNS lookup 200 ms 100 ms TCP Connection 200 ms 100 ms TLS handshake (200-400 ms) (100-200 ms) 40 KB HTTP 200 ms * request 3 100 ms * 3 1055 4300 ms 555 1220 ms These are the latency you will encounter when someone clicks a URL on phone
    7. 7. Critical Rendering • Optimizing Critical Rendering Path – Render critical path(html) on the server – Inline Critical CSS in head – Data URI’s (for images) – Lazy Load Everything else
    8. 8. New API’s available in Latest Implementation of Browsers • window.performance.timing • Page Visibility (document.hidden)
    9. 9. References – http://velocityconf.com/velocityny2013/public/sc hedule/proceedings – http://jakearchibald.com/ – http://www.igvita.com/ – http://blog.patrickmeenan.com/ – http://stevesouders.com/
    10. 10. Thanks!

    ×