Blog

PSI Google: The Definitive Guide

PSI

Through Google PSI we can analyze our website and we can also get a brief overview of some critical and some general issues. The PSI also reports on the performance of a page on both mobile and desktop devices, then provides with necessary insights to improve. Contact a seo company to know more.

1. FMP: First Meaningful Paint:

First Meaningful Paint is the time it takes for a page’s primary content to appear on the screen first above all others. Primary content differs depending on pages. A critical content which gives the page meaning that should be load first. The time should be within 2.0s

Suppose we got a product page and there’s an image or content that is critical to the page, then first meaningful paint requires that image or content to be visible first.

psi1

Recommendation:

Optimizing critical rendering path CSS, JS, HTML

Structure the HTML to load the critical, above-the-fold content first

Reduce the amount of data used by HTML, CSS and JS resources

Fix:

Minification: Minify CSS, Combine multiple CSS files, Inline critical CSS

Compression JS, CSS

Caching

Load JavaScript asynchronously

Defer JavaScript

Postpone inline JavaScript

2.First CPU Idle:

First CPU idle checks when the page is minimally interactive or after the user gives any input how quick the page responds. Minimize PSI issues using advanced seo techniques.

Note: First CPU used to be called First Interactive. Although this is still in beta, means the underlying definition of this metric is in progress.

psi2

Recommended:

The page’s UI elements not all but most of them need to be interactive and functional. The page response time needs to quick on every user input.

Fix:

Minimize the number of critical resources.

Minimize the number of critical bytes (by compressing the resources)

Minimize the critical path length (Several websites to do)

3.Estimated Input Latency:

Estimated Input Latency measures the responsiveness of your site and tries to enforce a 60 frames-per-second user experience. Time range should be within 100ms, Whereas Lighthouse’s target score is 50ms.

Recommended:

Use different techniques for rendering performance docs.

Fix:

Optimize JavaScript Execution

Reduce the Scope and Complexity

Avoid Large, Complex Layouts and Layout Thrashing

Do not block the main thread for long durations.

Stick with CSS animations as far as possible and must modify only those CSS attributes which don’t trigger a layout of the entire page.

4.First Contentful Paint:

First contentful paint, when the browser renders or paint the first bit of DOM. This could be text, an image or canvas render. The recommended time range should be within 2.0s.

Recommended:

To get a good result or to speed up the download time avoid resources that block the browser from rendering DOM content.

Fix:

Use minification and compression on text-based content.

Optimize JavaScript bootup and reduce JavaScript payloads with tree shaking or code splitting.

Minimize the number of render-blocking external stylesheets and scripts upon which the page depends.

5.Speed Index:

Speed index defines how quickly the contents of a page are visibly populated. It is the time taken for the website to appear visually complete. The lower the score, the better.

psi5

Recommended:

You need to optimize your page to visually load faster.

Fix:

Optimize text-based content

Optimize images

Optimize critical rendering path

Do not alter page layout from Javascript files during page load.

6.Time to Interactive

 This defines how long it takes a page to become interactive and also when the page is considered usable and will respond to user inputs. The page doesn’t need to load completely; rather it is the time when the page is ready enough to start accepting user inputs. Web fonts loaded and render thread should be idle within 5 seconds.

psi6

Recommended:

The key is to improve load performance and leave the main thread open for accepting user inputs as early as possible in load phase also to improve your TTI score, defer or remove unnecessary JavaScript work that occurs during page load.

Fix:

Optimize JavaScript Bootup

Optimize JavaSricpt payloads with Tree shaking and Code splitting technique.

7.Reduce server response times (TTFB):

Usually, when a user browses through a URL the browser makes a network request to fetch that content then server receives the request and returns the page content.

TTFB is the number of milliseconds it takes for a browser to receive the first byte of the response from your web server.

Recommended:

Generally, anything under 100 ms is great and good TTFB. Google PageSpeed Insights recommends under 200 ms for server response time. If you are in the 300-500 ms range, this is pretty standard.

Fix:

Caching

Implement CDN

Use a Premium DNS Provider

8.Defer unused CSS:

Unused CSS slows down a browser’s construction of the render tree. The CSS that is needed in order to load a page is called the critical CSS. In general, a page load should only be blocked on critical CSS. Each external stylesheet must be downloaded from the network. These extra network trips can significantly increase the time that users must wait before they see any content on their screens.

psi8

Recommendation:

Put inline critical CSS into the <head> of the HTML. Once the HTML is downloaded, a browser has everything that it needs in order to display the page. It doesn’t need to make any more network requests.

Fix:

Remove any inline style blocks containing CSS that is not used by the current page.

Minify CSS.

If your site uses external CSS files shared among multiple pages, consider splitting them into smaller files containing rules for specific pages.

9.User Timing marks and measures:

These metrics enable you to measure your site’s JavaScript performance.

The User Timing interface allows the developer to create application-specific timestamps that are part of the browser’s performance timeline. There are two types of user-defined timing event types: the “mark” event type and the “measure” event type.

psi9

10. Ensure text remains visible during the web font load:

For font rendering, need to specify the font-display descriptor, most browsers currently have a default strategy similar to block. 

psi10  

11. Avoid an excessive DOM size:

Having an excessive DOM size will affect page loading time.

psi11

Recommended:

An optimal DOM tree:

1.Less than 1500 nodes in total.

2.Maximum depth of 32 nodes.

3.No parent node with more than 60 child nodes.

Fix:

1.Minify javascript code for smaller file sizes.

2.Minify HTML code.

12.Serve static assets with an efficient cache policy:

HTTP caching can speed up your page load time on repeat visits.

When a browser requests a resource, the server providing the resource can tell the browser how long it should temporarily store or “cache” the resource.

Recommended:

Configure your server to return the Cache-Control HTTP response header.

 Cache-Control: max-age=86400

Fix:

Edit or add .htaccess code

13.Minimize main-thread work:

Each and every topic list below needs optimization to reduce the load time of the page.

Fix:

Use minification on CSS, JS, HTML or use compression

14.Minimize Critical Requests Depth:

The Critical Request Chain is a concept from the Critical Rendering Path (CRP) optimization strategy. CRP enables the browser to load a page as quickly as possible by prioritizing which resources get loaded and the order in which they load. Contact a seo specialist for betterment of your site.

Fix:

Minimizing the number of critical resources: eliminating them, deferring their download, marking them as async, and so on.

Optimizing the number of critical bytes to reduce the download time (number of roundtrips).

Optimizing the order in which the remaining critical resources are loaded: downloading all critical assets as early as possible to shorten the critical path length.

 15.Eliminate render-blocking resources:

Render-blocking resources are one of the most common reasons for slow loading websites. And if your website is not fast enough, not only are you hurting your visitors’ user experience but your search engine rank as well.

Recommended:

For stylesheets, consider splitting up your styles into different files, organized by a media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user’s device.

For critical scripts, consider inlining them in your HTML. For non-critical scripts, consider marking them with the async or defer attributes.

Fix:

Load Javascript asynchronously or use defer parsing method.

Split CSS into different files, Lessen the number of CSS files in the critical path.

16.Avoids enormous network payloads:

Reducing the total size of network requests speeds up page load time and help in page ranking.

Recommended:

Reduce the size of the requests to reduce your total payload size.

Fix:

Defer requests until they’re needed.

Optimize requests to be as small as possible.

Minify HTML, JS, and CSS.

Use WebP instead of JPEG or PNG.

Set the compression level of JPEG images to 85.

Cache requests so that the page doesn’t re-download the resources on repeat visits.

17.Preconnect to required origins:

Preconnect allows the browser to set up early connections before an HTTP request is actually sent to the server. This includes DNS lookups, TLS negotiations, TCP handshakes. This, in turn, eliminates roundtrip latency and saves time for users.

Recommended:

This can eliminate many costly roundtrips from your request path – in some cases reducing the request latency by hundreds and even thousands of milliseconds.

Fix:

A preconnect can be added directly to a link tag as an attribute in the HTML. It can also be delivered through the Link HTTP header or can be invoked by JavaScript based on user activity.

psi17

18.Serve images in next-gen formats:

PEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG. WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web.

Recommended:

They produce much smaller image files so you can greatly improve your pages speed by using next-gen formats.

Fix:

The current browser support for each next-gen format:

WebP

JPEG 2000

JPEG XR

psi18

19.Properly size images:

Never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger than that just results in wasted bytes and slows down page load time.

Recommended:

With responsive images, you generate multiple versions of each image and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on.

Fix:

Use vector-based image formats, like SVG. With a finite amount of code, an SVG image can scale to any size. Tools like gulp-responsive can help automate the process of converting an image into multiple formats.

20.Defer offscreen images:

Offscreen images are images that appear below the fold. Since users can’t see offscreen images when they load a page, there’s no reason to download the offscreen images as part of the initial page load.

Recommended:

Deferring the load of offscreen images can speed up page load time and time to interactive.

Fix:

Only download above-the-fold images during the initial request.

21. Efficiently encode images:

Offscreen images are images that appear below the fold. Since users can’t see offscreen images when they load a page, there’s no reason to download the offscreen images as part of the initial page load.

Recommended:

Deferring the load of offscreen images can speed up page load time and time to interactive.

Fix:

Only download above-the-fold images during the initial request.

22.Enable text compressions:

Text compression minimizes the byte size of network responses that include text content. Fewer bytes downloaded means faster page loads.

Recommended:

When a browser requests a resource, it lists what text compression encodings it supports in the accept-encoding request header. All modern browsers do this. The server encodes the response in one of the formats that the browser supports and indicates which format is used in the content-encoding response header.

Fix:

Use GZIP compression. GZIP is universally supported in all modern browsers.

Using mod deflate:

 <IfModule mod_filter.c>

 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

 AddOutputFilterByType DEFLATE application/json

 AddType x-font/otf .otf

 AddType x-font/ttf .ttf

 AddType x-font/eot .eot

 AddType x-font/woff .woff

 AddType image/x-icon .ico

 AddType image/png .png

 </IfModule>

23.Preload key requests:

Preloading critical assets improve loading speed.

Fix:

Declare preload links in your HTML to instruct the browser to download key resources as soon as possible.

<head>
 …
 <link rel=”preload” href=”styles.css” as=”style”>
 <link rel=”preload” href=”ui.js” as=”script”>
 …
</head>

24. Use video formats for animated content:

Since MP4 videos are actual digital video files, instead of a hacky video clip animated GIFs, they look much better and are substantially smaller.  Replacing Animated GIFs with HTML5 Video for Faster Page Speed. Apply best seo strategies for a better score in PSI.

Fix:

There are a number of ways you can convert GIFs to video, but ffmpeg is the tool we’ll use in this guide. You may already have ffmpeg installed. To check, open a terminal and run the ffmpeg command. If it’s installed, you’ll see some diagnostic information. If you receive a “command not found” or similar error, you’ll need to install it. How you install ffmpeg depends on the platform:

For macOS, you can install via Homebrew or compile it yourself.

For Windows, use Chocolatey.

  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *