Table of contents
If you are familiar with Magento (or looking up for more information about this platform), sure you’ve known about Magento PWA. The development of PWA technology brings store owners tremendous advantages, it supports them in boosting sales, and also in improving web performance, customer experience, and security.
PWA technology allows businesses to stay ahead of the game in regards to important updates from other giant players like Google. Recently, Magento had a webinar (Optimize Your Site Performance with Progressive Web Applications) explaining the upcoming Google updates for their ranking system and how PWA can optimize the web performance.
The webinar is hosted by Mr. John Knowles, Chief Technology Officer at JH and Mr. Salvatore Denaro, Senior Web Ecosystem Consultant at Google gTech.
Here are the sum-ups, as well as highlights from the webinar:
Google’s Core Web Vitals
Core Web Vitals are the speed metrics that are part of Google’s Page Experience signals used to measure user experience.
Page experience will start to roll from mid-June 2021 all the way until the end of August as a part of Google’s ranking system. Also, labels may be added in search results, indicating which pages provide a good user experience, but this remains a possibility for now.
The ‘page experience’ signal combines Core Web Vitals with the following signals:
- Mobile-friendliness
- Safe-browsing
- HTTPS-security
- Intrusive interstitial guidelines
1. Core Web Vital components
The new core web vitals include:
LCP (Largest contentful paint): the time of the largest content element in the viewport becomes visible.
As you can see, if LCP occurs within 2.5 sec of when the page starts loading, the website would provide a good experience. If the time is between 2.5-4 sec, it’d need improvement, and anything longer than 4 sec is considered poor.
The most common causes of poor LCP are:
- Slow server response times
- Render-blocking JavaScript and CSS
- Slow resource load times
- Client-side rendering
FID (First input delay): the time from when a user first interacts with a page to the time when the browser actually responds to that interaction.
This component is related to a user’s first impression of a website. A good user experience should be provided if the FID is of 100 milliseconds or less.
It’s a field metric, and can only be measured with an actual user’s interaction. In a lab environment, total blocking time (TBT) is a recommended metric to help measure FIB.
A poor FID is usually the result of heavy JavaScript execution.
CLS (Cumulative Layout Shift): how much visible content shifted in the viewport and the distance the elements impacted were shifted.
Layout shifts are distracting and annoying to users, and this happens more than often for many websites. So now Google will soon be measuring this metric as part of page experience.
To send signals that they can offer a good user experience, pages should maintain a CLS of 0.1. or less.
A poor CLS can occur because of:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
2. Tools to measure Core Web Vitals
Core Web Vitals can be measured by field tools and lab tools.
Field tools
Field data is generated from the performance experienced by a real user’s interaction with a website.
Core Web Vitals can be measured using tools such as:
- Google Page Speed Insights
- Google Search Console
- Chrome User Experience Report
- Web-vitals JavaScript library
- Web.dev
- Web Vital Extension
*Note that in certain cases, you may encounter ‘no data available’ when measuring with Search Console or the CrUX dashboard. This means either that your property is new in Search Console, or that there is not enough data available in the CrUX report to provide meaningful information for the chosen device type.
Lab tools
Lab data is collected from a controlled environment and is extremely useful during the development process and to catch page regression before it happens.
Businesses can measure the metrics in a lab environment with:
*These lab tools measure TBT instead of FID as mentioned above.
Advantages of PWA in relation to Google’s update
Speed
To achieve a good score of LCP and FID, the website’s loading speed is the key player. And when it comes to speed, a PWA website performs exceptionally well. It’s one of the most prominent features of PWA.
PWAs are built with progressive enhancement as their core principle, which enables the app to load instantly on repeat visits. Taking advantage of device-level cache, PWAs minimize the amount of data needed to quickly respond to user interaction.
Single-page experience
PWA loads faster than normal websites thanks to the Service Workers technology. It is fast at first load and even faster on second loads onwards since it pre-caches all contents and delivers them when needed.
This explains why users are able to experience a single-page website with PWA, eliminating the trouble of waiting for pages to load like the traditional ones.
Interactive quickly
The quicker a web can respond to user’s interaction, the better its score for FDI is.
Once loaded, the PWAs can instantly react to user interactions with silky smooth transitions. Its instant load time empowers the app to cut through the clutter, allowing users to complete their desired tasks rapidly and therefore making it easy for them to convert.
Reliable website
Offline availability is also made possible with the Service Workers technology. With service workers properly integrated, all contents are pre-loaded the first time you visit the PWA and are delivered afterward using Javascript, making PWA the new go-to approach for websites whose uninterrupted experience is a must.
Also, updates are instantly available on PWA websites as soon as the device is connected to a network.
Secure web
A PWA must be severed over a secure protocol—HTTPS. This guarantees secure communication between both the user and the server and in return, ensuring a risk-free experience.
Using HTTPS for the entire site helps protect payment transactions, secure user accounts, keep their communications, identity and browsing private.
Besides, with HTTPS enabled, it will automatically be marked as secured by the browser, and this is visible to any visitor to your PWA. Showing visitors that the PWA is secured can build trust among your customers, improving sales and conversion accordingly.
Cross-browser/device
PWAs work cross-browser, offering universal access to all users. They can navigate to any browser and instantly access the app.
A well-designed and well-built PWA can assure that users get the best experience possible while browsing, regardless of their device – tablet, desktop or mobile.
Engaging UX
Advanced features
PWA websites are powered with a range of advanced features that aim at facilitating engagement for e-commerce stores.
They can earn a place on the home screen, allowing for rapid repeat access without the need to launch a browser and type in the address. The convenience of accessing the web app right from the user’s home screen lets PWA achieve the high re-engagement rate of a native app.
Tips to improve Core Web Vitals scores
- Image Compression
This remains a basic yet essential step to improve your web performance. After being compressed, images would take up less space and increase your page’s loading speed.
If possible, serve your images in JPEG 2000, JPEG XR, and WebP. These image formats have superior compression and quality characteristics compared to their older JPEG and PNG counterparts.
Another piece of advice is to avoid adding irrelevant images to your pages.
- Lazy Loading
Lazy loading is a method by which you’ll identify certain resources as non-blocking (non-critical) and the browser will load these only when needed. Thus, you can shorten the length of the critical rendering path, which translates into reduced page load times.
- Preload Key Resources
By preloading a certain resource, you are telling the browser that you would like to prioritize and fetch it sooner than the browser would otherwise discover it on the current page.
- Minimize Long Tasks
Any task that takes more than 50ms to execute is considered a long task.
Events like JavaScript execution and parsing CSS can cause main-thread blockage, resulting in pages freezing and becoming unresponsive.
You can reduce JavaScript payload by using code-splitting, minifying and compressing your JavaScript code, removing unused code, and following the PRPL pattern. Reduce the time spent parsing CSS by minifying, or deferring non-critical CSS, or removing unused CSS.
- Space reserve for Images & Embeds to load into
Users find it confusing when they try to click on an element (a button/ image/ video) and then the element shifts. This will affect your site’s CLS score, and send signals that pages may offer poor UX.
Reduce CLS by putting in the width and height size attributes of images and videos. Alternatively, reserve the required space with CSS aspect ratio boxes. This ensures that the browser would reserve the right amount of space for images and videos.
With embeds, you can prevent the layout shift by precomputing sufficient space for embeds with a placeholder or fallback.
- Design Interstitials That Don’t Obstruct Important Content
Interstitials can be frustrating when they cover important elements on a page.
To visualize how interstitials act on your pages, manually review on different devices or use tools such as Chrom DevTool’s screenshot feature.
If any interstitials or pop-ups appear to obstruct the main content on the pages, you should consider redesigning them to provide a better user experience.
Conclusion
In summary, site owners should have already been working on improving their score for Core Web Vitals metrics – LCP, FID and CLS. While these metrics may not cause drastic changes in ranking, they provide websites with guidance for a good user experience.
Concerning Google’s update, PWA websites have advantages over traditional ones. Thanks to its technology, PWAs provide great web performance with fast loading, reliable and engaging user experience.
Besides, certain practices can be applied easily for a better user experience, from preloading resources to reserving spaces for images and embeds. Businesses should regularly track their web performance using both field and lab data to maintain consistency in user experience and prevent possible issues.
For Magento merchants wanting to optimize your web performance with PWA, here at SimiCart we’re a team of Google-qualified PWA development agency, ready to transform your Magento store.
