Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to improve the performance of your website ...
Search
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
Thijs Feryn
December 08, 2015
Tweet
Share
More Decks by Thijs Feryn
See All by Thijs Feryn
Caching the uncacheable with Varnish - PHP London 2020
thijsferyn
0
430
Accelerating OTT video platforms with Varnish - London Video Tech meetup 2020
thijsferyn
0
380
't Oncachebare cachen
thijsferyn
0
380
Caching the uncacheable with Varnish - PHP UG FFM 19
thijsferyn
1
740
Developing cacheable PHP applications - PHP Barcelona 2019
thijsferyn
0
660
Caching the uncacheable with Varnish - FullstackEU 2019
thijsferyn
0
480
Varnish beyond basic web acceleration - Symfony Live Berlin 2019
thijsferyn
0
400
Developing cacheable PHP applications
thijsferyn
0
430
Varnish beyond basic web acceleration - DAHO.AM 2019
thijsferyn
0
410
Other Decks in Technology
See All in Technology
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
170
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
260
モダンフロントエンド 開発研修
recruitengineers
PRO
3
500
DeNA での思い出 / Memories at DeNA
orgachem
PRO
3
1.6k
知られざるprops命名の慣習 アクション編
uhyo
11
2.6k
Browser
recruitengineers
PRO
4
460
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
JavaScript 研修
recruitengineers
PRO
3
260
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
0
1.1k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
3
350
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
570
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
190
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Language of Interfaces
destraynor
160
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
For a Future-Friendly Web
brad_frost
179
9.9k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Scaling GitHub
holman
462
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Making Projects Easy
brettharned
117
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Transcript
By Thijs Feryn How to improve the performance of your
website
Hi, I’m Thijs
I’m @ThijsFeryn on Twitter
I’m an Evangelist At
I’m a at board member
Web performance is an essential part of the user experience
Infrastructure
Code
Browser rendering
User location
Down Slowdown ~ downtime
Focus on the foundation first
Fast servers
Performance != Scalability
Performance: speed
Scalability: constant speed with increasing load
Add servers to maintain performance
Stability
Code efficiently
Identify slowest part
Optimize database
Optimize runtime
After a while you hit the limits
Don’t recompute if the data hasn’t changed
Cache
Memcached Redis APC
None
Optimize database Optimize runtime A void A void
Don’t recompute if the data hasn’t changed
Varnish
Normally User Server
With Varnish User Varnish Server
Caching in your architecture
Respect HTTP
Cache-control: public, max- age=3600, s-maxage=7200 Cache-control: no-cache, no- store VS
Cookies?
Edge Side Includes
None
Don’t cache header
Cache footer until 31/12/2015 23:59:59
Cache for a day
Cache for an hour
<!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
Hit rate
Browser rendering
✓Concurrency limitations ✓Slowband, bad mobile connection ✓First byte time ✓Rendering
time ✓Limit resource size ✓Limit resource amount ✓Re-use TCP connections
Compress images, JS & CSS
Combine multiple JS & CSS into one file
Right image size for the right device
Non- blocking Javascript
Google PageSpeed Insights & Web Page Performance Test
User location
Caching in the edge
Content Delivery Network
Faster responses per request
Don’t saturate your own network
None
None
None