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

Caching mit Contao 4.8 für AnwenderInnen

Yanick Witschi
October 10, 2019
Technology
1
340

Caching mit Contao 4.8 für AnwenderInnen

Wer den contao.org-Blog ein bisschen verfolgt, wird bereits wissen, dass sich mal wieder einiges in Sachen Caching ändert ab Contao 4.8.

Gemeinsam lernen wir nochmal die Basics von HTTP-Caching, die wichtigsten Header, die neuen Einstellungsmöglichkeiten ab Contao 4.8 und die Unterschiede zu Contao 4.4. Wir schauen uns an, wie ihr das Maximum an Speed aus eurer Contao-Installation herausholen könnt, wieso cachen manchmal nicht möglich ist und wie ihr herausfindet, ob ein Eintrag überhaupt aus dem Cache kommt. Ausserdem wagen wir einen kleinen Blick über den Tellerrand und schauen, welche Tools es denn noch gäbe um die Performance weiter zu verbessern, wenn es das Projekt-Budget erlaubt ;-)

Yanick Witschi

October 10, 2019
Tweet

More Decks by Yanick Witschi

See All by Yanick Witschi
Unicode: Die Vielf�ltigkeit von Zeichen und Symbolen
toflar
0
7
Asynchrone Kommunikation mit der Symfony Messenger-Komponente
toflar
0
180
The Long Journey Of Making Composer Memory-efficient and Fast
toflar
0
220
Keynote Contao Agenturtag 2020
toflar
1
1.6k
Http Cache - Muss es immer gleich Varnish sein?
toflar
0
69
HTTP Caching - Der Gigant unter den Caches
toflar
0
96
Git und GitHub für Nicht-Entwickler
toflar
2
480

Other Decks in Technology

See All in Technology
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
re:Invent をおうちで楽しんでみた ～CloudWatch のオブザーバビリティ機能がスゴい！/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
kargoの魅力について伝える
magisystem0408
0
210
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
podman_update_2024-12
orimanabu
1
270
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す！？~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
110
レンジャーシステムズ | 会社紹介（採用ピッチ）
rssytems
0
150
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
410
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
150

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Fireside Chat
paigeccino
34
3.1k
Speed Design
sergeychernyshev
25
670
Mobile First: as difficult as doing things right
swwweet
222
9k
Gamification - CAS2011
davidbonilla
80
5.1k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Statistics for Hackers
jakevdp
796
220k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k

Transcript

  1. terminal42 web development gmbh für AnwenderInnen Caching mit Contao 4.8

    Contao Konferenz 2019

  2. terminal42 web development gmbh contao/core-bundle (pre Monorepo) ⁃ 576 ⁃

    577 ⁃ 742 ⁃ 743 ⁃ 1263 ⁃ 1388 (leofeyer) ⁃ 1478 ⁃ 1611 ⁃ 1612 ⁃ 1630 (aschempp) Warum ich? • Der erste Pull Request im Bezug auf Caching auf den Monat genau vor 3 Jahren. Damals Contao 4.3. friendsofsymfony/http-cache ⁃ 373 ⁃ 419 ⁃ 422 ⁃ 423 ⁃ 437 friendsofsymfony/http-cache-bundle ⁃ 363 ⁃ 435 toflar/psr6-symfony-http-cache-store ⁃ 45 Commits seit 27.09.2017 symfony/symfony ⁃ 22079 (ausi) ⁃ 24075 ⁃ 25583 ⁃ 26532 (aschempp) ⁃ 27309 ⁃ 32455 contao/contao ⁃ 117 ⁃ 137 ⁃ 147 ⁃ 148 ⁃ 173 ⁃ 351 ⁃ 365 ⁃ 389 ⁃ 469 (ausi) ⁃ 482 ⁃ 483 (aschempp) ⁃ 592 (aschempp) ⁃ 611

  3. terminal42 web development gmbh Für AnwenderInnen? • Nicht für EndanwenderInnen,

    die den Inhalt bearbeiten. • Sondern für fortgeschriCene Contao- Administratoren, die die Webseite betreuen. • = Es wird technisch, aber ihr wollt ja auch etwas mehr wissen, als die EndanwenderInnen! :-)

  4. terminal42 web development gmbh Es ändert sich doch eh wieder!

    • NEIN! • Okay, die einzige Konstante ist der Wandel aber… • …zum ersten Mal so richGg happy mit dem was wir haben! • …keine Änderungen für die 4.9 in Aussicht was das Handling nach aussen hin angeht. • …bestes Caching-Framework aller CMSe dieser Welt! • ✏

  5. terminal42 web development gmbh Back to the basics

  6. terminal42 web development gmbh Back to the basics

  7. terminal42 web development gmbh Request GET /de/ HTTP/1.1 Cookie: PHPSESSID=……

    Host: contao.org Connection: close User-Agent: Mozilla/5.0 (…) Gecko/20100101 Firefox/69.0 Accept: text/html

  8. terminal42 web development gmbh Response HTTP/2.0 200 OK Date: Thu,

    09 Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Cache-Control: no-cache <html> <body> <h1>Hello, World!</h1> </body> </html>

  9. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache

  10. terminal42 web development gmbh Browser Server Private Cache Browser Private

    Cache Proxy Shared/Public Cache

  11. terminal42 web development gmbh KonfiguraGon in Contao

  12. terminal42 web development gmbh HTTP/2.0 200 OK Date: Thu, 09

    Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Cache-Control: private, max-age=1800
 Vary: Cookie <html> <body> <h1>Hello, World!</h1> </body> </html>

  13. terminal42 web development gmbh HTTP/2.0 200 OK Date: Thu, 09

    Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Cache-Control: public, s-maxage=3600, max-age=1800 Vary: Cookie <html> <body> <h1>Hello, World!</h1> </body> </html>

  14. terminal42 web development gmbh HTTP/2.0 200 OK Date: Thu, 09

    Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Cache-Control: public, s-maxage=3600, max-age=1800 Vary: Cookie <html> <body> <h1>Hello, World!</h1> </body> </html>

  15. terminal42 web development gmbh That’s it! für die EndanwenderInnen

  16. terminal42 web development gmbh Warum überhaupt ein Cache? • Leistung

    (CPU, RAM) kostet immer weniger. • PHP OPCache wird immer besser. • «Mein Contao ist doch auch ohne Cache schnell!»

  17. terminal42 web development gmbh Performance! • Auch wenn der Server

    schnell ist: • Contao Boot-Prozess • Rou_ng (zu welcher Seite gehört die URL) • Datenbankabfragen für Seiten, Ar_kel, Module, Inhaltselemente • Template Rendering • Performance is about conversion rates and SEO
 (PageSpeed, Lighthouse, …) • Performance is about UX! Performance is about the users!

  18. terminal42 web development gmbh

  19. terminal42 web development gmbh Wozu der Umbau? Der eingebaute HTML-Cache

    in der 3.5 war doch okay?

  20. terminal42 web development gmbh Standards sind toll! • Masseinheiten •

    DIN • ISO • RFC

  21. terminal42 web development gmbh Browser Server Browser Proxy

  22. terminal42 web development gmbh Browser Server Browser Proxy

  23. terminal42 web development gmbh Browser Server Browser Proxy

  24. terminal42 web development gmbh Browser Server Browser Proxy Proxy Proxy

  25. terminal42 web development gmbh Browser Server Browser Proxy Proxy Proxy

    Proxy

  26. terminal42 web development gmbh

  27. terminal42 web development gmbh Der Shared Cache ist worüber wir

    heute sprechen!

  28. terminal42 web development gmbh

  29. terminal42 web development gmbh Nicht cachebar HTTP/2.0 200 OK Date:

    Thu, 09 Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Contao-Cache: miss Age: 0 <html> <body> <h1>Hello, World!</h1> </body> </html>

  30. terminal42 web development gmbh Wird neu gecached HTTP/2.0 200 OK

    Date: Thu, 09 Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Contao-Cache: miss/store Age: 0 <html> <body> <h1>Hello, World!</h1> </body> </html>

  31. terminal42 web development gmbh Aus dem Cache HTTP/2.0 200 OK

    Date: Thu, 09 Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Contao-Cache: fresh Age: 42 <html> <body> <h1>Hello, World!</h1> </body> </html>

  32. terminal42 web development gmbh ProblemaGk #1 Wie erkennen wir ob

    ein Benutzer eingeloggt ist?

  33. terminal42 web development gmbh Problemstellung • Contao muss dem Cache

    mifeilen können, dass er hfps:/ /www.domain.de/login.html anders cachen soll, je nach dem ob ich eingeloggt bin oder nicht. Ansonsten würde immer das Login-Formular angezeigt, staf «eingeloggt als k.jones».

  34. terminal42 web development gmbh Der Vary-Header • Teilt dem Cache

    mit, unterschiedliche Varianten pro URI abzulegen. • Man merke sich: «Hallo Cache, bife vary-iere» $

  35. terminal42 web development gmbh Der Vary-Header GET /hello-world Accept: text/html

    HTTP/2.0 200 OK Cache-Control: public, s-maxage=300 Vary: Accept <html> <body> <h1>Hello, World!</h1> </body> </html> Ich darf diesen Eintrag für 300 Sekunden cachen, aber nur dann ausliefern, wenn der Request den Header «Accept» mit dem exakten (!) Inhalt «text/html» enthält!

  36. terminal42 web development gmbh Der Vary-Header GET /hello-world Accept: application/json

    HTTP/2.0 200 OK Cache-Control: public, s-maxage=300 Vary: Accept { “body”: “Hello World!” } Ich darf diesen Eintrag für 300 Sekunden cachen, aber nur dann ausliefern, wenn der Request den Header «Accept» mit dem exakten (!) Inhalt «application/json» enthält!

  37. terminal42 web development gmbh Nicht eingeloggt GET /hello-world Accept: text/html

    HTTP/2.0 200 OK Cache-Control: public, s-maxage=300 Vary: Cookie

  38. terminal42 web development gmbh Eingeloggt GET /hello-world Accept: text/html Cookie:

    PHPSESSID=b7a861e4ae0664b3a82ec2fbf239e5ff HTTP/2.0 200 OK Cache-Control: private, no-store Vary: Cookie

  39. terminal42 web development gmbh HTTP/2.0 200 OK Date: Thu, 09

    Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Cache-Control: public, s-maxage=3600, max-age=1800 Vary: Cookie <html> <body> <h1>Hello, World!</h1> </body> </html> Nicht eingeloggt

  40. terminal42 web development gmbh ProblemaGk #2 Frontend-Vorschau

  41. terminal42 web development gmbh Die preview.php • web/index.php • web/preview.php

    • Frontend-Vorschau:
 hfps:/ /www.domain.de/preview.php/profil.html

  42. terminal42 web development gmbh ProblemaGk #3 Cookies

  43. terminal42 web development gmbh ProblemaGk • Vary bezieht sich immer

    auf den Header und dessen gesamten Inhalt. • Sowas wie «Vary: Cookie=PHPSESSID» exis_ert nicht. • (es gab mal einen Key-Header Draj der das ändern sollte aber dieser hat es leider nie über den Draj-Status hinaus geschal…) • Ergo: Wir können nicht auf bes_mmte Cookies vary-en. Der Cache ist somit nicht in der Lage irrelevante von relevanten Cookies zu unterscheiden. Caching wird somit deakGviert, sobald mindestens ein Cookie vorhanden ist! • irrelevant = hat keinen Einfluss auf den Cache und soll somit eigentlich nicht berücksich_gt werden. • relevant = hat Einfluss auf den Cache und soll berücksich_gt werden.

  44. terminal42 web development gmbh Irrelevante Cookies? • GDPR-Cookiebar, die am

    HTML nichts ändert • Google Analy_cs • Matomo (Piwik) • Facebook Pixel • Cloudflare • uvm.

  45. terminal42 web development gmbh Lösung • Blacklist, Contao kennt eine

    interne Liste an irrelevanten Cookies und löscht diese bevor der Cache gefragt wird. (siehe «StripCookiesSubscriber») • '(.*)?modal(.*)?' • '_ga' • '_pk_id' • '_rp' • Whitelist, kann per Umgebungsvariable konfiguriert werden und übersteuert die mitgelieferte Blacklist.

  46. terminal42 web development gmbh

  47. terminal42 web development gmbh Informiert die Entwickler • Cookies werden

    zu 90%* falsch eingesetzt! • Wenn der Server die Informa_on nicht verwertet, braucht es kein Cookie! Teilt ihm keine Informa_onen mit, die er nicht gebrauchen kann! • JavaScript kann sessionStorage, localStorage (Vorsicht: blocking API, also synchron) oder IndexedDB nutzen! • Meinen Blogpost lesen: hfps:/ /contao.org/de/news/ die-jagd-auf-ueberfluessige-cookies.html * Yanick’sche Sta_s_k

  48. terminal42 web development gmbh Relevante Cookies? • PHPSESSID (PHP Session)

    • Potenziell persönliche Daten (Session !== eingeloggt als User) • CSRF-Schutz • A/B-Tes_ng • Google Analy_cs Daten werden vom Server ausgewertet

  49. terminal42 web development gmbh Whitelist • Entweder als echte Umgebungsvariable

    • Oder .env-Datei im Wurzelverzeichnis COOKIE_WHITELIST=PHPSESSID,csrf_https-contao_csrf_token

  50. terminal42 web development gmbh Bonus 1 Performance-Vergleiche

  51. terminal42 web development gmbh Eingebauter Cache

  52. terminal42 web development gmbh Varnish

  53. terminal42 web development gmbh Bonus 2 Das beste Caching-Framework!

  54. terminal42 web development gmbh Browser Server Browser Proxy Bekannte Server

    / Zugriff möglich Unbekannte Clients / Zugriff nicht möglich

  55. terminal42 web development gmbh Browser Server Browser Proxy Unbekannte Clients

    / Zugriff nicht möglich Bekannte Server / Zugriff möglich

  56. terminal42 web development gmbh Cache Tagging HTTP/2.0 200 OK Date:

    Thu, 09 Oct 2019 12:42:00 GMT Content-Length: 88 Content-Type: text/html Cache-Control: public, s-maxage=1800
 X-Cache-Tags: contao.db.tl_article.489,contao.db.tl_content.2180,contao.db.tl_content. 2182,contao.db.tl_content.2184,contao.db.tl_content.2186,contao.db.tl_content. 2185,contao.db.tl_content.2183,contao.db.tl_content.2181,contao.db.tl_module. 489,contao.db.tl_module.,contao.db.tl_article.386,contao.db.tl_content. 793,contao.db.tl_content.779,contao.db.tl_content.781,contao.db.tl_content. 783,contao.db.tl_content.782,contao.db.tl_content.784,contao.db.tl_content. 780,contao.db.tl_content.785,contao.db.tl_content.786,contao.db.tl_content. 794,contao.db.tl_content.791,contao.db.tl_content.787,contao.db.tl_content. 792,contao.db.tl_module.386,contao.db.tl_article.387,contao.db.tl_content. 795,contao.db.tl_content.797,contao.db.tl_content.801,contao.db.tl_content. 802,contao.db.tl_module.2,contao.db.tl_content.798,contao.db.tl_content. 799,contao.db.tl_content.803,contao.db.tl_content.800,contao.db.tl_content. 796,contao.db.tl_module.387,contao.db.tl_page.22 <html> <body> <h1>Hello, World!</h1> </body> </html>

  57. terminal42 web development gmbh Cache Tag Purging Server Proxy PURGE

    / HTTP/1.1 Host: localhost X-Cache-Tags: contao.db.tl_content.42

  58. terminal42 web development gmbh Contao IntegraGon • Sendet beim Edi_eren

    automa_sch Cache-Tag-Invalida_on- Requests nach dem Schema • contao.db.<Tabelle> • contao.db.<Tabelle>.<ID> • Erweiterbar durch den «oninvalidate_cache_tags_callback» • Beispielsweise invalidiert das «comments-bundle» beim Edi_eren eines Kommentars die Tags der Quelle. • Tagging im Frontend ist Aufgabe des Entwicklers

  59. terminal42 web development gmbh Video Demo

  60. terminal42 web development gmbh FOSHCpCache(Bundle) • Symfony HfpCache mit toflar/psr6-symfony-hfp-

    cache-store • Varnish • erweiterbar, PR’s offen für • OpenLiteSpeed • Fastly

  61. terminal42 web development gmbh

  62. terminal42 web development gmbh Zusammenfassung • Contao 4.8 enthält -

    abgesehen von «der Checkbox»™ - die gleichen Cache- Einstellungsmöglichkeiten wie Contao 4.4, aber… • …wir sind 100% standardkonform! • …wir sind schneller out-of-the-box! • …wir bieten ein Meer an Möglichkeiten das Setup noch schneller zu machen!

  63. terminal42 web development gmbh ? Contao Konferenz 2019

  64. terminal42 web development gmbh Kontakt • Yanick Witschi / terminal42

    gmbh • Contao Core Entwickler • API's, Performance, Caching • Tennis, Basketball, Faustball • Scotch • @toflar