Pagespeed Insights Checker

Google Pagespeed Insights Checker By BH SEO Tools:

Website page speed is an essential factor in search engine ranking. This is one of the key factors Google considers before ranking any web pages. To get good user interactions, every website owner should work to improve page speed. Page speed inside is the tool to check website page speed and see what’s wrong and which things need to be improved. Our website page insight checker uses Google API to check any website's speed more quickly and smoothly and also shows recommendations on what needs to be improved and how to improve website speed. Before checking your website page speed, you must understand that a more significant website page takes more time to load than a small website because big websites use more images and functions. It would be best to consider your page speed score according to your website size. The tool also shows recommendations on how you can improve. The page speed insights tool helps you understand how fast pages load on mobile and desktop devices. You can use this information to improve the performance of your site and Page speed provides both field data and lab data.

 

How to use page speed inside checker by BH SEO Tools:

 

Please enter the website URL into the tool and press Submit; it takes a few minutes to check the website in detail; then, it displays the detailed report and assigns a score to your website, indicating how well it performs. 

 

• Get Your Results:

 

• Performance Score: 0 - 100

 

Page speed inside assigns a score between 0 to 100, 0 means slowest, and 100 means fastest.

 

• If the page speed shown between 0-49,  slow it shows Poor performance 

 

• If the page speed shown is between 50-89 on average, it needs improvement 

 

• If the website's speed shown between  90-100,  fast it shows Good performance.

 

To provide a good user experience, the recommended score is 90-100. It's tough to get 100 scores on every website, but if your score is more than 90, it is a good score.

 

How does page speed insight calculates the  page score:

 

The tool collects data and analyzes page load time and assigns a score based on data:

 

1. Lab data:

 

First contentful paint: FCP 

 

When any user clicks any website URL link, how long does it take until the first content shows to their browser?

 

 0-1.8  seconds is fast to get score between  75-100  

 

1.8 - 3 seconds average  50 -74

 

Over 3 seconds is slow 0-49

 

First Meaningful Paint;

 

When any user clicks websites how long does it take to content page visible to the user? 

 

0-2  fast            Score 75-100

 

2- 4 Moderate    50-74

 

Over 4 is slow  0-49

 

Speed Index:

 

The Speed Index calculates how fast content is visibly displayed during page load.

 

It refers to how long it takes for your website page to completely load in the browser with all of its content, images, text, and so on.

 

 

0-3.4 fast 

 

3.4- 5.8 average moderate 

 

Over 5.8 slow

 

First CPU Idle:

 

CPU idle calculates how much time it takes to get a page ready to become interactive and UI elements on the screen ready to interact.

 

0-4.7 fast 

 

4.8 - 6.5 average moderate 

 

Over 6.5  slow

 

Time to Interactive

 

TTI calculates how long time it takes to make a page fully intractable and display useful content. Users can use any content.

 

0-3.8 fast

 

3.8 - 7.3 Average 

 

Over 7.3 slow

 

Max Potential First Input Delay:

 

 

FID calculates the time when a user first interacts with a page. They can click links, tabs, or any button.

 

0-100 ms good

 

100-300 Average 

 

Over 300 ms slow

 

How to increase Google page speed insights score:

 

Avoid serving legacy JavaScript to modern browsers:

 

Legacy JavaScript

 

JavaScript was initially designed to run only in web browsers. However, many websites still use JavaScript to provide additional functionality to their users. Unfortunately, not all browsers have been updated to handle these newer types of JavaScript. As a result, some older browsers may not display certain features properly 

 

Modern JavaScript

 

Modern JavaScript is a type of JavaScript that runs in any browser. It uses the latest standards and best practices for programming. It's easier to write and maintain code using modern JavaScript than legacy JavaScript.

 

Use video formats for animated content:

 

Large GIFs are inefficient for delivering animated content. Use MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.

 

1. Large GIFs are inefficient for downloading

 GIFs are great for displaying small amounts of data over time. However, they are not ideal for delivering more significant amounts of data over time due to their size limitations. If you have much information to share, consider using WebM or MP4 video formats instead.

 

 2. WebM and MP4 are smaller than GIFs

 MPEG-4 (or WebM) and MOV files are much smaller than GIFs. WebM and MP4 files are only about 1/10th the size of GIFs. Because of this, they require less bandwidth to download and store.

 

3. modern browsers support WebM and MPV

Most modern web browsers now support WebM and MP4 formats. You should use these formats if you want to make sure your audience can view your content.

 

Preload the Largest Contentful Paint image:

 

Preload the image used by the LCP element to improve your LCP time.

 

Preloading images:

 

Preloading images is a technique that improves the performance of the LCP element. When using the LCP element, the user should preload the images they want to use before starting the animation. To do this, the user should click on the “reload” button located at the bottom right corner of the screen. Once the images have loaded, the user should then select the images they wish to animate. After choosing the images, the user should click the “play” button located at the top left corner of the screen.

 

 Using the LCP element

 

 Once the user has selected their images, they should click on the ‘LCP element’ icon located at the bottom right-hand corner of the screen. The LCP element will appear in the center of the screen. The user should drag the LCP element around the screen until they find their preferred position. If the user does not see the desired position, they should click on ‘reset’ at the bottom right of the screen.

 

 Resetting the LCP element

 

If the user wants to reset the LCP element, they should click on 'reset' located at the bottom right-hand corner of the screen. This will remove the LCP element from the screen. The user can then start over again.

 

Properly size images:

 

Serve appropriately sized images to save cellular data and improve load time.

Images should be sized appropriately to ensure they are not taking up too much space on the page. If you have a lot of text on the page, you may consider using smaller images. You can use CSS to resize them if necessary.

 

Eliminate render-blocking resources:

 

Resources are blocking the first painting of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

 

Max Potential First Input Delay:

 

The maximum potential First Input Delay that your users could experience is the duration of the most extended task. 

 

Enable text compression.

 

Text-based resources should be compressed (gzip, deflate, or  brotli ) to minimize total network bytes.

 

It avoids large network payloads.

 

Large network payloads cost users real money and correlate with long load times.

 

The First Meaningful Paint

 

This means how long it takes to load your website, indicating the entire page will appear to users.

Remove duplicate modules in JavaScript bundles:

 

Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.

 

Reduce unused CSS:

 

Reduce new rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity.

 

JavaScript execution time:

 

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this.

 

Serve images in next-gen formats:

 

Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

 

Efficiently encode images:

Optimized images load faster and consume less cellular data.

 

Time to Interactive:

 

Time to interact is the amount of time it takes for the page to become fully interactive.

 

Minify JavaScript

 

Minifying JavaScript files can reduce payload sizes and script parse time. Minification is the process of removing whitespace, comments, and unnecessary characters from your code. This reduces the size of your JavaScript files, which means fewer bytes are sent over the internet. Minifying your code is especially useful if you're sending your JavaScript to third-party sites. To minify your code, run it through a tool like JS Minify is a JavaScript compressor that removes white space, comments, and unneeded characters.

    

Minify CSS:

 

Minifying CSS files can reduce network payload sizes.CSS minification is a technique where you compress the style sheets to make them smaller. You can use tools like CSS Minify to do this. 

 

Cumulative Layout Shift

 

Cumulative Layout Shift measures the movement of visible elements within the viewport.

 

Cumulative Layout Shift (CLS)

 

 The cumulative layout shift (CLS) measures how much the position of the elements in the viewport changes over time. This value is calculated using the following formula:

 (X - X0) + (Y - Y0)

 Where:

 X  current x-position

 Y  current y-position

 X0  initial x-position

 Y0  initial y-position

 This value helps identify if any elements have moved outside of their original bounds.

 

Cumulative Layout Shift Percentage (CLSP)

To calculate the percentage of the cumulative layout shift, divide the total amount of the incremental layout shift by the total area of the viewport.

 For example, if the total area of the window is 1000px * 1000px, then the percentage of the cumulative shift would be:

 1000px * 1000px / 100%  10,000px

 

Avoids an excessive DOM size:

 

A large DOM will increase memory usage and cause longer 

 

Avoiding an excessive DOM size: A large DOM will increase memory usage and cause longer

 DOM stands for Document Object Model, the internal structure of HTML documents. In JavaScript, the DOM consists of objects representing each HTML tag (elements) and their attributes (properties). Each object contains references to its parent and child elements, and these relationships determine how they interact with each other.

 The DOM tree is a hierarchical collection of nodes representing some data. Nodes may have children, and those children may have children, etc. The top-level node is called the root node, and any node without a parent is considered a leaf node.

 When we create a document using `document.createElement()`, we get back a reference to the newly created element. We then add event listeners and call methods to that element. When we do this, we call methods on the DOM object associated with the component.

 To make things easier, browsers provide a unique method called `getElementsByTagName()` that returns a list of all the elements with a specific tag name. If we want to access the first element returned by this function, we use `document.getElementsByTagname("body")`. However, if we tried to access the second element produced by this function, we would need to write `document.getElemementsByTagName("body")`.

 This means that whenever we call a method on an element, we call that method on the DOM object associated with that element. So, if we were to call `element,;` we would set the innerHTML property of the DOM object associated with our feature.

 If we had a lot of elements with the same tag name, we could end up having a lot of DOM objects with the same tag name. It would mean that we would need to keep track of them separately, which would require us to store extra information about each DOM object.

 To avoid this problem, browsers can group several DOM objects with the same tags. These groups are called _nodesets_. To create a node-set, we pass a string containing the tag name to the `document.createNodeSet()` method.

 

Defer offscreen images

 

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower the interaction time.

 

Use video formats for animated content:

 

If you’re using GIF-animated content, then it may cause slow website speed.

 

GIF animated content then takes time to load using MPEG4 or WebM format videos animation content loads faster using PNG and web images instead of GIF,

 

Serve static assets with an efficient cache policy:

 

A long cache lifetime can speed up repeat visits to your page.

 

Avoid multiple-page redirects.

 

Redirects introduce additional delays before the page can be loaded.

 

Redirects are used to direct users away from pages they have requested. When a user requests a page, their browser sends a request to the server, which returns a web page to the client. If the page returned is not what was expected, the user's browser requests the server to get the correct page. Sometimes, the first request may produce a different page than the user wanted. This happens because the server does not know if the original request came from a human being or a robot. A robot might send many requests to the same URL (Uniform Resource Locator) without waiting for responses. These extra requests add additional time to the load time of the page.

 

Reduce unused JavaScript

 

Reduce unused JavaScript and defer loading scripts until required to decrease bytes consumed by network activity.

 

1. Unused JavaScript

 JavaScript is a scripting language that runs inside web browsers. Browsers use JavaScript to make websites interactive and dynamic. However, not all users have JavaScript enabled. If you have a website that does not work without JavaScript, then you should consider disabling it. You can do this by adding the following meta tag to your page's head section:

This will tell the browser to render the page using the latest version of Internet Explorer (Edge).

 

 2. Defer Loading Scripts Until Required

 

You may want to load some scripts only when they are needed. This tells the browser to wait until the script is loaded before executing the rest of the code.

For example, if you wanted to display a message when the user clicks a button, you could write something like this: The above code would look for a file named myButton.js and execute its contents when clicked.

 

 

Minimizes main-thread work:

 

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Consider reducing the time spent parsing/compiling/executing JavaScript. You may find delivering larger chunks of code (e.g., JSON) helps with this.