In this article, I share my favorite tips for creating a fast and optimized website.
Over the last ten years, I gradually improved my homepage, which I built from scratch. During that time, I focused on performance and search engine optimization, abbreviated as SEO. I made many mistakes along the way, but in the last two years, I’ve arrived at a result that puts my homepage ahead of most of its competition regarding speed.
Many photography websites are slow. I experience it when visiting other photographer’s websites on my cellphone. If I’m lucky, it takes only five seconds until I can start navigating through those sites. Quite often, I’m still waiting for the homepages to become responsive after 10 seconds if I didn’t leave before that.
There are various reasons for that, and we’ll explore several in this article. I cover:
What I want to emphasize at the beginning is that speed matters. If you want to keep visitors on your website and make conversions – turning them into customers – you need a fast website. It’s the foundation of SEO.
Chose the Right Hosting Solution
Page Speed Insights by Google is an essential tool for checking the performance and SEO of your website. Once you have enough monthly traffic, you’ll see the “Core Web Vitals Assessment” based on the loading times that real visitors experience. You also get a speed report from a headless browser running in the cloud. Use it together with the Web Vitals to find performance bottlenecks.
Looking at the numbers on my homepage, it seems everything is fine. But is it? A bottleneck puts me at a disadvantage right at the beginning. Imagine starting at a 100-meter race and missing the start by 1.2 seconds. It’s what the “Time to First Byte” shows for my homepage. Such a long delay makes passing the Web Vitals Assessment difficult. The first bytes arriving are just the start of the race. There’s more data required for a homepage to render – the “First Contentful Paint”.
Google considers 1.8 seconds a good time for the “First Contentful Paint”. A low TTFB will give you more headroom when designing your website. If you have a high value, as I have, you can’t make any mistakes.
How can you get the Time to First Byte down? One step is choosing a fast host. Shared hosting solutions are usually cheaper than dedicated servers. They are also slower because you share the performance of a server with other websites. And guess what: I use a shared hosting solution. I can do so because I balance the performance deficit with a highly optimized website. And I also get a lot of other features that would be expensive in a dedicated server setup.
Another way to reduce the TTFB is using a content delivery network – short CDN. I live in Germany, and my hosting provider is also based here. Since most of my visitors come from overseas, a CDN might improve the initial delay of my website. But this will not always work. Analyze your traffic first. Find out where your visitors are located. Then, measure the performance of your website before starting to use a CDN and after using it for one or two months. Make no other changes during that period. Then you can decide afterward if it’s a good investment.
Less is More
We all want to show our visitors detailed high-resolution photos that look great on their 4k displays. We want our images to look as good as possible. But do you know how many of your visitors use high-resolution displays?
The numbers from Google Analytics show that most of my visitors use screens up to full HD resolution. My homepage is optimized to look great for that. And unless someone is using a very large screen, it will still look good. If I were to serve images in 4k resolution, the biggest effect this would have would be making my homepage slow to load.
As with the first tip, a big takeaway is to know who your visitors are and what technology they use. Based on that, you can decide which image sizes you should serve.
There are more savings you can achieve. Here are a few questions to ask yourself:
- Do you need that custom font?
- Do you need this large icon library for which you only use a few icons?
- Can you achieve a similar look with less CSS? Is an external library/plugin required for it?
- Does this WordPress Plugin add value to your website or make it slower?
- Do you need that many photos? Could you reduce the number and show only your best work?
My homepage is designed in a minimalistic way. It might not be to everybody’s taste, but it made it easy to keep the performance up despite its features: I have a WooCommerce shop, a WordPress blog, many galleries, and several tutorial pages with video content.
Optimized Content
One of the biggest wins for any photography homepage comes from serving optimized images. You don’t need a 100% quality setting when saving JPEGs for the web. I often use values between 50 and 60%. Can you tell? There are also more modern image formats like WebP, which are well supported now. Do some experiments and see how far you can compress your images without a visible degradation in quality.
An even bigger win comes from serving responsive images. As you’ve seen above, the screen resolution of the devices on which your website is viewed varies a lot. Save your photos in different resolutions so the correct size is loaded. A mobile browser can load smaller images, which makes your homepage faster.
You can also optimize other resources. A rule of thumb is to reduce the number of requests a browser has to make to load your website. If you have many scripts and CSS files, each is downloaded separately. Try to concatenate them. If you’re not a web developer and don’t have someone to help you, you’ll find plugins for it. It would be a use-case where a plugin can add value by making your website faster.
Lazy Loading
Lazy loading is a big topic, and I can only scratch the surface here. Ideally, your website should load as little non-visible content as possible. Think of a long vertical layout with many images, of which most only become visible if a visitor scrolls downward. Those should only be loaded when they appear on the screen. Use the “loading” attribute for images and iframes to achieve this.
If you have a gallery on your website, make sure it applies lazy-loading strategies. Page Speed Insights will tell you if it does not.
You should also avoid a big mistake: Setting on-screen content to load lazily while some off-screen content is not marked that way. Think of a footer containing several images. If you now mark your header image to load lazily, a browser will first load the footer images and delay the “Largest Contentful Paint”. Scroll to the end of this article to see a few social media buttons. Initially, I had forgotten to lazy-load those, while all other images in my blog were lazy-loaded.
I also want to share the last optimization I made to my homepage. I’m using Google Tag Manager and Google Analytics. For a long time, I loaded those scripts immediately. I thought it was required for correct analytics. But to be honest, I only care about the visitors who stay on my homepage for more than two or three seconds. That’s why I now defer the execution of the Google Tag Manager. For my homepage, it was a big win. You’ll see the potential such a step has for yours in Page Speed Insights.
Caching
I already mentioned that I use a shared hosting solution. It means I share my server’s resources. So, the fewer tasks my server has to do to serve my homepage, the better. Setting up proper caching is essential for that. The lowest-hanging fruit is setting up a caching policy for your content. This can be done via the “.htaccess” file, where you specify how long different types of content are cached on a visitor’s system. Repeated visits will then be faster.
But this doesn’t help one-time visitors. Here, you have other options. If you use WordPress, your server has to work for every page somebody visits on your website. You can remove this processing time through a plugin like WP Super Cache.
There are other options that, in addition to the caching on your server, include a CDN solution. It might be something to explore if you have many visitors from different parts of the world to where your server is located.
Conclusion
I’d call having a fast website the foundation of any SEO strategy you want to apply. From my experience, it’s not the most crucial factor in getting clicks. But it is hard to compete in the Google Top 10 without it. It also doesn’t cost you any time once you’ve set it up, while other SEO tasks require continuous effort. In the video below, I share some of those tasks. Combined with a fast website, the tips from that video will get you to the top of Google Search.
