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
420
Accelerating OTT video platforms with Varnish - London Video Tech meetup 2020
thijsferyn
0
380
't Oncachebare cachen
thijsferyn
0
350
Caching the uncacheable with Varnish - PHP UG FFM 19
thijsferyn
1
720
Developing cacheable PHP applications - PHP Barcelona 2019
thijsferyn
0
650
Caching the uncacheable with Varnish - FullstackEU 2019
thijsferyn
0
470
Varnish beyond basic web acceleration - Symfony Live Berlin 2019
thijsferyn
0
390
Developing cacheable PHP applications
thijsferyn
0
420
Varnish beyond basic web acceleration - DAHO.AM 2019
thijsferyn
0
400
Other Decks in Technology
See All in Technology
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
Definition of Done
kawaguti
PRO
6
480
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
250
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
解析の定理証明実践@Lean 4
dec9ue
0
170
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
1
520
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
710
How Community Opened Global Doors
hiroramos4
PRO
1
110
Featured
See All Featured
Bash Introduction
62gerente
614
210k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
It's Worth the Effort
3n
185
28k
Producing Creativity
orderedlist
PRO
346
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Practical Orchestrator
shlominoach
188
11k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
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