3 Techniques to Improve Your Website’s Page Speed

on 24 Nov 2024, by Bogdan, in Blog, WordPress, Cloud, Guides

by Bogdan

Are you losing customers because your page speed is slow? According to WebFX, 83% of online users expect the websites they visit to load in a maximum of 3 seconds. If you notice visitors leaving your site, slow page speed could be the culprit. But don’t worry—this article is here to help.

We’ll explore how to adjust your page speed, what affects it, and which techniques to implement for improvement. By the end, your site will feel more professional and user-friendly.

What is Page Speed?

Page speed, also known as load time, is a crucial website metric that measures how quickly your website loads. A slow-loading website can lead to a higher bounce rate, meaning potential users may leave before the page fully loads. While many website owners worry about page speed, it’s important to remember that a slightly slower load time doesn’t automatically mean you’ll lose clients.

The first thing to say is that almost no one has a perfect page speed score. For example, if you check Apple’s website using tools like PageSpeed Insights, you’ll notice they often don’t score perfectly – yet, they retain millions of loyal customers every day. The takeaway? While speed is important, it’s not the sole factor in user retention.

Key Factors Affecting Page Speed

Several factors influence your site’s load time, including the way you handle multimedia, the plugins you use, and even your website’s hosting provider. Here are two common elements that affect page speed:

Image & Video Optimization: large, uncompressed images and videos are among the leading causes of slow page speeds. Resizing and compressing these files for the web is essential for optimizing performance.
Embeds & Widgets: plugins and widgets provide extra functionality, but overloading your pages with too many can drastically slow down your site.

If you’re using a website builder, like Brizy.io most of the work is done by the system, but that doesn’t mean that you can’t change your page speed.

There are two main things every site owner must be aware of: There are two main things every site owner must be aware of

What affects overall page speed and common mistakes
Tips to improve your page speed.

Images, images, and more images

Images are a powerful visual element for any website. They can make your hero section stand out, make your content more attractive, and engage visitors more effectively than text alone. However, images are also some of the heaviest files on a website. In fact, according to a study by HTTP Archive, images often double the size of other web files like JavaScript, CSS, and HTML on many websites.

Yet, many website owners don’t realize that improperly uploaded images can drastically slow down page load times. Instead of boosting user engagement, slow-loading images can cause visitors to abandon your site.

Techniques that improve your page speed

One of the most effective ways to handle image-heavy websites is through a technique called Lazy Loading. But what exactly is Lazy Loading, and how does it works?

Lazy Loading is a process where images are only loaded when they appear on a user’s screen, rather than all at once. Let’s look at an example:

Imagine your website has a large image at the bottom of the page. Without Lazy Loading, that image would be loaded along with everything else when the visitor opens the page, even though they haven't scrolled down yet. With Lazy Loading enabled, that image won't load until the user scrolls down and it becomes visible. This reduces the initial load time and significantly improves page performance.

Lazy Loading is automatically done by Brizy in background. However, keep in mind that Lazy Loading typically doesn’t apply to your hero section — the first visible part of your website — because this section is meant to load immediately to capture user attention.

Before we discuss image file formats, it's important to touch on Content Delivery Networks (CDNs). CDNs distribute your site’s resources, including images, across multiple servers located around the world. This means users can retrieve files from the server closest to their location.

For example, if your website is hosted in the U.S. but a user visits from Europe, a CDN will serve the images from a nearby European server rather than from the U.S.

In addition to optimizing images, web caching plays an essential role in improving load times for your website. A web cache temporarily stores copies of files, such as HTML pages, CSS stylesheets, JavaScript scripts, and images, so that future requests for those files can be retrieved faster next time.

If you're using a website builder like Brizy.io, much of the optimization process, including Lazy Loading, image compression, and caching, is automated for you. This takes a significant load off your shoulders and ensures your site is optimized by default.

Still, it’s worth paying attention to how you manage your images and other assets, as manual optimization can further boost your page speed.

But besides that, we also recommend you do some things to your images too. Let’s look at common mistakes people make while using images on their website:

Using a high resolution image
Not applying Image Compression
Using the wrong file type

Most images in their original resolution are big in size. Using a 4K image on a hero section will drastically affect your page speed. A 4k images has 8Million pixels. In contrast a 1080p images, has 4x less pixels than the 4K image, but most people won’t see any real difference.

The second mistake is that most people, after resizing their images, don't use compression to make the files weight less. As with the resolution, there isn’t much difference between the three images listed below, one is 147KB, another 99.1KB and another 37.3KB, but the difference is almost indistinguishable. The easiest way to compress your images is to use an online compressing tool.

Online, there are a lot of free tools that you can use to resize and compress images. Most of them also offer you the possibility of choosing how much to resize and to compress, like Image Resizer and TinyPNG.

Also while talking about images size, the type of file format you use for images can have a huge impact on performance. While PNG and JPG are widely used, the WEBP format has emerged as the most efficient choice for modern websites.

Compared to PNG or JPG, WEBP offers significantly reduced file sizes without sacrificing quality. A WEBP image can be smaller than PNG or JPG, which will directly affect your page speed. Even with compression, WEBP retains high image quality, which makes it ideal for use on websites where speed is important, but so is visual impact.

Just like with compression, there are free online tools available that let you convert your images to WEBP format. For instance, sites like Convertio or CloudConvert allow you to quickly transform your existing PNG, JPG, or GIF files into the WEBP format with minimal effort.

Widgets and embeds

When it comes to video content, most website owners avoid uploading videos directly to their sites due to the large file sizes. Instead, they rely on embedded video players by linking videos from platforms like YouTube. Using embedded videos helps reduce server load, as the heavy lifting is done by external servers. However, even embedded videos come with their own set of performance challenges.

One of the biggest issues with embedding YouTube videos on your website is that it loads a lot of unnecessary files in the background. Even if the video isn’t played immediately, various scripts and resources (like the YouTube player, tracking scripts, and thumbnails) are pre-loaded, which adds to your page’s total loading time.

While we employ techniques like Lazy Loading, Content Delivery Networks (CDNs), and Image Compression, on widgets, it’s not enough to rely on these.

To minimize the performance hit from YouTube embeds, one effective solution is to replace the default YouTube video thumbnail with a custom cover image. Instead of loading the full embedded player, you can load just an image until the user clicks on it.

If you're using a website builder like Brizy, this process is even easier. By default, Brizy applies lazy loading to YouTube embeds, but you can take this optimization a step further by using a custom cover image.

Here’s how it works:

Select the YouTube embed widget in Brizy.
Navigate to the “Player” section of the settings.
Upload a custom cover image to replace the default YouTube thumbnail

Don’t spam with widgets

Another type of element that can significantly slow down your website is the use of external widgets, such as maps or other tools that pull data from third-party websites. These widgets often load multiple scripts in the background, which can strain your page's resources and negatively impact load times.

One of the most problematic widgets in terms of performance are maps. Embedding a map on your website requires downloading a large number of scripts and resources, which can drastically slow down your page. These scripts are often loaded even before the user interacts with the map, increasing the initial load time unnecessarily.

We’re not saying you should avoid using maps altogether — they can be extremely useful for helping users find your location. However, it's important to place them strategically to minimize their impact on performance. For instance, placing a map on your “About” page would be a better choice.

Overloading a page

Another common mistake is overloading a single page with too many widgets, which can significantly slow down page speed. For example, let’s say you want to display 30 product reviews on your website. If you embed all 30 review widgets on one page, you’re asking the browser to load numerous scripts, images, and resources all at once, which will drastically increase the load time.

A more efficient solution is to spread your widgets across multiple pages. In the case of product reviews, you could spread them out across multiple pages. This distribution reduces the load on each individual page and significantly improves overall website performance.

Above we have discovered what is Page Speed and how to improve your page speed for getting better results. Starting to implement the tips mentioned above will make your site feel more responsive, faster, and enjoyable.

Article by Bogdan

Co-founder & Head of Design, Bogdan has a passion for everything that works great and looks awesome. Guilty for most of the UI and UX around this place, you can say "Hi" to him at bogdan at brizy dot io