Is Your Website Slow? Then Do This!
We all know that feeling. The frustration when a website just won’t load! It’s really annoying. The biggest problem? You’re losing potential customers. If potential customers visit your website and leave because it’s not loading, then you need to make some changes! But… how?!
No problem. First, stay calm and take a deep breath. Have some fun and measure your website’s performance with this tool: PageSpeed Insights.
If your results look something like the image below, then you can safely leave this post.
But if you have red or orange results, then definitely stay tuned. The results shown in the image above are from my website. You can take a look at the full report.
Why Performance is Important for User Experience
When your website is fast and modern, users directly associate that experience with your company and brand. If buttons don’t work, the site is user-unfriendly, and it loads slowly, it also damages your company’s image. I think that’s understandable, and I don’t believe I need extensive case studies to prove that performance can negatively affect the user experience – as mentioned above: we all know it.
Core Web Vitals and Their Role in SEO
Before we dive into action, here’s some important information: Core Web Vitals (more on this later), which relate to your website’s performance, directly impact your SEO ranking. It’s straightforward. On one hand, Google gets upset if crawling your website takes forever, and on the other hand, Google doesn’t want to pass on a poor user experience to potential customers (i.e., “searchers”). The result? Your website won’t appear high in search results. Additionally, Google notices when people quickly leave your website after visiting – and Google doesn’t like that.
It’s simple! When Google has to choose between two nearly identical websites (same content, same features, etc.), it’s logical that the faster website with better performance will be displayed higher!
What Are Core Web Vitals?
I mentioned Core Web Vitals earlier. There are three central Core Web Vitals that help you measure your website’s performance. You can find some of these metrics in your PageSpeed Insights report.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) measures the time it takes for the largest text or image on your page to be displayed. Google (web.dev) provides the following interpretations for LCP results (in seconds):
| LCP (in seconds) | Color/Result |
|---|---|
| 0-2.5 | Green (good) |
| 2.5-4 | Orange (moderate) |
| Over 4 | Red (poor) |
You should aim for “green,” which means “good.” I’ll explain how to optimize your LCP shortly.
First Input Delay (FID)
First Input Delay (FID) measures the time between the first user interaction (e.g., clicking a button) and when the browser can respond to that event. FID is measured in milliseconds. Google (web.dev) provides the following interpretations for FID results:
| FID (in milliseconds) | Color/Result |
|---|---|
| 0-100 | Green (good) |
| 100-300 | Orange (moderate) |
| Over 300 | Red (poor) |
Here too, you should aim for “green.” I’ll explain how to improve FID later.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the movement of elements on the page. Unexpected movements of elements can quickly become user-unfriendly. I won’t go into detail on how CLS is measured – that’s beyond the scope of this post. Google (web.dev) provides the following associations for CLS scores:
| CLS Score | Color/Result |
|---|---|
| 0-0.1 | Green (good) |
| 0.1-0.25 | Orange (moderate) |
| Over 0.25 | Red (poor) |
You guessed it! We aim for “good.” You’ll learn how to achieve this shortly.
Improving Core Web Vitals
You’ve learned why performance is crucial and how to measure it. But how do you actually improve Core Web Vitals?
Improving Largest Contentful Paint (LCP)
The easiest step you can take to improve LCP is to “trim down.” That means: fewer or smaller files, fewer database queries, less CSS, less JavaScript, smaller and fewer images, fewer third-party tools… less is more! All these things can significantly worsen your page loading times. So, trim down! Depending on the tools you use, there are some simple steps you can take. For example, with WordPress, it often helps to deactivate unused plugins. Also, make sure to use caching and a Content Delivery Network (CDN) for media files.
Improving First Input Delay (FID)
Want to improve FID? Trim down! You might have already suspected that. Trimming down really helps here. “Minimalism”! For FID, a key metric is “Total Blocking Time” (TBT). High TBT leads to high FID, and vice versa. TBT is often high when a lot of JavaScript is executed. The solution: reduce the amount of code and optimize the remaining code. Many modern websites are filled with third-party trackers and tools. Google Analytics, Facebook Pixel, Hotjar… the list goes on. This is not only questionable in terms of user privacy but also really bad for loading times. Remember the fantastic result from my website that I mentioned at the beginning? Yes? I use exactly one analytics tool (Plausible). And my website hardly uses any JavaScript otherwise.
Improving Cumulative Layout Shift (CLS)
“Layout Shift” often occurs because of images without assigned dimensions. For example, if you have a text flow on your website that includes an image, the image may not load until the user has scrolled to that point. If you haven’t defined a size for the image, there’s no “space” reserved for it. When it finally loads, your text moves down. This is not very user-friendly, disrupts the reading flow, and annoys Google. Give your images fixed sizes! This should significantly improve your CLS score.
General Performance Improvements
In addition to specific Core Web Vitals improvements, there are a few other important pillars that can enhance your website’s performance. I’d like to introduce four of them in this article.
Caching
You can implement browser caching and server-side caching to improve your website’s performance. Caching essentially involves “storing” queries and calculations, which can greatly improve loading times. Depending on your system, there are different tools that can help with caching. Do some research! Tip: For WordPress websites, there are numerous caching plugins available.
JS and CSS
JavaScript and CSS are essential for websites, but they can also harm your performance. Compress these files and ensure that only the necessary files are loaded on the page!
Media Files
There are approximately three game-changers for media files (primarily images) on your website.
- WebP Format: Convert your files (usually JPG or PNG) to the WebP format. There are online tools for this. WebP significantly improves performance.
- Smaller Images: The small profile picture in the top right corner or a small logo in the footer doesn’t need a 537KB resolution! Make your images “smaller.” Think about it: if your image takes up 50KB instead of 3MB, that’s a huge difference. There are online tools for this too.
- Lazy Loading: Lazy loading ensures that content is only loaded when the user scrolls to it. This is very sensible! Initially, only the images visible when the page is first visited are loaded – the rest is loaded as the user scrolls. Do some research; it’s not that difficult!
CDN
Content Delivery Networks (CDNs) distribute your website’s content (images, files, etc.) on servers worldwide. This greatly reduces loading times for visitors from different regions.
Case Studies
Still not convinced that performance is crucial for a successful website? Please do me a favor. Read this article by Google: The business impact of Core Web Vitals. If you don’t want to read it right now, here’s a brief summary of what improving Core Web Vitals can bring:
- Massive increase in session duration
- More sales
- Increased advertising revenue
- Higher domain ranking
- Higher mobile conversion rate
So, what are you waiting for?
Tools and Resources
The key tools you need to take your website performance to the next level are the following.
- PageSpeed Insights: For measuring your performance
- Analytics tool like Plausible: For assessing the impact of your performance improvements
That’s all you need!
Conclusion
In this blog article, you’ve learned how important website performance is. Good performance leads to more sales, better SEO ranking, higher user satisfaction, and more. Thank you for reading this article to the end! If you have questions or feedback, feel free to send me a message!
So, what are you waiting for? Check your website’s performance and improve it today!