6 Tips to Speed Up Your Photography WordPress Site
Slower loading sites convert less, have higher bounce rates, perform poorly for user experience and rank lower for SEO.
A research 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 and need some help? Check out our speed optimization service. Our team will 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 3 tools we recommend using to test your site speed are GTMetrix, PageSpeed Insights and Pingdom. In this tutorial we’ll explain how to use GTMetrix, but the principles remain the same for other tools, as they highlight pretty much 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.
GTMetrix
A much better way of actually testing your page speed is using a resource such as GTMetrix or Pingdom. GTMetrix 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 6 number of metrics for page loading time.
- GTMetrix Grade – overall page performance according to GTMetrix
- Performance Score – your page’s performance score based on Lighthouse open source tool assesment and GTMetrix specifications
- Structure Score – how well your page is built for optimzal performance
- LCP – how fast your largest content element becomes visible on the page
- TBT – how much time is blocked by scripts during your page load
- CLS – how much layout shift occurs while your page loads
The most important factors you will want to take into consideration are: performance score, structure score, LCP, TBT, total page size. Whilst it’s nice to have a good performance grades, it’s important to note that site speed is only one factor out of hundreds of other factors used by Google to rank your web pages.
Benchmarking
Record your Google PageSpeed Insights and GTMetrix 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 GTMetrix. 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
In this section we’ll review 4 plugins that can assist your site’s loading time. They will help with GZIP compression, file minification, browser caching and the optimization of your Javascript and CSS.
Autoptimize is a powerful plugin which allows you to minify and combine CSS and JS files to improve your page load time.
Note: the Image Optimization option from this plugin can sometimes change the source of images and logos, which may overlap. Hence we recommend disabling this option.
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.
For other notable caching plugin options, also take a look at WP Fastest Cache or for a paid plugin check out WP Rocket, as it’s one of the best in the market.
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.
Asset CleanUp: Page Speed Booster
This WordPress plugin allows you to defer or disable particular styles or scripts. Some CSS or JS files might block your page rendering and slow down your site. Use this plugin to solve the “Eliminate render-blocking resources” issue in PageSpeed Insights or “Defer parsing of JavaScript” issue in GTmetrix.
Example: if you’re using Flo Forms plugin and you don’t have a contact form on your home page, you don’t need its files loaded, so you simply disable those files on your home page. Thus, you’re only loading files you need and improve your home page’s performance.
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:
- Speed
- Server Location
- Price
- 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 (Optional)
Note: only use a CDN if you have multiple visitors from all over the world. Otherwise, a reliable and fast hosting provider should be enough.
What is a CDN?
Content Delivery Networks (CDNs) will drastically reduce server lag by storing static resources on a network of fast loading servers. What does that mean? Basically it holds a cache of your static content (Images, CSS and JavaScript) in various server locations all over the world. When a user from the UK requests to view your site, they get served images from the closest server, which drastically decreases loading time. GTmetrix put this simple graphic together to make it easier to understand:
Recommended CDNs
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
Full width images – 2400x1600px
Blog Posts – 1500px in width x height auto
Galleries – width auto x 1500px in height
See our full guide on image sizing here.
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.
Bonus Tip: you can free up your space and reduce your spending on image storage by 5 times. To do that, you need the Dotphoton Raw desktop app, which will reduce your RAW file size by up to 80%.
It’s similar to JPEGmini, but it works exclusively with RAW files.
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 & Image blocks – 2400 px width and 1600px in height
Galleries – 1500px in height and width auto
Blog Posts – height auto and 1500px in width
Check out the tutorials from below explaining how you can save images for the web while using one of the following tools:
Photoshop – batch save images in Photoshop
Lightroom – the ultimate guide to saving images for the web
Image Optimization Tools
There are several tools that can also assist with optimizing your images before uploading them to the web.
Here is a comprehensive guide explaining how to optimize images for WordPress.
Conclusion
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.
When testing for speed, please remember to use GTMetrix or Pingdom, and select a server that is close to you and your audience’s location.
If you’re interested in improving your site speed and performance, take a look at our speed optimization service.
Flothemes Team,
Supporting You.
tammyrose295
10:41 May 25, 2018
Amazing This kind of a great Blog. I presumed it turned out extremely helpful. I uncovered this which is exceptionally utilize full. Extraordinary article and data continue sharing more! Love yours blog. Quantity of Thanks.
Tim
20:12 May 25, 2018
I recommend testing your speed several time for a baseline and then after each change you make to optimize speed. This is because you will always get something different, and there will always be "wonky" results. For instance, my homepage speed is usually less than two seconds, but yesterday I got a result in the vicinity of 20 seconds. Personally, I take five readings, throw out the highest and lowest, and average the middle three. But I'm a little strange that way.