Carmen: Browser-Caching nutzen

Servus,

meine fast fertige Seite habe ich bei https://developers.google.com auf Geschwindigkeit prüfen lassen. Nun  bekam ich folgende Meldung:

/jquery.gmaps.js (Ablaufdatum nicht festgelegt)
/top.png (Ablaufdatum nicht festgelegt)
/werbe.jpg (Ablaufdatum nicht festgelegt)

Ein Bild sowie die js Datei hat doch kein Ablaufdatum?

Die nächste Meldung lautet "2 blockierende CSS-Ressourcen" hier schlägt mir Google vor, ich sollte doch bitte meine CSS und JS Datei asynchron zu laden und aus dem "sichtbaren" Bereich zu entfernen. Was ist damit gemeint?

  1. Die nächste Meldung lautet "2 blockierende CSS-Ressourcen" hier schlägt mir Google vor, ich sollte doch bitte meine CSS und JS Datei asynchron zu laden und aus dem "sichtbaren" Bereich zu entfernen. Was ist damit gemeint?

    Google meint wohl, dass die CSS- und Javascript-Anweisungen eigene Dateien sein sollten, die im HTML-Dokument dann aufgerufen werden, etwa so:

    <head>  
    <link rel=stylesheet type='text/css' href='basis.css'>  
    <script type="text/javascript" src="ajaxVorschlaege.js"></script>  
    </head>
    

    Vorteil:
    Solche Dateien geten in der Regel für mehrere HTML-Seiten einer Domain und müssen nur einmal geladen werden, während der Inline-Code bei jeder HTML-Seite erneut redundant zu übertragen ist.

    Nachteil:
    Oft bin ich auf Seiten, die bei der Anzeige "seltsam" aussehen, um ein paar Sekunden später erneut aufgebaut zu werden. Dann ist also die layout-gebende Datei später eingetroffen.

    Linuchs

  2. hi,

    Die nächste Meldung lautet "2 blockierende CSS-Ressourcen" hier schlägt mir Google vor, ich sollte doch bitte meine CSS und JS Datei asynchron zu laden und aus dem "sichtbaren" Bereich zu entfernen. Was ist damit gemeint?

    Unterscheide kritisches CSS und unkritisches CSS und setze Dich mit dem Begriff above the fold auseinander.

    above the fold: Der Bereich einer Seite, welcher beim Aufruf unmittelbar sichtbar wird. Diesbezügliches CSS wird als kritisch bezeichnet, denn es muss sofort verfügbar sein.

    below the fold: Was z.B. sichtbar wird, wenn gescrollt wird. Diesbezügliches CSS ist unkritisch und kann z.B. asynchron nachgeladen werden. Asynchron deswegen, damit der Seitenaufbau im sichtbaren Bereich (above the fold) nicht ausgebremst wird.

    MfG

    1. ... und zur Ergänzung des Beitrages von hotti:

      Was Javascript betrifft gibt es diesbezüglich (asynchrones Laden) die Attribute "async" und "defer". Früher wurde dazu geraten, Javascripts am Ende einer Html-Seite einzubinden, was einen ähnliche Wirkung hat, jedoch m.M. die Lesbarkeit des Codes verschlechtert.

      Ein Bild sowie die js Datei hat doch kein Ablaufdatum?

      Doch. Gemeint ist das Ablaufdatum, oder besser, Verfallsdatum im Browser-Cache. Dies kannst du z.B. bei Apache in einer .htaccess - Datei festlegen. Dadurch kannst du bestimmen, dass statische Inhalte, wie Bilder, oder Javascript-Dateien usw nicht jedesmal erneut vom Server, sondern vom Browser-Cache des Users geladen werden.

      Off Topic:
      Ein weiterer Flaschenhals, sind beispielsweise eingebettete youtube-Videos (externe Resourcen allgemein). Wenn du mehr als 8 auf deiner Seite lädst, empfiehlt es sich, die Vorschaubilder zu cachen und erst nachträglich den Player zu laden. Das halbiert u.U. die Ladezeiten deiner Seite. Die Frage, die ich noch nicht geklärt habe ist, ob diese Vorgehensweise mit den TOS von youtube vereinbar ist.

      lg