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

Browser Performance 101

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Albert Casademont Albert Casademont
October 31, 2014
Programming
150
0

Browser Performance 101

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

Avatar for Albert Casademont

Albert Casademont

October 31, 2014

More Decks by Albert Casademont

See All by Albert Casademont
React PHP & Symfony @ SymfonyCat 2016
Avatar for Albert Casademont acasademont
2
950
PHP7 & Symfony 2 @ Symfony Barcelona May meetup
Avatar for Albert Casademont acasademont
2
640
PHP7 @ PHP Day Spain 2015
Avatar for Albert Casademont acasademont
5
6.3k
Doctrine in 90 minutes
Avatar for Albert Casademont acasademont
0
1.4k
SSL & Symfony
Avatar for Albert Casademont acasademont
0
370

Other Decks in Programming

See All in Programming
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
7
1.5k
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
930
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
14
5.8k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.3k
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
4
1.5k
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
120
Contextとはなにか
Avatar for chiroruxx chiroruxx
1
370
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
280
Vite+ Unified Toolchain for the Web
Avatar for Naoki Haba naokihaba
0
340
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
920
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
220
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
170

Featured

See All Featured
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
630
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
170
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
860
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
420
Between Models and Reality
Avatar for mayunak mayunak
4
350
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
260
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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 ;)