Site Page Load Speed Optimisation

[lloyd_borrett]

G'day,

So over the past few days I've been having a go at improving page load times. I've mostly used https://gtmetrix.com to do the checking as improvements have been made. So far I've managed to progress from an E grade to a B grade, which is great.

Most of the improvements have come by changing some setting in the .htaccess file.

I was already using compression, so no changes there.

# ----------------------------------------------------------------------
# | Compression                                                        |
# ----------------------------------------------------------------------

<IfModule mod_deflate.c>

    # Force compression for mangled `Accept-Encoding` request headers
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    # Compress all output labeled with one of the following media types.
    #
    # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"
    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    # Map the following filename extensions to the specified
    # encoding type in order to make Apache serve the file types
    # with the appropriate `Content-Encoding` response header
    # (do note that this will NOT make Apache compress them!).
    #
    # If these files types would be served without an appropriate
    # `Content-Enable` response header, client applications (e.g.:
    # browsers) wouldn't know that they first need to uncompress
    # the response, and thus, wouldn't be able to understand the
    # content.
    #
    # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

</IfModule>

Using Keep Alive made a significant difference.

<ifModule mod_headers.c>
  Header set Connection keep-alive
</ifModule>

Implementing browser caching also improved things a lot.

##################
## Caching Improvements
## Requires mod_header and mod_deflate to be enabled within Apache
##################
<IfModule mod_headers.c>
  Header unset Pragma
  FileETag None
  Header unset ETag
  #Header set Cache-Control "no-transform"
  <FilesMatch "(?i).*\.(ico|jpg|jpeg|gif|webp|png|otf|swf|flv|ttf|woff|eot|svg|pdf)$">
    Header set Cache-control "max-age=864000, public, must-revalidate"
  </FilesMatch>
  <FilesMatch "(?i).*\.(html|htm|xml|txt|xsl)$">
    Header set Cache-control "max-age=7200, must-revalidate"
  </FilesMatch>
  <FilesMatch "(?i)\.(js|css)$">
    Header set Cache-control "max-age=604800, public, must-revalidate"
  </FilesMatch>
</IfModule>
<IfModule mod_deflate.c>
  <FilesMatch "(?i)\.(js|css)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

##################
## Expires Caching
## Requires mod_expires to be enabled within Apache
##################
<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresDefault A300
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A2592000
  ExpiresByType image/jpeg A2592000
  ExpiresByType image/png A2592000
  ExpiresByType image/x-icon A86400
  ExpiresByType text/css A604800
  ExpiresByType text/html A300
  ExpiresByType application/pdf A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType video/x-flv A604800
</ifmodule>

But I'm still stuck on a few things. For example, GTmetrix reports...

Specify a cache validator     
The following resources are missing a cache validator. Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation for the following resources:

    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_buy_now.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_search.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/facebook.png
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/google-plus.png
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-bc.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-flag.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-mc.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-visa.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/pinterest.png
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/twitter-2.png
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/logo.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/rss.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/stars_5.gif
    https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/submenu.gif

I don't get why the browser caching is working for all of the other images, but not these ones. Any ideas?

Also I'm being told I need to optimise some images. IM4 is being used to generate 100x100 small images on the site. But I'm being told these files could be 10% to 20% smaller.

Best regards, Lloyd Borrett.