Page Speed Optimization
When we talk about page speed, we mean all the factors that affect how fast a page loads, from the moment the first byte reaches the user’s browser until all CSS, JavaScript, and images are fully loaded. Read below to discover ways you can improve your site’s speed and how we can help you.
What is page speed optimization of a website
The speed of a website is not just a technical characteristic.
For a long time, it has been one of the key criteria that Google (and other search engines) use to rank your website.
A slow page negatively affects the user experience and sales (especially in an e-commerce store), while many users may leave before the page even loads.
According to research, even 1 additional second in page load time can significantly increase the bounce rate.
The goal should always be for pages to load in under 1 second.
In this article, you will learn exactly:
For a long time, it has been one of the key criteria that Google (and other search engines) use to rank your website.
A slow page negatively affects the user experience and sales (especially in an e-commerce store), while many users may leave before the page even loads.
According to research, even 1 additional second in page load time can significantly increase the bounce rate.
The goal should always be for pages to load in under 1 second.
In this article, you will learn exactly:
- What Page Speed Optimization is.
- Free tools you can use to measure your website’s speed.
- Some easy wins to improve performance.
- Advanced techniques for speed optimization.
What is page speed optimization?
Page speed optimization is the process of improving the loading speed and responsiveness of a website.
Speed is not limited to how fast a webpage loads.
It also includes:
It is not enough for a website to load quickly — the content being loaded must also not negatively impact the user experience.
For example, imagine entering a page that loads quickly, but suddenly the font changes, text and images shift into their final positions, and you cannot scroll for a few seconds.
This is a poor user experience, and the issue is that it can vary from device to device.
Google, through its own tool (PageSpeed Insights), evaluates performance using something close to the worst-case scenario.
If you have ever wondered why everything looks fine on your mobile device but you still get a low score on mobile in PageSpeed Insights, it is because Google simulates the test on an Android device (Moto G Power) with a slow 4G network.
Keep in mind that just because you are viewing your website on a fast device with a strong connection, this does not reflect the experience of all users.
Speed is not limited to how fast a webpage loads.
It also includes:
- How quickly content appears (First Contentful Paint).
- How fast the user can interact with the page.
- The smoothness during scrolling and navigation.
- The total number of bytes transferred.
It is not enough for a website to load quickly — the content being loaded must also not negatively impact the user experience.
For example, imagine entering a page that loads quickly, but suddenly the font changes, text and images shift into their final positions, and you cannot scroll for a few seconds.
This is a poor user experience, and the issue is that it can vary from device to device.
Google, through its own tool (PageSpeed Insights), evaluates performance using something close to the worst-case scenario.
If you have ever wondered why everything looks fine on your mobile device but you still get a low score on mobile in PageSpeed Insights, it is because Google simulates the test on an Android device (Moto G Power) with a slow 4G network.
Keep in mind that just because you are viewing your website on a fast device with a strong connection, this does not reflect the experience of all users.
What are the available tools to measure the speed of your website?
As mentioned in the previous section, the most well-known tool is Google Page Speed Insights.
Just like we often seek a second opinion for other things (e.g. your car), the same applies to your website. It’s a good idea to test it using different platforms, so you can identify issues that one tool alone might not fully cover.
List of the most reliable tools:
Just like we often seek a second opinion for other things (e.g. your car), the same applies to your website. It’s a good idea to test it using different platforms, so you can identify issues that one tool alone might not fully cover.
List of the most reliable tools:
- Google PageSpeed Insights
- GTmetrix
- Pingdom Tools
- WebPageTest
- Lighthouse (via Chrome DevTools)
What do the different metrics shown by the tools mean?
The metrics shown by these tools don’t just measure how fast a website is, but how users actually experience the page.
This is what Google refers to as Core Web Vitals.
In other words, these metrics measure the overall user experience, not just speed.
-
Largest Contentful Paint (LCP): Measures how long it takes for the main content of the page to appear (also known as “above the fold”).
Example: How quickly users see the header, main title, or the primary banner of the page. -
Interaction to Next Paint (INP): Measures how quickly the page responds when a user interacts with it.
Example: How fast the site reacts when users click a button, open a menu, or scroll through the page. -
Cumulative Layout Shift (CLS): Measures how stable the page is while loading.
Example: If images or text suddenly shift position during loading or browsing.
CLS is also one of the most resource-intensive metrics in terms of device performance. -
First Contentful Paint (FCP): Measures when the first visible element appears on the screen.
Example: When users start seeing content like the header or text instead of a blank screen.
A page might respond quickly, but users may still see a white screen for a few seconds at the beginning. -
Time to First Byte (TTFB): Measures how quickly the server responds.
Example: How long it takes before the page starts loading after a user requests it.
In other words, these metrics measure the overall user experience, not just speed.
Plug-n-play Theme or Custom Theme
Using a theme is usually the fastest and most cost-effective way to start building a website. Platforms like WordPress, Magento 2, and others offer a wide range of free and premium themes that can cover almost any need.
However, this convenience comes at a cost.
Most themes are built to support multiple use cases. This means they include features, files, and code that, in reality, will never be used on your specific website.
The most common issues that arise are:
Additionally, many plugins follow a similar approach.
They often add:
All of the above increase the total page size and the number of requests, directly impacting loading speed and user experience.
For this reason, a more efficient approach is using custom themes.
At Fusion Lab, we use in-house themes that are fully tailored to each project’s needs. This means:
This approach results in a website that is not only functional, but also fast, lightweight, and efficient across all devices.
However, this convenience comes at a cost.
Most themes are built to support multiple use cases. This means they include features, files, and code that, in reality, will never be used on your specific website.
The most common issues that arise are:
- Unnecessary (bloated) code that loads without being used and affects performance.
- Large CSS and JavaScript files that increase loading time.
- Poor implementation quality in some themes, negatively impacting metrics like TTFB and INP.
- Dependencies on third-party libraries that load on every page, even when not needed.
Additionally, many plugins follow a similar approach.
They often add:
- Their own fonts
- Extra CSS and JavaScript
- Features that may not be used at all
All of the above increase the total page size and the number of requests, directly impacting loading speed and user experience.
For this reason, a more efficient approach is using custom themes.
At Fusion Lab, we use in-house themes that are fully tailored to each project’s needs. This means:
- Only the necessary code is loaded
- No unnecessary files or dependencies are included
- Further scaling and customization is fast and easy
This approach results in a website that is not only functional, but also fast, lightweight, and efficient across all devices.
How can I improve the speed of my website?
TL;DR
The following might get a bit technical 🙂.
Feel free to skip to the contact form and we’ll run a free audit for you. Let’s continue...
By reviewing the reports from the tools mentioned above, you can identify specific improvement opportunities for your website’s structure and performance.
One of the most quick and easy wins is implementing lazy loading for images that are below the fold (meaning they are not visible in the initial viewport).
What is image lazy loading?
Lazy loading is a technique where the browser only loads images that are visible to the user.
In simple terms, images further down the page are not loaded initially, but only when the user scrolls and reaches them.
This significantly reduces the initial load time and improves metrics such as LCP and FCP.
How can you implement it?
The simplest way is to add the following attribute:
loading="lazy"
to your <img> tags. From there, the browser handles the rest.
A very common issue, especially with themes and plugins, is the presence of duplicate libraries.
For example, one part of your site might use Owl Carousel for a slider, while another uses Glide. In practice, both libraries serve the same purpose, but both are loaded, unnecessarily increasing page weight.
The same issue can occur with:
While the above can get quite technical, there are also some easy wins you can apply immediately:
Most of the above can be implemented easily through plugins or via your platform’s built-in settings.
The following might get a bit technical 🙂.
Feel free to skip to the contact form and we’ll run a free audit for you. Let’s continue...
By reviewing the reports from the tools mentioned above, you can identify specific improvement opportunities for your website’s structure and performance.
One of the most quick and easy wins is implementing lazy loading for images that are below the fold (meaning they are not visible in the initial viewport).
What is image lazy loading?
Lazy loading is a technique where the browser only loads images that are visible to the user.
In simple terms, images further down the page are not loaded initially, but only when the user scrolls and reaches them.
This significantly reduces the initial load time and improves metrics such as LCP and FCP.
How can you implement it?
The simplest way is to add the following attribute:
loading="lazy"
to your <img> tags. From there, the browser handles the rest.
A very common issue, especially with themes and plugins, is the presence of duplicate libraries.
For example, one part of your site might use Owl Carousel for a slider, while another uses Glide. In practice, both libraries serve the same purpose, but both are loaded, unnecessarily increasing page weight.
The same issue can occur with:
- Fonts
- CSS files
- JavaScript plugins
While the above can get quite technical, there are also some easy wins you can apply immediately:
- Lazy loading for images and iframes
- Compression using Gzip or Brotli on the server
- Minification of CSS and JavaScript
- Caching (browser and server-side)
- Using a CDN for faster content delivery
Most of the above can be implemented easily through plugins or via your platform’s built-in settings.
FAQ
Usually, this is caused by an issue with caching, where it either doesn’t work properly or gets cleared too frequently by some factor, resulting in the content being repeatedly recomputed.
Improve your websites perfomance today
Having issues with your server? Not sure why your website is lagging? Not sure how to configure the necessary settings?