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.
This article contains the following sections:
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.
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 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* |  |
|
| Serve images in next-generation formats | Completed | |
|
| Avoid serving legacy JavaScript to modern browsers | Completed | |
|
| Remove unused JavaScript | Completed | |
|
| Avoid large layout shifts | Completed*, ** | |
|
| Reduce JavaScript execution time | Completed | |
|
| Defer off-screen resources | Completed | |
* = 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 minimum height on the ReviewSnippet 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>