Slower loading sites convert less, have higher bounce rates, perform poorly for user experience and rank lower for SEO.
A survey from Google concluded that users want to see your site load in less than 3-4 seconds, if it doesn’t, it’s likely they are going to go somewhere else. Kissmetrics backs this up with data suggesting that 40% of users will leave your site if it doesn’t load in less than 3 seconds.
These numbers are even more true for mobile users. If you don’t have a mobile responsive site that loads fast, it’s time to update your website, or accept the consequences. Balancing site speed and great user experience has always been troublesome for photographers, due to a heavy load of images that they obviously want to upload in high resolution (so it looks perfect on a 4k screen). Hence, in the this article we’ll describe 10 steps which you can take to help improve your overall site speed and performance.
Want to speed up your site by yourself? Check out our Speed Optimization course. You will learn how to improve your overall site speed, your site’s performance metrics, and make sure it’s all optimized for the web.
1. Test Your Site Speed
Before we discuss how you can improve your site speed, first you need to understand how to test your site speed. There are a number of tools available and in this article we will focus on 2 of them. Using Google Page Speed insights for testing site speed will not test your site speed unless you have a high ranking domain name, so for most users it will not actually show your site speed. It does give good details for some optimization options, however these are only suggestions and you won’t actually know if you’re getting a faster loading site after updating them.
The 2 tools we recommend using to test your actual site speed are GTMetrix or Pingdom. In this tutorial we’ll explain how to use GTMetrix, but the principles remain the same for both tools, as they both highlight the same items you’d need to resolve. If you use GTMetrix, make sure to sign up for a free account. It will allow you to choose your server location, which is important for testing your site. You should be choosing a server closest to your clients’ location. For example, if you are a photographer based in the UK, then choosing a server from London will give you the best results as it’s most likely that your clients are also based in the UK. Testing from a server in the US will give you incorrect results.
So based on your location, you’ll want to choose a tool that will let you test closest to your clients. Also remember that your hosting company will also make a difference to your scores here. If you choose hosting that’s not in your country, or your client’s locale, your site is going to perform poorly for them. We’ll cover more details on choosing hosting for WordPress later.
A much better way of actually testing your page speed is using a resource such as GT Metrix or Pingdom. GT Metrix will be used for testing the responsiveness and loading time of your site and then provide a performance grade based on the results. It will allow you to record the load time improvements from before and after completing the recommendations in this article.
We recommend that you test your site now and record the results, then after reading the following article you will be able to check for some improvements. NOTE! Make sure to select the server that is closest to your location.
You may also want to check your hosting’s location to see if it actually matches your own location. If you need to find out where your server is hosted, contact your hosting provider or check for yourself by using WHO.IS. Enter your domain name, and in the 4th tab called DNS records, there will be a location (not all hosts will show this):
If your servers are not close to your (and your client’s location) it’s time to start looking for a new hosting company. Check out our guide to WordPress hosting.
GTMetrix tools page
Now you’ll want to go to GTMetrix, and sign up for a free account. Then you can start to analyze your site. You’ll see the following dashboard (see image below), you can choose a browser by clicking the name of the browser, the location by clicking on location and can update any other settings. You can also do this by clicking on the “analysis options” on the right side.
In the dashboard you can also see a record of sites that you have tested as well as options for monitoring your site over a period of time.
When testing your site for speed, make sure to test it a few times to make sure you’re testing the cached version of the site. It’s also important to test various inside pages, such as blog posts or galleries. If you are using a caching plugin, clear your cache after each site change, and test again.
GT Metrix will summarize a 5 number of metrics for page loading time.
- PageSpeed score – Google Page Speed Insights Score
- YSlow Score – YSlow Optimization Score
- Requests – number of HTTPS requests needed to load the site
- Load time – Fully loaded time of the page
- Page size – Size of the page in MB and KB
The most important factor you will want to take into consideration here is load time. Whilst it’s nice to have a good performance grades for PageSpeed and YSlow, Google will ONLY be concerned about the loading time of your site, so will your potential clients.
Record your Google PageSpeed Insights and GT Metrix scores, then you can begin the next test to review the improvements. Each time a plugin is added you should review its effectiveness and test the score for both Google PageSpeed Insights and GT Metrix. If you have caching enabled, make sure to clear the cache, test once, then test again for the most accurate results.
With Google PageSpeed Insights you will have to wait 30 seconds between each test due to a cache being on your site from Google.
Backup your site
Before we get started, it’s critical that you backup your WordPress installation prior to optimization (we actually recommend backing up on a regular basis, trust us it will save you some hassle longer term). Try a plugin such as UpdraftPlus to backup your entire WordPress site, including your database, plugins, themes, uploads, and more.
2. Use Recommended WordPress Plugins
With WP Performance Score Booster you will be able to improve various rules for your site, including:
- GZIP compression
- Leverage browser caching (only partially, a caching plugin is still required)
- Remove query strings from static resources like CSS & JS files.
Simply download the plugin from the WordPress repository and install it, nothing else is required. You can then test your site again in both GT Metrix and Google PageSpeed Insights. Get WP Performance Score Booster Here.
This will be one of the main things that is recommended via Google and one of the easiest to implement to improve speed. Installing a plugin such as WP Super Cache is a great way to improve loading time, however it is recommended that you follow a tutorial on how to set this up correctly, as a wrongly configured caching plug-in can cause more issues than good. Another note on caching, when you are testing the site for its speed, it’s best to clear the cache, refresh your page wait 30 seconds and then retest to check for improvements.
NOTE: If your hosting is using caching options, make sure to review their documentation to see if caching plugins are allowed. Providers such as WP Engine do not allow the use of caching plugins as they cache the site from the source. Get WP Super Cache here.
3. Use Reliable Hosting
Choosing a hosting provider should be one of your top priority business decisions. Before you go for a cheaper, random provider, consider this – your hosting choice will impact the way your website works, how fast it loads, as well as how secure and backed up it is against hacks and server crashes. You get the point.
Since there are so many options available out there, here’s a number of things and features you should take into consideration when choosing the right hosting provider. You can also, check out the list of hosting providers we recommend to our Flothemes clients. If you’re wondering how much space you will need – Siteground for examples offers the Grow Big package, with 20 GB of web space available, which is more than enough to begin with.
Back to the features that help you choose correctly:
- Server Location
- Customer Support
- Your Site Traffic
If you have a hosting provider and are considering a change, we recommend contacting one of the following providers. Check the options they offer, many provide free, or paid switching services so you can be assured that your content is going to be moved correctly. Others also offer free domains, 1-click WordPress installs, as well as great site backup options.
Honestly, choosing a great hosting service should always be viewed as a business investment rather than an expense, don’t just go for the first provider, and don’t consider cost as the main factor. With hosting, you really get value for your money. Your decision will influence your site performance, reflected in the experience your customers receive when they visit your site.
4. Use a CDN
What is a CDN?
CDNs are not for everyone, they should be seen as the final option for really optimizing your site. It depends on your budget and needs. If all the other options haven’t helped then a CDN will do the trick, especially if you’re serving a large base of international clients. The following 3 are viable and affordable solutions for photographers’ needs:
Learn more about free WordPress CDN services to boost your website speed.
5. Optimize Your Images
For photographers this is one of the most fundamental things you’ll need to do to improve overall site performance. Images add HTTP requests to your site, so the more images you use on the site, the more requests you’re going to have. This is where choosing quality over quantity really makes sense. You shouldn’t be adding 1200 images to a gallery, or blog post if it’s really not required. If you can’t tell a story in 30 images, you should review your storytelling method.
Of course, everyone has a different approach to storytelling. But keep in mind that users have a very low attention span while browsing online, hence, shorter posts and galleries can guarantee that a user will consume more high quality content without getting bored.
Image Sizing Recommendations
Slideshows – 2880px width x 1500px height (You’ll need to crop your images here)
Blog Posts – 1500px in width x height auto
Galleries – width auto x 1500px in height
Remove unnecessary images
Do you really need all the images you’re displaying on your site? If not, it’s time to start removing them from your content. Remember, think about quality over quantity. If you can create a blog post and tell a story in 10 images instead of 100 images, then do so. Of course as a photographer, there is a lot of power in your images, however images can speak 1000 words. So it’s time to review your portfolio and cut away the fat. In doing so you’ll optimize your site, and create a better portfolio with your best images.
Common places users add too many images:
Full Screen Slideshows – We recommend between 1-5 images here, more is a waste. You want the users to get off your home slideshow and into some content. Use 1-5 images to create the WOW factor, otherwise these images are too large for optimal site performance.
Galleries – Adding 500 images to a gallery is boring. Who is really going to check all the images from someone else’s wedding, unless it’s family or friends. Show your best work, remove the rest. Normally a portfolio of 30 strong images will do the job.
Blog Posts – If you can you tell your story with less images. Do it. Shorter posts can mean more of your posts are consumed. Remember the average lifespan on your site is around 3-4 minutes. Provide shorter more quality posts will allow you to display your best images quicker.
Optimize Existing Images
Optimize Images before uploading
Uploading optimized images to the web is super important for a better performing site. Now that you’ve optimized existing images, you’ll want to make sure you don’t make the same mistakes going forward. There are a few generic sizes you can use for sizing images for web:
Full Screen Slideshows – 2880 px width and 1500px in height
Regular Slideshows (slideshows that aren’t full screen) – 1200px in height and width auto
Galleries – 1200px in height and width auto
Blog Posts – height auto and 1200px in width
Check out the tutorials from below explaining how you can save images for the web while using one of the following tools:
Image Optimization Tools
There are several tools that can also assist with optimizing your images before uploading them to the web.
So you don’t get lost in all the theory and recommendations that we’ve listed out above, here is a practical example of how we’ve optimized our client’s website for speed via our speed optimization service. We’ll show you the site score at a base level before optimization, highlighting all issues.
** Note, we did these a while ago, hence we’re using Google PageSpeed & Pingdom and the scores may have change as the sites and content have changed also**
Site – www.caitlinmcweeney.com
Hosting – Name Cheap
Google PageSpeed Insights
Optimize images – 1.4mb of possible reduction on images.
Enable compression – Adding GZip plugin to save around 500kb of data.
Leverage browser caching – Use of Caching plugin.
Reduce server response time – This may be improved by the caching plugin, however the hosting provider may also be a concern here. If it’s a shared hosting plan we’d recommend upgrading to an alternative hosting provider, such as SiteGroud.
When using Pingdom we are trying to focus on the load time of the site specifically, the page size can give an indication as to how large your page is, if it’s large it’s going to be a problem for mobiles. The number of requests is the amount of resources the server is asking for, and the grade is the total performance of the page.
Google PageSpeed Insights – 35/100 mobile and 30/100 desktop.
Pingdom (Server Dallas) – Perf. Grade 73/100. Requests 76. Load Time 5.19s. Page Size 3.2mbs.
Analysis & Solutions
Image Optimization – We used Google’s image optimization options in the mobile tab.
Enable compression and browser caching – We used WP Performance Score Booster
Reduce server response time and caching – Used WP Super Cache
Overall we were able to make some great improvements for the site speed and scores. We increased the scores by 34 for mobile and 40 for desktop. The page speed has improved from 5.19s to 2.43s. The page size has been cut in half to 1.6mb from 3.2. Again for this client, the hosting provider is a shared hosting plan, from a provider that may not score well in stress tests. For improved scores and load times a change of a hosting provider would improve the site further.
Google PageSpeed Insights – 67/100 mobile and 70/100 desktop.
Pingdom (Server Dallas) – Perf. Grade 87/100. Requests 44. Load Time 2.43s. Page Size 1.6mbs.
As you can see, many sites have the same pitfalls – caching, compression, unoptimized images and at times unreliable hosting services. Thankfully many of the items are easily mitigated with some work, a few plugins and a little elbow grease.
You can also see from the above examples that Google PageSpeed insights is only an indicator of performance, but not a true indicator of site speed. When testing for speed, please remember to use GTMetrix or Pingdom, and select a server that is close to your and your audience’s location.
If you’re interested in improving your site speed and performance, take a look at our Speed Optimization course.