Linuchs: Google speed: "Browser-Caching nutzen"

Hallo,

um die Ladegeschwindigkeit zu optimieren, habe ich im Fuss einiger Seiten den Link zu http://developers.google.com/speed/pagespeed/insights/?url=... eingebaut.

Nun kommt von Google der Hinweis:
"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"

Und dann werden .css und image-Dateien aufgezählt. Wie verpasst man denen denn einen HTML-Header?

Falls der Header der HTML-Datei gemeint ist, verstehe ich nicht, warum man .php-Dateien (darum handelt es sich nämlich) verbieten sollte, aktuelle Daten aus der DB zu holen ???

Problematisch dürften diese Verfallzeiten vor allem werden, wenn man Änderungen durchführt. Dann werden ja die Dateien aus dem Cache geholt, man kann z.B. die .css oder .js Änderungen nicht testen. Oder mit [Strg][F5] (bei Opera) doch das Neuladen erzwingen?

Linuchs

  1. Also beim entwickeln ist sowas natürlich quatsch. Wenn sich ständig deine css, html oder js Dateien ändern kannst du nicht über den Cache arbeiten.
    Steht eine Webseite aber erstmal ändert sich so schnell nichts mehr - zumindest nichts am css, html oder js. Ob sich etwas am Inhalt ändert hängt wiederum von diesem ab. Einen Artikel beispielsweise schreibst du einmal, korrigierst ihn eventuell noch ein paar mal Zeitnah und dann steht das ding erstmal. Vielleicht kommen noch hier und da Kommentare hinzu. Diese Seite könne jedoch ohne Probleme aus einem Cache geladen werden. Im schlimmsten Fall fehlen ein paar Kommentare.
    Andere Seiten hingegen kann man wahrscheinlich nie aus dem Cache bedienen. Newsseiten z.B. wo man eine Übersicht über alle News hat. Da kann stündlich was dazu kommen. Oder generierte Liste usw.
    Ich denke dieser Browser Cache ist eine allgemeine Sache.

    Gruß
    Cached
    T-Rex

    1. Steht eine Webseite aber erstmal ändert sich so schnell nichts mehr

      Okay, aber wenn sich nach Monaten was ändert, muss erst die expire-Zeit des alten Dokuments vergehen, bevor die Änderung sichtbar wird.

      Kann mich erinnern, dass gewisse Knoten (es könnte 1 und 1 gewesen sein) überhaupt nicht beim Original-Server nachfragen, sondern ihren Zwischenspeicher ausliefern, auch wenn der Leser erstmalig diese "gecachte URLen" aufruft.

      Habe Änderungen gemacht und der Kunde konnte sie tagelang nicht sehen, sehr ärgerlich.

      Deshalb hatte ich früher auf jeder Seite
      <meta http-equiv="expires" content="0">

      Linuchs

      1. Hallo,

        Okay, aber wenn sich nach Monaten was ändert, muss erst die expire-Zeit des alten Dokuments vergehen, bevor die Änderung sichtbar wird.

        Bei HTML-Ressourcen musst du natürlich aufpassen. Das Caching komplett zu deaktivieren ist unnötig, aber die Zeit sollte passend je nach Seite gewählt werden.

        Allerdings geht es hier ja um Assets wie Bilder, Stylesheets und Scripte. Best Practice ist, diese einmal mit einem Hash in der URL zu generieren und sie auf ewig (»far future Expires header«) zu cachen. Damit lassen sie sich auch problemlos auf einem Content Delivery Network verteilen. Wenn die Dateien sich ändern, wird ein neuer Dateiname / eine neue URL verwendet.

        Kann mich erinnern, dass gewisse Knoten (es könnte 1 und 1 gewesen sein) überhaupt nicht beim Original-Server nachfragen, sondern ihren Zwischenspeicher ausliefern, auch wenn der Leser erstmalig diese "gecachte URLen" aufruft.

        Es macht wenig Sinn, so zu argumentieren. Gegen kaputte Proxies bist du nicht gefeit. Wenn du dem Proxy nicht traust, dann kann man auch nicht davon ausgehen, dass Header greifen, die Caching zu unterbinden versuchen.

        Mathias

  2. Hi,

    Nun kommt von Google der Hinweis:
    "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"

    Und dann werden .css und image-Dateien aufgezählt. Wie verpasst man denen denn einen HTML-Header?

    Wer redet denn von einem HTML-Header …?

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Hi,

      Wer redet denn von einem HTML-Header …?

      Uups, es geht um HTTP. Gut, wie bekommt eine Grafikdatei, eine .css Datei einen HTTP Header?

      Also, die wird doch auch ohne (von mir erstelltem) Header aus dem Cache bedient. Da muss ich doch - etwa bei Webcam-Bildern - immer wechselnde Parameter (z.B. Uhrzeit) anhängen, damit ein neuer Inhalt unter derselben URL geladen wird.

      Linuchs

  3. moin,

    Nun kommt von Google der Hinweis:
    "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"

    Nun? Google empfiehlt das schon seit Jaaahren ;)

    Es gibt mehrere Möglichkeiten zum Cachen. G. empfiehlt Last-Modified. Wenn Dein Webserver entsprechend konfiguriert ist, liefert er .css u.a. Dateien, welche er im direkten Zugriff hat mit dem entsprechenden Last-Modified-HTTP-Header aus, ebenso ist der Expires-Header eine Frage der Konfiguration des Webservers.

    Andere Inhalte, z.B. solche die mit PHP erzeugt werden, nun, da darfst Du Dich selbst drum kümmern, was den Last-Modified-Header und Expires betrifft.

    Horst