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.

[lloyd_borrett]

G'day,

Image Handler 4 is being used to generate the 100x100 small images on the site. But I'm being told these files could be 10% to 20% smaller.

I'm using the default IH small image compression quality setting of 85, thinking smarter people than me must have worked out that this is an optimal setting. But the page test results seem to suggest otherwise.

Have any of you come up with a small image compression quality setting that's an optimal balance between file size and image quality?

Best regards, Lloyd Borrett.

[kobra]

What are your beginning image file sizes on the average?

[gilby]

Ooops, sorry disregard...

[lloyd_borrett]

What are your beginning image file sizes on the average?

G'day,

For the shop main page (i.e. https://www.scubadoctor.com.au/diveshop/) I get...

Optimizing the following images could reduce their size by 12.0KiB (12% reduction).

    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/logo.gif could save 1.1KiB (15% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-bc.gif could save 1.0KiB (52% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/pinterest.png could save 910B (57% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/images/australian-owned.jpg could save 847B (8% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/images/flat-rate-shipping.jpg could save 835B (8% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/images/everyday-low-prices-guaranteed.jpg could save 833B (6% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/1/15bb7f1d1d310485563ca05c5be579e7.image.100x100.jpg could save 462B (21% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/7/7cbda932cce6aa6224436cd22c8f2a4e.image.100x100.jpg could save 462B (21% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/0/0a0f2c6687ba899120f1858279fcfaf9.image.100x100.jpg could save 450B (13% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/1/1fd2e4dda00ae6c21b2198b7fc9131a2.image.100x100.jpg could save 450B (20% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/9/97e9fa0124e8c103fe3488abc3ac2ead.image.100x100.jpg could save 444B (14% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/4/4f7a2f3f2ef23bc2054b502c25275134.image.100x100.jpg could save 433B (10% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/0/05559314d632725e64a8480ddfcc7198.image.100x100.jpg could save 428B (7% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/7/7886d3e6260c46e4609664515797a7b6.image.100x100.jpg could save 419B (14% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/2/248d4594b0bc2f6f03df33ad0d6a524b.image.100x100.jpg could save 412B (19% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/5/5b8c7c745ff018010d635382bf96a586.image.100x100.jpg could save 409B (12% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/b/b70b7b8407c3dfa829c72efd77af8fc2.image.100x100.jpg could save 400B (9% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/d/dad34f16390aa4cf8a69dca9590f9e31.image.100x100.jpg could save 385B (15% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/1/192785af5b80991eabd62904a0aae0e3.image.100x100.jpg could save 373B (11% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/b/b8b75a60db726fb0905374ea08750857.image.100x100.jpg could save 356B (12% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-flag.gif could save 255B (17% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/facebook.png could save 119B (22% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-visa.gif could save 108B (9% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/twitter-2.png could save 94B (14% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-mc.gif could save 92B (7% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_search.gif could save 49B (5% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/google-plus.png could save 49B (9% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_buy_now.gif could save 28B (3% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/rss.gif could save 15B (5% reduction).

For an example product page (i.e. ) I get...

Optimizing the following images could reduce their size by 16.0KiB (15% reduction).

    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/logo.gif could save 1.1KiB (15% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-bc.gif could save 1.0KiB (52% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/pinterest.png could save 910B (57% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/a/a42926b866d28ff56ab18ffc2c1c4406.image.300x300.jpg could save 798B (5% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/images/manufacturers/brand_cressi.png could save 796B (46% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/d/dfcf84fc3fe63854e82dd7f7fa7b83e4.image.100x100.jpg could save 451B (18% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/0/0a0f2c6687ba899120f1858279fcfaf9.image.100x100.jpg could save 450B (13% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/c/c5e3446ba5294c8d1d966804e978ee4e.image.80x80.jpg could save 434B (21% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/0/05559314d632725e64a8480ddfcc7198.image.100x100.jpg could save 428B (7% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/4/4c15d8af2f6d84d865b4bc34d87a3487.image.100x100.jpg could save 421B (18% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/a/a0e8d5906ea51ea3c82064b98ee1dd74.image.80x80.jpg could save 421B (19% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/7/7349fe2e10b311ee9a069f66a6ff2a93.image.80x80.jpg could save 419B (20% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/8/8e14bdfd599387ee617fb190560aeac4.image.80x80.jpg could save 418B (16% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/0/0864f68723b477eca92705b0066522e6.image.80x80.jpg could save 415B (22% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/a/a42926b866d28ff56ab18ffc2c1c4406.image.80x80.jpg could save 415B (16% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/c/c89341820a563261c2f889ed4b75ccf8.image.80x80.jpg could save 414B (21% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/e/eae3669f854010bd4bd0deb627c1858e.image.100x100.jpg could save 414B (18% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/9/976a5af4fea69ba418d41a2767e9604b.image.80x80.jpg could save 413B (20% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/1/1c56a34ac98157e3cdefc63a26743e47.image.50x44.jpg could save 407B (26% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/8/8a1784a271509d085eac8087c21714a0.image.80x80.jpg could save 407B (21% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/9/95d2c469ad4c54dde054a24701d312f8.image.80x80.jpg could save 407B (21% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/c/c53941812fe16eebad0d0b6272881165.image.47x100.jpg could save 407B (18% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/9/9f93303da38ebd5d0f70bf184adb0cc9.image.100x100.jpg could save 406B (18% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/0/0299bcd7f0ba22b67a826aad55b76726.image.50x50.jpg could save 404B (25% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/9/9547d123d2afe8a32b9a40aede21f174.image.79x100.jpg could save 404B (19% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/3/3539b36eff4e1a50688ed60c1274551d.image.100x100.jpg could save 401B (13% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/6/6e5adb6a2e9e0de2e2682205a2fe1f49.image.80x80.jpg could save 397B (15% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/3/3a3ce65e445bc837aab47a77fcff886a.image.58x100.jpg could save 396B (17% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/bmz_cache/4/4d61adffa574c7ec6d742e31476631f5.image.80x80.jpg could save 380B (17% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/box_products_notifications.gif could save 273B (15% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-flag.gif could save 255B (17% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_write_review.gif could save 177B (11% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_in_cart.gif could save 147B (9% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/box_write_review.gif could save 136B (9% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/facebook.png could save 119B (22% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-visa.gif could save 108B (9% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/twitter-2.png could save 94B (14% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/icon-mc.gif could save 92B (7% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/prev_button.png could save 63B (13% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_search.gif could save 49B (5% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/icons/google-plus.png could save 49B (9% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_return_to_product_list.gif could save 45B (5% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_next.gif could save 42B (4% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_prev.gif could save 40B (4% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/next_button.png could save 36B (8% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/buttons/english/button_buy_now.gif could save 28B (3% reduction).
    Losslessly compressing https://www.scubadoctor.com.au/diveshop/includes/templates/scuba2/images/rss.gif could save 15B (5% reduction).

Best regards, Lloyd Borrett.

[kobra]

Lloyd,
I asked "What are your beginning image file sizes on the average?"

Not what some optimization app is reporting...

I was asking what size your initial images are before IH handles them

[lloyd_borrett]

My bad. I'm trying to standardise on original sizes of 1000x1000, but some aren't quite so big, especially a heap of legacy ones which are less than 300x300. I'm using 300x300 for the product image displayed on a product page and 100x100 for small images. I find it strange that the optimisation app is suggesting those small images generated by IH are 10% to 20% too big.

[kobra]

Actually wanted to know starting file byte size not dimensions
Byte size/file size is what the apps are reporting to you as being able to minimize

[lloyd_borrett]

Actually wanted to know starting file byte size not dimensions
Byte size/file size is what the apps are reporting to you as being able to minimize

Okay, I'll try to be more specific. I'm starting with say a set of five jpg images for a given product. Each jpg file is a 1000x1000 sized image of typically between 70Kb to 120Kb in file size. The images have been saved from Adobe PhotoShop, using the save for web option, optimised, with an image quality of 60. (I'm now thinking of starting to use the progressive option also.)

IH4 creates the 300x300 JPG image that's used as the main/medium image on a product page from the primary large image file.

IH4 also creates the 100x100 thumbnail/small image files for the product and the other products that are displayed on the page (i.e. related products, Customers who bought this etc.) using the default IH small image compression quality setting of 85.

The site checking optimistation app is suggesting that the 100x100 small images created by IH4 could typically be 10% to 20% smaller.

So how do we achieve this extra image size saving?

Is it just a matter of using a different IH small image compression quality setting? Has anyone out there done any experiments with the compression setting in IH4 and worked out a better balance between file size and image quality for the 100x100 small images?

Or, is it that this checking optimisation app just thinks that the images IH4 creates can be further optimised regardless of the compression settings used? (I'm thinking that this is probably the case.)

Best regards, Lloyd Borrett.

[gilby]

Or, is it that this checking optimisation app just thinks that the images IH4 creates can be further optimised regardless of the compression settings used? (I'm thinking that this is probably the case.)

Might be just this app..
Google's version seems to think that these image sizes are ok
https://developers.google.com/speed/pagespeed/insights/