Performance, performance and performance! If there is one word that can define the success (or failure) of a store is the load time. According to Google 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow interfaces.
And guess what the main topic was during the Chrome Dev Summit 2018? Performance – of course. This was not the only topic of the event, so I chose the top 5 Google announcements that can help merchants to turn more visitors into buyers.
1. Web.dev – new performance audit tool
Web.dev is a new portal for hands-on guidance within the developer community and it also helps audit site performance. Google’s web platform team has spent over a decade learning about user needs. web.dev makes it as easy as possible for developers to master the defining standards of web development. This is the place to go for updated techniques which keep your site performing well.
You can also monitor your sites over time to make sure they stay fast and accessible. This is a must-have because a lot of Shopify apps keep unused scripts on the theme, even after being uninstalled, and this, obviously, really hurts site performance.
2. PageSpeed Insights, now powered by Lighthouse
Pagespeed Insights now uses Lighthouse as its analysis engine. This means that it simulates how a mobile device loads a page and provides suggestions on how to improve the page’s performance metrics.
PageSpeed Insights provides the following information:
Lab Data. PSI fetches and analyzes the page using Lighthouse, which simulates how a mobile device loads a page. It computes a set of performance metrics for the page (such as First Contentful Paint and Time to Interactive) and summarizes these metrics with a performance score from 0-100. Scores are categorized into three levels; 90 and up is considered to be a good score.
Field Data. PSI also displays real-world performance metrics (First Contentful Paint and First Input Delay) for the page and its origin. (As a result, we’ve also deprecated the origin query in PSI). Note that not all sites may have field data available for display. The data set relies on a version of the Chrome User Experience Report that is updated daily and is aggregated over the previous 28 days. Keep in mind that the metrics here may be different from those in the Lab Data section as they capture a wide spectrum of real-world network conditions and devices used by Chrome users.
Opportunities. PSI provides suggestions on how to improve the page’s performance metrics. Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.
Diagnostics. This section provides additional information about how a page adheres to best practices for web development.
3. PWAs to more devices
We’ve seen that PWAs make it easy to delight your users, grow engagement and boost conversion. Now, with deeper integrations and the ability to load and run faster than ever, your PWAs can really shine, yet most of these integrations have been focused on mobile-first, or even mobile-only.
Pinterest is one of the most recent success cases of a Progressive Web App. Check out their story in the video below:
Over the last 6 months, Google has been renewing their investment in providing these same capabilities across all desktop platforms. Chrome OS gives a fantastic surface to push the boundaries of the web. Based on these learnings, Google is expanding Desktop PWA support across Chrome for Windows and Linux, with Mac support targeted to land in Chrome 72.
4. Squoosh
Large images can be the primary villain when auditing store performance. Google announced a new app called Squoosh that compresses and compares images right in your desktop or mobile browser.
This powerful image compression tool launches almost instantly, and then manages a smooth UI even when it’s doing heavy work. It’s a pretty simple app to use: you can drag and drop an image of your choosing into the tool, at which point, you can pick from compression standards including MozJPEG, OptiPNG, and Google’s own WebP. A small slider lets you quickly adjust the level of compression, and you’ll also see a running total of how large the resulting file is expected to be. A second slider can be pulled across the image to let you easily see the effects of the compression.
There are more advanced options available, but we were able to find a pretty decent balance between image size and quality without them.
5. Smooth UX & Developer Experience
Having buttery smooth interaction is important, you can never add enough butter. However, this level of UX often comes with a bitter trade-off, one that none of us like – a bad developer experience. But Google believes that it IS possible to break this dead-lock and that is where they will be spending a lot of their time in the coming year.
The Houdini APIs are an easier way for developers create a better UX, such as the CSS Paint API, Animation and Layout Worklets give an unprecedented level of control to build new and more modern interfaces.
Conclusion
Since July (2018), Google use the load speed as a metric to rank sites in its search engine, and the improvement and release of those tools shows how deep their search engine can get regarding such metrics. That’s why it’s so important that all merchants audit their stores with the web.dev tool and constantly monitor their performance, especially after installing new applications and updating the theme.
[related_posts_by_tax]