At Google’s recent Chrome Dev Summit, various members of the Chrome team and other web development experts took the stage to dive into how developers can build fast, high quality web experiences with modern web technologies and best practices. They also previewed some of the new and exciting technologies that are coming soon to the web platform.
Here are 3 new web tools and features that developers will find particularly interesting.
The Unification of Google’s Speed Tools
The two tools that most (including us here at Mobify) use to measure the performance of the Progressive Web Apps are Lighthouse and Pagespeed Insights. Previously, both of these tools actually used different analysis engines to do their reporting. This created a lot of confusion for users, as the recommendations and scores from each tool were inconsistent.
Fortunately, the Chrome team announced that they’d be unifying these tools so that both will be powered by Lighthouse as the analysis engine. With this change, audits and recommendations will now be consistent across both tools, as well across the web – from the command line to Chrome DevTools. Now developers will know exactly what they need to fix to improve their web experience.
Along with the unification of these two tools, PageSpeeds API v5 was also announced and is now publicly available. PageSpeeds API v5 provides both real-world data from the Chrome User Experience Report and lab data from Lighthouse.
PageSpeeds API v5 is basically the equivalent of a v1 of a Lighthouse API. This is exciting to hear, as this will enable developers to plug these performance measurement tools right into their systems wherever they deem necessary. For example, you could plug it into your build pipeline to run tests and ensure the scores are good before deploying any changes.
The Chrome team gave us a sneak peek at an upcoming feature they’re referring to as Feature Policy, which is essentially a guardrail for developers to follow web development best practices. Feature Policy allows you to opt in to a set of policies that the browser will then enforce. “Policies” are able to restrict which APIs the site is able to access, as well as modify the behavior of those APIs and other web features in the browser. It’s like a Content Security Policy, only instead of controlling security it controls actual features. Feature Policy can be thought of as an agreement between the developer and the browser to help enforce the ultimate goal of building, maintaining, and delivering high quality web experiences.
Some examples of things you can enforce via Feature Policy include:
- Blocking usage of outdated APIs and restricting access to APIs
- Ensuring image sizes are optimized and not too big for the users viewport
- Enforcing that images aren’t loaded offscreen when they aren’t in the immediate viewport
- Adjusting autoplay settings throughout your site
Feature Policy is something that definitely excites us, as we view this as a tool that can help us enforce our mission to deliver amazing commerce experiences to everyone.
Web Packaging and Portals
The Chrome team introduced two new specifications they’ve been working on called Web Packages and Portals. Web Packages are a collection of specifications aimed at packaging websites. One of those specifications is Signed HTTP Exchanges, which enables publishers to safely make their content portable. Portable content means it’s readily available for redistribution through other third parties.
An interesting use case of Signed HTTP Exchanges for ecommerce revolved around Accelerated Mobile Pages (AMP). With AMP, sub-two second load times of an entire web app were made possible. To achieve these load times however, content must be viewed and hosted via the Google AMP Cache, which means the browser is not able to show the publishers original URL, and content must be displayed through the Google AMP Cache viewer.
However, with Signed HTTP Exchanges, instead of linking the search engine result to an AMP page served through the Google AMP cache, you can link it to a signed AMP page served from Google’s cache. This will allow AMP content to be served with the URL of the original website while also removing the Google AMP Cache viewer. Exciting stuff!
Portals enables fast seamless transitions between pages or sites (even cross domain!). The transitions provided through Portals are like single page apps (SPA) and are a beauty to watch in action:
In thinking of the ecommerce experiences that Mobify builds in combination with Portals, an immediate application that comes to mind is using Portals to create a smooth SPA-like transitions to content hosted outside of the origin. For example, ecommerce sites may link off to their affiliated partners, or informational blogs/sites to educate their customers on products they carry. With Portals, the experience of transitioning off the site can be seamless and consistent with what the user has come to expect from a PWA experience.
Bonus: web.dev and Service Workies
Alongside these awesome new tools, the Chrome team also announced two cool new education tools – web.dev and Service Workies – to enable everyone to become the best web developer possible. We’d definitely recommend checking out both of these tools!
Web.dev is a consolidation of all the reference information available for modern Web APIs, as well as guides on how to deliver amazing web experiences. Directly integrated with Lighthouse, web.dev also helps improve your own site through targeted guidance.
The Chrome team also partnered with Dave Geddes, the creator of Flexbox Zombies and CSS Grid Critters to create a new learning game, Service Workies. The game aims to help users understand every single detail of Service Workers.
Interested in seeing all the rest of the content delivered at Chrome Dev Summit? You can check out all of the awesome talks delivered at Chrome Dev Summit on the Chrome Developers YouTube channel.