Topic: website load times

When I use https://testmysite.thinkwithgoogle.com/ it shows it's great for mobile friendliness, but not so much for load times on either mobile or desktops. My homepage djphoto.com only has 5-images in a Juicebox gallery and the images aren't overly large, yet the score for loading is really low at approx 50/100. It shows recommendations, but I'm not sure if these changes can be made without messing up Showkase. Any thoughts on how things can be improved in terms of speed?

Re: website load times

Google's PageSpeed Insights tool can certainly be very helpful but it is also useful to remember that the results are just Google's ideal recommendations for a perfect score which, in a real-world scenario, might not be easy to achieve or make a great deal of difference depending on the web page in question.

Here are a few notes on some of the recommendations.

Optimize images

You could make some of your images smaller in filesize by reducing their quality slightly. This would address this recommendation in the report and should increase the speed score. However, I notice that the images for your homepage's gallery are around 200KiB each and I personally do not think that this is excessive (knowing that Juicebox preloads images as required and does not load all gallery images at once). You are certainly best positioned to know whether you'd want to decrease the filesize of your images. You might be perfectly happy with the filesize and quality of your current images, in which case, you won't need to worry too much about this recommendation.

Enable compression

You could try enabling gzip compression on your web server. Please see this web page for details.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Prioritize visible content

Your Juicebox gallery is above-the-fold and it is absolutely essential that the gallery's JavaScript and CSS files ('juicebox.js' and 'theme.css') are loaded as soon as possible so that the Juicebox gallery can be displayed. In fact, almost everything on your Showkase homepage is above-the-fold so all external resources need to be loaded before the above-the-fold will be rendered correctly. There's really nothing that can be deferred.

Knowing the content of your web page and what files are required for the above-the fold content to be rendered correctly, the two recommendations above can be put into context. They are not truly problems but necessities for the gallery (and, indeed, the layout of your web page) to be displayed correctly.

Leverage browser caching

You could certainly set HTTP cache headers within an .htaccess file if you like. You could allow files to be cached by browsers rather than force browsers to always fetch files fresh from your web server (which is what I expect your web server currently does, being that this recommendation is in the 'should fix' section). Take a look at this web page for more information.

Minify CSS

You could minify Showkase's CSS files (for example using an online CSS minifying tool) but I doubt that it would be a worthwhile venture. I genuinely think that the speed increase that it would give you would be minimal and it would have a couple of drawbacks: the CSS would no longer be easy to read (or, indeed, modify if necessary) and if or when you upgrade Showkase, all the CSS files would be overwritten with un-minified new versions and you'd need to repeat the process all over again.

Minify JavaScript

Showkase already loads minified versions of the jQuery, Modernizr and Juicebox JavaScript files.
There is very little other JavaScript content that could be minified and if you tried to combine all the JavaScript into a single large file, you'd break Juicebox (and it would be difficult to do within Showkase).

I wouldn't worry too much about the tool's speed score. I would be more inclined to just load your website in a browser (which is what visitors to your website will be doing) and make sure that it loads within what you consider to be reasonable amount of time (and then perhaps address some issues if you really feel you need to). You'll likely have a good feel for whether you think your website's loading speed is acceptable or not. When I view your website in a browser, I reckon it loads pretty quickly. The tool just gives you some recommendations to maximize everything in an ideal scenario although, in many cases, not every recommendation is achievable. Don't get me wrong: the recommendations are useful but, even if they are achievable and increase your resulting speed score (by becoming green ticks instead of red crosses), I think the real-life speed increase in a Showkase site would barely be noticeable.

Showkase does not create hugely resource-heavy web pages. It loads only a few JavaScript and CSS files (I've seen some websites loading upwards of 50 JavaScript files and a similar number of CSS files) and, because of this, there is really no need to minify absolutely everything for the sake of a few milliseconds and at the expense of making the code very difficult to read and customize. Anything you do to reduce the number of recommendations in the report would likely be for little real-life gain.

Try entering a few other websites into the tool and you'll probably find similar speeds to that of your own website being reported.
I've just entered 'amazon.com' into the tool (as an example) and it scores similar speed scores to your own website. Being that Amazon probably want as many customers as possible, if the speed of their website was really an issue, I'm sure they would have addressed all the recommendations themselves.

At the end of the day, there are certainly a few things that you can do: check the filesize of your images, enable gzip compression on your server and allow browser caching. Anything else would be difficult to implement within Showkase.

However, I'd be happy that your website has a score of 100/100 for mobile friendliness and loads pretty quickly in real life.

I hope this goes some way to putting your mind at ease.

Edit:
On Google's own site, the full report is immediately available on-screen without needing to be emailed.
According to the report, minifying CSS on your homepage would save 9.6KiB and minifying JavaScript would save 4.2KiB. These are not huge savings that are going to make much of a difference.

Re: website load times

Thank you, your review of these items does help. I will take a pass on the minifying. Please clarify one more thing. Does the report numbers and your experience with gzip compression also appear to be a non significant help in load times?

Thanks for replying so quickly and thoroughly. It is really appreciated!

Re: website load times

To be honest, I've never timed the loading of a Showkase site with and without gzip compression but anything that helps with loading times and is as quick and easy to set up as gzip compression is should probably be implemented. The time saved in downloading a compressed file (over its uncompressed version) will usually more than compensate for the time it takes for a client's browser to decompress the file so using gzip compression will almost always be preferable to not using it (at least for highly compressible content such as HTML).

There are several online gzip compression tests (try this one) which will check whether or not a website has gzip compression enabled. It looks like your website already uses gzip compression.

Re: website load times

I checked that site and yes it does appear that the gzip compression is already active. Not sure how that happened, but as long as it's advantageous I'm good with that.

Once again thank you the direction with this!

Re: website load times

I checked that site and yes it does appear that the gzip compression is already active. Not sure how that happened, but as long as it's advantageous I'm good with that.

It's probably just set up on your web server by default (as it's generally a good idea).

Once again thank you the direction with this!

You're welcome!

Re: website load times

On further investigation, it looks like your web server is using gzip compression for HTML files but not for CSS or JavaScript files (which is probably why Google's PageSpeed Insights report suggests using compression on your website). Try entering the absolute path to a CSS or JavaScript file on your website into this online checker.

Add the code provided on this web page (there are many other web sites that provide similar code) to your root directory's .htaccess file to enable gzip compression for CSS and JavaScript files (as well as HTML files).

That should hopefully speed things up a bit (though maybe not noticeably) and increase your speed score on the PageSpeed Insights report.

Re: website load times

Try entering the absolute path to a CSS or JavaScript file on your website

Can you show me an example of one of the paths you are referring to?

Add the code provided on this web page (there are many other web sites that provide similar code) to your root directory's .htaccess file

If these changes are made to use this compression, will it be lost each time I add photos or make a change to the website or when there is an updated Showkase version?

Re: website load times

Can you show me an example of one of the paths you are referring to?

Sure. Try entering either of the two paths below (an example of a CSS file and a JavaScript file on your website) into the online gzip compression checker and you'll see that gzip compression is not currently enabled on your web server for CSS or JavaScript files.
Sample CSS file path: https://djphoto.com/_themes/kosel/css/styles.css
Sample JavaScript file path: https://djphoto.com/_themes/base/js/jquery-min.js
Online gzip compression checker: https://www.giftofspeed.com/gzip-test/

If these changes are made to use this compression, will it be lost each time I add photos or make a change to the website or when there is an updated Showkase version?

Setting up gzip compression for your website is completely independent of Showkase. Making changes within the Showkase interface or to the Showkase source files will not change whether your website uses gzip compression or not. Using gzip compression is simply a way to minimize the filesize (via lossless compression) when content is passed from your web server to the user's browser (to save bandwidth and also time).

Add the following code to your root directory's .htaccess file and check the CSS and JavaScript files in the online gzip compression checker again.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

You should find that gzip compression is now enabled for CSS and JavaScript files (as well as .htm, .html, .php and .pl files).
(Images are not included in the list of files as they are not as highly compressible as text files and generally do not benefit from gzip compression.)

I hope this helps to clarify things.