How to Fix the Top 7 Site Speed Issues on Photography Sites

In this article, we will explain what are the main components that slow down your website and share some useful tips and tricks on how to speed up your photography site.

No one likes slow websites, that’s a fact. When we access a website, we expect it to load fast and provide the information we are looking for. This is why a site’s loading speed is so important.

Since  Google uses site speed as a ranking factor for organic search results, you need to make sure that your website loads fast on both, desktop and on mobile. A slow website = bad UX = lower-ranking = less traffic = less sales.

Before we dive into the most common site speed issues, you need to understand how site speed testing tools assess performance data.

Google’s Core Web Vitals

In May 2020, Google introduced a set of new metrics called Core Web Vitals. These new metrics aim to measure the page experience, so site owners could better understand the quality of the user experience they provide to their visitors.

Core Web Vitals focuses on 3 main aspects, which are: loading performance, interactivity, and visual stability of a web page. These are represented by 3 metrics:

• (LCP) Largest Contentful Paint – how fast the largest content element of your page is loaded and displayed. Should be 2.5 sec or less 
• (FID) First Input Delay – how fast your page becomes interactive. Should be 100 ms or less
• (CLS) Cumulative Layout Shift – measures the layout shifts that occur on your page. Should be 0.1 or less

Google is using Lighthouse (an open-source tool developed by them) to measure the quality of web pages in terms of speed and user experience.

In order to get relevant results you need to understand how to test your site speed.

And while there are multiple tools available on the web, we will focus in this article on: GTmetrix.

Why GTmetrix?

There are a number of reasons why we chose this tool. Here are a few of them:

• It’s now based on Google’s Lighthouse tool, which means that it takes into account the latest page experience metrics, including Core Web Vitals
• It will show you the overall performance grade + actual loading time and will break down the results by request type and size
• It will allow you to choose your test server location (you can choose test servers from different regions: USA, UK, China, India, Australia, Brazil, Canada)
• You’ll get a waterfall report, which shows you all the resources that are loaded on your site in a consecutive manner
• The results are relatively easy to understand for non-tech users and there are multiple help resource available on the site

Of course, you can use other tools like Pingdom Tools or PageSpeed Insights to check your site’s performance, just keep in mind that none of these testing tools (not even GTmetrix) will give you 100% accurate results, as there are so many variables when it comes to your site visitors. They might use different browsers, devices, locations, and internet connections.

Keep your results for reference and try to address the top issues. We’ll talk about them below.

Note: don’t get too obsessed about your scores and pay attention to important metrics like actual loading time, page size, largest contentful paint, first input delay, etc. After all, your main goal is to serve fast pages, so your visitors can get the information they are looking for, without waiting too long.

One more important thing to mention is that your site speed is highly dependable on 3 main factors:

1. Hosting provider
2. Media content
3. Site configuration

Optimizing your site for speed is not an easy task, but if you do it properly, you’ll get great results, regardless of what Flotheme template you use.

So, what are the most common elements that slow down your site? Here is a list of 7 things you need to pay attention to in order to avoid issues with your site’s loading speed:

1. Unoptimized images

What does it mean?

Optimizing site loading speed can be difficult for some photographers, due to their strong desire to keep photos in high resolution, so they look perfect on very large displays. This leads to very large files that dramatically slow down your site. For example, you have a gallery with 50 photos, each photo weighs around 1MB, in total you have 50MB on your page => it will take forever to load.

Our recommendation is: keep your image file size under 400KB and the number of images per page at a maximum of 20-30.

Also, keep in mind that your site pages should load in less than 4 seconds. Here’s an example of the results of our Lyra Theme’s Demo analysis. Note that it hasn’t been optimized for speed, so you can use this example for reference:

How to fix it?

There are multiple ways to optimize your images without altering their quality. The best way is to optimize them before uploading them to your site. You can export them from Photoshop or Lightroom using optimal export settings and then compress them further by using tools like JPEGmini or TinyJPG.

Alternatively, you can use plugins like ShortPixel or Imagify that will compress your images after you’ve uploaded them into WordPress.

Here is a comprehensive guide on image optimization.

2. Properly size images 

What does it mean?

When you upload high-resolution images to specific areas of your site, they might be scaled (resized), so that they display nicely on all kinds of devices like laptops, smartphones, etc. This might lead to situations when you serve images that are larger than the required dimensions and force users to download large images when it’s not necessary.

How to fix it?

First of all, you need to follow the recommended image sizes. Then, check if your website is serving responsive images. Flothemes are using the srcset attribute to serve responsive images. This feature allows you to display appropriate images to different screen sizes, so your site looks nice on all kinds of devices.

3. Serve static assets with an efficient cache policy

What does it mean?

Every time your browser loads a webpage it has to download all the files to properly display the page. This includes all the HTML, CSS, JavaScript files and images.

You can speed up your page speed by asking visitors to save and reuse the files included in your website. This is a great speed improvement for returning visitors, as their browser won’t load all the files again, because some of the files will already be cached in their browser.

How to fix it?

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 speed, it’s best to clear the cache, refresh your page and then retest to check for improvements.

For other notable caching plugin options, also take a look at WP Fastest Cache which is a good alternative. 

4. Too large page size

What does it mean?

This one is simple: the larger your page size is, the longer it will take to load. Try to keep your pages light and use files that aren’t huge in size.

How to fix it?

Images will probably be some of the heaviest files on your site. Optimizing images can reduce your total page load size by up to 80%. So, check point #1 to learn how to optimize your images for the web.

5. Too many requests

Note: this issue is only relevant if your site is not using HTTP/2. With the new HTTP/2 protocol, the browser can send all HTTP requests simultaneously over a single connection. This means that your browser will get the resources and load your page faster.

You can check if your page is served via HTTP/2 in GTmetrix – the Waterfall report. Click on any resource and check the Headers tab.

If your page is served via HTTP/1.1 follow the suggestions listed below.

What does it mean?

Every time you visit a website, your browser is requesting and receiving files. The browser requests different files from a web server to load the content of your page. These are also known as HTTP requests and the more requests you have the bigger your loading time is.

How to fix it?

Reducing the number of files can help speed up your site, fewer files = fewer requests. You can do it by following some of these tips:

• Combine HTML, CSS, JavaScript files to reduce the number of requests. Please note that combining files might change your site’s appearance or functionality, so use this option sparingly. Plugins like Autoptimize or WP Rocket can help you out.
• Defer files you don’t need. In some cases, your site might load extra files that are not required and slow down your page. You can use the Asset CleanUp plugin to defer files you don’t need.
• Consider removing 3rd party tools that you no longer use. 3rd party tools (analytics, chat, heatmap, etc.) can add extra requests to your site. Consider using a reasonable amount of tools and remove those you no longer need.

6. Improve Largest Contentful Paint

What does it mean?

LCP (Largest Contentful Paint) measures how long it takes for the largest content element to be loaded and displayed on your page. Examples of LCP: hero image, heading, paragraph, etc.

How to fix it?

First you need to identify the largest contentful element of your page. You can do that by going to GTmetrix – Structure – Largest Contentful Paint element section.

On photography sites, most common LCP elements are full width images, sliders, videos, headings or other visual components. 

Here are a few tips on how to improve LCP:

• Reduce server response time – use a fast hosting, enable caching on your site, use a CDN if you have visitors from multiple parts of the world
• Eliminate render blocking resources – Load JavaScript deferred, Optimize CSS delivery, combine CSS files, enable GZIP compression, etc. A premium plugin like WP Rocket can help you out.
• Optimize images and videos – review #1 once again

7. Avoid large layout shifts

What does it mean?

CLS (Cumulative Layout Shift) is a metric that measures the amount of unexpected layout shifts on your page. According to Google, a low CLS means that your page is visually stable and provides a good experience.

Learn more about CLS here.

How to fix it?

First you need to identify the elements that generate layout shifts on your page. You can do that by going to GTmetrix – Structure – Avoid large layout shifts section.

Most common elements that generate shifts on photography sites are:

• Slideshows
• Embeds and iframes
• Blog and gallery listings

The best way to resolve this issue is by simply avoiding or replacing elements that could generate shifts. For example you can replace a slideshow with a full width image cover or opt to remove a 3rd party contact form in your home page and replace it with a button that links to your Contact page.

That doesn’t mean that you should completely avoid specific elements, as this metric affects only 5% of the overall score.

Also, CLS is not completely accurate, as it’s measured in a simulated environment and the actual value (experienced by real users) might be smaller.

That’s it folks, hope this info will help you identify your top site speed issues and improve your page loading time. Remember, every second counts, as it affects your organic search ranking and potential revenue.