behalx
Avatar behalx
Themenersteller
Fortgeschrittener (61 Beiträge)

Browser-Caching für CSS-Datei nutzen

am 19.07.2013, 21:10 Uhr eröffnete behalx folgenden Thread
.htaccess    7054 mal gelesen    11 Antwort(en).

Habe wieder seit langer Zeit mal für eine Verbesserung der Seiten-Report Analyse gearbeitet und versuche gerade den google-page-speed Punkt auf 100% zu kriegen. Die Analyse ([link]https://developers.google.com/speed/pagespeed/insights[/link]) meiner Seite ([link]unics.bplaced.net[/link]) beanstandet, dass ich den "Browser-Caching" für meine CSS-Datei nicht nutze, trotz der Tatsache, dass ich die .htaccess bereits modifizierte und google-page-speed mir bereits bestätigte, dass ich diesen Punkt abgehackt habe.

Ich beherzigte also zunächst die Ratschläge dieser Seite ([link]http://page-speed.net/tipps/browser-caching-nutzen.html[/link]) und fügte meiner .htaccess Datei folgenden Code hinzu, worauf dieser Punkt nicht mehr beanstandet wurde:

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


Doch nachdem ich die CSS-Datei ein paar mal modifzierte, behauptet der google-Analyser, dass ich Browser-Caching nicht nutzen würde und zwar mit der Empfehlung


Die Aktualität der folgenden Cache-fähigen Ressourcen ist nur von kurzer Dauer. Legen Sie fest, dass folgende Ressourcen künftig mindestens einmal pro Woche ablaufen:

unics.bplaced.net/structure.css (Ablauf nicht festgelegt)


Nun suche ich nach einer Möglichkeit, diesen "Ablauf" festzulegen. Ich habe bereits die betreffende Zeile modifiziert "ExpiresByType text/css "access plus 1 days"", jedoch ohne Erfolg.

Kennt jemand für dieses Problem eine Lösung ?


http://unics.bplaced.net/

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 19.07.2013, 22:07 Uhr schrieb joerg

Hallo

redbot.org

Also das könnte jetzt wohl die wahrscheinlichste Ursache sein. Das Modul steht nicht zur Verfügung.

Es gibt doch noch andere Möglichkeiten das Caching anzuwerfen. ETAG, Last Modified und den direkten Gegentyp zu expires nämlich max-age

Gruß
Jörg




Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

behalx
Avatar behalx
Fortgeschrittener (61 Beiträge)
am 19.07.2013, 22:31 Uhr schrieb behalx

Das Modul steht zur Verfügung. Beim ersten mal hat es ja geklappt.

Folgende Zeilen habe ich ebenfalls hinzugefügt. Klappt aber trotzdem nicht.


<IfModule mod_headers.c>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=1000, public"
</FilesMatch>
</IfModule>


Ich weiß nicht wie ich ETAGS verwenden soll und wie soll eigentlich Last Modified funktionieren ? Ich kann doch nicht bei jeder Änderung die htaccess-Datei ändern. Zur Zeit ändere ich die CSS sehr häufig. Bin einfach auf der Suche nach einem Code-Snipsel, der dafür sorgt, dass google-page-speed damit zufrieden ist. Die Hilfe-Seiten von Google sind grauenvoll, viel zu lang und enthalten kaum Code.



http://unics.bplaced.net/

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 20.07.2013, 00:20 Uhr schrieb joerg

Hallo

Okay gehen wir mal alles durch.

Deine JPEG Datei sendet einen Expires Header der in zwei Monaten abläuft und nicht die angegebene Zeitspanne aus dem Auszug in der htaccess

redbot.org

Also entweder das Modul nicht aktiviert und vom Provider Werte für die Bilder vorgegeben oder aber daran kann ich nicht recht glauben eine falsche Syntax. Weil das müsste zu einem Serverfehler führen.

Einfachste Möglichkeit sowas zu überprüfen eine Anweisung in den if Block die eine funktionierende Anweisung enthält und wenn das eine Rewrite Regel ist.

Die andere Möglichkeit wäre das die Komprimierung durch eine komprimierte gz Datei oder so bewerkstelligt wird. Und das dadurch die max-age Angabe nicht durchkommt. Oder das Modul ist auch nicht aktiviert.

Echt gut das ich das auch komplett über PHP steuern kann.

Zum Thema Last Modified
Bei vorhandenen Dateien sollte der Header meiner Ansicht nach immer gesendet werden vom Server ausser man stellt das ab worin ich keinen Vorteil sehe. Da sende ich dann halt eben zusätzliche Header die das Caching ganz unterbinden wenn ich das wirklich so möchte.
Aber da mittlerweile es Browser gibt die nicht immer anfragen was nun geschehen soll kann ich mir schon vorstellen das so webspace Provider sich gezwungen sehen das abzustellen.

Also die echt ernst gemeinte Frage wann soll es denn funktioniert haben?

Zum Thema Etag

<FilesMatch "\\.(ico|jpe?g|png|gif|svg|css|js)$">
FileETag Size MTime
</FilesMatch>
Weitere Möglichkeiten

FileETag All
FileETag INode Size MTime
FileETag INode
FileETag MTime
FileETag Size
FileETag None

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

behalx
Avatar behalx
Fortgeschrittener (61 Beiträge)
am 25.07.2013, 14:23 Uhr schrieb behalx

joerg schrieb:

Deine JPEG Datei sendet einen Expires Header der in zwei Monaten abläuft und nicht die angegebene Zeitspanne aus dem Auszug in der htaccess

redbot.org

Also entweder das Modul nicht aktiviert und vom Provider Werte für die Bilder vorgegeben oder aber daran kann ich nicht recht glauben eine falsche Syntax. Weil das müsste zu einem Serverfehler führen.



Ich glaube da liegt ein Missverständnis vor. Ich habe lediglich den htaccess-Code der verlinken Seite angezeigt und nicht meine aktuellen htaccess-Datei. Das war nicht besonders hilfreich meinerseits. Ich habe den Code mittlerweile verändert. Hier meine gesamte und aktuelle htaccess-Datei, um weiteren Missverständnissen vorzubeugen:


RewriteEngine on

AddType text/css;charset=UTF-8 .css
AddType text/html;charset=UTF-8 .html
AddType application/xhtml+xml;charset=UTF-8 .xhtml

RewriteCond %{HTTP_HOST} !^unics.bplaced\\.net$ [NC]
RewriteRule ^(.*)$ unics.bplaced.net/$1 [L,R=301]

RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\\ /index\\.html\\ HTTP/
RewriteRule ^index\\.html$ unics.bplaced.net [R=301,L]

RewriteRule ^(.*)\\.html $1\\.php


AddType application/x-httpd-php php php5 php4 php3 html htm css
AddHandler application/x-httpd-php .html .htm

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/xml "access 2 months"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access 2 months"
ExpiresByType application/* "access 2 months"
ExpiresByType image/* "access 2 months"
ExpiresByType video/quicktime "access 2 months"
ExpiresByType audio/mpeg "access 2 months"
FileETag None
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(css)$">
FileETag Size MTime
Header set Cache-Control "max-age=1000, public"
</FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript application/javascript image/gif
</IfModule>


Deswegen stimmen die "2 Monate" und das Modul funktioniert offensichtlich auch.

joerg schrieb:

Zum Thema Etag

<FilesMatch "\\.(ico|jpe?g|png|gif|svg|css|js)$">
FileETag Size MTime
</FilesMatch>

Weitere Möglichkeiten

FileETag All
FileETag INode Size MTime
FileETag INode
FileETag MTime
FileETag Size
FileETag None

Gruß
Jörg



Wie man in der htaccess-Datei sehen kann haben ich bereits "FileETag Size MTime" ausbprobiert. Ich habe diese Zeile auch mit "FileETag All" und "FileETag None" ersetzt aber google-spage sagt mit immer noch das "Die Aktualität der folgenden Cache-fähigen Ressourcen ist nur von kurzer Dauer. Legen Sie fest, dass folgende Ressourcen künftig mindestens einmal pro Woche ablaufen:" .


http://unics.bplaced.net/

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 25.07.2013, 18:24 Uhr schrieb joerg

Hallo

Okay bei der htaccess wird mir so einiges klarer.

An deiner Stelle würde ich erstmal so vorgehen das ich überhaupt teste was möglich ist.

Zum Thema Etag wenn du erst ein Modul abfragst was wohl nicht enthalten ist kommt natürlich kein Etag durch.

Okay wenn die CSS Datei erlaubt auch PHP da einzusetzen stellt sich mir die Frage nun welche Header da durch PHP gesendet werden, denn damit würde wohl die Möglichkeit bestehen das darin die Ursache zu suchen ist.

Um diesen Punkt abzuklären würde ich eine reine css Datei zusätzlich mal auf den Server legen um vergleichen zu können.

Die gesamte Datei würde ich echt mal aufräumen damit die dann auch mal etwas strukturierter ist.

Und text/xml und text/javascript wären nicht meine bevorzugten Mime Typen.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

gambler
Student
Guru (101 Beiträge)
am 25.07.2013, 20:57 Uhr schrieb gambler

Hey,

behalx schrieb:

Folgende Zeilen habe ich ebenfalls hinzugefügt. Klappt aber trotzdem nicht.


<IfModule mod_headers.c>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=1000, public"
</FilesMatch>
</IfModule>


Ich weiß nicht wie ich ETAGS verwenden soll und wie soll eigentlich Last Modified funktionieren ? Ich kann doch nicht bei jeder Änderung die htaccess-Datei ändern. Zur Zeit ändere ich die CSS sehr häufig. Bin einfach auf der Suche nach einem Code-Snipsel, der dafür sorgt, dass google-page-speed damit zufrieden ist. Die Hilfe-Seiten von Google sind grauenvoll, viel zu lang und enthalten kaum Code.



ich glaube man muss erst mal verstehen, wofür die verschiedenen Header (Expires, Cache-Control, Last-Modified und ETag) eigentlich dienen. Expires und Cache-Control dienen zur eigentlichen Festlegung der Gültigkeit der gesendeten Ressource. Hingegen werden Last-Modified und ETag zur Validierung herangezogen. Da ich in meinem Blog bereits einen Artikel dazu geschrieben habe, verweise ich hier mal ganz frech auf darauf: Website beschleunigen: Browser-Caching

Wichtig zu verstehen ist, dass die Angabe von Expires- UND Cache-Control-Header redundant ist. Der Browser verwendet sowieso nur einen Header und bei den gängigen Webbrowsern ist das der Cache-Control-Header. (siehe hierzu auch einen Beitrag von Google Optimize caching). Selbiges gilt für ETag- und Last-Modified-Header, denn auch hier berücksichtigt der Webbrowser nur einen.

Beispiel:


<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\\\.(css)$">
Header set Cache-Control "max-age=1000, public"
</FilesMatch>
</IfModule>

In diesem Fall gibt der Expire-Header an, dass CSS-Dateien gut 2592000s bzw. ca. 1 Monat gecached werden sollen bzw die gecachte Version solange gültig ist. Hingegen gibt der Cache-Control-Header nur eine Gültigkeit von 1000s bzw. ca. 16min an. Die meisten gehen nun vielleicht davon aus, dass die Gültigkeit für CSS-Dateien nun 1 Monat beträgt. Wie bereits erwähnt, bevorzugen die meisten Webbrowser den Cache-Control-Header und deshalb sind die gecachten CSS-Dateien eben nicht 1 Monat sondern nur gut 16min lang gültig.

Wenn also sowohl Expires- als auch Cache-Control-Header angegeben werden, dann am besten die gleichen Werte für die Gültigkeitsdauer eintragen.

Grüße

Stephan


Belegungsplan Ferienwohnung
Blog: Smart-Webentwicklung

behalx
Avatar behalx
Fortgeschrittener (61 Beiträge)
am 25.07.2013, 21:22 Uhr schrieb behalx

Tja .. Wir haben uns umsonst den Kopf zerbrochen.

Zunächst ein mal ist mir diese Thematik relativ neu und mir war nicht klar, dass php selber die HTTP-Header senden kann. Ich muss also nicht unbedingt die htaccess Datei dafür verwenden.

Zunächst versuchte ich es mit (in der CSS-Datei, die "php-fähig" ist)


header("Cache-Control: public, max-age=60");


,was jedoch nicht klappte. Doch ich las nochmal die google Empfehlung ("Die Aktualität der folgenden Cache-fähigen Ressourcen ist nur von kurzer Dauer. Legen Sie fest, dass folgende Ressourcen künftig mindestens einmal pro Woche ablaufen") und gab spasseshalber tatsächlich 1 Woche an, also "max-age=604800" und tatsächlich beanstandet google-page-speed diesen Punkt nicht mehr.

Vollkommen unsinnig, da er oder es von "mindestens einer Woche" und nicht "auf die Sekunde genau 1 Woche" sprach.

Problem gelöst.


http://unics.bplaced.net/

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 25.07.2013, 22:33 Uhr schrieb joerg

Hallo

Wenn alle vier header gesendet werden werden auch alle vier berücksichtigt im Normalfall.

Speziell für die beiden header etag und last-modified werden bei nochmaligen Aufruf im Browser zwei Anfragen gesetzt mit den darin enthaltenen Informationen.

Und das kann man sogar mit PHP wunderbar kontrollieren.


private function control_cache(){
$result = false;
if (isset($_SERVER[\'HTTP_IF_NONE_MATCH\']) && $_SERVER[\'HTTP_IF_NONE_MATCH\'] == $this->etag && isset($_SERVER[\'HTTP_IF_MODIFIED_SINCE\']) && $_SERVER[\'HTTP_IF_MODIFIED_SINCE\'] == $this->last_modified_format){$result = true;}
elseif (isset($_SERVER[\'HTTP_IF_NONE_MATCH\']) && $_SERVER[\'HTTP_IF_NONE_MATCH\'] == $this->etag && !isset($_SERVER[\'HTTP_IF_MODIFIED_SINCE\'])){$result = true;}
elseif (!isset($_SERVER[\'HTTP_IF_NONE_MATCH\']) && isset($_SERVER[\'HTTP_IF_MODIFIED_SINCE\']) && $_SERVER[\'HTTP_IF_MODIFIED_SINCE\'] == $this->last_modified_format){$result = true;}
return $result;
}


Und je nach Ergebnis kann ich dann einen 200 oder 304 eben senden.

Zu den anderen Punkt.
Es ist im Grunde unsinnig CSS Dateien durch PHP laufen zu lassen, obwohl ich das auch gerne gemacht habe. Alleine von der Performance her gesehen. Selbst wenn man Werte verändert wie zum Beispiel das man browserspezifische Präfixe ändert oder halt eben auch zufällige Werte generiert kann man das auch auf andere Weise lösen.

In die bessere Verfahrensweise muss ich mich aber noch selbst einarbeiten. Also CSS Dateien erstellen und durch Anwendung von node js oder so eine komprimierte Version gleich erstellen lassen.

Man kann grundsätzlich alle Header durch PHP aufbauen. Im Grunde läuft das bei einer Domain zumindest momentan so das sämtliche Dateien rein durch PHP erzeugt werden und nichts für diese Dateien durch die htaccess gesteuert wird.

Aber aus einem Grunde hat es sich schon gelohnt wenn man Freude am Experimenteren hat was möglich ist umzusetzen.

Ich würde einfach mal längere Werte als die Woche angeben das sollte dann auch durchgehen.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

gambler
Student
Guru (101 Beiträge)
am 26.07.2013, 09:41 Uhr schrieb gambler

Hallo Jörg,

joerg schrieb:

Wenn alle vier header gesendet werden werden auch alle vier berücksichtigt im Normalfall.

Speziell für die beiden header etag und last-modified werden bei nochmaligen Aufruf im Browser zwei Anfragen gesetzt mit den darin enthaltenen Informationen.

Und das kann man sogar mit PHP wunderbar kontrollieren.



Stimmt, dass mit ETag- und Last-Modified nehme ich mal zurück. Steht auch im RFC zu HTTP 1.1, dass der Browser beide senden soll, wenn vorhanden. In dem Fall ist es natürlich Sache des Servers, wie das gehandhabt wird.

Nichtsdestotrotz ist bei Expires- und Cache-Control-Header aber so, dass auch wenn beide im Antwort-Header des Servers gesetzt sind, nur einer vom Webbrowser berücksichtigt wird. Wie soll es auch anders sein, wenn der Expires-Header z.B. eine Gültigkeit von 2 Wochen, der Cache-Control-Header aber nur eine Gültigkeit von 2 Tagen für ein und dieselbe Ressource angibt. Der Browser muss sich hier entscheiden welche Angabe er nutzt und das ist im Normalfall die Cache-Control-Angabe für HTTP1.1.

"If a response includes both an Expires header and a max-age directive, the max-age directive overrides the Expires header, even if the Expires header is more restrictive." (Quelle: RFC2612)

Grüße

Stephan


Belegungsplan Ferienwohnung
Blog: Smart-Webentwicklung

behalx
Avatar behalx
Fortgeschrittener (61 Beiträge)
am 31.07.2013, 11:04 Uhr schrieb behalx

joerg schrieb:

Zu den anderen Punkt.
Es ist im Grunde unsinnig CSS Dateien durch PHP laufen zu lassen, obwohl ich das auch gerne gemacht habe. Alleine von der Performance her gesehen.



Also ich habe erst vor kurzem erfahren, dass man CSS-Dateien PHP-fähig machen kann und ich bin von dieser Möglichkeit hellauf begeistert. Nicht nur, dass man Variablen und dergleichen verwenden kann. Man kann das CSS übersichtlich speichern und am Ende mit "preg_replace" alle Whitespaces entfernen.

Auf diese Weise kann man ja sogar Performance einsparen. Die Frage ist nur wie sehr leidet die Performance denn tatsächlich ? Gibt es dazu Zahlen und Fakten ?


http://unics.bplaced.net/



« zurück zu: .htaccess

Das Seitenreport Forum hat aktuell 5267 Themen und 36089 Beiträge.
Insgesamt sind 48169 Mitglieder registriert.