10 Steps to improve your photography (and not only) website performance


Sometime it is a good idea to go back to your website and check the performance. It is like doing a step backward, or taking a pause, to make 2 steps forward. I was checking my website and it was getting too slow. I could not understand why. It is a photo blog and, by its definition, there are lots of images, however newspapers online load up almost immediately.

I started digging on the website performance and I found out that Google has new rules and it rates websites not only on content but also on loading speed. Being visible on the internet is not an easy task and being slow is today considered to be a bad indicator not only for your visitors but also for the search engines

I spent few days on my website and, well, I found out so many things I could actually improve. Not an easy task in few cases, but the end result is quite amazing. I have reduced the loading time by almost 80% and more, in some cases. All the changes below may take one or two days to propagate, especially for caching and CDN (see later for more info), so don’t be stressed just yet if the performance does not improve straight away, it will.

Most important: many of the 10 steps can be applied to any type of website, not only photography

1st Step: check your speed

This is the starting point. Understand how quick is your website. It may be great if accessing from Australia but very slow from Europe or US. The tools below are just great. They allow to test your environment from lots of countries. Moreover they tell you where the problem could be and they even give you suggestions where to optimize. They are all good, I like how exhaustive is WebPageTest.




Site 24×7

2nd Step: Set up a test environment

Clone your website on another test directory and do all of your tests on it, before moving the fantastic plugin, tools or magic fix to your production environment. Sometime there is no way back. In other cases you create outages to your website, maybe just 5 minutes down, but that could have been the 5 minutes when a gallery was looking at your work.

If you cannot set up a test environment, do a backup of your website before doing any dramatic change. This is a suggestion that applies to any work you do, not only an improvement of your website performance

3rd Step: make sure to use photos with reasonable size

Do not upload  huge files on your web pages. Keep photos at a reasonable amount. There is an high possibility that your website is visited through a mobile network, with a phone or a tablet. Although your website may look great on ADSL or cable, it might be slow on a mobile network.

My experience here is on a photo blog. Each page has at least 7-10 photos. I always try to keep my photos under 100K (see next step for more suggestions). If you need to show high quality photos (1M or over), post you lighter photo (under 100K) and a link to the higher quality one, always with the dimension between brackets.

4th Step: optimize your photo and convert them to progressive

Having a progressive photo means that your website gets loaded gradually, you start seeing the photo in low quality and straight away in high quality. The website visitor perceives that the website is really responsive and he/she can start surfing through

If you use Lightroom, install the free plugin JPEGOptimizer. It is a great software that allows you not only to save the file as progressive but also to compress (lossless) your JPEG file. Do not think you will experience a huge compression (JPEG is compressed by its nature), but 5-10% is anyway welcome.

SmushIt (by Yahoo!) is another way to compress photos and, if you use WordPress for your website, there is a great plugin to compress automatically any loaded photo

You can also use PhotoShop with a batch job and there are many other external free softwares

5th Step: avoid using references to external images

Load the photos on your website and build the reference to there. If you link your photos to an external provider there will be lots of requests to somebody else server that may slowdown the loading of your web page.

Avoid importing photos from Flickr. Add a link to you Flickr page. Yahoo has surely responsive websites however there are lots of IP requests back and forward that may delay your website

6th Step: limit references to external services

It may be interesting to see on your web site how many likes has the Facebook page, or the twitter conversation. I had a similar functionality on mine. I took everything away. I experienced that in some cases, the request to Facebook was taking ages and it was slowing down dramatically the loading time of my server.

At the end I have left just icons to my social environments. I am sure that anybody interested in that would just click through.

7th Step: use a CDN (Content Delivery Network)

The easiest and quickest way to explain a CDN is that you basically distribute your website across the world. Most of a website is static and does not change (old posts or portfolio), this can be cached in servers around the world. The user does not have to go to your physical website to download this content, but just to the local server, reducing the latency time.

The CDN provider keeps caching all the new content; in this way your website visitor will stay locally (there will be still data coming from your website, however it will be a smaller and smaller percentage). To have a more exhaustive explanation of how a CDN works, read the article on Wikipedia.
There are many CDN providers, some of them have also a free account. I am using Incapsula and I am happy with it.

Setting up a CDN can be tricky, as you need to change DNS and mail servers. I will write a tutorial on it (leave a comment in case you need any suggestion)

8th Step: Decrease and delete your plugins on WordPress

WordPress is a great platform to build a website. It is widely used, by almost 100% of the photographers that have a photo website, portfolio or photoblog.

There are infinite ways to make your site very cool. There are thousands of plugins out there that do a great work. Just pay attention that the more you install the slower will become your website. This is a generic rule of course. I always suggest that every time you install a new plugin you should check the speed of your website before and after the installation, you may have a nasty surprise. A plugin is another piece of software you add to your website. In most cases this is well written, however in few of them you may have a not-optimized portion of code that add few seconds to your website loading time (I experienced that)

9th Step: Use a caching engine to generate static file in WordPress

I am sure you wondered why some websites are so quick to load, although they look full of images and more. One of the reason is that they are static (written in any web code to stay there).
WordPress, by its nature, is dynamic and your webserver will have to process the WordPress PHP scripts every time a user try to access your website.
There are some great plugin that generate static html from the dynamic WordPress blog. Again, not all of your website will be made static, however a good part of it and this will decrease the latency time.
I am using WP SuperCache, but others are available as W3 Total Cache. I had to configure just few parameters in WP SuperCache and I was ready to go. That was the key factor for me, I did not want to invest much time in configuration (and I could do possibly something wrong). The other plugins looked more complicated, but that is just my personal opinion.
IMPORTANT: if you are testing your website and/or you adding/changing images, background etc you should either clear the cache or deactivate the plugin otherwise what you see is what you cached and not what you just changed

10th Step: Image map can help

This is a bit of a last touch, however it may help too. If you check on the right side of this page you see all the icons for the social environments, the likes of Facebook, 500px, G+ etc.
Originally, I just added a jpg files for each icon (around 5K each) with the link to my social page. I decided instead to generate an image map (just one gif file at 15K) with links based on the area of the image, delimited based on the icon. You may think it is an hard work, but not really thanks to a website called Image Maps

How did I speed up my loading?

  1. less KB transferred, 9 icons at 5KB each is 45KB instead of 15KB. This is not a great deal, not worth the work I must say, however look at the next point
  2. one file to download instead of 9. As a generic rule, the less files you send, the better it is. As an example, I experienced in some cases that the download would be sequential and it took over a second.
How many times I will change this icon image, either adding or deleting social environments, not often, maybe twice a year. In this case the image map works great I believe
One second here and one second there and suddenly my website is quicker

11th Step, upgrade to a quicker web hosting provider

This step was not actually in the original list but yes, you get what you pay for. The cheaper you go the more oversubscribed is your provider. This will slowdown the requests to your server. The ping latency time is not an indicator of how good is your provider, that tells how quickly you reach the first server, not the processing time of the servers


I tried to build this guide based on my experience. Any suggestion and comment is more than welcome of course. Some of the steps work great in any type of website, others are more WordPress related, a fantastic engine for photography websites and not only.

Keep your performance under control. Test your website every month or every major change.

The less the better sometime, do not add too many plugins.

Caching helps and it is one of the most important improvment

Stay tuned and subscribe to the monthly email to avoid missing any upcoming article, great photos, interviews and much more.


Related Post

Stefano Ferro
Stefano is a cycling, movie and life style photographer with a big love for landscape & travel photography. When in Melbourne, his hometown, you will see him cycling around at sunset or sunrise looking for the best spot for a photo of this beautiful city. It is quite amazing how much photography gear he can pack on his bike :o

No Comments Yet.

Leave a Reply

Your email address will not be published. Required fields are marked *