Score a Perfect 100% on Google PageSpeed Insights

In one of our previous blog posts, we have discussed the latest trends in SEO and how you can increase your online traffic and rankings. Regardless of the industry, a business is in, companies want to improve their profits at the end of the day, and since most of the shopping is done online, a perfect SEO score is crucial. However, achieving that is easier said than done since Google has announced several other algorithm changes. Furthermore, your website needs to be optimized for desktop, but now, it needs to be optimized for mobile as well. Additionally, it needs to be lightning-fast on both desktop and mobile, which means there are several things to look out for, which we will discuss further in this blog.

The loading speed of your website is one of the essential parts of your SEO. One way to check and improve page speed is by using Google PageSpeed Insights. There’s no question that this tool is helpful for web admins, site owners, and developers. The Bounce Rate and how long your audience is staying on your website matter a lot among numerous ranking factors.

In today’s blog post, we’ll give you some insights into what to look out for to score a perfect 100 on Google PageSpeed Insights, and what different things mean from its recommendations page, and precisely some tips and tricks to help you achieve that number.

Google PageSpeed Insights

Google PageSpeed Insights consists of two parts: desktop and mobile. It is a performance index of your webpage which, after analyzing it, gives you suggestions based on several parameters, detailed below.

First Contentful Paint

According to its definition, this represents just how quickly your web page's content shows up on the page. Google has pointed out that an FCP of 0.9 seconds or less can lead to a good user experience.

Largest Contentful Paint

This represents how quickly your web page's most prominent image, text, or video shows up on the viewport. The viewport is the part of the website that a reader can see on the screen without scrolling. According to Google, an LCP that takes 1.2 seconds or less to load can lead to a good user experience. In some cases, the FCP and LCP are the same.

Speed Index

This part represents how quickly your webpage's contents are visibly populated. Often, SI can sound pretty similar to FCP or LCP, but it isn't. However, it depends on browser viewport size, but it doesn't indicate a milestone in the web page's loading time. To measure that, the tool uses a frame-by-frame analysis of the loading behavior of the page and eventually reflects the visitor's page experience. A good user experience is when the Speed Index is 1.3 seconds or less.

Time to Interactive

Just because the FCP or the LCP have occurred, it doesn’t mean that your webpage becomes fully interactive. TTI represents the time when the browser becomes capable of responding to the inputs from the user on that webpage. In simple terms, even if a web page has been rendered, that doesn’t necessarily mean that it will be responsive if you click on a specific part of it. For a good user experience, Google recommends that TTI should be 2.5 seconds or less.

Total Blocking Time

This represents the total amount of the website that was blocked from reacting to user inputs. In this case, the problem might be coming from CSS or JavaScript, or any other form of script. However, Render-blocking CSS or JS is often the primary culprit for increasing TBT.

A browser typically uses the main thread to code HTML, construct DOM, execute CSS and JS, process user events, and perform several other essential tasks. If any of the mentioned tasks run for more than 50 milliseconds, it is called a Long Task. The browser cannot interfere when a Long Task runs, and the main thread is considered blocked. At this point, Google recommends that the TBT should be 150 milliseconds or less.

Cumulative Layout Shift

Simply put, this part refers to the unexpected shifts in the layout of the web elements during a webpage’s rendering. All layout shifts happen as an aggregate score. An excellent example of CLS is when you try to click on something, and that button unexpectedly shifts to a different location. The result is a misplaced click. 

One thing to look out for is to pay attention to what causes CLS since web admins can deliberately generate it to earn from misplaced clicks. Additionally, CLS can be caused by many factors like the lazy loading of images or ads. CLS can lead to a terrible user experience, and Google recommends having it as low as possible. According to best practices, CLS should not have a score of any more than 0.1.

How to Improve Page Speed

Contrary to popular belief, the real purpose of testing your web page performance is not to achieve a high score but to find problem spots that you can further optimize. This will not only improve your web page but will also decrease your actual and perceived loading times. We will dive into more details in the following sections on what and how you can do to improve your rank.

Image Modification

Media files could become a drag on your webpage performance. Sizing them is an integral part of keeping your loading time low. If your images are larger than they need to be, you should use CSS to resize them appropriately. A first tip here would be to either upload the photos at the proper sizes in the initial phase or create different-sized images for various devices.

You can do this by using the secret attribute, which is added to <img> tags to specify alternative image files at different sizes. Thus, browsers can determine which option is the best for the screen and deliver the appropriate image depending on the device used.

Deferring offscreen images is another way to optimize visuals. This process is commonly known as “lazy loading.” At this point, instead of making the browser load every image on a page before displaying above-the-fold content, it will only load the immediately visible ones. By lowering the time needed to load the page, you allow your webpage to improve its performance. Google recommends using this method by using specific plugins designed explicitly for lazy loading.

There’s no question that images have a significant impact on your website’s performance. Another optimization method is to consider compression, which we’ll discuss later in this blog post. Compression, which can be done using several plugins, is also the primary method for following Google’s recommendation to encode images. In addition to designing the images specifically for different screen sizes or devices, compressing them, and using plugins, there is something else you can do to make your webpage load quicker: deliver images in next-generation formats. Instead of using .png or .jpeg, use WebP images. Even if that might be difficult, some plugins offer automatic conversion to this format.

CSS and JavaScript Render Blocking

Any code that has to be loaded for your webpage to become visible to users is regarded as content. If extra CSS on your site is not useful, it puts excess weight on the performance. Google recommends cutting out any unnecessary CSS by inlining or deferring styles in whichever way makes the most sense for your pages. Luckily, there are several tools to identify and cut out any unused CSS. 

The first one is to define what parts of the CSS and JavaScript files are critical for rendering. After doing this, you need to load those parts to the <head> element of HTML by inlining them within the <style>  and <script> tags. The second step is to defer loading or asynchronous loading of non-critical elements. An example of this will be if you use popups. They appear after a short time when a user enters your page. At this point, you should separate the CSS and JS for it in a different file using a specific code. The method is much simpler for JavaScript files and adds defer or async attributes to the <script> tags. As a general recommendation, both of these techniques should be implemented by a skilled developer. 

Compression

Enabling compression gives you the ability to provide access to anyone who wants to edit the files you have in your server setting. Whether it’s image or text compression, your page speed will improve dramatically. However, it’s a bit more technical, and for doing this, you’ll need an excellent technical support team.

The Google PageSpeed Insights Enable text compression recommendation refers directly to a GZIP compression when testing your website. Even if, in some cases, this is done automatically on your server, you need to follow several steps to implement this. Additionally, there are multiple options to choose from. 

The first one is to install a plugin with a GZIP compression feature. There are several providers, but it all depends on how much you are willing to invest in this. Although there are multiple choices, you can compress your text manually. For this, you’ll need access to the .htaccess file for further editing. This is risky, so make sure you have proper backups on hand.

After implementing the GZIP compression, make sure to check whether it has been successful or not.

Server Response Time

Another critical aspect in scoring a perfect 100% on Google is passing the server response time. The benchmark here is 0.2 seconds, and anything above that will only lower your score. Switching off any unnecessary services running on the server to help increase speed does not necessarily mean a significant improvement. The question remains: What can I do to reduce the server response time?

For starters, try switching to PHP 7. However, make sure that your host provider supports PHP 7, as not many do. Before making the switch, check whether your website is compatible with it. You can do this by adding a PHP compatibility checker that scans your code and identifies anything that might interfere with PHP 7.

After making sure that you can make the switch from WHM, you have to access the “Multi PHP Manager,” select the page you want, and change the PHP version. Should you have trouble accessing it, ask your server admins, and most importantly, make sure that you’re doing the switch in a test environment first. 

Secondly, use a Content Delivery Network(CDN). It can help reduce the server response time and server-status resources of your website from servers around the world, thereby speeding up your website. But what does a CDN do? A CDN will make copies of your webpage’s status files, including CSS, images, HTML files, and keep them stored in servers all around the globe. Then, when a user requests your website, the CDN will serve the cached files from the server closest to that user. 

Minify

Most of the time, CSS files used in a specific webpage are larger than they need to be. They include various carriage returns and spaces that aren’t necessary for computers to understand their contents. One way to speed up your loading time is to minify your CSS and JavaScript files. This process requires condensing your files by eliminating unnecessary characters, spaces, and duplications. 

Numerous plugins deal with JavaScript and CSS files minifying if you don’t have a technically advanced team to take care of this. The configuration takes a long time as whoever is doing it has to move scripts around while it checks whether the site functions correctly. After each script, a test run is required.

Plugins

While making changes to the website requires a lot of time and work to be put in place, try to use as few plugins as possible. Some CMS platforms offer many plugins to ease your work, but at the same time, using more means a slower loading time. If that is not an option, make sure that you only keep the necessary ones up and running for a smooth and fast user experience.

Conclusion

As you can see above, there are many things to consider when optimizing your web page for speed. Unfortunately, some of these aspects are often overlooked, which is why SEO is becoming a challenge for many companies. Of course, having a perfect 100% on Google PageSpeed Insights is ideal, but the idea is not to focus on achieving that but tweaking your website to improve it to a point where a faster loading time comes naturally. 

NNC Services is a HubSpot Platinum Partner and offers a wide variety of services. SEO optimization is one of the critical services that NNC Services provides for its clients. In the meantime, read our blog and get in touch with us for more information on how we can help you.