In this article, I share my favorite tips for creating a fast and optimized website.
Over the past ten years, I have gradually improved my homepage, which I built from scratch. During this time, I focused on performance and search engine optimization, abbreviated SEO. I’ve made many mistakes along the way, but over the past two years I’ve come to a result that puts my homepage ahead of most of its competitors in terms of speed.
Many photography websites are slow. I experience this when I visit other photographers’ websites on my cell phone. If I’m lucky, it will only take me five seconds to start browsing these sites. Very often, I still wait for the home pages to become responsive after 10 seconds if I haven’t left before.
There are several reasons for this, and we will explore several of them in this article. I cover:
What I want to emphasize at the start is that speed matters. If you want to keep visitors on your website and convert – turn them into customers – you need a fast website. This is the basis of SEO.
Choose the right hosting solution
Google’s Page Speed Insights is an essential tool for checking your website’s performance and SEO. Once you have enough monthly traffic, you will see the “Core Web Vitals rating” based on the load times experienced by real visitors. You also get a speed report from a headless browser running in the cloud. Use it with Web Vitals to detect performance bottlenecks.
If you want to go further, you can use EXPERTE.com’s free tool to mass test all pages on your website. This way you get a report for your complete offer. PageSpeed Insights only lets you check one page at a time.
Looking at the numbers on my homepage, it looks like everything is fine. But is this the case? A bottleneck puts me at a disadvantage from the start. Imagine starting a 100 meter race and missing the start by 1.2 seconds. This is what the “Time to first byte” shows for my home page. Such a long time frame makes it difficult to pass the Web Vitals assessment. The first bytes arriving are just the start of the race. Rendering a homepage requires more data: the “first content paint.”
Google considers 1.8 seconds to be a good time for “First Contentful Paint”. A low TTFB will give you more leeway when designing your website. If you have a high value, like me, you can’t make any mistakes.
How can you reduce the time to the first byte? One step is to choose a fast web host. Shared hosting solutions are generally less expensive than dedicated servers. They’re also slower because you’re sharing a server’s performance with other websites. And guess what: I use a shared hosting solution. I can do this because I balance the performance deficit with a highly optimized website. And I also get many other features that would be expensive in a dedicated server setup.
Another way to reduce TTFB is to use a content delivery network – CDN for short. I live in Germany and my web host is also based here. Since most of my visitors come from overseas, a CDN could improve my website’s initial lag time. But this won’t always work. First analyze your traffic. Find out where your visitors are. Next, measure your website’s performance before you start using a CDN and after using it for a month or two. Do not make any other changes during this time. You can then decide if it’s a good investment.
Less is more
We all want to show our visitors detailed, high-resolution photos that will look great on their 4K screens. We want our images to look as good as possible. But do you know how many of your visitors use high-resolution screens?
Google Analytics figures show that most of my visitors use screens up to Full HD resolution. My homepage is optimized to look great for this. And unless someone is using a very large screen, it will still look good. If I were to stream images in 4K resolution, the biggest effect would be to slow down my homepage loading.
As with the first tip, one of the important points to remember is to know who your visitors are and what technology they use. Based on this, you can decide which image sizes you should stream.
You can save more. Here are some questions to ask yourself:
- Do you need this custom font?
- Do you need that big icon library where you only use a few icons?
- Can you achieve a similar look with less CSS? Is an external library/plugin required for this?
- Does this WordPress plugin add value to your website or slow it down?
- Do you need that many photos? Could you narrow it down and show only your best work?
My homepage is designed in a minimalist way. It may not be to everyone’s taste, but it has made it easy to maintain performance despite its features: I have a WooCommerce store, a WordPress blog, numerous galleries, and several tutorial pages with content video.
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 JPEG files for the web. I often use values between 50 and 60%. Can you say it? There are also more modern image formats like WebP, which are now well supported. Do some experiments and see how much you can compress your images without visible quality degradation.
An even bigger gain comes from serving responsive images. As you saw above, the screen resolution of the devices your website is viewed on varies a lot. Save your photos in different resolutions so that the correct size is loaded. A mobile browser can load smaller images, making your home page faster.
You can also optimize other resources. A general rule of thumb is to reduce the number of requests a browser must make to load your website. If you have many scripts and CSS files, each is downloaded separately. Try to concatenate them. If you are not a web developer and don’t have anyone to help you, you will find plugins for that. This would be a use case where a plugin can add value by making your website faster.
Lazy loading
Lazy loading is an important topic, and I can only scratch the surface here. Ideally, your website should load as little non-visible content as possible. Consider a long vertical layout with lots of images, most of which only become visible if a visitor scrolls down. These 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 this is not the case.
You also need to avoid a big mistake: setting on-screen content to load lazily while some off-screen content isn’t marked that way. Think about a footer containing multiple images. If you now mark your header image to load lazily, a browser will load the footer images first and delay the “Largest Contentful Paint”. Scroll to the end of this article to see some social media buttons. I originally forgot to lazy load them, even though all the other images on my blog were lazy loading.
I also want to share the latest optimization I made on my homepage. I use Google Tag Manager and Google Analytics. For a long time I loaded these scripts immediately. I thought it was necessary for correct analyses. But to be honest, I only care about visitors who stay on my homepage for more than two or three seconds. This is why I am now postponing running the Google Tag Manager. For my home page, this was a big victory. You will see the potential of such a step for yours in Page Speed Insights.
Caching
I already mentioned that I use a shared hosting solution. This means that I share my server resources. So the fewer tasks my server has to do to serve my home page, the better. Setting up proper caching is essential for this. The simplest solution is to set up a caching policy for your content. This can be done via the “.htaccess” file, where you specify how long different content types are cached on a visitor’s system. Repeat visits will then be faster.
But that doesn’t help one-time visitors. Here you have other options. If you’re using WordPress, your server needs to be running for every page someone visits on your website. You can remove this processing time via a plugin like WP Super Cache.
There are other options that, in addition to caching on your server, include a CDN solution. This might be something to explore if you have many visitors from different parts of the world where your server is located.
Conclusion
I would call having a fast website the foundation of any SEO strategy you want to apply. In my experience, this is not the most crucial factor in getting clicks. But it’s hard to compete in Google’s Top 10 without it. It also doesn’t cost you any time once you set it up, while other SEO tasks require ongoing effort. In the video below I share some of these tasks. Combined with a fast website, the tips in this video will propel you to the top of Google search.
Comments are closed, but trackbacks and pingbacks are open.