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
320

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
430
Accelerating OTT video platforms with Varnish - London Video Tech meetup 2020
Avatar for Thijs Feryn thijsferyn
0
380
't Oncachebare cachen
Avatar for Thijs Feryn thijsferyn
0
360
Caching the uncacheable with Varnish - PHP UG FFM 19
Avatar for Thijs Feryn thijsferyn
1
730
Developing cacheable PHP applications - PHP Barcelona 2019
Avatar for Thijs Feryn thijsferyn
0
660
Caching the uncacheable with Varnish - FullstackEU 2019
Avatar for Thijs Feryn thijsferyn
0
470
Varnish beyond basic web acceleration - Symfony Live Berlin 2019
Avatar for Thijs Feryn thijsferyn
0
390
Developing cacheable PHP applications
Avatar for Thijs Feryn thijsferyn
0
420
Varnish beyond basic web acceleration - DAHO.AM 2019
Avatar for Thijs Feryn thijsferyn
0
410

Other Decks in Technology

See All in Technology
With Devin -AIの自律とメンバーの自立
Avatar for こたにん kotanin0
2
1k
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
36k
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
Avatar for Yusuke Kuroiwa wakinchan
0
200
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
Avatar for Arthur arthur1
0
300
Microsoft Clarityでインサイトを見つけよう
Avatar for なかしょ nakasho
0
120
robocopy の怖い話/scary-story-about-robocopy
Avatar for emi emiki
0
440
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
Avatar for Soh Ohara soh9834
8
630
Datasets for Critical Operations by Dataform
Avatar for kimujun kimujun
0
150
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
Avatar for Mutz mutsumix
0
140
Vision Language Modelと自動運転AIの最前線_20250730
Avatar for Yu Yamaguchi yuyamaguchi
3
1k
From Live Coding to Vibe Coding with Firebase Studio
Avatar for Firebase Thailand firebasethailand
1
410
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
Avatar for Katsutoshi Nagaoka nagapad
0
160

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
540
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.4k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

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