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
