Browser-Caching using Expires Headers and Cache-Control headers

[c1972]

I looked at what PageSpeedInsights had to complain about on my site.
( https://developers.google.com/speed/pagespeed/insights/ )

One of the messages was about browser caching. I adjusted that in my htaccess.

Instead of just Cache-Control headers, I now also have Expires headers. I set the storage period for ALL file formats to one year.

This got rid of the message about: efficient cache policy for static content.

I used the following code in the htaccess for this:

# BROWSER CACHING USING EXPIRES HEADERS
# One year for all file types
<IfModule mod_expires.c>
  ExpiresActive On

 # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  # Others
  ExpiresByType application/pdf "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

# BROWSER CACHING USING CACHE-CONTROL HEADERS
# One year for all file types
<ifModule mod_headers.c> 
    <filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp|webm|js|pdf|css|.woff|.woff2)$">
        Header set Cache-Control "max-age=31536000, public"
    </filesMatch>
</ifModule>

If there is nothing standing in the way of this on your part, you might be able to use it like this.

Regards, Christian

[thorsten]

Added these improvements for v3.2.8 for Apache and nginx

[c1972]

You've written about Brotli.
Unfortunately not availlable for my shared hosting so can't test it myself.

But...
if a phpMyFAQ user can use Brotli on their server, the necessary code should already be in his htaccess.

Following additional code should fit:

<IfModule mod_brotli.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript application/json application/x-font-ttf application/vnd.ms-fontobject image/x-icon
</IfModule>

<IfModule mod_headers.c>
# Serve brotli compressed CSS and JS files if they exist
# and the client accepts brotli.
RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
RewriteRule "^(.*)\.(js|css)" "$1\.$2\.br" [QSA]

# Serve correct content types, and prevent double compression.
RewriteRule "\.css\.br$" "-" [T=text/css,E=no-gzip:1]
RewriteRule "\.js\.br$" "-" [T=text/javascript,E=no-gzip:1]

<FilesMatch "(\.js\.br|\.css\.br)$">
# Serve correct encoding type.
Header append Content-Encoding br

# Force proxies to cache brotli &
# non-brotli css/js files separately.
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>

Put below the other stuff

• if mod_brotli is active, it will be used
• otherwise Gzip will be used

Regards Christian

[thorsten]

Yes, I ditched Brotli as it's not very common at the usual web hosting provider. With the Apache/nginx compression the frontend file shrinks from 2 MB to 335 kB, I think that's quite nice.

[c1972]

If we continue like this, we will probably get a speeding ticket for to fast website loading... 😂

[thorsten]

There's not much room for improvement:

[c1972]

I would like to display the same file for each of my 5 categories to save loading time.

Unfortunately, this is not possible ☹️ because the system saves the images as follows:

• category-1-de
• category-2-de
• category-3-de
• category-4-de
• category-5-de

Please provide a way to also display the same file. 🙂

Regards, Christian

[thorsten]

This is a very special use case, isn't it? :-)
I would suggest to change the entry in the table "faqcategories" manually.

[c1972]

Nice! That works perfect. 🙂

[c1972]

I suggest a short info about this in the docs:

If you display category images, they are saved as separate files in /images/ as follows:

• category-1-de.ext
• category-2-de.ext
• category-3-de.ext
• etc.

For SEO reasons, you may want to display the exact same file as a background image multiple times. To do this, simply enter the same file name multiple times in the database, faqcategories table, image field.

Regards Christian

[thorsten]

-> if you like you can provide a documentation fix for that as PR :-)

[c1972]

OK that's done.

Regarding the categories, I noticed the following:

• The category description should be taken as meta description for that single category page.
• As of now instead [Edit configuration, Description] is taken, which results in all categories having the same misleading meta desc. 😞😞😞

Regards Christian

[thorsten]

This is a bug that's already fixed