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
0
140

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
Tweet

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
630
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
Vuetify 3 → 4 何が変わった？差分と移行ポイント10分まとめ
Avatar for kouki.miura koukimiura
0
150
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
Avatar for Takashi Kanemoto ttskch
1
150
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
Avatar for nnaka2992 nnaka2992
1
350
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
0
230
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
9
2.9k
AHC061解説
Avatar for Shun_PI shun_pi
0
400
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
0
120
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
2
770
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1k
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
170
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
150

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
86
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
150
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
400
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
86
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
140

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