How to Use Google PageSpead Insights to Optimize Your Website
When users experience more than a few seconds delay in load time on a website they are 113% more likely to bounce than when experiencing a load time of 3 seconds or less. Think about that for a moment… then note that every second counts when it comes to designing and maintaining an online experience.
Page speed and website performance is paramount to establishing a great user experience and keeping valuable traffic on your site. One of the best tools that web designers, developers and website owners can use to measure a page load speed and identify a trusted performance score is Google PageSpeed Insights.
Understanding the PageSpeed Insights tool is important to make sense of the performance data and feedback reported in the Core Web Vitals metrics to address page load speed and user experience issues within your website. Taking action on Google’s optimization recommendations can also enhance the experience you are providing to users. When you take steps to optimize the speed and performance of a web site, you also take a big step towards improving search engine rankings.
What Is Google PageSpeed Insights?
Google PageSpeed Insights (PSI) measures and reports on the performance of a web page on both desktop and mobile devices using a combination of optimization metrics that make up the four Core Web Vitals, which include:
Together, these metrics calculate the Google PageSpeed Insights Score and identify the website speed score and performance issues. Then the tool provides helpful suggestions on how the web page or blog post can be improved.
The performance score and improvement recommendations are based on a combination of lab and field data. Lab data is particularly useful for debugging issues with performance because lab data is collected in a controlled environment.
The downside to lab data, however, is that it may not recognize real-world bottlenecks. This is where field data is more useful to review and analyze the performance score of a site.
Field data is used to capture and recognize the true, real-world user experience. Field data is limited in the number of metrics it can analyze in a website compared to lab data but is based on actual user data collected by Google Chrome.
How to Use Google PageSpeed Insights
Testing webpages is quite simple and straight-forward with the Google PageSpeed tool. All you have to do is copy the URL of any page or blog post on your website and paste it into the Google PageSpeed Insights tool. After pasting the website URL, click the analyze button and after a few moments, Google will provide your PageSpeed Insights score including a detailed breakdown of how each Core Web Vital metric measures up.
When Google analyzes the website URL it provides a score measured out of 100. This score is based on performance optimization best practices that are known to offer the best user experience.
In addition to your PageSpeed score, you will receive a few recommendations from Google on how to help improve the page speed and performance of the page. This can include suggestions such as removing unused CSS, reducing Javascript execution time and deferring offscreen images to name a few common practices.
These speed scores are calculated through Google’s open-source tool known as Lighthouse. This tool is designed to analyze and help improve the overall quality of all web pages. Lighthouse can even help to evaluate such factors as accessibility, progressive web apps, and various performance metrics among others.
Using Google’s PageSpeed Insights tool will help to provide you with a detailed assessment of what Lighthouse thinks of your webpage. It’s important to note that on top of running your page through the optimization audit, you’ll also be receiving scores for your search engine optimization (SEO) which can help your website increase traffic and visibility.
Why Does Speed Matter?
When it comes to the web there’s an expectation for the entire web to be fast. Google even considers PageSpeed Insights to affect ranking factors on other search engines. If you have a slow site you can bet you will not be showing up on the first few pages of search results any time soon.
Speed is just one of more than 200 ranking factors that Google looks at when it comes to analyzing your search engine position, but it’s one of the most important elements to optimize your site for.
How Do I Get 100/100 on Google PageSpeed Insights?
There are many web developers and site owners that quickly become obsessed with trying to achieve a perfect 100 out of 100 on Google PageSpeed Insights, which in all honesty is near impossible – and not all that important either. Trying to achieve a perfect score blinds many website owners to various other optimization aspects that will help improve their user experience and search engine ranking more than paring down their website to achieve a 100/100.
The most valuable information gained from running your website through the Google PageSpeed Insights tool is the optimization recommendations. These recommendations should be used as guidelines to help improve your PageSpeed score, but should not be taken as gospel. Achieving a perfect score on Google PageSpeed Insights if ever feasible, isn’t as important as providing an all-around great user experience. This means website designers and owners should find a balance between design, function and performance.
The PageSpeed Insights platform isn’t the end-all test for website speed and page load performance either. We always suggest running a website through various website speed optimization platforms to obtain more of a complete picture and more diverse feedback to make the most educated decisions. Every platform will rate your web site a little differently and provide you with a different response and feedback on how to improve your site’s speed.
Some websites have a loading speed of 500 milliseconds, yet they don’t receive a perfect score on Google PageSpeed Insights because they fail to meet the standards of other Core Web Vitals.
Website owners should make sure to focus on “perceived performance” for users and make it a priority when trying to consider optimizations as this metric is what human visitors truly experience. People that visit a website don’t care what its Google PageSpeed Insights score is, they just want to view content as fast as possible. This fundamental reason alone is why we should use this tool and others like it to identify potential optimization problems on a web site so we can work to resolve them and increase website speed and therefore improve user experience.
How Does Google Use PageSpeed Insights?
On top of user experience (UX), your site speed also plays an important factor in your website’s search engine ranking. The PageSpeed Insights platform is developed by the world’s largest search engine so it’s fair to conclude that your PageSpeed Insights score will affect your position in Google’s SERP’s to some degree.
The reality of the situation is that Google does use this platform to determine its rankings and is expected to place more weight on Core Web Vitals metrics and site speed in 2021. So when you analyze your site with the Google Page Speed Insights tool to identify speed issues you can expect relevant and accurate feedback and recommendations that will make a difference in your SEO performance.
Google does consider many factors when determining the position of a website within search results and does not rank a website on the load time alone. In other words, hitting a perfect 100 out of 100 on your PageSpeed score won’t guarantee you a top spot on the search engine result pages.
The page speed score is designed to help improve the SEO and performance optimization of your site by focusing on the human user experience. As mobile page speed is a significant ranking factor that directly affects the mobile SEO rankings, Google separates both the mobile performance score from the desktop page speed metrics to help you fine-tune your website for each environment.
Understanding Google PageSpeed Insights Recommendations
Google PageSpeed Insights will provide specific optimization recommendations to help you improve the page speed and performance score of your site. The website speed recommendations are the most valuable information Google provides within this tool – more meaningful than the load time score.
To understand specifically what these recommendations are, how they apply and how to implement them it’s important to fully understand the difference between the two data sets that the metrics are processed through.
Field Data
When analyzing your website with this tool you will receive a field data report. This report will show how your webpage has performed in the last 30 days compared to other websites in the Chrome User Experience Report. This report is a large pool of performance metrics that are gathered from Google’s Chrome web browser.
It is important to note that the field data is collected from actual web users that use Google’s Chrome browser, not any other popular browsers like Safari or FireFox. With this said, you may run into the issue of there not being enough field data for the URL you’ve entered to determined a PageSpeed score. If this is the issue, you will only be able to view the lab data for your analysis until more field data is available.
Lab Data
In comparison to field data, lab data is based on performance analysis from Lighthouse. Lighthouse will evaluate the page, emulated device, and connection. This data does not show real-world data, but it can be useful for seeing where performance optimizations may be added or refined.
Understanding the differences between field data and lab data allows us to look at the recommendations you may receive when testing your site.
1. Avoid Changing Critical Requests
The idea behind changing critical requests comes from the critical rendering path (CRP) and how browsers load your site. Specific elements such as CSS and Javascript must be loaded entirely before your webpage is visible to the user.
Google will show you a diagram of the series of dependent requests that your page must fulfil before it becomes visible. It will also note the size of each resource.
You will want to minimize the number of dependent requests that your site has, as well as the sizes of these requests. You can do this by eliminating render-blocking resources, minifying CSS and Javascript, and differing offscreen images that appear below the page fold.
You can even optimize the order in which things load on your page. This will help to shorten the CRP or moving the above-the-fold content to the top of your HTML file.
2. Eliminate Render-Blocking Resources
This is one of the most common recommendations that Google will give you. This recommendation refers to Javascript and CSS scripts that may be hampering the speed of your site. Since the user’s browser has to download all these processes before displaying your page, having a too many of them can hinder page load time.
Google will recommend that if you don’t have a lot of Javascript or CSS then you can inline them to get rid of this recommendation on your report. You will also have the option to defer your Javascript. This will download your Javascript with the HTML parsing, but will only execute it once the parsing is complete.
3. Reduce Request Counts and Limit Transfer Sizes
The more requests that a user’s browser has to make when it comes to loading your site pages, the larger the resources your server returns. This then leads to a more drawn out website load time.
This recommendation doesn’t result in a pass or fail in your report. You will be presented with a number that indicates the number of requests your page is making as well as their related sizes.
In truth, there is no ideal number of maximum sizes or requests that should be kept in mind. Instead, Google will recommend that you create these standards yourself by creating and putting into action a performance budget.
You can set your goal related to aspects such as the size of scripts and frameworks, maximum image sizes, how many external resources you call to, and the number of web fonts used. This performance budget will help to hold you accountable and help you to optimize your site.
4. Minify CSS and Javascript
CSS files and Javascript files are usually bigger than they need to be. Minifying your CSS will help your page to load faster instantly. Minify them by removing unnecessary characters, duplications, and spaces.
5. Remove Unused CSS
Any code that is included in your stylesheet must be loaded for your page to become visible to users. If you have CSS that isn’t useful then it can bog down your site and cause load time issues. To do this you can inline or defer styles that make the most sense for your pages.
6. Minimize the Main Thread Work
The main thread is the primary element of a browser. This element is responsible for turning code into a webpage that users can interact with.
If the main thread is working through your website’s code it can’t handle the user’s requests at the same time. You can resolve this issue by minifying code, implementing a browser cache, and removing unused code.
You may even consider code splitting. This will help to break up your Javascript into bundles that only execute when they are needed.
7. Reduce Javascript Execution Time
One of the most prominent contributors to main thread work is Javascript execution. Your insights will have a separate recommendation to let you know if this task is having a high impact on your website’s performance. The methods above for minimizing thread work should also be used to resolve this issue.
8. Reduce Server Response Times
Time to First Byte (TTFB) measures how long it takes for a browser to receive the first byte of data from your server after making a request. TTFB should not be confused with overall site speed as it simply measures how quickly the loading process begins, but having a low TTFB is important for your site’s performance.
By reducing server response times you can greatly improve your Google PageSpeed report. There are additional factors that can influence your TTFB, including:
- Selecting a reputable Domain Name System (DNS) provider
- Selecting a high-quality web hosting provider
- Use lightweight themes and plugins
- Implement browser caching
- Use a specialized WordPress optimization plugin
- Reduce the number of plug-ins installed on your website
- Utilizing a Content Delivery Network (CDN).
9. Size Images Appropriately
Any media files, especially images, should be sized for their intended use. If they are too big they can really slow on your site’s performance.
If you have images included on your site that are bigger than they need to be, CSS can be used to resize them properly, but it’s best to upload images at the exact size they’re intended to be displayed at. Or you may also use responsive images that are sized for specific devices. This can be done by using the srcset attribute that is simply added to the <img> tags. This helps to determine alternative image files at various sizes from which web browsers will read and determine what image size fits the screen best at any given moment.
10. Defer Offscreen Images
Deferring offscreen images is also known as lazy loading. This means that instead of having the browser load every image on the page initially, it will only load the ones that are immediately visible to the user. This leads to fewer initial tasks assigned to the browser when the page first loads and leads to improved page performance.
11. Encode Images Efficiently
Another way to optimize the images on your site is to consider image compression. This can help to reduce file sizes so images will load faster. The rule of thumb here is to have the lowest possible file size without sacrificing the quality of the image. There are many WordPress plugins designed to automate this task for website owners, including Smush and Imagify.
For website owners that are more in tune with Photoshop or similar image editors, further optimization can be done before uploading the image to the website.
12. Serve Images in Next-Gen Formats
Some image file formats load faster than others but they are not as common as JPEG or PNG formats. Many WordPress optimization plugins now include the option to serve images in Google’s new WebP format which further reduces file size and increases initial load time. The WebP file format is quickly becoming the new web standard and the Google report will recommend utilizing these new features if it will help your site’s performance and load time.
13. Use Videos for Animated Content
Using GIFs can be an engaging way to display animated content, but using too many GIFs will cost you some performance points.
Instead, you can convert these files to formats such as MP4s or WebM. These formats won’t impact page speed and will help make your site faster than using GIFs.
You may also consider using HTML5 or CSS/SVG animations within your user interface design if it makes more sense than traditional video animation.
14. Make Text Visible During Webfont Load
Fonts are larger files that can negatively affect the loading time of your page. Sometimes browsers will hide your text until the font loads completely, resulting in a performance flag and a recommendation to address the issue from Google to improve your score.
They will tell you to resolve the issue by applying a Front Display API swap directive that’s in your font-face style. You will need to modify your CSS style sheet to resolve this issue.
15. Enable Text Compression
When this recommendation appears it’s referring to the use of GZIP compression. In some cases text compression will be enabled on the server you’re using automatically. If this isn’t the case your first option is to install a plug-in that offers a GZIP compression feature. You can also decide to compress your text manually which involves editing your .htaccess file.
You've made it this far... we hope you're finding this content useful. Let us help you achieve your goals.
Google’s 2021 Algorithm Update
In 2021 Google will be updating and implementing a new algorithm focused on performance and user experience. The update is aptly named Page Experience.
The page experience update will determine how users’ experiences of interacting with a webpage unfold. The algorithm will then inform the PageSpeed tool and help website owners optimize their sites to make the user’s browsing experience more positive. The underlying goal Google is trying to achieve with this update is to force website owners to improve the performance and human experience on their website. The reward for falling in line is higher rankings in search results.
This update will result in one of the largest shifts in search results ever. Google has been testing this update for months now and slowly refining its algorithm to reward the websites that users enjoy. This means that user experience is going to become very important to your ranking very soon.
This doesn’t mean that your entire website will need to be user friendly, instead, Google will be looking at each site page by page and will be ranking specific pages in regards to how user friendly they are – not the website as a whole.
It’s more important than ever to stay ahead of the curve and be prepared for the full rollout of this algorithm update. Using the Google PageSpeed tool will help you identify issues on each website URL and address them before your rankings are in jeopardy from this pending update.
A Final Look at Google PageSpeed Insights
Within this ultimate guide to using Google PageSpeed Insights, we have discussed what PageSpeed Insights is and how Google uses this platform to inform search engine rankings. From there we looked at the two types of data Google uses to score your sites and the recommendations Google may offer to make your site faster.
Lastly, we’ve looked at the top recommendations Google will offer, what they mean and how to resolve them to stay ahead of the pending 2021 algorithm update.
Cookie Policy