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
360
0

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

More Decks by Thijs Feryn

See All by Thijs Feryn
Caching the uncacheable with Varnish - PHP London 2020
Avatar for Thijs Feryn thijsferyn
0
550
Accelerating OTT video platforms with Varnish - London Video Tech meetup 2020
Avatar for Thijs Feryn thijsferyn
0
480
't Oncachebare cachen
Avatar for Thijs Feryn thijsferyn
0
470
Caching the uncacheable with Varnish - PHP UG FFM 19
Avatar for Thijs Feryn thijsferyn
1
950
Developing cacheable PHP applications - PHP Barcelona 2019
Avatar for Thijs Feryn thijsferyn
0
750
Caching the uncacheable with Varnish - FullstackEU 2019
Avatar for Thijs Feryn thijsferyn
0
580
Varnish beyond basic web acceleration - Symfony Live Berlin 2019
Avatar for Thijs Feryn thijsferyn
0
500
Developing cacheable PHP applications
Avatar for Thijs Feryn thijsferyn
0
540
Varnish beyond basic web acceleration - DAHO.AM 2019
Avatar for Thijs Feryn thijsferyn
0
540

Other Decks in Technology

See All in Technology
それでも、技術なブログを書く理由 #kichijojipm / Why I Still Write Tech Blogs Even Now
Avatar for ShinkuFencer shinkufencer
0
880
副作用のある Lambda でも Lambda Power Tuning は使えるのか / lambda-power-tuning-side-effects
Avatar for koukihosaka koukihosaka
2
150
2026年のソフトウェア開発を考える（2026/07版） / Agentic Software Engineering 2026-07 Findy Edition
Avatar for Takuto Wada twada
PRO
28
15k
大 AI 時代におけるC# の事情 ～ぶっちゃけトークを交えながら～
Avatar for neno nenonaninu
1
200
Git 研修【MIXI 26新卒技術研修】#2
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
210
AIで楽になるはずが、なぜ疲れる？
Avatar for kinopee kinopeee
0
100
AIが当たり前の組織で エンジニアはどう育つか
Avatar for Motoshi Nishihira nishihira
1
1.3k
モバイル研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
140
AIコード生成×サプライチェーン攻撃 — PHPが直面する“二重の信頼問題
Avatar for Shinya Saita shinyasaita
0
490
OpenTelemetryにおけるGoのゼロコード・コンパイル時計装について #fukuokago
Avatar for quiver quiver
0
320
AI時代こそ、スケールしないことをしよう -「作る人」から「なぜ作るか」を考える人へ / Do Things That Don't Scale in the AI Era — From How to Why
Avatar for 株式会社カミナシ kaminashi
1
150
AIエージェントがあれば技術書なんてすぐ書けるでしょ→無理でした
Avatar for watany watany
4
450

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
660
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
550
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
240
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4M

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