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

How to improve the performance of your website ...

Avatar for Thijs Feryn Thijs Feryn
December 08, 2015
Technology
0
330

How to improve the performance of your website - FeWeb15

Web performance talk for FeWeb Congress edition 2015

Avatar for Thijs Feryn

Thijs Feryn

December 08, 2015
Tweet

More Decks by Thijs Feryn

See All by Thijs Feryn
Caching the uncacheable with Varnish - PHP London 2020
Avatar for Thijs Feryn thijsferyn
0
450
Accelerating OTT video platforms with Varnish - London Video Tech meetup 2020
Avatar for Thijs Feryn thijsferyn
0
390
't Oncachebare cachen
Avatar for Thijs Feryn thijsferyn
0
380
Caching the uncacheable with Varnish - PHP UG FFM 19
Avatar for Thijs Feryn thijsferyn
1
760
Developing cacheable PHP applications - PHP Barcelona 2019
Avatar for Thijs Feryn thijsferyn
0
670
Caching the uncacheable with Varnish - FullstackEU 2019
Avatar for Thijs Feryn thijsferyn
0
480
Varnish beyond basic web acceleration - Symfony Live Berlin 2019
Avatar for Thijs Feryn thijsferyn
0
400
Developing cacheable PHP applications
Avatar for Thijs Feryn thijsferyn
0
450
Varnish beyond basic web acceleration - DAHO.AM 2019
Avatar for Thijs Feryn thijsferyn
0
430

Other Decks in Technology

See All in Technology
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
Avatar for AEON aeonpeople
1
300
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
Avatar for coconala_engineer coconala_engineer
0
260
SOTA競争から人間を超える画像認識へ
Avatar for Yosuke Shinya shinya7y
0
550
GraphRAG グラフDBを使ったLLM生成（自作漫画DBを用いた具体例を用いて）
Avatar for sea-turt1e seaturt1e
1
150
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
Avatar for Leko leko
2
190
ヘンリー会社紹介資料（エンジニア向け） / company deck for engineer
Avatar for Henry, Inc. henryofficial
0
390
FinOps について (ちょっと) 本気出して考えてみた
Avatar for skmkzyk skmkzyk
0
220
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか？~
Avatar for curekoshimizu curekoshimizu
3
770
あなたの知らない Linuxカーネル脆弱性の世界
Avatar for Recruit recruitengineers
PRO
3
160
AIとともに歩んでいくデザイナーの役割の変化
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
880
Azure Well-Architected Framework入門
Avatar for tomokusaba tomokusaba
1
130
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
Avatar for 弁護士ドットコム bengo4com
0
340

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.1k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k

Transcript

  1. By Thijs Feryn How to improve the performance of your

    website

  2. Hi, I’m Thijs

  3. I’m @ThijsFeryn on Twitter

  4. I’m an Evangelist At

  5. I’m a at board member

  6. Web performance is an essential part of the user experience

  7. Infrastructure

  8. Code

  9. Browser rendering

  10. User location

  11. Down Slowdown ~ downtime

  12. Focus on the foundation first

  13. Fast servers

  14. Performance != Scalability

  15. Performance: speed

  16. Scalability: constant speed with increasing load

  17. Add servers to maintain performance

  18. Stability

  19. Code efficiently

  20. Identify slowest part

  21. Optimize database

  22. Optimize runtime

  23. After a while you hit the limits

  24. Don’t recompute if the data hasn’t changed

  25. Cache

  26. Memcached Redis APC

  27. None

  28. Optimize database Optimize runtime A void A void

  29. Don’t recompute if the data hasn’t changed

  30. Varnish

  31. Normally User Server

  32. With Varnish User Varnish Server

  33. Caching in your architecture

  34. Respect HTTP

  35. Cache-control: public, max- age=3600, s-maxage=7200 Cache-control: no-cache, no- store VS

  36. Cookies?

  37. Edge Side Includes

  38. None

  39. Don’t cache header

  40. Cache footer until 31/12/2015 23:59:59

  41. Cache for a day

  42. Cache for an hour

  43. <!DOCTYPE html> <html> <head> <title>The Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-theme.min.css"> <script src=“/js/jquery-2.1.4.min.js"></script> <script src="/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <esi:include src=“http://mysite.dev/nav" /> </nav> <div class="jumbotron"> <esi:include src="http://mysite.dev/jumbotron" /> </div> <div class="container"> {% block content %}{% endblock %} <hr> <footer> <esi:include src="http://mysite.dev/footer" /> </footer> </div> </body> </html> ESI tags

  44. Hit rate

  45. Browser rendering

  46. ✓Concurrency limitations ✓Slowband, bad mobile connection ✓First byte time ✓Rendering

    time ✓Limit resource size ✓Limit resource amount ✓Re-use TCP connections

  47. Compress images, JS & CSS

  48. Combine multiple JS & CSS into one file

  49. Right image size for the right device

  50. Non- blocking Javascript

  51. Google PageSpeed Insights & Web Page Performance Test

  52. User location

  53. Caching in the edge

  54. Content Delivery Network

  55. Faster responses per request

  56. Don’t saturate your own network

  57. None
  58. None
  59. None