Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Performance 101

Browser Performance 101

An introductory talk to the browser performance world for the nice people at Trovit

8f2089782f2711659072020ad7227aff?s=128

Albert Casademont

October 31, 2014
Tweet

Transcript

  1. Browser Perf 101

  2. About Albert Casademont ulabox.com @acasademont (no me busquéis en Linkedin)

  3. why perf matters?

  4. speed = money

  5. None
  6. but i'm a developer!

  7. DevOps

  8. source: wikipedia.org

  9. None
  10. 3-way TCP handshake source: http://www.admin-magazine.com

  11. TCP Flow control source: High Performace Networking (I. Grigorik)

  12. Performance check-list low latency is king! keep-alive initcwnd >= 10

    disable slow start after idle tcp fast open (kernel >= 3.6)
  13. None
  14. critical rendering path

  15. critical rendering path source: http://http://www.sitepoint.com

  16. critical rendering path source: http://http://www.sitepoint.com

  17. Performance check-list cache! keep bytes low (minimize, gzip) inline above

    the fold css make async js when possible lazy-load below the fold images
  18. None
  19. https = http + tls

  20. TLS Handshake source: https://devcentral.f5.com/articles/ssl-profiles-part-1

  21. None
  22. SPDY HTTP 2.0

  23. GoogleBot HTTPS

  24. None
  25. http vs NICE https

  26. Resources

  27. Resources http://www.webpagetest.org https://blog.cloudflare.com https://igvita.com https://insouciant.org https://imperialviolet.org https://ssllabs.com/ssltest

  28. gràcies ;)