Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: Bilder in modernen Formaten bereitstellen & Cachen

  1. #1
    Contao-Nutzer
    Registriert seit
    01.12.2016.
    Beiträge
    181

    Standard Bilder in modernen Formaten bereitstellen & Cachen

    Guten Morgen,

    ich optimiere grundsätzlich durch passende Größe und Komprimierung alle Bilder auf meiner Website (bisherige Formate: .jpg & .png). Googles PageSpeed insights schlägt mir jedoch die Verwendung von modernen Formaten vor (WebP etc.) - komischerweise nur für 3 Bilder.

    Da nicht alle Browser z.B. WebP erkennen, stellt sich mir die Frage, wie ich das nun angehen soll. Gibt es eine Möglichkeit z.B. jpg darzustellen, wenn WebP nicht geladen werden kann?

    Des Weiteren wirft PageSpeed Insights folgende Meldung aus: "Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen 17 Ressourcen gefunden".

    Ich habe dazu bereits die .htaccess angepasst, jedoch ohne sichtbaren Erfolg:

    HTML-Code:
    ##
    <IfModule mod_deflate.c>
      <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/javascript
        AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
        AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
        AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
      </IfModule>
    </IfModule>
    
    # Expires headers (for better cache control)
    # @see https://github.com/h5bp/html5-boilerplate
    ##
    <IfModule mod_expires.c>
      ExpiresActive on
      ##
      # Productional website
      ##
      ExpiresByType text/cache-manifest           "access plus 0 seconds"
      ExpiresByType text/html                     "access plus 0 seconds"
      ExpiresByType text/xml                      "access plus 0 seconds"
      ExpiresByType application/xml               "access plus 0 seconds"
      ExpiresByType application/json              "access plus 0 seconds"
      ExpiresByType application/rss+xml           "access plus 1 hour"
      ExpiresByType application/atom+xml          "access plus 1 hour"
      ExpiresByType image/gif                     "access plus 1 month"
      ExpiresByType image/png                     "access plus 1 month"
      ExpiresByType image/jpeg                    "access plus 1 month"
      ExpiresByType image/x-icon                  "access plus 1 month"
      ExpiresByType video/ogg                     "access plus 1 month"
      ExpiresByType audio/ogg                     "access plus 1 month"
      ExpiresByType video/mp4                     "access plus 1 month"
      ExpiresByType video/webm                    "access plus 1 month"
      ExpiresByType text/x-component              "access plus 1 month"
      ExpiresByType text/plain                    "access plus 1 month"
      ExpiresByType text/javascript               "access plus 1 month"
      ExpiresByType application/x-font-ttf        "access plus 1 month"
      ExpiresByType font/opentype                 "access plus 1 month"
      ExpiresByType application/x-font-woff       "access plus 1 month"
      ExpiresByType image/svg+xml                 "access plus 1 month"
      ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
      ExpiresByType text/css                      "access plus 1 year"
      ExpiresByType application/javascript        "access plus 1 year"
    
    </IfModule>
    Wäre über Hilfe dankbar, damit ich in den grünen Bereich für meine Mobilversion komme (Aktuell 80 Pkte. Mobil & 97 Pkte. Desktop).

    Gruß Chris

  2. #2
    Contao-Nutzer Avatar von JamesdK
    Registriert seit
    02.12.2009.
    Ort
    Leverkusen
    Beiträge
    162
    Partner-ID
    8753

    Standard

    Du kannst das webp-Format mit Fallback-Lösung zuverlässig über das picture-Element realisieren:
    HTML-Code:
    <picture>
      <source srcset="images/logo.webp" type="image/webp">
      <img src="images/logo.png" id="logo" alt="IT Nota Logo example">
    </picture>
    Quelle: https://www.itnota.com/serve-webp-im...rmat-fallback/

  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.897
    Partner-ID
    10107

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •