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.
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
10th Step: Image map can help
How did I speed up my loading?
- 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
- 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.
11th Step, upgrade to a quicker web hosting provider
Summary
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.
