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

How to improve the performance of your website ...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Thijs Feryn Thijs Feryn
December 08, 2015
Technology
0
340

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
510
Accelerating OTT video platforms with Varnish - London Video Tech meetup 2020
Avatar for Thijs Feryn thijsferyn
0
430
't Oncachebare cachen
Avatar for Thijs Feryn thijsferyn
0
430
Caching the uncacheable with Varnish - PHP UG FFM 19
Avatar for Thijs Feryn thijsferyn
1
900
Developing cacheable PHP applications - PHP Barcelona 2019
Avatar for Thijs Feryn thijsferyn
0
710
Caching the uncacheable with Varnish - FullstackEU 2019
Avatar for Thijs Feryn thijsferyn
0
530
Varnish beyond basic web acceleration - Symfony Live Berlin 2019
Avatar for Thijs Feryn thijsferyn
0
460
Developing cacheable PHP applications
Avatar for Thijs Feryn thijsferyn
0
500
Varnish beyond basic web acceleration - DAHO.AM 2019
Avatar for Thijs Feryn thijsferyn
0
480

Other Decks in Technology

See All in Technology
Agent Skill 是什麼？對軟體產業帶來的變化
Avatar for Bo-Yi Wu appleboy
0
230
LLMに何を任せ、何を任せないか
Avatar for an cap120
10
5.6k
スピンアウト講座01_GitHub管理
Avatar for overflow ,Inc overflowinc
0
1.4k
私がよく使うMCPサーバー3選と社内で安全に活用する方法
Avatar for KintoTech_Dev kintotechdev
0
110
MCPで決済に楽にする
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
110
Phase11_戦略的AI経営
Avatar for overflow ,Inc overflowinc
0
1.6k
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
Avatar for Koji Yoshida kyoshidaxx
4
1.9k
Amazon Qはアマコネで頑張っています〜 Amazon Q in Connectについて〜
Avatar for Yuuki Yamashita yama3133
1
130
Phase04_ターミナル基礎
Avatar for overflow ,Inc overflowinc
0
2.4k
ThetaOS - A Mythical Machine comes Alive
Avatar for Martijn aslander
0
180
やさしいとこから始めるGitHubリポジトリのセキュリティ
Avatar for Yuta Matsumura tsubakimoto_s
2
1.4k
非同期・イベント駆動処理の分散トレーシングの繋げ方
Avatar for Ken ichikawaken
1
110

Featured

See All Featured
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
150
Scaling GitHub
Avatar for Zach Holman holman
464
140k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
10k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
210
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
650
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
120
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
240
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
290

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