Everything You Need to Know About Google PageSpeed Insights and Increasing Your Page Speed for SEO
Google PageSpeed Insights is one of the most important SEO tools. It helps you know if your website is fast enough to get a good position on the Search Engine Results Page (SERP).
Page Speed has been a Google search ranking factor since 2010. Websites that load fast get a better search ranking than slower sites.
You see, the top ranking of the Google SERPs is all about User Experience. The search engine prefers websites that have good content and are responsive.
A slow-loading website annoys people. It reflects on their behaviour; according to Google, 53% of people close a website if it takes more than three seconds to load.
In this article, we present a detailed overview of what Google PageSpeed Insights is and how you can use the tool. We also look at all the things that you can possibly do to improve your website speed.
What is Google PageSpeed Insights?
Google PageSpeed Insights is a tool that tests the speed of a website on desktop and mobile devices.
Remember, the page speed doesn’t only mean the loading time of a site; it also refers to the time that the site takes to become responsive and process the user’s actions to provide an output.
After providing you with the analytics for your site, Google PageSpeed Insights also gives you tips on how you can improve your page speed.
By the way, the tool uses Lighthouse to analyse the data of the page. Lighthouse is an open-source platform software that measures the quality of web pages in terms of speed, performance, progressive web apps, etc.
Google PageSpeed Insights (Mobile) Score for IT Solution Singapore website.
How Do I Use Google PageSpeed Insights?
All you need to do is run the software on a supported web browser like Chrome, Firefox, and Microsoft Edge and paste the URL of the site/page you want to analyse.
Then, the tool assigns a score between 0 to 100, depending on your site speed.
Remember to check the speed on both mobile and desktop versions of the website.
What is a Good Google PageSpeed Insights score?
Anything above 90 means fast. A score between 50 to 90 means moderate, and below 50 is considered to be slow.
Your page is very fast as long as the score is around 90. Getting a perfect 100 is a good thing but not a must.
We are saying this because getting a ‘clean 100’ may be difficult and time-consuming for beginners. Rather, you can create a ‘reasonable speed’ and use the remaining time for doing other forms of SEO.
Well, if you are an SEO expert or hire an SEO company, it is practical to go for a full score.
Google PageSpeed Insights Explained: What Do the Different Analytics Mean?
As you scroll down, you will see two main sections: Field Data and Lab Data.
Field Data is the information collected through real Google Chrome Users. On the other hand, lab data is generated in a testing environment.
Google PageSpeed Insights Field Data
Field data displays the webpage’s speed history information if it has been listed in the Chrome User Experience Report. It informs how the actual website or the webpage has performed over time in terms of the speed.
You don’t have to worry if your site doesn’t have any field data. You see, it won’t still stop you from looking at the present situation and optimizing your page for speed.
Anyway, if you still want to access the data, you can run a performance audit directly on Lighthouse.
Origin Data
Origin Data is a section of field data that shows the speed performance of the entire domain (website), rather than just a page. It shows how the site’s speed has changed over time, and how does it compare to other websites in the Chrome User Experience Report.
Google PageSpeed Insights Lab Data
You should focus more on the lab data because you get more insights in a controlled testing environment. This will help you better understand the factors that have been affecting your speed. Furthermore, a good Lab Data score surely will reflect on your field data.
Furthermore, for each Lab Data, a Green icon means it is Fast, Orange stands for Moderate, and Red means Slow.
First Contentful Paint (FCP)
First Contentful Paint is the time needed for the first ‘bit’ of content in your website to load. This bit of content can be a header, a letter, a text, image, etc. In other words, it is the period taken to render the first content that can be seen on the screen. It is used to know when your user gets the first consumable information.
Remember- we said consumable. For example, if you have a website that loads a blue background colour before opening, we can’t consider it as a contentful paint because the blue background is not ‘consumable’. The FCP happens when something like text or picture is loaded.
First Meaningful Paint (FMP)
First Meaningful Paint in Google PageSpeed Insights is the time taken for page’s primary content to appear on the screen. In other words, it is when the first piece of ‘understandable’ content appears. First Meaningful Paint is the broader version of a first contentful paint.
The First Meaningful Paint definition differs from content to content. For example, in an ecommerce website with a product listing, the first contentful paint is not complete if the image doesn’t load. Whereas, in a blog article on a website, even a page without an image can qualify.
FMP VS FCP Example
Say we have a landing page. Then, the First Contentful Paint (FCP) can be the time needed to load the header. On the other hand, the First Meaningful Paint (FMP) is the load time for the text copy so that people can understand about the product or the service the page is referring to.
Speed Index
Speed Index is the time needed for a page to be visibly populated. In other words, it measures how fast content loads on the screen.
To measure Speed Index, Lighthouse records a video of the page loading and analyses frame by frame to know the time when most of the content shows up on the screen.
First CPU Idle
First CPU Idle measures the time in which your page isn’t fully interactive but still responds to some input. The input may be in various forms, like clicking a link, button, accessing a javascript powered control, etc.
According to web dev, a web page should fulfil the following two conditions to be minimally interactive:
- Most of the UI elements on the screen are interactive.
- The page responds to most (not all) input in a reasonable amount of time.
For example, say one of your web pages has a form. People may be able to enter their information, but not submit the form for some seconds or milliseconds. This is a First CPU idle because the site is interactive for most input but not for the Submit Button.
Time to Interactive (TTI)
TTI measures the time required for the website to be fully interactive. This means it should be able to respond to every user input.
These are the conditions for Time to Interactive:
- The page displays the First Contentful Paint (FCP)
- Event handlers are registered and working for visible page elements.
- The response time for each user input is not more than 50 milliseconds.
Estimated Input Latency (Max Potential First Input Delay)
Max Potential First Input Delay is the maximum first input delay that your users can experience.
Well, First Input Delay is the time from when a user first interacts with a page and till the time the page is able to respond to the information. It is the period ‘between’ user making a request, and the page ‘starting’ to provide the output.
A lower first input delay shows that the website is usable soon.
Opportunities
Opportunities are the things you can do to improve your Google PageSpeed Insights score. The section also includes the estimated improvement in the load time if you implement the tips.
Diagnostics
Apart from Opportunities, Diagnostics provide additional tips on how to make your website better. Implementing them will not necessarily make your website faster, but they do make your site more usable.
Why is Page Speed Important?
Page Speed and User Experience: Rankbrain
Like we said, page speed is critical for good user experience. Now, let us see it in the ‘Google’ way.
Rankbrain is one of the most extensively used Google search algorithms. It measures how relevant and useful a piece of content is for users.
Rankbrain also gives every webpage registered on Google an ‘equal opportunity’ to shine.
This is how Rankbrain works: for every search query, it shows some new webpages on the SERPs. This doesn’t necessarily need to be on the first page, but the second or the third or so.
After that, Google checks how many people click on the listing. The search engine also records the time users spend on the site. If the time spent on a website is more than that in the competitors’ site, Google gradually increases the ranking.
These are the things that the algorithm checks:
Click-Through Rate: Click-Through Rate is the percentage of people who actually click on a listing after it has been shown on Google search engine.
Dwell Time: It is the period people spend on your website after opening it. A higher dwell time indicates relevant content.
Bounce Rate: Bounce rate defines the number of people who exit your page without taking action. An example of an action would be visiting another page on the same site.
Pogo Sticking: If someone clicks on your website, but doesn’t find a sufficient answer and goes back to the search results to visit another site, its called Pogo Sticking.
Now, say that someone opens your website, but exits it as it takes a lot of time to load. Now, that is the worst-case scenario, because you are going to have a minimum Dwell Time, and Highest Bounce Rate and Pogo Sticking. This will totally hamper your search results ranking.
Page Speed and Bounce Rate: Google Statistics
Google conducted a research in 2017, where they compared Bounce Rate with the Page Load Speed. Here are the results:
- As page speed goes from 1 second to 3 seconds, the bounce rate increases by 32%.
- If page speed goes from 1 second to 5 seconds, the bounce rate increases by 90%.
- As page speed goes from 1 second to 6 seconds, the bounce rate increases by 106%.
- Finally, if your page load time increases to 1 second to 10 seconds, the bounce rate increases by 123%.
Conversions and Page Load Speed
Website speed isn’t only for SEO and usability; it directly affects the conversions. A study shows that Amazon would lose $1.6 billion in sales every year if its page load speed decreased by one second.
The thing is that when your website loads slow, bounce rate increases. Forget about buying- people will have closed the page before they even see the product. Furthermore, 79% of online shoppers say they are very unlikely to come back to a website if it seems to have a problem with speed.
Thus, companies like Walmart have reported that for each second increase in page speed, the conversions increase by 2%.
Mobile Page Speed and Ranking
52.2% of web traffic in 2018 came from mobile devices. Furthermore, an estimated 62.9% of people had owned a mobile phone by 2016.
People have already been using mobile devices predominantly for accessing the internet.
Google enabled Mobile-First Indexing on every website starting July 2019. This means that the Search Engine will now consider the mobile version of a website before it’s desktop counterpart while giving it rank.
Mobile site speed isn’t only for the search engine, but also for your users. People want no compromises; 85% of internet users expect a mobile site to load at least as fast as on their desktop.
Remember, it isn’t only about the speed. You may have to do other optimizations such as increased font size, lightweight theme, etc. to make your mobile website more interactive. Also, some websites may plan to make their mobile sites faster by embedding less content than in the desktop version; Google has clearly stated that this will decrease the search ranking.
How Do I Increase My Google PageSpeed Insights Score?
These are the things you can do to increase your website speed:
Use a Better Web Hosting Plan
Sometimes, your hosting has a lot to do with your website load speed. So, before moving on to anything technical, the first thing to do is to choose the right hosting provider and the type.
Shared hosting is only recommended for blogs and personal websites. If you run an ecommerce store or websites with significant traffic, you should upgrade to a Virtual Private Server or a Dedicated Server Hosting.
On the other hand, if your website is extremely slow even with a VPS or Dedicated Server, you may need to change your hosting service provider.
There are popular web hosting service providers right there. You can also consider engaging our hosting server if you need a one-stop solution for your SEO needs. We offer affordable packages, great for websites that are just starting.
However, it may be better for you to take hosting from a local service provider, or from your Web Design or SEO Company if they provide one. Websites located on geographically close servers are faster than others. Remember, you should choose a server that is near to your customers, rather than you.
Furthermore, popular hosting service providers have thousands of clients. Processing your requests or complaints may take time. On the other hand, local servers with lesser service seekers can prioritize you more when problems arise.
Avail from a Content Delivery Network
A Content Delivery Network (CDN) is a network of proxy servers and data centres distributed geographically.
In other words, a CDN stores your website on various servers around the world. When a user tries to access the site, the nearest server to the user is used to access the website, and so it becomes fast.
Thus, a CDN is a perfect way for you to increase the speed of your website if your traffic comes from around the world.
Another way a CDN can help is by managing the number of requests in a server. If your website has only one server and there is a lot of traffic, requests may overflood in the server which will make your site slow. Anyway, with a CDN, there will be various servers, and they can share the work.
There are popular CDNs out there but they are quite pricey in terms of pricing. If you need a reliable solutions provider who delivers just as great but minus the huge costs, then let us handle your CDN instead. You’ll never worry about paying unnecessary and hidden charges!
Compress Images and Videos
Multimedia takes the most resources, so they decrease your website loading speed.
If you have a video on your site, make sure users can play it on less resolution than the original.
Well, if your web server doesn’t have a lot of space, you can upload your videos on platforms such as YouTube and Vimeo, and embed them on your website. This will make sure that the video loads fast on the user’s browser and the video space/ resources doesn’t slow your site down.
In the case of images, make sure you compress them before uploading. Doing so without compressing the image could make your website load slow. Always try to compress your image to the correct size before uploading it to the website. Just don’t decrease the size until it becomes grainy.
Also, upload the right orientation of your images. This applies especially in the case of social sharing images. If you upload lower adjustments, images won’t look good while sharing, and if you upload a higher dimension than needed, the extra pixels will only take up space.
Reduce HTTP Requests
While loading your website, browsers need to make HTTP requests for each file, including HTML, CSS, Javascript, Images, etc. More HTTP requests translates to your site being slower.
The problem with many websites is that the designers don’t really think about page speed while designing. The design and the decorations have been done flawlessly, but the user browser is more likely to show the loading icon for a long time while fetching the design elements.
These are the things that you can do to reduce HTTP requests:
- Combine all the Javascript files into one File.
- Merge CSS files into one.
- Use Image Sprites. This means combining various images into one file so that the browser will only have to make an HTTP request for one file instead of many.
- Remove the plugins that have their own JavaScript and CSS files. Disable plugins from loading in pages that don’t really need them
- Try to use text in place of image if possible. Remember, we said when possible because content without sufficient images is bland. For example, if you have an image of some text, rather download a similar font and enter the phrase. Instead of an Image saying “Contact Us”, use an attractive font and type “Contact Us.”
- Use Lazy Loading. Lazy loading means loading only some part of the page rather than everything at once. The remaining page is loaded only if the user wants to access it. A good example would be Facebook. The site loads some News Feed Content, and as you go down, there is an option called “Load More Posts.”
Enable GZip Compression
A Website mostly consists of multimedia, text, and codes. We have already talked about compressing images and videos, but what about the text and codes?
GZip Compression compresses your website’s HTML, CSS, and Javascript files. This enables browsers to load content faster.
You can also use GZip on multimedia, but that is somehow not practical. You see, GZip is primarily meant for text files. Also, software like Adobe Photoshop and Riot do better jobs, reducing photo size without hindering the quality.
Enabling GZip for WordPress
For WordPress, caching plugins like WP Rocket enable GZip automatically upon installation and launch.
You can also install a similar plugin called PageSpeed Ninja. Upon activation, go to Settings> Advanced and select GZip Compression.
Enabling GZip for Other Websites
The process for adding GZip compression depends on your web server. So, it will be best for you to contact your web design company or the hosting provider to ask for instructions to enable it.
Well, in most cases, users need to add the following code on your .htaccess File. Remember not to modify any other content in the File as it may disorient your site. If you are confused, take help from a professional.
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Note: If you are using Apache server and the above code doesn’t work for you, you may try adding the code below on your .htaccess file.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
For NGIX servers, you will need to add the following code on your nginx.config file:
gzip on;
gzip_disable “MSIE [1-6].(?!.*SV1)”;
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;
Use the Check GZip Compression tool to verify the proper installation of GZip on your website.
You can use an FTP program (Filezilla is free) to access your .htaccess file.
If your server uses cPanel, you can access the .htacess file by clicking on File Manager> Web Root> Show Hidden Files and Go.
Enable Browser Caching
When you enable browser caching, certain resources such as HTML, images, or other files are stored on the user’s browser when they open your website. Thus, the browser doesn’t need to load those files next time the user wants to access the site. This is the reason websites are faster the second time than first.
If you use WordPress, you can install various plugins such as W3 Total Cache, WP Super Cache, WP Rocket, WP Rocket Cache, WP Fastest Cache, etc.
For other sites, you will need to access the .htaccess file and enter this code:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
Optimize Your Mobile Website
Google has explicitly stated that Mobile Page speed is a ranking factor.
The process for optimizing your mobile site is the same as the desktop version. You compress images, use fewer HTTP requests, enable GZip, use a CDN, etc.
Another thing to keep in mind is that your mobile site should be more lightweight and faster to load than your desktop version.
Accelerated Web Pages for Mobile Website
One of the best ways for increasing mobile website speed is by using Accelerated Mobile Pages (AMP).
Accelerated Mobile Pages is a framework that Google created with Twitter. It helps create a better and faster experience on Mobile Pages by simplifying HTML and removing any unnecessary content and streamlining CSS.
The logo stands for AMP.
Web pages optimized with AMP are very simple and don’t have clunky features that don’t work well on mobile phones. They load almost instantly.
Furthermore, AMP pages don’t come with confusing formatting. The idea with it that people are more concerned with the content on their mobile phones than mesmerizing designs. Thus, we focus on how to deliver the page’s material more efficiently.
AMP Pages, as they are very fast, often make it to the ‘Top Stories’ section of Google. Thus, companies such as WIRED have recorded around 25% increase in CTR by using AMP.
You can start implementing AMP on your website by visiting their official link.
Put JavaScript at the Bottom and CSS at the Top
The use of JavaScript is to add automation, animations, and interactivity to your website. On the other hand, CSS describes the presentation of web pages.
When you place JavaScript at the top, browsers will first load animations and automation before content. This will make users wait until they can see the content of the page.
Thus, keeping your JavaScript below CSS is a simple yet effective way to make your page accessible to users soon.
Remove Flash from Your Website
If you still have Flash on your website, it is time to let go.
Flash is a heavyweight platform and takes a lot of space. Naturally, it will consume a lot of time for your website’s load time.
Furthermore, HTML5 these days can make better apps than Flash with minimal resources.
Adobe has already announced that it will end the support for Flash by the end of 2020. Browsers like Google Chrome and Mozilla Firefox have also already disabled Flash by default and have announced to remove the support altogether when Adobe discontinues the platform.
Include a Trailing Slash at the End of the URL
A simple ‘/’ at the end of the URL will also add up to the website speed.
When you don’t have a trailing slash on a URL, web server will first think that instead of a page, it points to a file. So, browsers will first look for the ‘file’, and when they don’t find it, they redirect the user to the page. This means that an unnecessary 301 redirect is created, which consumes the website speed, even by a little bit.
Thus, www.example.com/resources/ takes less time to load than www.example.com/resources
Use a Minimalistic Theme and Remove Plugins.
This is the final tip to improve your Google PageSpeed Insights Score.
In case you are using Content Management Software (CMS) like WordPress, choose simple themes that come with lesser design elements. Animated Widgets, Navigations, Highlights, etc. do make your site more attractive, but they will simultaneously make it slower.
Don’t forget to remove or disable plugins that you don’t use.
Plugins take space similar to files and need resources to load. Thus, when you have a lot of them, they will consume speed.
Conclusion
Google PageSpeed Insights is a software that helps you know if your website is fast enough to make a place at the top of the SERPs.
Your Website Loading Speed is important; a faster site is more usable and interactive than a slow one.
Website speed also directly affects the conversion. In the above article, we had referred to various statistics that showed that even a second increase/ decrease in the speed heavily influenced the traffic and sales.
You can contact us if you have any inquiries regarding the above article. You can also hit us up for the best SEO services in Singapore.
