I’m such a geek, I’m excited at the prospect of writing this section, well technically I’m excited at the prospect of writing every section otherwise why am I doing it?
Optimizing site speed is part of a wealth of skills that come together to form Technical SEO – the name given to the optimization of on-site elements in an SEO campaign.
It’s something I’ve become borderline addicted to and something I recommend you do too.
As alluded to during the image section, Google has said that site speed is important to your rankings and given time I imagine will become more and more important.
Speed is an issue for everyone visiting your site, from people in offices with desktops and laptops attached to hugely fast internet connections, to mobile users with slow or limited data plans. Everyone wants a fast web experience.
With all the digital noise these days, from social media etc. we have less and less time to spare – not to mention less patience! We want the information right now, not in 25 seconds.
Mobile users are being more and more prominent (Since 2017, they have been the majority of my traffic!) – It’s something we can’t overlook. Google has also said that they consider mobile devices first nowadays when considering ranking and indexing sites.
One of the biggest considerations especially for mobile devices, but which has benefits for desktop browsers too – is site speed.
Lighthouse Audit for photographers
Google has gone ahead and given us a map to achieve success in this area by way of the Lighthouse tool, which bundled in their web browser Chrome, its a tool I use in site audits and a tool I think everyone should be familiar with.
They also offer a largely similar tool at:
It doesn’t go into quite as much granular detail as the Lighthouse Tool in Chrome, but it’s a bit more user-friendly.
Lighthouse is accessed by opening your site in Chrome, right clicking and hitting ‘Inspect’, a wonderfully useful panel full of developer tools opens up.
Don’t panic, there’s nothing you can do in this page to break your site.
Lots of what you see here deals with the code that actually makes up your site, the stuff the browser interprets to make things look pretty.
Yes, it’s technical, but not something you need to worry about.
The bit we’re interested in is the ‘Audits’ Panel, neatly tucked at the top of the develop panel (or potentially under the little arrow drop down, if your window is too narrow)
Open up the audits panel and make sure it looks like this –
Once you run this audit, it will spit out a huge range of suggestions to improve your site.
Remember this tool is provided by Google – if they’re saying it’s important to do X, Y & Z – you can be reasonably confident that achieving good scores here will reflect in the search rankings – if not now, then eventually.
Did I mention I was a bit addicted to this? I think that’s reflected in my sites scores below –
And for comparison, the results of another photographer, details removed, because I’m not interested in bashing anybody.
Now you can see there’s a bit of a difference. Granted their SEO score is perfect – but they’ve been working with an SEO company, so I’d like to think they should be.
But the other scores aren’t amazing.
Time to Interactive is a particular one to pay attention to, as this is the time you’re making a user wait before they can do anything on your site.
Another photographer site yields these results –
Now, this site is from someone I know to be more advanced at SEO and the technical side of website management – so we can see gains over the first example, much faster time to interactive, for example – but still room for improvement.
For completeness, both sites are WordPress sites, one using a theme from a company popular amongst wedding photographers theme and the other a more generic theme, customised to their needs.
To explain the various numbers –
Performance takes into account how quickly a site displays, how soon it is usable upon loading and how much data it actually forces users to download. It offers opportunities within the code to improve this, but we’ll dive deep later.
Accessibility looks at how well optimized your site is for visually impaired users accessing it with a screen reader, or any other user that has a non-standard way of accessing their computer. This takes into account things like good headings, alt text on images, titles on links. https://developers.google.com/web/fundamentals/accessibility/
Best practices are just that, sticking to guidelines published by Google and the W3C web standards consortium to ensure things are done properly
SEO discusses the ways in which the structure of your site can be improved to potentially rank better in search engine rankings.
Now I’m not picking on this other photographer, it’s pretty standard fare for a photography website to be pretty heavy as far as images and data go, something that will no doubt hurt the performance. But there are various opportunities that can be taken to improve things, as is indicated by my own site achieving perfect 100s – not something I was aiming for, I would have been satisfied anywhere north of the 80s! – But I’ll happily take the perfect score.
What do these results mean?
Most photographers sites will have a fair few negative comments or improvement suggestions from either the page speed insights or the Lighthouse tool – things like these are pretty common:
Much like the results above, I commonly see –
Properly Size Images – This is the main one for photographers, it’s important to make sure you actually upload the right size images for your theme. I can’t tell you what you need without looking at your site, but my site, for example, is designed for images 1800 pixels wide, so that’s what I upload.
A lot of photographers upload dramatically bigger or even full size, straight out of camera images and let their site handle the resizes – this is incredibly wasteful and will never achieve as good a results as you doing it yourself, either using specific lightroom export settings or Photoshop actions.
Efficiently Encode Images – Another big one for photographers, this deals with properly compressing files so as not to waste bandwidth unnecessarily. See the section on compressing images for more info and some tips for improving this.
Serve images in next-gen formats – Not something I worry about at the moment, Google is pushing a few other image formats for the future, notably WebP, JPEG 2000 and JPEG XR. In my opinion, they’re not supported enough to warrant worrying about (yet!)
WebP might take off, but is currently only supported by Google’s official browser Chrome.
Fortunately, you can get WordPress plugins that will handle the encoding of these next-generation image formats for you if they take off.
Defer offscreen images – this basically means, ‘let your users download images once they need them’ – rather than all at once as the page loads.
Again lots of WordPress plugins to do this for you. WP-Rocket a WordPress caching plugin I’ll discuss later can do this out of the box, but there are lots of options.
Eliminate Render Blocking Resources – this is a ‘fun’ one, I’ve spent ages refining the best techniques to combat this in the quest for perfect scores.
Essentially it’s telling you that some stuff needs to happen on your site, before the page even loads.
During this time your users are looking at a blank screen, keep them in this state for too long and they’ll surely leave.
The easiest solution is to get them loading at the end of your page – but this can cause other issues that could have an entire post to it. WP-Rocket has options to handle this, and I also have a few other techniques up my sleeve.
There’s no one fix for this issue, but If it’s something troubling your results – I’d be happy to work with you to find the solution.
Reduce Server Response Time (TTFB) – OK, easy fix for this one, get better hosting. (TTFB means ‘time to first byte’ – basically, how quickly before anything happens)
So many photographers are hosting their sites with the cheapest host they can find, understandable in the early days of their business – wanting to save some cash. But image heavy sites and sites with lots of bells and whistles, animations etc. and sites with high traffic need some powerful servers behind them.
Slow server response is often a sign of less powerful hosting, or hosting that is shared with many other users.
My site used to be on a server with over 1000 other sites, resulting in low speed and instability during times of high traffic. I moved it to an (almost) dedicated server and performance went up 10x. Easy win – albeit at the cost of some monies.
Defer unused CSS – Basically, don’t have messy code and make people download things they don’t need. This is usually due to either a badly coded theme or a theme that has been modified many times over the years without removing or tidying the unrequired bits.
Not as big a deal as the above points really, because the code is minuscule in comparison to images. But every little helps.
Again, WP-rocket has something to help this out.
Phew! So what can we take from all that?
Those are the main things that I see when auditing photographers sites. The site I’ve just tested forced people to download over 18 megabytes of data, just to see the page.
Not something they’ll be thanked for if they’re on a slow connection or have limited bandwidth/data allowances.
The total time for the site to load was 65 seconds.
Let that sink in, SIXTY FIVE SECONDS!
Over one minute, before the site was done.
That’s in the realms of ‘I’ll open this and pop off to make a cup of tea while it loads’.
If you’re making people wait that long to see your content, you’ve already lost the battle.
Ideally, you want some content to appear within a second. Then load the rest while they’re looking at that first seconds worth of content.
But how can we achieve such mastery of speed?
Caching is a big thing. To understand caching, you need to understand how your site works (a bit, at least!)
When someone visits your site – I’m assuming a WordPress, as it’s so common with photographers – but the process is similar for all content management systems. This (simplified) chain of events happens –
- Your server gets the ‘request’.
- WordPress starts up the bits it needs to run.
- WordPress looks at its database to see what to do. (Sometimes it does this multiple times depending on how your site is built.)
- WordPress gets all the info from the database and runs it through your theme to make it look good.
- WordPress sends the finishes site to the end user and their browser interprets it all.
- The end browser downloads anything else it needs, images for example.
Caching essentially gets your site to from 1. to 7. quicker, by doing all the in-between steps before the user even arrives. It keeps ‘static’ files of your pages ready to send to their browser – thus eliminating all the database lookups and busy work in between.
There are types of caching that, at the point of delivery, bypass WordPress altogether. Serving purely static files to your users directly from the server. Resulting in a super fast chain that looks like this –
- Your server gets the ‘request’.
- Your server sends the finished site to the end user and their browser interprets it all.
There are a handful of Caching plugins for WordPress, but I’ve had the most success with WP-Rocket. I’ve tried various others, but that’s the only one I’ve stuck with and the results speak for themselves.
Other things to improve the speed of your photography site
Use images sparingly – Yes before you jump on me, I know photographer sites need images. They’re kind of important in the sales process. But the more images you have within sliders, portfolios etc. the slower your site will be. No getting around this.
Lots of people I work with have full page sliders or slideshows at the top of their pages. They look beautiful – absolutely – but are killer on page speeds, and in turn search rankings.
The term ‘above the fold’ goes back to newspaper days, whereby the key stories were found above the physical fold of the paper.
Nowadays this means the first bit you see of a web page. The bit you see before you need to scroll down.
This is the main part you want to focus on using images sparingly, as we can use lazy loading plugins to defer images below the fold, thus not affecting our page speed.
In an effort to balance the visual effect of a full-size slideshow at the top of your pages with the need for speed, I’m currently championing the use of a single – well optimized and compressed – ‘killer’ image at the top of pages, rather than a slideshow. As this requires no additional coding or scripts to load it, therefore helping page speed.
I’m also experimenting with sliders than load the first image, and then wait until they are required to load the others.
Using a single image for your header is actually quite an interesting exercise in image selection and editing – you’re posing yourself the question – ‘which one image best captures my style’
It’s a tough decision in most cases – but the argument can be made, that if you don’t have one image that can capture your style, then you probably don’t have a consistent one – but that’s a can of worms for another day.
Compression. I can’t say this enough, compressing your images correctly and uploading the smallest files possible is so important. So much so I’m working on an entire post detailing the best methods to achieve this. As a minimum, you want to be using something like JPEGmini. But I’ll link to the full comparison feature once it’s finished.
Good Theme – A good quality WordPress theme should be set up to be fast out of the box. Now I understand that the end user may install all manner of plugins which will slow sites down or indeed run the theme on a slow server.
But I think it’s inexcusable to be releasing slow themes these days, given the increased focus on speed.
When you’re considering purchasing a new theme for your site, even one from a bigger company, or a company that claims to be WordPress or SEO specialists – don’t be afraid to run a lighthouse audit on the demo site – if they can’t get their demonstration sites running fast I’d be concerned.
Followup: Premium WordPress Themes
Followup: I had some questions about whether speed is heavily affected by things the end users install on their sites. Plugins etc. So I just ran a quick lighthouse audit on a demo site of a popular premium wedding photographers WordPress theme provider. Its one of their popular themes and doesn’t have any other plugins beside what is bundled with the theme.
These are the results – again, identifiable info removed, as I’m not interested in bashing anybody – just education.
SEO is good, Accessibility and Best practice are pretty mediocre, but not deal breaking. But my word, that performance metric is brutal – certainly not something I could tolerate.
Now, a positive – the site theme in question looks amazing – seriously cool animations and slick transitions, beautiful huge photos and lots of things to WOW a potential bride for sure. But only if that potential bride wants to wait nearly a minute.