Creating a successful website for your business takes more than a keen eye for design. Even if you spend countless hours working out the visual elements and the features your page should have, it doesn’t mean it’ll perform well. At least not from a technical perspective. So, instead of focusing solely on appearance, you also need to ensure that your site is fast enough. And, one of the best ways to do this is to run your site through Google PageSpeed Insights. Fortunately, our team at Fannit has extensive experience with this tool, so we can help you learn everything you need to know.
Despite the fact that all industries and audiences are different, having a fast website is crucial for the success of your business. If your site is not fast enough, people will simply hit the back button and move onto the next option instead of waiting for your pages to load. That said, making sure that your site loads quickly is not an easy task, even if you have a relatively simple site.
From large conglomerates to local companies, it’s usually tough to diagnose exactly what’s making a company’s website slow. It could be images that are too big, messy code, or page elements that slow down the rest of your page. So, you need to diagnose these issues quickly and make improvements before Google and other search engines notice that your web pages are too slow.
The good news is that PageSpeed Insights can help you test your site and make sure that it meets the speed demands of your potential customers. This tool was developed by Google and it provides a score out of 100 that indicates how fast your website is.
And, as a general rule of thumb, the faster your site, the lower your page bounce rate.
- More helpful reading: https://www.fannit.com/blog/bounce-rate/
But, even though Google offers this superb tool for free, PageSpeed Insights can be hard to understand if you want to improve your loading speed, especially if you don’t understand the technical part of your page. In this article, we will discuss the importance of having a web page that loads quickly, go over the benefits of using Google PageSpeed Insights, and provide tips on improving your page speed.
Focusing on Site Load Time for Better Results
Why should you care about how fast your page loads? The truth is that the loading speed of your web page is among the most important elements in terms of Google performance.
Consumers expect your website to load in 5 seconds or less preferably, and the vast majority of people will leave your site if it’s taking longer than that.
In simple terms, a slow web page delivers a bad user experience, which repels potential customers.
Having a beautiful and functional web page on Google is essential, but you also need to drive traffic to your page.
It doesn’t matter how good your content is if your potential customers never see it.
Therefore, you need to have a website that loads in a few seconds and keeps users engaged long enough to deliver your marketing message.
That said, speeding up a website is not always an easy task, especially if the web page has a sound structure in place already.
While it’s not perfect, the Google page speed score allows you to see how fast your page is. It measures the speed of your site from a variety of angles.
So, even though you don’t get exact instructions about what to do, you can analyze the data and figure out potential areas of improvement.
What Is Google PageSpeed Insights?
Google PageSpeed Insights is a tool that allows you to perform website speed tests and see how your sites are performing in terms of loading time.
Sometimes referred to as the Google Developers PageSpeed Insights tool. This free Google tool provides information such as the number of seconds it takes for your pages to load and other raw data.
Additionally, the tool also provides a grade based on how fast the page is, with a 100 score being the best possible mark.
You’ll also be able to see an assessment of smaller technical elements that affect page speed, like first input delay or cumulative layout shift.
Since 2018, Google PageSpeed Insights has been powered by Lighthouse, which is also owned by the search giant.
Lighthouse is a tool designed to help webmasters and business owners improve their websites in all aspects, including accessibility, performance, and innovative features.
If you check out the assessment of your entire website on Google Lighthouse, you’ll also be able to see your accessibility and SEO scores.
And, you’ll also gain access to a set of best practices that boost the performance of your business page.
Why Is Google PageSpeed Insights Important?
We know for a fact that your site loading time affects user experience, and therefore, SEO.
This means that you need to run a page speed analysis on your website if you want to increase your chances of landing a top spot.
However, you need to make sure that your page is at least as fast, if not faster than all the other sites in the top 10 of Google’s search results.
The vast majority of users won’t look past the first page of Google search results.
If your site isn’t among the fastest pages, then there’s a strong chance you won’t drive a lot of traffic from search engines. So, if you want to have a site that attracts a lot of potential customers and convinces them to leave their contact data, you need to make sure your page loads very quickly.
Research by Google suggests that the longer it takes for a site to load content, the higher the chances of having a bad bounce rate.
In simple terms, bounce rate describes the percentage of users that leave your site without interacting with your content. Sites that have a high bounce rate also tend to have a poor quality reputation in the eyes of Google, resulting in a bad SEO rank.
While this number may vary slightly from one audience segment to the next, your goal should be to have your page load time at 3 seconds or less.
If your site doesn’t load in 3 seconds, you elevate the risk of losing most of the traffic you generate.
Google PageSpeed Insights can help you ensure that your load time sits below 3 seconds and give you an idea of what to improve if your site is too slow.
- More helpful reading: https://www.fannit.com/blog/web-crawling/
Diagnosing Mobile vs. Desktop Websites
So, having a slow site on Google will result in a high bounce rate and drastically reduce the number of conversions you generate.
But, the first step is understanding that the code, images, and other elements on your site may actually be increasing your loading time.
Instead of making assumptions of why your page speed is not optimal, you should test out all potential variables and make improvements wherever possible.
Even if you use a responsive theme, the elements slowing down your mobile and desktop site can be different, so you need to analyze both of these separately.
Google PageSpeed Insights can diagnose your mobile as well as your desktop website, so you can evaluate speed index and many other metrics that affect the user experience on both devices.
To diagnose your mobile site, simply access the Google PageSpeed Insights home page, enter your URL, and click on analyze.
Google will quickly test your site and provide a variety of statistics based on your site performance.
The variables listed in green are optimized properly, orange means that they can be improved, and red indicates that the issues need to be taken care of right away.
As a general rule of thumb, improving variables that appear in red will have a more significant impact on the performance of your site.
As for mobile sites, there are some additional tools developed by Google that you can also use to run a diagnosis, for example, Test My Site.
But, PageSpeed Insights still provides a rich amount of data in comparison to other alternatives and it runs the mobile analysis at the same time as the desktop, so there’s no reason why you shouldn’t take advantage of it.
Tips on Improving PageSpeed Score
In this section, we’ll go over tips to help you improve page speed. But, before going over these steps, it’s important to understand the score you get from running a site speed test on Google PageSpeed Insights.
While getting a 100 score on Google PageSpeed Insights ensures that your site is as fast as possible, remember that the recommendations at the bottom of the page give you a solid idea of what you need to do.
Many business owners focus their resources on trying to score 100, when in fact they can achieve their company goals without necessarily achieving a perfect score.
This is one of the reasons why our team of experienced marketers pays close attention to the suggestions that appear on Google PageSpeed Insights, rather than the score itself.
Increasing page speed is the ultimate goal and addressing the tips that appear below the score itself will directly impact this metric.
For example, if your page receives a Google PageSpeed Insights score in the high 90s, there are no urgent suggestions listed at the bottom, and it already has an ideal page loading time, you’re better off investing resources into other areas of your marketing instead of trying to chase a perfect score.
With all of the above in mind, we’ve put together a few tips to help you improve your Google PageSpeed Insights score and overall load time.
Our team has conducted countless tests using Google PageSpeed Insights.
And, one thing we’ve noticed is that large images are among the most common reasons for slow loading times.
We’ve actually noticed first-hand how reducing image sizes can exponentially increase page speed and overall page load time.
One of the most common methods used to minimize image size without compromising the quality of your graphics is called compression.
Some compression tools can reduce image size as much as 50%, so make sure you research the different options on Google and find one that provides a high degree of compression.
For companies using WordPress-based sites, there are many plugins available to eliminate the need for manual compression.
Like compression platforms, there’s a variety of different choices, so find the alternative that provides the features you need.
For instance, if you upload a lot of images to your site gallery, you should find a plugin that allows bulk compression.
You may be familiar with browser caching. But in case you’re not, this term describes a program’s ability to “remember” information about previously loaded objects, so that it doesn’t have to reload the same set of data every time these objects are accessed again.
When applied to a webpage, caching is the process that lets browsers save information about your site like the logo, background, and footers.
So, instead of having to collect this data every user navigates from one internal page to the next, browsers save elements of your site and reduce the amount of time it takes to load your page.
In other words, users don’t have to wait for their devices to load all of your website elements every time a new page of the same site is opened.
Every time you conduct a Google website speed test using PageSpeed Insights, the tool accesses different pages on your site in order to determine your overall loading speed.
Learning to leverage browser caching will help ensure that your score is as high as possible and that your page loads no more than 3 seconds after being accessed.
Keep in mind this ability doesn’t come standard on all websites, so you need to find a plugin or work with a deb development specialist to help you leverage browser caching.
The vast majority of active websites employ various types of code, for example, HTML. However, this code can be written in a variety of different ways.
Some code is written in a way that it takes up a lot of space, which can slow down a website. In these cases, you need to find a way to minimize the amount of space that your code is taking up in order to accelerate your loading time.
HTML minification is a process that allows you to simplify and reduce the amount of space that your code takes up.
It works by removing unnecessary code and fixing issues without compromising the performance of the site on browsers. For example, this process can include changing the formatting, removing unused code, shortening lines when possible, and eliminating duplicates, among other actions.
As always, you can turn to a plugin to help you identify and automatically adjust the code to make it easier for browsers to access.
Just remember to run all the necessary checks on your pages before running a new Google site speed because any functionality issues will likely affect loading time.
Work on Implementing AMP
Accelerated Mobile Pages (AMP) is a project developed by Google, and it’s designed to help webmasters and business owners create faster mobile sites.
Although desktop remains the main type of traffic in the US, mobile users now make up more than half of all internet visitors on a global scale.
Even in the United States, a large portion of consumers uses their devices to search for products and services.
So, you need to test your site and verify that it also loads quickly on smartphones and similar gadgets.
In simple terms, AMP technology strips down unnecessary code from your site, creating a simplified open-source mobile version that loads faster.
Not only this, but the reduced page weight also results in a more streamlined experience for users on your website.
After implementing AMP properly and making improvements to your regular site, your Google page speed test should yield better results for both desktop and mobile.
While implementing this technology is one of the main mobile recommendations from Google, keep in mind that AMP doesn’t guarantee that your page performance will improve.
Instead of making adjustments and hoping for the best, you need to take control of your page weight as well as all the other elements that impact its loading time.
- More helpful reading: https://www.fannit.com/blog/google-index/
Eliminate Render-Blocking Tools
Improving the results of your Google page load speed insights will likely shorten loading time and enhance the user experience on your website.
But, many business page owners don’t realize that some of the resources on their pages can actually hinder their loading time.
For example, there are many plugins that are supposed to improve performance or allow additional analytics features, but actually end up blocking crucial elements from loading quickly.
Keep in mind that many render-blocking resources are not designed to fulfill this function. Instead, these scripts and programs are responsible for completing various tasks.
The problem is that these scripts sometimes need to load before a browser can access the first paint of your website.
If the script doesn’t load fast enough to send the first paint of your site in time, then it falls under the category of render-blocking tools.
Google PageSpeed Insights tells you when you have render-blocking tools slowing down your website.
If applied to larger sites, this option can actually hinder web performance, compromise the user experience, and increase page load time.
Unchain Your Site’s Critical Requests
Chaining critical requests is a common practice among web developers and it’s a part of the critical rendering path, which basically allows your site to be visible.
In order to improve your performance on PageSpeed Insights, Google suggests that webmasters unchain their website critical requests.
Besides your PageSpeed score, remember that Google PageSpeed Insights also displays the critical requests for the page that you’re analyzing.
Here, Google’s page speed measurement tool also provides the size/loading time of each request to help you weed out the underperformers.
As a page owner, you need to eliminate any critical request that isn’t essential, but you need to ensure that the scripts you remove will not affect page performance.
Lower Transfer Sizes and Request Counts
While bumbling your entire website into one isn’t ideal, it’s important to understand that the more requests a browser has to make to load your page, the longer it will take.
Therefore, you should reduce the number of requests required to load your website while also making sure that the files that need to be loaded are as small as possible.
Keep in mind that having a high number of request counts or large file sizes won’t result in a failed notification on Google PageSpeed Insights.
Instead, PageSpeed Insights shows you a detailed list of the request being made and how big the files are, so you can work on improving these metrics for your specific site.
There is no ideal Insights Google PageSpeed request count or transfer size goal because all websites are different.
Rather than looking elsewhere, you should keep a close eye on the performance of your website, set goals for your work, and make adjustments that help you achieve these objectives.
Eliminate Unused CSS
Your potential customers see your website as a source of valuable information and a way to complete purchases as well as other interactions with your businesses.
For this reason, you should look at your website like an online storefront.
As with a brick-and-mortar location, your potential customers will see the quality of your digital assets as a reflection of your service and success as a whole.
In the vast majority of cases, business owners prefer to store or remove unused goods from their store because these create the appearance of clutter. Likewise, you should look at your site and remove any unused CSS scripts.
CSS is a language that’s mainly used to implement visible elements into your website, but overloading your pages with this type of code can have a negative effect on your performance.
As with other areas of improvement, you can conduct a manual search, track down unused CSS, and eliminate these pieces of code in order to improve your Google PageSpeed Insights performance and score 100.
Alternatively, you can also leverage Chrome DevTools and other platforms that automate the process for you.
- More helpful reading: https://www.fannit.com/blog/rank-higher-on-google/
Reduce Main-Thread Work
A website is composed of a variety of complex elements.
One of these elements is known as the main thread, which is a crucial process that literally transforms the code on a site to visual pages that customers can interact with.
However, when the main thread is processing code, it can’t handle user requests.
This is one of the reasons why users can’t start interacting with certain elements on your website before these are loaded.
But, if the main thread process is taking too long, users will end up clicking the back button and continuing their search.
The good news is that Google PageSpeed Insights detects and highlights pages that take longer than four seconds to complete their main thread work.
We’ve already covered many of the main ways to improve main thread work, like minifying your scripts, removing unused code (not only CSS), and implementing caching to accelerate page loading time as well as improve feedback from users.
Lower Server Response Times
Although it’s not an official metric, the server response time of a website allows you to see how long it takes for your server to send out the first byte after receiving a request from a web browser. Rather than appearing as server response time, remember that this metric will be displayed as time to first byte (TTFB) in the Google PageSpeed Insights interface.
It’s important to understand that the server response time is not the same as your total site loading time.
But, there is a direct correlation between the two as websites that have a fast time to first byte tend to have a quicker loading time than pages with a bad TTFB.
According to Google, reducing server response time is a great way to improve your page speed metrics.
That said, remember that having unnecessary third-party scripts on your site can also slow down your CSS as well as other elements on your website.
Other actions you can take to improve your server response time include choosing a web hosting that has a focus on speed/quality, avoiding heavy themes or plugins, cutting down the code on your site where possible, and leveraging a content delivery network.
Additionally, you should pay separately for a DNS and ensure that this provider focuses on delivering great results.
Size Images Properly
It’s safe to assume that every single element on your desktop and mobile website affects its page speed, including the images you implement.
Whether it’s above or below the fold content, you need to verify that your images are properly sized in order to reduce the drag they create on your website.
When an image is not properly sized, your website’s CSS code will kick in and adjust the size of the content in order to fit properly.
But, this additional step can extend the main thread process, which means that it can take a few more seconds to load your content. And, even though it seems like one additional process won’t change the perceived performance, imagine this same process going on multiple times on every single page on your site.
As always, you can choose to manually handle the entire process of reviewing and monitoring images, but this can be time-consuming.
If you have a WordPress site, you can always rely on plugins or similar tools that automate a large portion of the process for you. Just remember, if you use a third-party solution, make sure that it comes from a reputable provider.
‘Lazy’ Image Loading
“Lazy” image loading, also known as offscreen image deferring, is the process of loading visual below-the-fold content in order to speed up performance. As we mentioned previously, there are many essential processes that need to be completed before the content on your site is displayed.
And, the faster these processes finish, the faster your content will appear.
Images are usually among the heaviest elements a website has to load, especially if these are not the right size. If you have a WordPress or similar type of site, you should take advantage of the lazy image loading feature to reduce the loading time as much as possible. In case you have a custom site you may need to work with your dev team, whereas businesses that have a WordPress site will have this feature built into several features.
Remember, you can employ third-party scripts or a similar tool to help you identify opportunities for lazy image loading, in case it needs to be implemented at the page level on your site.
If you have any questions about implementing lazy image loading or any other adjustments, contact our team of digital marketing and Google analytics experts and we’ll be glad to help.
Encode Images Efficiently
According to Google, optimizing images to help them load faster can result in shorter loading times.
This is the reason why the practice of compressing images is so popular nowadays. In simple terms, image compression allows you to reduce the amount of space a graphic file takes up without compromising the quality of the visual.
With the above in mind, remember that you need to compress and encode files properly if you want the best results.
Not all compression software is the same, and platforms that come from unreliable providers can prevent you from achieving ideal performance.
Therefore, you need to ensure that your image is as small as possible.
To encode images efficiently, you should start by uploading images of the exact size and implementing lazy image loading throughout your website.
Additionally, you should consider changing all image files on your site to new formats, like WebP and similar options.
What’s more, you should also use the correct format for each file type, for instance, choosing GIF format for animated content.
Employ Next Generation Image Formats
While we touched on this briefly in the previous point, it’s crucial to understand the importance of having next generation image formats on your site.
File formats affect everything about a visual file, from the quality of the image to its weight and, therefore, how fast it loads.
While most people are familiar with traditional formats like PNG, there are new file types that provide better performance.
Next generation image formats are graphic files that offer superior compression that doesn’t compromise quality, all while loading faster.
These formats even bring great benefits for mobile users as the image files consume less mobile data due to their reduced size.
And, you don’t have to monitor images manually. Instead, you can turn to Google PageSpeed Insights if you want to know how many traditional image files you have on your website.
At the time of writing, the three main types of next generation image formats are JPEG XR, JPEG 2000, and WebP.
JPEG XR is the golden standard for photos taken in HDR as this format uses an innovative type of compression.
As for JPEG 2000, this is the new version of the original image format and it supports lossless compression, which barely affects visible quality.
Lastly, WebP supports both lossless and lossy compression and images in this format can be up to 30% smaller than their JPEG counterparts.
Implement Animated Content Through Video Formats
Developing and distributing animated content has been a priority for many business owners since mobile devices started growing in popularity.
Today, having videos and similar content on your site is pretty much mandatory if you want to keep your audience engaged.
But, even though GIFs and similar content formats have allowed for easy distribution, these formats are usually taxing in terms of performance.
Google PageSpeed Insights points out whenever a large GIF is affecting the performance of your site.
Not only this, but the platform also suggests that you transform all of your animated content into MP4 or WebM file formats in order to improve website performance.
This concept is similar to using next generation images and it brings similar benefits.
Website owners need to answer one main question before changing the format of their animated content: which video type will they switch to? The main alternatives are MPEG4 (MP4) and WebM.
The former has better browser compatibility but it results in slightly larger files, while the latter offers optimal compression but has limited browser compatibility.
There is no exact formula to get the best results, so you need to make a choice based on your unique circumstances.
Allow Text Visibility While Loading
Many business owners avoid using creative fonts on their sites because they know that this can affect performance.
In other words, having a creative or unique font on your site can actually reduce your page speed and have a negative impact on usability. However, you can allow text visibility while loading, which can help improve your WordPress page speed.
You don’t have to rely on third party plugins to allow visibility while loading.
Instead, you can take advantage of the font display CSS feature available on most WordPress sites to ensure that users can see the text while the rest of the content is still loading.
If your text isn’t visible while loading it may take more seconds to load your page, affecting the perceived performance and overall user experience.
Not all business owners are aware that, just like images, the written elements on a page can also be compressed.
Text compression can help minimize the amount of data your page consumes, which translates to a better Google PageSpeed score.
As a matter of fact, text compression is already activated by default on some servers, but you need to review this option and ensure that it’s active on your site as well.
If your server doesn’t have text compression automatically in place, you’ll need to choose a WordPress plugin or similar solution to improve your Google PageSpeed rating.
WP Rocket is one of the top options without question, but keep in mind that it’s a paid solution.
Instead of paying for this standalone tool, you should partner with an agency that has access to this tool and other solutions that help improve the perceived performance of your site.
Pre-Connection to Required Origins
Whether it’s Google Analytics or a similar solution, there’s a strong chance you have a tool in place that comes from a third-party provider.
In these cases, you need to ensure that your additional resources are not slowing down your page — even if these help you collect the name, email, and other details from each visitor.
Fortunately, WordPress page owners can rely on the pre-connect attribute to tell browsers immediately that there are scripts from third parties in the content.
This attribute allows your page to initiate pre-connections as quickly as possible in order to reduce or eliminate a drop in perceived performance.
Load Key Requests in Advanced
In simple terms, the pre-connection attribute allows you to make contact with important resources that are located off-page.
Similarly, you can help browsers load key internal requests in advance in order to reduce the amount of time it takes to load content. This can be achieved through the “preload” attribute that can be placed on the header of each page.
Likewise, you can choose a tool to help you make these improvements automatically.
The list of potential options includes WP Rocket, Pre* Party, and other tools. If not, you can manually add link tags onto your header in order to specify which resources should be loaded first.
Don’t Redirect a Page More Than Once
Redirects are a common technique employed by website owners that have revamped or completely removed old pages from their sites.
But, in case you’re not aware, having redirects on your page will automatically increase its loading time.
Therefore, you should carefully choose the URL for each page and only use redirects when you have no other alternative.
Additionally, you should avoid using more than one redirect per page.
In other words, you should not send a user to two redirects in a row because this will damage the user experience and likely result in a missed opportunity.
- More helpful reading: https://www.fannit.com/blog/show-up-first-page-google-search/
Lower the Effects of Third-Party Code
It’s true that there are third party scripts that improve the performance of your page.
That said, there are also countless pieces of code that actually do more harm than good, so you need to avoid implementing any tool that may increase your Google PageSpeed score or conversion rate.
In addition to the above, you should ensure that the scripts on your page have as little impact on loading time as possible.
Reduce Mobile Payload Sizes
Whether you’re using WordPress or a custom website, you should ensure that mobile loading sizes are as small as possible.
Mobile traffic is already the most common type of traffic generated online and many of the most popular platforms are built on WordPress. Unfortunately, this doesn’t ensure that the mobile payload is small, which can increase loading time and affect conversion rate.
Not only does Google PageSpeed Insights tell you when you have a large mobile payload, but it also provides tips like reducing the number of posts displayed on one single page.
Other common tips include breaching up a long blog into several posts to defer comments after the rest of the content has been loaded.
Observe Timing Marks and Measures (For User Timing API)
There are many reasons why you may want to have a time stamp on each interaction with your users.
These include analysis, planning, campaign development, and similar processes. But, not all business owners know how to use this data to develop better content or how to uncover it in the first place.
It takes time to figure out how to use the data collected through WordPress timestamps.
But, you can easily make this data available by installing the User Timing API onto your WordPress page. The API doesn’t show a grade or rating, but rather the raw data that allows you to make decisions for your business.
Minimize Document Object Model (DOM) Size
The document object model (DOM) size refers to the process that allows browsers to transform HTML into visible elements.
In simple terms, the DOM relies on a tree structure that consists of multiple nodes, which, in turn, represent different elements.
As you can imagine, the larger the DOM, the longer it takes for your WordPress page to load.
Google PageSpeed Insights provides either a passing or failing grade for this area, but it doesn’t provide any custom suggestions.
Instead, you should ensure that your page elements adhere to all DOM regulations, including common size requirements.
Ready to Learn More? Contact Fannit Today
Learning to understand Google PageSpeed Insights can unveil a huge amount of valuable information about your page and how to improve your conversion rate.
If you’re looking for a knowledgeable digital marketing agency that understands Google webpage speed insights and how to interpret this data, contact Fannit today and our team of Google Analytics specialists will be glad to help.