According to website experts from web.dev, to make sure your website is enjoyable for most people, it's a good goal to have the main content of your page load in 2.5 seconds or less. To check if you're meeting this goal for the majority of your visitors, it's helpful to look at how fast your webpage loads for 75% of users, both on mobile phones and desktop computers.
To prevent visitors from quickly leaving your website due to slow loading times, it's important to speed up your site. To achieve this, you'll need to address various issues that can cause your website to lag.
We're excited to assist you in identifying these culprits and providing possible solutions. Stay tuned as we guide you through them step by step.
There are several factors that can lead to slow webpage loading. Some of these issues, which we'll discuss in this post, might be responsible for your website's current sluggishness.
On this page, We will be using the page speed insight tool provided by Google to explore and find those culprits slowing down your page
To begin, let us first visit the page website Insight website at https://pagespeed.web.dev/ to inspect our site URL. If you want to follow along with this, you can use your domain name to do the test. Ideally, you can use any valid URL for any of your web pages to diagnose your page performance.
As shown in the image above, we are currently assessing the mobile performance of the website's main page. You can also evaluate the desktop performance. Simply click the 'Analyze' button to access insights about the page.
Below, you'll find an overview of our examination for both mobile and desktop views
From the images, it's evident that both mobile and desktop views maintain perfect scores of 100% in Best Practice and SEO, which is commendable. However, there's room for improvement in both performance and accessibility scores, even though they are above the average.
The main factors contributing to the sluggishness of your web pages are related to performance, accessibility, and site best practices. While SEO is crucial, it doesn't influence the speed of your websites and pages.
Now, let's delve deeper into what's causing these issues that are affecting the average scores for both performance and accessibility. We'll analyze the statistics provided by Page Speed Insight to uncover the reasons behind these challenges.
Below are brief explanations of these terms from the image above:
1. First Contentful Paint (FCP): This measures how quickly something appears on your screen when you open a webpage. It could be the first text, image, or any visible content. Faster FCP means you see something on the page sooner.
2. Largest Contentful Paint (LCP): This tells you when the largest piece of content on a webpage becomes visible. It's often an image or a block of text. Faster LCP means the most important stuff loads quicker.
3. Total Blocking Time (TBT): TBT measures how long a webpage keeps you from interacting with it. It's the delay between when you try to do something (like clicking a button) and when the webpage lets you. Lower TBT is better for a smoother experience.
4. Cumulative Layout Shift (CLS): CLS measures how much the layout of a webpage moves around as it loads. If elements like buttons or text suddenly jump or shift, it can be frustrating for users. A lower CLS means a more stable layout.
5. Speed Index: This is like a score that summarizes how fast a webpage appears visually to a user. A lower Speed Index means the webpage looks complete and usable more quickly. It's an overall measure of page loading speed.
These metrics help you understand how fast a webpage loads, how soon you can interact with it, and whether the layout stays steady while it loads. Faster load times and smoother experiences are usually better for users.
As noted at the beginning, to make your page load faster, each of those metrics from the image above must-have goal is to have the main content of your page load in 2.5 seconds or less. But when it doesn't, it will make your website to be slow.
One of the causes we are going to talk about is,
1. Oversized Images
Problem: When images on a webpage are too big, they can slow down your internet browser, making it look sluggish. Sometimes, the type of image you use can also make your browser slow. Certain image formats like BMP, JPEG, and PNG take a long time for your browser to process, which can make web pages load slowly.
As you can tell from the picture, the image's file size is bigger than the amount the browser can save, so now the browser will take more time to handle it. This can make your webpage load slowly.
Possible solution: To fix these issues, think about using a different kind of image format called AVIF or WebP instead of JPEG or PNG. These formats make images load faster and use up less of your mobile data.
Also, it's a good idea to make sure that the size of the images on your webpage matches what your screen can show, taking into account how clear your screen is. There's a tool called Lighthouse that checks this. If your images are too big, it can mess up how the webpage looks, and that's not great for users.
In a perfect world, your webpage should only show images that are just the right size for your screen, so you don't waste data and your webpage loads quickly.
2. Unsued CSS and Javascript
Possible solution:
