Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Browser Performance 101

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
650
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
[DroidKaigi 2026] Bring your own phones to Gradle Managed Devices
Avatar for Yury f2lk
0
110
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
650
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
Avatar for テオリア・テクノロジーズ theoriatec2024
1
470
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
130
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
6.1k
「AI時代、配布するPythonコードをどう守るか: 難読化の実験と判断軸」 #PyconJP2026
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
2
190
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
4
1.1k
新卒PdEのリアル
Avatar for ryu ryu1013
1
490
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
160
thread_parallel_with_free-threaded_Python_and_NumPy.pdf
Avatar for Riku Sakamoto riku_sakamoto
0
300
信頼性の目標を誰も求めてない
Avatar for Shuma shubox
0
500
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
Avatar for Takahiro Kubo icoxfog417
PRO
3
310

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
980
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
570
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
470
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
420
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
410

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