100 in Google PageSpeed Insights

Optimize Your WordPress Site for Speed: A Guide to Top Scores

Wouldn’t it be great if there was a tool to help you make your website faster? Well, there is! Google PageSpeed Insights is the name, and it’s a free service that’s on hand to solve your slow website woes. In this article we’ll look at what it is, how it works, and how you can reach the elusive Google PageSpeed Insights 100 / 100 score in WordPress.

In this article we’ll look at what it is, how it works, and how you can reach the elusive Google PageSpeed Insights 100 / 100 score in WordPress.

What is Google PageSpeed Insights?

Google PageSpeed Insights is an online tool for measuring the speed and user experience of your website. It measures the load time of a site on desktop and mobile and displays various metrics about a site’s performance. If the metrics are judged to be suboptimal, the tool gives suggestions on how to improve them. Simply go to Google PageSpeed Insights, enter a URL, and hit Analyze. Google judges your site on both mobile and desktop. You may find that you score better on one than the other.

Here are the details on how Google now measures website performance with Core Web Vitals and other metrics:

Google no longer provides an overall performance score out of 100 for websites. Instead, it focuses on three metrics called the Core Web Vitals:

Largest Contentful Paint (LCP): This measures how quickly the main content on a page loads. For a good user experience, the LCP should be 2.5 seconds or faster.

First Input Delay (FID): This evaluates how responsive a site is to user interactions like clicks, taps, or key presses. An FID of 100 milliseconds or less is considered good.

Cumulative Layout Shift (CLS): This tracks visual stability by measuring unexpected layout shifts on the page. A CLS score of 0.1 or lower is preferred.

In addition to the Core Web Vitals, Google also looks at:

First Contentful Paint (FCP): The time it takes for any part of the page to render. A fast FCP is 1.8 seconds or quicker.

Interaction to Next Paint (INP): Measures responsiveness to user input events like clicks. An INP under 200ms is considered highly responsive.

Time to First Byte (TTFB): The time from initiating a request to receiving the first byte of the response. Aim for a TTFB of 0.8 seconds or less.

These metrics give website owners insight into the real-world experience for their users across load times, interactivity, and visual stability.

It measures Core Web Vitals metrics:

• Largest Contentful Paint (LCP) – load main content in 2.5 secs or less
• First Input Delay (FID) – respond to user input in 100ms or less
• Cumulative Layout Shift (CLS) – visual stability score of 0.1 or lower
• It also tracks other performance metrics:
• First Contentful Paint (FCP) – render any content in 1.8 secs or less
• Interaction to Next Paint (INP) – respond to input events in 200ms or less
• Time to First Byte (TTFB) – serve first byte in 0.8 secs or less
  In the “Diagnose performance issues” section, it provides scores from 0-100 for:

A score of 90+ is considered good, 50-89 needs some improvement, and below 50 is poor for that metric. So it gives a comprehensive audit of real-world user experience and technical best practices impacting site performance and search optimization.

Below that are Google’s Opportunities and Diagnostics. These are ways you can indirectly improve your Performance score. The Performance metric has the most influence on your site speed.

Before we get into how to improve your website’s performance, let’s take a look at why website speed matters.

Why is website speed important?

Website speed has a huge impact on user and consumer behavior. The average time it takes to fully load a mobile landing page is 22 seconds [1]. The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds [2]. 53% of visits are abandoned if a mobile site takes longer than 3 seconds to load [3]. Obviously, if you run an ecommerce site, a slow site results in decreased conversions, and that’s something you’ll want to address. Conversion rate drops with the time taken for a site to load [4]:

• Pages that loaded in 2.4 seconds had a 1.9% conversion rate
• At 3.3 seconds, conversion rate was 1.5%
• At 4.2 seconds, conversion rate was less than 1%
• At 5.7+ seconds, conversion rate was 0.6%

High PageSpeed Insights score vs actual page speed

Google calculates PageSpeed Insights score from both lab data (collected under controlled conditions) and field data (collected from real users in the wild). To test your actual page speed you can use online tools such as GTmetrix or Pingdom’s speed test. Using these tools you can test your site across different locations.

You can see on GTmetrix that the page load time for a test server in San Antonio, Texas is 666ms – a very good score. In Hong Kong, the page load time is a bit longer – 1.4s.

Pingdom Speed Test

Pingdom also shows a fast load time of 850ms for a test in Washington D.C. but a slower load time of 1.06s in Tokyo, Japan.

Uptrends Speed Test

The Uptrends tool lets you test across mobile and desktop. Here’s the result for the WP Shout site from Paris, France on iPad Air – a load time of 1.9s:

So there seems to be a correlation between Google PageSpeed Insights score and the actual page speed.

How to get ideal Google PageSpeed Insights 100 score on WordPress?

Now you know why a high Google PageSpeed Insights score is important, it’s time to look at ways you can improve it.

THE WAYS TO IMPROVE GOOGLE PAGESPEED INSIGHTS SCORE

1. Optimize images

Optimizing your images for the Web is an easy way to improve your Performance score. You’ll need an image compression plugin such as Optimole. This plugin can compress your images to a smaller file size so they are quicker to load. You can use them for all new image uploads as well as your existing ones. What’s great about Optimole is that it will also deliver your images through a CDN, making for an even quicker delivery.

It can also convert your images to the WebP format, which has a smaller size than JPGs or PNG files. This will help you pass the Serve images in next-gen formats recommendation. In addition, you can resize any larger images you have by setting a maximum width for them. Make sure that your images have the width and height attributes specified to satisfy the Image elements do not have explicit width and height opportunity.

The Optimole plugin also includes lazy loading, which only loads images or videos when a user scrolls down to them. This helps with the Defer offscreen images opportunity, shown below.

Another method to reduce image file size is to use SVG images. SVGs are vector files so they can be easily rescaled without an impact on their file size. They are not natively supported in WordPress but you can add them to your Media Library with a plugin such as SVG Support or Safe SVG.

2. Avoid an excessive DOM size

The DOM, short for Document Object Model, is a hierarchical structure that encompasses all the HTML elements, attributes, and text present on a webpage. To reduce the size of the DOM, it is advisable to divide lengthy web pages into smaller sections and refrain from concealing DOM nodes using the {display:none;} CSS declaration. The utilization of a page builder can increase the DOM size, primarily due to the proliferation of <div> elements. However, Elementor has eliminated some HTML wrappers since version 3.0, resulting in a smaller DOM size. Alternatively, one can switch to Gutenberg, as suggested by Chris Lema. For additional tips on preventing an excessive DOM size, refer to this article.

3. Optimize JavaScript and CSS

To enhance performance, CSS and JS files can undergo compression and minification. Minification eliminates spaces from CSS or JS files, while GZIP compression eliminates repetitive characters like Autoptimize (free) and WP Rocket (paid) are WordPress plugins that enable CSS or JS minification. However, minification may cause site malfunction, so minification plugins offer an option to exclude files from the process in case of issues.

WP Rocket offers the feature of merging your CSS and JS files into one, which minimizes requests. However, it’s not recommended if your web server utilizes HTTP/2. It’s advisable to check if your server supports HTTP/2 before proceeding. Additionally, GZIP compression can be enabled with most caching plugins. If your web server is Apache or LiteSpeed, the plugin can directly write to your .htaccess file or provide lines to copy and paste. For NGINX or IIS users, Hummingbird offers the necessary configuration to enable compression on these servers.

It’s time to remove any unused CSS or JS on your site. You can utilize Chrome DevTools to locate unused CSS and JS, which is typically associated with a plugin.

4. Eliminate render-blocking resources

Render-blocking CSS and JavaScript files may delay the first paint of your webpage, which can negatively affect key performance metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP). However, you can resolve this issue by using the Autoptimize plugin, which aggregates, minifies, and defers these resources, thereby improving your site’s load times and overall user experience. To enhance your website’s performance and potentially boost your SEO rankings, simply install Autoptimize, enable JavaScript and CSS optimization, and optionally inline and defer critical CSS.

5. Reduce initial server response time

The server response time is dependent on a few factors, including the theme and plugins you use, as well as the type of web hosting you have. It is advisable to remove any excess plugins that you do not use or switch to a lightweight theme, such as Astra. In terms of hosting, we recommend managed WordPress hosting over shared web hosting. Managed WordPress hosts include server optimization as part of their service.

6. Fast WebFont Loading

To ensure text remains visible during webfont loading, Google’s recommendation is to add font-display: swap; to your @font-face declaration in your stylesheet. This can be done using the Asset CleanUp plugin in WordPress by editing the stylesheet containing your @font-face declarations and adding font-display: swap;, which allows the browser to use a fallback font until the custom font loads, preventing text from being invisible during the loading process and improving overall user experience.

7. Keep request counts low

To keep request counts low and transfer sizes small, Google PageSpeed Insights suggests monitoring the number and size of files requested by your web server. High numbers can be reduced by optimizing images and media files (using videos instead of animated GIFs), optimizing CSS and JavaScript, optimizing fonts and third-party scripts, and reducing the size of your HTML file. These steps help improve page load times and overall performance.

8. Avoid chaining critical requests

Critical requests are those that are essential for loading a webpage. For instance, a logo could be considered a critical request. Long chains and chains that contain large downloads are detrimental to the speed of your website. They have an impact on the First Contentful Paint and the Largest Contentful Paint.

According to Google, in order to avoid chaining critical requests, you should:

• To minimize the number of critical resources, you can eliminate them, defer their download, mark them as asynchronous, and so on.
• To reduce the download time (number of round trips), optimize the number of critical bytes.
• To optimize the loading of critical resources, download all essential assets as early as possible to shorten the length of the critical path.

You can accomplish this by:

• Preloading key requests, images, and fonts can be achieved by using the “link rel=”preload” attribute in the HTML that references them.
• “Minimizing your CSS and JavaScript.”
• Eliminate render-blocking resources.

9. Avoid long main-thread tasks and minimize main thread work

Long main thread tasks, which are JavaScript tasks taking over 50ms, can delay the Time to Interactive for users. Minimizing main-thread work involves reducing the time spent on parsing, compiling, and executing JavaScript. You can achieve this by minimizing the use of bloated plugins, hosting fonts and analytics scripts locally, minifying or deferring JavaScript and CSS, and lazy loading background images. These optimizations help improve page load times and enhance user experience.

10. Avoid large layout shifts Avoid large layout shifts

Layout shifts contribute to the Cumulative Layout Shift (CLS) metric and create a jarring experience for users as the page content jumps around. To address this issue, you can add dimensions to your media, preload your fonts, and optimize dynamic content like newsletter signup forms. These steps help stabilize the layout and improve the user experience by reducing unexpected shifts.

11. Reduce the impact of third-party code

Third-party scripts are those hosted elsewhere, such as Google Analytics tracking or YouTube embeds. Whenever possible, try to host scripts locally. You cannot do this with YouTube, but you can host your analytics code and fonts locally. You can use the Local Google Fonts plugin to host Google Fonts on your own server. The Local Google Analytics for WordPress – caches external requests plugin will host your Google Analytics locally.

12. Use a CDN

A Content Delivery Network (CDN) is a network of remote servers that store and deliver web content to users. By caching static files like HTML, CSS, and JavaScript and serving them from a server location close to the user, a CDN can significantly improve your site’s speed. This optimization helps reduce metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP). At WP Shout, we use Cloudflare CDN, which offers a free plan to get started.

Conclusion on how to get to Google PageSpeed Insights 100 score

We’ve seen that there are quite a few factors in play determining site speed.  Achieving a score of 100 on Google PageSpeed Insights signifies that your website performs exceptionally well in terms of speed and user experience. This score reflects optimized loading times, minimal blocking resources, efficient coding practices, and overall excellent site performance. A high PageSpeed Insights score can lead to better SEO rankings, improved user satisfaction, and higher engagement rates. These tips will help you achieve a perfect score. If you have any questions and want to share your speeding experience don’t forget to comment.

FAQs

Q. What is Google PageSpeed Insights?

Google PageSpeed Insights is a tool that analyzes the content of a web page and provides suggestions to make it faster. It scores your page on a scale from 0 to 100, with 100 being the best possible score.

Q. Why is achieving a score of 100 important?

A score of 100 indicates that your website is highly optimized for speed and performance, leading to better user experience, higher search engine rankings, and increased engagement.

Q. What factors contribute to a high PageSpeed Insights score?

Factors include fast server response times, optimized images, minified CSS and JavaScript, efficient caching strategies, and minimal render-blocking resources.

Q. How can I improve my Google PageSpeed Insights score?

Improve your score by optimizing images, leveraging browser caching, minimizing CSS and JavaScript, using a CDN, and reducing server response times.

Q. What are some common issues that lower PageSpeed Insights scores?

Common issues include unoptimized images, excessive use of blocking CSS and JavaScript, slow server response times, and lack of caching strategies. Addressing these can significantly improve your score.