contao icon indicating copy to clipboard operation
contao copied to clipboard

Add new page speed rules to the .htaccess file

Open qzminski opened this issue 1 year ago • 8 comments

This pull request is a proposal to add several new page speed rules to the .htaccess file:

  1. Do not cache the source map files.
  2. Support the Brotli compression, if available.
  3. Support the Gzip compression, if available.

Regarding the compression, it will take a list of the MIME types (see table below) and compress them using Brotli or Gzip depending on which one is available. In addition to that, we have to set the Vary: Accept-Encoding header to avoid problems with proxies which might not cache the compressed and non-compressed files separately.

There are likely some of MIME types we could (like application/rdf+xml) but I would like to hear your opinions on the full list first.

MIME type File extension
application/atom+xml .atom
application/javascript .js
application/json .json
application/ld+json .jsonld
application/manifest+json .webmanifest
application/rdf+xml .rdf
application/rss+xml .rss
application/schema+json .json
application/geo+json .geojson
application/vnd.ms-fontobject .eot
application/wasm .wasm
application/x-font-ttf .ttf
application/x-javascript .js
application/x-web-app-manifest+json .webapp
application/xhtml+xml .xhtml, .xht
application/xml .xml
font/eot .eot
font/opentype .otf
font/otf .otf
font/ttf .ttf
font/woff2 .woff2
image/bmp .bmp
image/svg+xml .svg
image/vnd.microsoft.icon .ico
image/x-icon .ico
text/cache-manifest .appcache, .manifest
text/calendar .ics
text/css .css
text/html .html, .htm
text/javascript .js
text/plain .txt
text/markdown .md
text/vcard .vcf
text/vnd.rim.location.xloc .xloc
text/vtt .vtt
text/x-component .htc
text/x-cross-domain-policy .xml, .xdr
text/xml .xml

The list of MIME types is mostly a courtesy of HTML5 Boilerplate.

qzminski avatar Jun 28 '23 09:06 qzminski

Since we are adding more defaults for "page speed" optimisation, shouldn't we also add things like

##
# Set the proper MIME types
# @see https://github.com/h5bp/html5-boilerplate
##
<IfModule mod_mime.c>
  AddType application/javascript              js jsonp
  AddType application/json                    json
  AddType audio/ogg                           oga ogg
  AddType audio/mp4                           m4a f4a f4b
  AddType video/ogg                           ogv
  AddType video/mp4                           mp4 m4v f4v f4p
  AddType video/webm                          webm
  AddType video/x-flv                         flv
  AddType image/svg+xml                       svg svgz
  AddEncoding gzip                            svgz
  AddType application/vnd.ms-fontobject       eot
  AddType application/x-font-ttf              ttf ttc
  AddType font/opentype                       otf
  AddType application/x-font-woff             woff woff2
  AddType image/x-icon                        ico
  AddType image/webp                          webp
  AddType text/cache-manifest                 appcache manifest
  AddType text/x-component                    htc
  AddType application/xml                     rss atom xml rdf
  AddType application/x-web-app-manifest+json webapp
  AddType text/x-vcard                        vcf
  AddType application/x-shockwave-flash       swf
</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/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/webp                    "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 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>

Or a more up to date version from https://github.com/h5bp/server-configs-apache/blob/main/dist/.htaccess

fritzmg avatar Jun 28 '23 09:06 fritzmg

Since we are adding more defaults for "page speed" optimisation, shouldn't we also add things like

+1 for the AddTypes.

But the ExpiresByType are too broad (and opinionated) IMO. We already cache /assets and /bundles for 1 year, not sure if there are good defaults we could agree on for /files.

ausi avatar Jun 28 '23 09:06 ausi

Good idea @fritzmg , I have added them in a modern version from: https://github.com/h5bp/server-configs-apache/blob/main/dist/.htaccess#L131

qzminski avatar Jun 28 '23 10:06 qzminski

But the ExpiresByType are too broad (and opinionated) IMO.

Agreed, but most people will likely want to implement what the Google Page Speed analyser tells them anway. h5bp's defaults look sensible to me: https://github.com/h5bp/server-configs-apache/blob/e7f9bd982006dbc9c10ca38f3884065d05f3c941/dist/.htaccess#L1091-L1143

fritzmg avatar Jun 28 '23 10:06 fritzmg

@fritzmg woopsy, you are right. I have moved them back now 😅

qzminski avatar Jun 28 '23 10:06 qzminski

AFAIR we have agreed on not adding any optimizations to the .htaccess file, because they are opinionated and might conflict with the server configuration. We should only provide the minimum configuration to set up URL rewriting and leave everything else up to the server admin. This is also how Symfony does it in their Apache pack.

leofeyer avatar Jun 29 '23 09:06 leofeyer

AFAIR we have agreed on not adding any optimizations to the .htaccess file, ... We should only provide the minimum configuration ...

Nevertheless, the use or at least its background/information would be helpful for users. Possibly then something for the documentation?

fkaminski avatar Jun 29 '23 09:06 fkaminski

AFAIR we have agreed on not adding any optimizations to the .htaccess file, because they are opinionated and might conflict with the server configuration.

I agree that we should try not to add opinionated rules. But the current additions in this PR (correct mime types, brotli, gzip and no cache for .map files) are straightforward enough that I think they are worth adding. We also added asset caching in https://github.com/contao/manager-bundle/pull/73 for similar reasons. Don’t know about the conflict with the server configuration part though.

ausi avatar Jun 29 '23 11:06 ausi