Browser-Caching für CSS-Datei nutzen

Hallo

redbot.org

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.

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

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]

RewriteRule ^index\\.html$ unics.bplaced.net [R=301,L]

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:" .

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

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

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.

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

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

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 ?