Browser-caching mit xenforo

otto

otto

Die 5k-Labertasche
Lizenzinhaber
Registriert
11. Dez. 2010
Beiträge
5.417
Punkte
448
XF Version
  1. 2.2.15
XF Instanz
Hosting
PHP-Version
8.2.x
MySQL/MariaDB
10.3.x
Provider/Hoster
Strato/Hetzner
Hallo,

ich versuch mich nun schon seit 3 Tagen daran folgende "Probleme" gelöst zu bekommen:

Browser-Caching nutzen
Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden.
Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen:
Zum Vergrößern anklicken....

Im root (nicht Forenroot) habe ich ein htacces mit diesem Inhalt:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>

# compress
<IfModule mod_deflate.c>
<FilesMatch "\.(js|jpg|jpeg|gif|png|css|txt|html)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

# cache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/xhtml-xml "access plus 600 seconds"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

<ifmodule mod_headers.c>
<filesmatch "\\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesmatch>
<filesmatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesmatch>
<filesmatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesmatch>
<filesmatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</filesmatch>
</ifmodule>

# Turn ETags Off
<ifmodule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</ifmodule>
FileETag None


DirectoryIndex index.php index.html index.htm portal.php

#<IfModule mod_rewrite.c>
#RewriteEngine On
#RewriteBase /
#RewriteRule ^index\.php$ - [L]
#RewriteCond %{REQUEST_FILENAME} !-f
#RewriteCond %{REQUEST_FILENAME} !-d
#RewriteRule . /index.php [L]
#</IfModule>
Zum Vergrößern anklicken....

Aber bei google pagespeed Insights und anderen Test wird immer weiter bemängelt, das das Browser-Caching nicht funktioniere.

Im Apachen sind alle nötigen Module geladen...


Edit 1:
Hmmm - stell ich von Nginx auf den Apachen zurück, dann geht das Caching, bis auf die .js Javascript Dateien, die werden nicht gecached. Aber gerade die sind ja nun doch meist n bisl größer.

Daher präziser:
- Wie auch js cachen (im Browser) ?
- Wie das ganze dann mit Nginx lösen? Denn sobald ich Nginx aktiviere ist wieder schluss mit Caching.



Wie stell ich an, das dies läuft - jemand nen Tipp?
 
nginx nutzt keine htaccess.
 
Ja, ok.
Und wie aktiviere ich dort das Browser-Caching? Und wie stellt man es dann ein, je nach Dateityp?

Hast du eine Bsp. Konfiguration an der man sehen kann wie es gemacht werden kann?
 
Ok, JS wird nun auch gecached... CSS auch.

Wie kann man mit der CSS.php verfahren? Die wird wie alle php Files bei mir nicht im Browser gecached - kann man da noch etwas machen, zb. diese Datei explizit für zB. 30min cachen?
 
Du kannst das Browser-Caching auch im NGINX nutzen nur der Google Pagespeed-Test erkennt das nicht. Dies wurde auch direkt bei Google bemängelt. Du kannst aber auch mal ein anderes Test-Tool wie z.B. http://www.webpagetest.org/ nutzen.
 
Die css.php solltest du vom caching her in Ruhe lassen. Da sollte das XF passende Header senden. Das sind ja dynamisch generierte CSS Files.
 
otto schrieb:
Ja, ok.
Und wie aktiviere ich dort das Browser-Caching? Und wie stellt man es dann ein, je nach Dateityp?

Hast du eine Bsp. Konfiguration an der man sehen kann wie es gemacht werden kann?
Zum Vergrößern anklicken....


Da du ja auch Plesk nutzt hier mal meine Config:

Webserver-Einstellungen -> Zusätzliche Nginx-Anweisungen

dort habe ich dies hier:

Code: 
location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
    access_log        off; # deaktiviert access_log für diese Dateitypen
    log_not_found     off; # deaktiviert Meldungen im error_log
    add_header Pragma public;
    add_header Cache-Control “public”;
    try_files $uri @fallback;
    expires           30d;
}

gzip on;
gzip_proxied any;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";

pagespeed EnableFilters combine_css;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters make_google_analytics_async;
pagespeed EnableFilters canonicalize_javascript_libraries;
pagespeed EnableFilters remove_comments;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters outline_css;
pagespeed CssOutlineMinBytes 3000;

Den Pagespeed-Teil nur nutzen wenn du auch Pagespeed im NGINX aktiviert hast.
 
Danke für eure Tipps bisher. Nginx aktiviere ich nur für einzelne Domains. Für http://www.eaf-online.de reicht mir der Apache mit fcgi-mod und APC völlig aus (kleines Wordpress). Dort habe ich zusätzlich JS ans Ende verschoben und Grafiken mittels compressed PNGs (Plugin im Paint.NET) geschrumpft. Das rennt gut genug, denke ich.

Beim xenforo könnte mehr raus zu holen sein, da bin ich halt immo dran und wollte sehen ob mir Nginx mess- und spührbar mehr bringt. Negative Begleiterscheinung bei Nutzung von Nginx ist das der Apache sich dann deutlich mehr CPU Leistung genehmigt - warum hab ich noch nicht rausfinden können.

Ich test jetzt mal mit angepassten Einstellungen nach @Maestro2k5 s Konfig Tipp. Danke auch dafür. :)

Maestro2k5 schrieb:
Den Pagespeed-Teil nur nutzen wenn du auch Pagespeed im NGINX aktiviert hast.
Zum Vergrößern anklicken....
Ok, wie mach ich das?

Zusätzlich hab ich auch hier bei Grafiken durch PNG compression per Hand noch 10-40% der übertragenen Kilobyte einsparen können, was sicher kein falscher Beitrag ist.

zB.:
einige xenforo Style Grafiken vorher 197 kB und nachher 136 kB ohne sichtbaren Qualitätsverlust.
Gleiches hab ich bei diversen Add-ons mal angetestet und auch dort einiges an Optimierungspotenzial gesehen...


Ich weis freilich auch, das ein xenforo mit an die 65 Add-ons ( www.zetor-forum.de) keine Geschwindigkeits Rekorde aufstellen wird. :D ;)
 
Nur mal zum Verständnis Pagespeed hat mit Nginx FP-mode nichts zu tun, oder doch?
 
Nein, dies ist eine Erweiterung von Google, dies gibt es sowohl für den Apache als auch für NGINX. Wäre auch nur Optional und jeder muss schauen ob es ihm was bringt.
 
Ist diese nur nötig um den Pagespeed Test erfolgreicher zu bestehen oder wo liegen da die Vorteile zum regulären Einsatz von APC, mod-cache, mod-mem_cache, mod_fcgi ?

Herr jeh, ich verliere glaub ich noch meine letzten 3 Muzeln. :D ;)
 
Also es ist optional. Es kann getrost neben den von dir genannten Optionen genutzt werden. Es zielt allgemein darauf ab deine Seite schneller zu laden und es hat somit auch Auswirkungen auf deinen Pagespeed. Aber wirkliche vergleiche habe ich nicht, bei mir ist es aktiv und fertig. Es hatte bei mir einen Pagespeed von 80 auf 85 gebracht.
 
Desktop Speed oder Mobile ? Beim Mobile hat google noch bisl was zu mosern. Beim Desktop bin ich mit allen Maßnahmen bisher von 60/100 auf 88/100 gekommen. Das war/ist auch spührbar.

Beim Mobile wird u.a. "Ihre Seite enthält 3 blockierende CSS-Ressourcen. Dies verursacht eine Verzögerung beim Rendern Ihrer Seite."

Und zwar sind das 2mal die CSS.php und einmal font-awesome.min.js (lokal geladen). Was kann man da eventuell noch machen?
 
Zuletzt bearbeitet:
Beides hat sich um 5 Punkte verbessert aber du bist ja mit deinen Werten schon echt gut dabei.
 
Ich hab meine nginx Fehler gefunden...

Im Plesk hatte ich die teils die gleichen Dateiendungen in den Cache-Einstellungen wie auch in der Liste der Endungen statischer Dateien die nginx direkt ausspucken soll. So konnte das nichts werden. Hab die Dateiendungen raus genommen (jpg, png etc.) und siehe da - nginx Browsercaching läuft. :)

mod_pagespeed für den Apachen hab ich erfolgreich drauf - an der xginx Version klemmts noch immo - muss da mal noch mehr lesen...

Danke für die Tipps bis hierhin schon mal. :)
 
Das muss ich auch mal testen.
 
Kann mir mod_pagespeed auch html optimieren? Ich meine dazu was gelesen zu haben... :read:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben