How to Get a High PageSpeed Insights Score
Estimated reading time: 5 minutes
People often ask how they can get a high PageSpeed Insights score in their website performance tests. Having a fast lightweight website is important for better SEO and hence higher Google Search rankings. It improves your website’s user experience, bounce rate, and conversion rate.
Choosing the right website theme and content for your website makes or breaks your website performance. Today we want to give you some insights on getting a high PageSpeed Insights score in your website performance test using a right theme and content.
What are PageSpeed Insights Scores?
Google PageSpeed Insights is a tool used for testing website performance. It provides an overall performance score out of 100 as a weighted average of the metric scores below.
- First Contentful Paint (15%)
- Speed Index (15%)
- Largest Contentful Paint (25% as a Core Web Vital)
- Time to Interactive (15%)
- Total Blocking Time (25% correlated with First Input Delay which is a Core Web Vital)
- Cumulative Layout Shift (5% as a Core Web Vital)
On November 10 2020, Google announced Core Web Vitals would become ranking signals in May 2021. Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) are Core Web Vitals and provide important diagnostic information for optimizing user experience. Total Blocking Time (TBT) correlates well with First Input Delay (FID) which is another Core Web Vital.
Website Themes
As of February 2021, since 40% of the websites around the world are powered by WordPress, we focus on WordPress websites. With that being said, the below information applies to most websites that are built other content management systems.
A WordPress website theme combines PHP, HTML, CSS, and JavaScript. If a theme overcomplicates HTML, it can have a negative impact on website performance. A fast lightweight theme should have CSS written as clean and minimal as possible. A fast lightweight WordPress theme uses vanilla JavaScript (without jQuery) and very minimal JavaScript. Themes that use jQuery load more slowly because they load JavaScript along with the entire jQuery library. A fast lightweight WordPress theme uses minimal PHP because the more PHP is initiated on every page load, the slower your website will be. PHP queries your website content and outputs your website.
As a result, it is important to know what theme to start with when building your website. You will see in the next section that all themes get heavier as you add content to your site, but you can control how lightweight your theme is. You should choose a theme that has a high PageSpeed Insights score from the get-go.
High PageSpeed Insights Score Test Site
We have set up a speed and performance test site. All the pages got remarkably high PageSpeed Insights scores (100/100).
However, here is a caveat when testing the site. Your performance score may vary because of A/B tests or changes in ads being served, internet traffic routing changes, testing on different devices like high-performance desktops or low-performance laptops, browser extensions that inject JavaScript and add/modify network requests, and antivirus software.
Content Matters
An HTTP request is a request the user’s browser makes to download a web page from the web server. A web page may have CSS, JavaScript, images, fonts, media, etc. Each request slows down your website. It is imperative to keep these HTTP requests to a minimum in terms of quantity and file size.
“Keep request counts low and transfer sizes small – 9 requests & 246 KiB” shows the below HTTP request results.
| Resource Type | Requests | Transfer Size |
| Total | 9 | 245.7 KiB |
| Image | 3 | 199 KiB |
| Stylesheet | 2 | 24.8 KiB |
| Document | 1 | 9.9 KiB |
| Script | 2 | 8.4 KiB |
| Font | 1 | 3.6 KiB |
| Media | 0 | 0 KiB |
| Other | 0 | 0 KiB |
| Third-party | 0 | 0 KiB |
The stylesheet (two requests) and JavaScript (two requests) for the home page are only 24.8 KiB and 8.4 KiB respectively. These four requests include two scripts and styles WordPress loads namely style.min.css (block editor) and wp-embed.min.js (embeds).
As you can see from the HTTP request results above, the three images on the home page are 199 KiB in size having 81% of the total size and have made three requests. This means as you add more content like images, media, features, and elements to your website, its size will inflate. Therefore, it is imperative to control what content you will put on your website. Ask yourself the below questions before putting any content on your website.
- How many pieces of content will you add?
- What is the size of each piece of content?
- Does the UI/UX of the content outweigh page speed?
- Are there alternatives to the proposed UI/UX in order not to sacrifice page speed?
Further Optimization
As you add more and more content, your website will inevitably grow bigger and make more HTTP requests. That is why you need to optimize the speed of each page in order to get a high PageSpeed Insights score for each page. We recommend reading the article on ways to speed up your website which contains additional optimization tips.
High PageSpeed Insights Score Summary
As you can see having high PageSpeed Insights scores is valuable and if followed can help optimize your website. Choosing a fast lightweight theme and the right content is key to website performance.
Although good scores e.g. 90/100 are critical, don’t get obsessed with scoring 100/100. The reason is that depending on the industry, UI/UX sometimes outweighs fast page speed load.
