How can I make my website faster?

Cars are often evaluated based on how quickly they accelerate from 0 to 100 km/h. The faster a car is, the more premium it’s perceived. The same principle applies to website speed, but instead of luxury status, the reward is higher rankings on Google, which leads to more users and customers. Yes, site speed is a crucial factor in search engine rankings. Beyond that, it directly affects user experience – if a site is noticeably slow, users are likely to leave before discovering any value it offers.

In short, speed is vital, and the reward of high organic rankings and targeted traffic is reserved for fast websites. Those that lag behind will remain invisible online, but this issue can be fixed.

How to measure site speed and what parameters should you pay attention to?

Google offers a free service called PageSpeed Insights. While there are other similar tools available, PageSpeed Insights covers everything we need, and since we’re aiming to meet Google’s speed requirements, it only makes sense to use their tool. It’s important to note that this service analyzes the loading speed of the specific page you provide, which doesn’t guarantee the same speed for every page on your site.

To use PageSpeed Insights, simply paste your site link and click “Analyze.” After the analysis, you’ll see two tabs: one for the mobile version and one for the desktop version, along with the first section called “Core Web Vitals Assessment”:

Core Web Vitals is a relatively new ranking factor for site speed, introduced in 2021. Interestingly, even Google itself has not passed this test, showing a “Failed” status. However, this doesn’t affect Google because, as they say, it’s the “house that makes the rules.” For other sites that fail this check, there’s a significant risk of not reaching the desired TOP spots in organic search results. 

It’s worth noting that some sites still rank highly despite poor speed and failing Core Web Vitals. How is that possible? While site speed is an important ranking factor, it is not the only one. If a site has exceptional content, numerous backlinks, established age, and a solid reputation, speed may be less critical. However, for sites that are just starting out or trying to compete with established players on the first page of Google, it’s advisable to follow Core Web Vitals closely.

Core Web Vitals include three key parameters:

1. LCP (Largest Contentful Paint) – Measures the loading speed of the main content, which is the largest element on the site.
2. INP (Interaction to Next Paint) – Measures the site’s response time to user interactions.
3. CLS (Cumulative Layout Shift) – Measures the stability of the layout, focusing on elements that shift during loading, which can prevent users from interacting smoothly. This shifting is frustrating for both users and Google.

Next, you’ll see a score based on four criteria: Performance, Accessibility, Best Practices, and SEO.

Let’s start with the last metric. A site’s SEO score indicates whether the page meets Google’s guidelines. 

Best Practices measures how well the site aligns with web development standards, including the use of modern technologies, valid code, and optimized JavaScript. 

Accessibility evaluates whether the site is usable for all categories of users – from beginners to experts – covering aspects like site navigation, breadcrumbs, structure, alternative text for images, and audio alternatives for text content. 

Finally, Performance shows how fast and optimized the site is, which is where Core Web Vitals and its parameters come into play.

When it comes to importance, Performance takes the lead, so let’s look at how we can improve it.

6 ways to increase site speed

In this screenshot, you can see that the Pagespeed service gives recommendations on how to increase performance: 

This is actually would be the end of the article, as Google offers excellent recommendations – but do you understand them? While these recommendations are straightforward for a programmer to implement, they can be quite challenging for the average user.

Image Optimization

This is one of the easiest ways to significantly improve website speed. Keep in mind that using plugins for optimization often won’t provide substantial results, so manual optimization is the best approach.

To do this, you need to reduce the file size by lowering the resolution of the image and saving it for the web. Photoshop works well for this purpose. The maximum recommended resolution is 1920 × 1080 pixels (Full HD). It’s often better to use 1280 × 720 pixels (HD), but you should always ensure that the image retains sufficient detail and clarity for the eye.

Make sure the image size doesn’t exceed HD (or Full HD at most) and save it for the web, experimenting with different quality settings. The goal is to reduce the image size to a maximum of 400 KB. The smaller the image, the faster the page will load, but be sure not to compromise image quality. It’s possible to get almost any image down to 400 KB. Additionally, Google tends to favor highly-ranked websites with a total page size that doesn’t exceed 500 KB—this is the optimal size for the entire page, not just one image. While achieving this in practice is extremely difficult, it’s a target to strive for. According to older standards, the page size shouldn’t exceed 3 MB, so make sure not to surpass this threshold.

You can check your web page size using this tool.

If you notice a significant loss of quality when optimizing images, it’s likely that the images themselves were not high quality to begin with, and it might be worth considering replacing them.

But that’s not all… Today, the ideal image format isn’t PNG or JPEG, but WebP. You can use an online converter, like https://ezgif.com/jpg-to-webp, to convert your images to this format. This will further reduce file size, as WebP is more optimized and specifically designed for web use.

It’s important to emphasize manual optimization, as plugins tend to use the same algorithm for all images, which means some may end up under-optimized while others are overdone. If manually compressing and optimizing images seems too challenging or if you’re just looking for a quicker solution, using a plugin is certainly an option. For WordPress, one of the best plugins is WP Smush Image. If you’re using a platform like Shopify or something else, you could use a third-party tool for compression, such as Optimizilla.

Hosting

The better the hardware of your hosting, the better your site will perform. A powerful processor, ample RAM, and strong overall specs can significantly impact your site’s speed. However, this isn’t about purchasing the most expensive and high-performance web hosting available. Instead, aim for hosting that offers a little extra capacity beyond your current needs. It’s about asking your hosting provider to enhance the performance of your site.

Often, your site’s settings are configured at a standard level (which helps hosting providers save resources). You can request improvements from your hosting provider with a question like:

“What can you do to improve my site’s speed according to Google’s PageSpeed Insights?”

Chances are, they’ll adjust some settings, resulting in noticeable improvements in both actual speed and PageSpeed scores.

For hosting management, cPanel is one of the most popular systems. It includes a very handy feature called “Optimize Website” (found in the Software section). Using this feature can also help you achieve better performance results.

HTML Minification

The foundation of any website is built on HTML. If you’re an expert programmer, you can write highly optimized HTML to create a very fast website. However, in reality, many websites use templates or builders, where HTML optimization is often neglected.

As mentioned earlier, to write highly optimized HTML, you’d need to do it entirely from scratch and have the necessary expertise. If that’s not an option, then plugins are the way to go. For WordPress, we recommend using the Minify HTML plugin:

The settings for this plugin are quite straightforward:

Using Browser Caching

Every browser has a cache, or memory, that stores information when you visit a website. If a website allows the browser to cache key information, not just the fact that it was visited, it can greatly enhance the speed for future visits. When caching is properly configured, Google will take this into account and include it in their speed analysis, giving your site a boost in performance scores.

To enable browser caching, you can contact your hosting provider, as many offer this functionality. Alternatively, you can add some lines of code to your site manually. The best option, however, is to use a plugin like WP Rocket (though it is paid). Once installed, you can navigate to the appropriate tab – Cache – to get started:

Here you can enable caching for mobile devices. Desktop caching is enabled on the Preload tab:

To enable caching, you can use another popular plugin – W3 Total Cache. There is a free version here and in fact it does not always work. In general, you need to test it. Start with the free version of W3 Total Cache and if it doesn’t work well, you can try the paid Pro version or switch to WP Rocket completely.

CSS, JS and Media Optimization

Using the same plugins WP Rocket or W3 Total Cache you can optimize CSS and JavaScript. In simple words, CSS is responsible for the style of your site – color, button size, all sorts of rounding and so on. JS is responsible for interactivity and any movement. Everything that twists, turns, flies out, calculates some numbers and any other algorithm – this is all script from JavaScript.

Minify CSS Files – This means the plugin will remove unnecessary spaces and comments in the CSS files, optimizing them for better performance. This option is usually enabled by default when installing the plugin.

Combine CSS Files – This option merges all CSS files into a single file. If you enable this, it’s important to test your site’s performance to ensure there are no issues. If problems arise, it’s best to disable this setting.

Next is JavaScript minification. Be cautious here, as many sites experience errors, and in some cases, the site may even load noticeably slower:

The “Load JavaScript Deferred” feature allows the browser to load HTML and CSS first, and then load JavaScript afterward. This can significantly improve site speed, but there is a catch – most modern sites are packed with JavaScript from top to bottom. For example, even banners at the very top of a page rely on JavaScript. By deferring JavaScript loading, you may notice that the site appears somewhat empty at first.

The “Delay JavaScript” function takes this a step further, stopping JavaScript execution entirely until there is direct interaction with the site. This means the site may look incomplete, with content only becoming interactive upon actions like scrolling or clicking buttons. The paradox here is that enabling these functions can significantly improve your PageSpeed Insights score, but in reality, the site may feel slow for users and could discourage them due to missing familiar features.

When enabling these settings, it’s crucial to test the site’s actual performance. If issues arise, it’s best to leave these options disabled. JavaScript optimization can greatly enhance site speed, but if a plugin doesn’t do the job well, fixing the code may require serious intervention, which can be costly – sometimes even more expensive than rebuilding the site from scratch.

Media optimization means that images and videos will load only when necessary – when they come into view. For example, if you have a long webpage with many images and videos, it can either load all content at once or just load the top part visible to the user, while the rest loads as you scroll. This approach reduces the number of simultaneous HTTP requests (requests sent to the server), thereby improving speed:

This plugin also provides more advanced CDN (Content Delivery Network) optimization, but this feature is beyond the scope of the free version, so we won’t go into detail here. In short, CDN optimization can greatly improve your site’s speed if you have an international audience. A CDN allows users to receive data from a server that is geographically closer to them, rather than from the original server, which might be far away.

Similar settings are available in W3 Total Cache. Once again, it’s important to test the actual speed of your site and check it using the PageSpeed Insights service after enabling each setting.

AMP

AMP stands for Accelerated Mobile Pages, a technology developed by Google in 2015. Despite its potential, many website owners are unfamiliar with AMP, making it less common. However, it can be a powerful asset for SEO. Our Calgary internet marketing company strongly recommends using AMP pages.

AMP is specifically designed for mobile devices, meaning that users searching from their phones or tablets will be directed to the AMP version of your site. Google places a high value on AMP technology, so even if your site is lacking in content, backlinks, or overall reputation, implementing AMP can give you a strong chance of ranking well against competitors that don’t use it.

In simple terms, AMP is a streamlined version of your desktop page. It doesn’t use JavaScript; instead, it includes only text, images, links, and a few other basic elements to convey the essential information about your site. This simplicity results in very high speed for the mobile version of your site.

You can create AMP manually or use a plugin. If you choose the manual route, you’ll need an in-depth understanding of HTML, so you might want to refer to the official documentation on amp.dev. Beyond developing AMP pages, you’ll also need to know how to implement them on your site, which requires even more expertise. For those familiar with it, the process is straightforward, but for beginners, it can be quite challenging. To save time, you can always boost your website’s speed by reaching out to a Calgary SEO specialist.

If you’d prefer to handle it yourself without diving into HTML, we recommend using one of the best plugins available – AMP for WP.

This plugin comes with many settings:

Each tab has many other sub tabs and here you can find a lot of toggle switches and customizable fields. Not to say that customizing this plugin is an easy task, but with a little digging you can bring the speed of the site on the mobile version to incredible heights. So for the main page of our site the speed of the mobile version was 46 points:

After AMP was implemented, the speed became 92 points:

Once AMP has been implemented, it is important to test it through a validator – https://search.google.com/test/amp:

If there is something wrong with the AMP page it will not be indexed and you should not count on high ranking in Google via mobile devices.

Conclusions

By using all the methods mentioned above, you can achieve truly significant improvements in site performance. For example, here are the results for the main page of our site in the desktop version:

It was 53 points and after all the improvements it became 94 points:

It is also important to note that relying solely on plugins for speed optimization is not the best approach. These plugins can sometimes overlap in functionality and even conflict with each other, leading to errors and potentially slowing down your site further. The ideal solution is to use the plugins mentioned above, but keep in mind that their effectiveness may vary depending on the specific site. If your site’s speed is still unsatisfactory, you know what to do:

Contact Effortless Marketing by scheduling a Free 15 minute discovery meeting.