cancel
Showing results for 
Search instead for 
Did you mean: 
CommunityJedi22
Community Manager
Community Manager

In June of 2021, Google introduced an update to the company's search algorithm that puts more weight on specific page load signals and makes page performance a more significant part of determining search rank. These changes have been rolled out and are a factor in search rankings as of August 2021.

What Changed with Google?

Google's 2021 algorithm update included a factor called Page Experience. This includes existing Google Search signals such as mobile-friendliness, safe-browsing, HTTPS, and intrusive interstitial guidelines. Their focus was on three facets: Loading, Interactivity, and Visual Stability.

  • Loading - Measures perceived load speed, for instance, how long it takes a website to load its largest visible piece of content, such as an image, video, or large block of text. This is known as the Largest Contentful Paint (LCP).
  • Interactivity - The time from when a user first interacts with a page — for instance, a click or a tap — to the time when the browser begins processing that interaction. This is known as the First Input Display (FID).
  • Visual Stability - Has to do with preventing a website's layout shifts during the page loading process. This problem, known as Cumulative Layout Shift (CLS), is what causes the frustrating experience of having the text you were reading suddenly shift out of view.

    CommunityJedi22_0-1760619535325.png

     

All of these metrics combined determine Google's Core Web Vitals, and higher scores are expected to increase a website's search rank.

 

What Changed with PowerReviews?

We are always looking for ways to improve the performance of our Review Display 4 JavaScript solution. Our smaller JavaScript bundle size and faster load times already put us ahead of our competition (independent analysis by YOTTAA), but we continue to optimize with every code release.

Taking into account the new search ranking signals, PowerReviews has released the following updates and enhancements to our JavaScript library:

  • Eliminated rendering-blocking resources
    While it is currently possible to load the PowerReviews script in a manner that does not block rendering, this method is cumbersome. We introduced a simpler method for loading the PowerReviews script.

  • Serve images in next-generation formats.
    We optimized image load by prioritizing newer, more optimal image formats—depending on the end-user's browser.

  • Avoid serving legacy JavaScript to modern browsers
    We introduced browser feature detection to avoid redundant feature patching.

  • Removed unused JavaScript
    We dynamically load code based on the requested components on the page.

  • Avoid large layout shifts.
    We've provided options for reducing on-screen content shifts after PowerReviews components render.

  • Reduced JavaScript execution time
    The aforementioned code size reduction tasks reduced the overall JavaScript execution time.

  • Defer off-screen resources
    We defer the loading of JavaScript and images for components that are not currently visible.


Actions to Optimize Page Experience

To improve your site's page performance and take advantage of all the new features, PowerReviews strongly recommends implementing the following best practices:

Upgrading to Review Display 4.1

Some of our updates and enhancements required fundamental structural changes in the way our software works, which necessitated an architecture overhaul. To account for this, we launched a new iteration of our Review Display (version 4.1), which is focused on performance and is built with page speed experience in mind. It uses the same configuration and components as Review Display 4.0 (ie, Review Snippet and Review Display) but loads them more efficiently.

The table below shows the availability of updates and enhancements across Review Display versions 4.0 and 4.1. (Note that future performance enhancements may only be available after upgrading to Review Display 4.1.)

Update/Enhancement PowerReviews Status 4.0 Availability  4.1 Availability
Eliminate rendering-block resources Completed* CommunityJedi22_1-1760619534860.png

 

CommunityJedi22_2-1760619534862.png

 

Serve images in next-generation formats Completed CommunityJedi22_3-1760619534861.png

 

CommunityJedi22_4-1760619534861.png

 

Avoid serving legacy JavaScript to modern browsers Completed   CommunityJedi22_5-1760619534864.png

 

Remove unused JavaScript Completed   CommunityJedi22_6-1760619534865.png

 

Avoid large layout shifts. Completed*, ** CommunityJedi22_7-1760619534865.png

 

CommunityJedi22_8-1760619534862.png

 

Reduce JavaScript execution time.e Completed   CommunityJedi22_9-1760619534863.png

 

Defer off-screen resources Completed   CommunityJedi22_10-1760619534863.png

 

* = requires changes to existing implementation
** = requires setting min-height or placeholder


To upgrade to Review Display 4.1, there are two main changes:

1. Update script source URL to 4.1

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

 

2. To safely initialize PowerReviews code when loading asynchronously, you need to hook into the script's onload event handler.

window.pwr = window.pwr || function () {
(pwr.q = pwr.q || []).push(arguments);
};
pwr("render", {...})

 

Example of 4.1 Installation:

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>
<script>
  window.pwr = window.pwr || function () {
     (pwr.q = pwr.q || []).push(arguments); 
  };
  pwr("render", {
    merchant_group_id: 'MERCHANT_GROUP_ID',
    merchant_id: 'MERCHANT_ID',
    page_id: 'PAGE_ID',
    locale: "<locale>",
    components: {
		ReviewSnippet: "<targetId>",
		ReviewDisplay: "<targetId>",
    },
  });
</script>

 

 

Reducing Cumulative Layout Shift (CLS)

Since the PowerReviews script dynamically adds new content above existing content, it contributes to the CLS of the entire page. The basic principle for reducing CLS for dynamic content is to reserve space ahead of content load.

1. Set a minimum height

The simplest way to reduce the CLS caused by the Review Snippet itself is to set a minimum height on the Review Snippet target container.

2. Provide a placeholder element

Provide a placeholder element within the PowerReviews component target element. Once the PowerReviews component loads and renders data, it will hide the placeholder element. The placeholder element must be a child of the target component and must include the data-pr-placeholder attribute:

<div id="pr-reviewsnippet">
   <div data-pr-placeholder><div>
</div>
CommunityJedi22_11-1760619535329.gif

 

 

Version history
Revision #:
1 of 1
Last update:
‎10-16-2025 09:00 AM
Updated by:
 
Contributors