WebStartupsInsightsResourcesFeatured

Can Your Website get a 100 Score on PageSpeed Insights?

page speedpage load timePage Speed InsightsMobile page speedDesktop page speed100 score
Updated July 26, 2021 Ivana

As any business owner out there, you want your website to be the first one that appears on the Search Engine Results Page (SERP) whenever potential users have an issue your company solves. And there are a plethora of factors that help you achieve this goal, one of them being your score on PageSpeed Insights.

 

Page speed has been a Google ranking factor for a long time now, but because it affects the overall user experience, bounce rates, as well as conversion rates, Google has also made it a key element of the new Google’s Core Web Vitals algorithm.

 

how to get a 100 score on page speed insights?

 

At this point you are probably thinking “Ok, so how can I get my website to a 100% score on PageSpeed Insights?“. Well, figuring out where the problems with your website’s page speed are rooted in is not that simple.

 

And before you start pouring resources into boosting your performance, you should also first make a plan and set some realistic goals. After all, is it even possible to achieve a 100% score on PageSpeed Insights? If not, what would be a good score?

 

Let’s find out! 

 

How is my Page Speed calculated?

Your website’s score on PageSpeed Insights consists of a series of tests that use both field data (data collected from actual users over time) as well as lab data gathered from bot-driven tests. The four criteria that revolve around human users are:

  1. First Contentful Paint (FCP) – the first moment when your page is loading where a user sees some user interface elements on the screen;
  2. First Input Delay (FID) – how long it takes for the user to be able to start interacting with your page;
  3. Largest Contentful Paint (LCP) – how long does it take for the largest or heaviest elements to load (usually, media such as images or videos)
  4. Cumulative Layout Shift (CLS) – if and how the layout moves after the pages have loaded (f. ex. a button shifting left or right, or an image jumping up or down)

 

These user-driven standards work closely together with the automated or lab tests to break down each main aspect of your website and how it affects the user experience. However, not all of these metrics weigh the same.

 

how the score on page speed insights is calculated

 

In other words, some criteria are less relevant or impactful than others. For example, FID, LCP and CLS are part of the Core Web Vitals, which means that they are pretty important and you should consider them when improving your performance.

 

On the other hand, FCP is not as crucial, because although Google recommends us to only have a 2-3s loading time, many users will wait an extra second if the website or page is worth it for them. This is why FCP only weighs 10% of the overall score.

 

But, with this many factors and abbreviations, you are probably wondering how are you ever going to remember all of this, and more importantly, how are you going to ever improve your performance?

 

How can I know what affects my score on Pages Speed Insights?

The first thing to keep in mind here is that you might never be able to actually get a perfect score on PageSpeed Insights. Instead, your goal should be to achieve as high of a score as you possibly can. And to do that, you need to first understand what is slowing down your loading times.

 

Simply put, you will need to run quite a few tests on quite a few different platforms. And it is important to mention at this point that if you are planning on boosting your website’s performance and score on PageSpeed Insights, you should consider reaching out to a web development agency or a freelance developer with experience in the technology behind your website.

 

As for the test you run, you can go just with your Pages Speed Insights report which will give you a pretty detailed overview of your users’ experience on your website, loading times and what you can improve on to boost your speed.

 

If you want a bit more than that, for example, you want to also test your SEO performance or your accessibility score, you should open Lighthouse using the developer tools (see video below) and test your site directly.

 

 

And if you want to go even further, you might also want to try something like GTMetrix to compare scores and flagged items that you need to pay attention to or improve on.

 

Oh, and member to test both your mobile and desktop versions.

 

Wait, there is a difference between Mobile and Desktop page speed?

Yes, yes there is. From image sizes to alignment, mobile-friendly elements, responsive design (and the list goes on) mobile devices work differently. Think about it this way, you wouldn’t expect a child to be able to carry the same weight an adult can, right? Similarly, mobile devices can’t perform the same as desktops.

 

Desktop vs mobile page speed scores

 

Normally, developers optimize sites specifically for mobiles – we hide elements that are not responsive, we remove content or media that is too large, we adapt loading priorities etc., we ease the load. But this is not always the case, so when you run your tests, you should always remember to check the mobile version as well.

 

And you might be thinking “How does that matter? Most of my users come from desktop”. That may be true, but Google doesn’t work like your users. In fact, since 2019, Google has only taken into consideration the mobile version of websites and discarded the desktop version.

 

This means that your mobile performance is important for your ranking regardless of which device is most popular with your users. But it also means that your website might not be properly indexed.

 

How can I get a 100 score on PageSpeed Insights?

No matter which tool you use to test your performance, there are several improvements that you can do to boost your page speed score. Some are more technical, others are as simple as optimizing the media on your site. But, if you got to this point and you still haven’t reached out to an expert, this is a perfect time.

 

Keep in mind that if you don’t have experience with development and decide to try and optimize it on your own, you m might break something and reversing that booboo is not easy.

 

Not to mention that an experienced development agency or freelancer will know how to read your reports, so they can advise you on what is easier or quicker to fix for fast results, as well as what takes longer or is altogether impossible. This way you can plan accordingly, avoid unnecessary risk, and save time and money.

 

Especially since, depending on the technology your website is built with, the optimization process might be different.

 

For example, if you use a CMS like WordPress, you might want to start by checking your plugins – which plugins do you use, are there more optimized options or can they be removed altogether, etc. On the other hand, custom-built websites are a bit more complex than that and require someone with programming experience.

 

But, there are a few most common improvements you can usually do on a web app regardless of the technology.

 

Compress your media files

Compressing the media files on your website is undoubtedly one of the fastest and most efficient ways to boost your page speed. Large images or images using outdated file formats are often the cause of the issue.

 

improve you score on page speed insights by compressing your media

 

So, depending on your website’s technology, you can use a plugin to optimize images for you (if you use a CMS), rely on online image optimization tools like tinypng.com, or tools like Adobe Photoshop to optimize your media before uploading it to your servers.

 

Minify your HTML, CSS, JavaScript files.

Here we are talking about optimizing your code files, or more specifically, cutting out unnecessary scripts so that you reduce the size of the files and make them easier to read for machines.

 

Simply put, your HTML, CSS and JavaScript files are text files that dictate what content exists on the page, how it looks, and how the page loads each element.

 

One example of how you can minify your files is to use style sheets instead of individual styling for each element. This is because, whenever your browser loads a page, it reads the code from top to bottom, sending requests to the server about how the page is structured, where each element goes, how text or buttons should look like etc.

 

If you use individual styling, the browser will ping the server every time it reaches a new block of content or a new element, and it will have to wait for the server to respond every time. As you can imagine, this will take forever to load.

 

But CSS styling sheets are found at the top of the HTML file, which means they are read first and define the general rules for all text, buttons and others. This way browser only has to ask once, and it will know how to display these repeating elements every time, thus significantly reducing the loading time.

 

how to improve your page speed by minifying your css html and javascript code
Source: hkeycdn.com

 

Another example of minifying code is by reducing the number of characters in the JavaScript files for example. This is done using specific tools, but basically, it takes a command from: “This button react like this when it’s clicked on” and gives it an attribute like “A”.

 

From your side, as the user, you don’t see a difference, but your code files now have a tenth of their original size, making it much faster and easier for servers to load them when needed. It also keeps your server light and avoids overwhelming it.

 

Reduce server response times

Speaking of keeping your servers clean and happy, another reason why your website is taking an eternity to load is the slow server response. Simply put, when your user wants to access your website, the browser first needs to make a request to the server, then the server subsequently brings all the required content.

 

The more it takes the server to return the page, the longer your users have to wait. So perhaps the best thing you can do about it is to optimize the server, for example, by upgrading the server capacity – or hardware if you are old-school and have your own physical one.

 

Make sure you use a reliable web hosting provider

If you don’t control your own servers, and you are using for example a managed hosting solution, then you might not be able to do the optimizations mentioned above. This is a bit of a problem, because, as you probably know already, hosting providers control your bandwidth usage, server security, and what types of servers they are using to host your web app.

 

If your website is stored on a low capacity server, then its response time will grow exponentially slower the more traffic you have and the bigger your site gets. But don’t worry, there are a few options here:

  1. You can move your website to a more powerful server;
  2. You can choose to breakdown your website into different servers so it doesn’t overload them;
  3. If you are really unhappy with your provider, you can move to a different, more reliable one

 

Be prepared to pay a bit extra as each of these options will come at a cost.

 

Use caching, lazy load and loading priority

Finally, there are a few other optimization options you can use to both improve your users’ experience as well as gain a few extra points with Google for your page speed final score:

  • Cache
  • Loading priority
  • Lazy load

 

Caching is a process that saves static elements like images, fonts or colours into your browser’s “memory” so it only loads them when you first visit a page and remember them. Then when you come back to that page, the browser doesn’t have to ping the server or spend time loading these elements again.

 

how caching works
Source: keycdn.com

 

Setting up a proper loading priority also ensures a better user experience as it avoids Cumulative Layout Shift and ensures each section of your page loads in the correct order.

 

Last but not least, lazy loading is your browser procrastinating and only loading resources or objects when they are needed, significantly reducing the communication time between browser and server, and bandwidth used. So, not only that is allows for a faster page load, but it also avoids overwhelming the server in case of large traffic.

 

Conclusion

So, can your website reach a score of 100 on PageSpeed Insights? The answer it depends. Mostly it depends on how complex your website is, the technology you use and also how much time and resources can you afford to invest in optimizing it.

 

Which raises another question: do you need a perfect score to rank at the top of the SERP and give your users the best experience possible? The answer is no.

 

You and your business need to strive for the best page speed you can achieve. But more importantly, you should keep your goals realistic and focus more on your user experience than on a score on a performance test.

 

At the end of the day there are plenty of websites that have an almost perfect PageSpeed Insights score but bring no value. Similarly, there are plenty of amazing websites that only have an 80% score or maybe even less and are still among the most popular and well perceived websites in the world simply because they deliver on UX.

 

So find your balance, focus on what makes your users come back for more over and over again.

 

Need more assistance?

If you still have questions whether you should aim for a score of 100 on PageSpeed Insights, how you can improve you users’ experience, or simply looking for a second oppinion, don’t hesitate to book a free meeting with our expert team.

 

We are here for you!

 

See more articles

How To Find The Best Web Development Agency For Your Needs?

3 Ways to Make Your WordPress Website Perform Better

9 Most Important Tips On How To Build A Website Successfully






Leave a Reply

Your email address will not be published. Required fields are marked *