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
940
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
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
430
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.4k
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.2k
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
270
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
810
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
Avatar for shogogg shogogg
0
190
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
2.6k
jQueryをバージョンアップする前に使いたいjQuery Migrate
Avatar for Atsushi Matsuo matsuo_atsushi
0
170
AutonomyとControlのあいだ：Graflowで記述するAIエージェント協調
Avatar for Makoto Yui myui
0
100
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
5
410
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
240
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
160

Featured

See All Featured
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
150
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
200
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
790
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
930
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
140
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k

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