When building Chrome for iOS from source, Safari Web Inspector can be used to debug a web page rendered in Chrome. However, this takes a non-trivial amount of effort which includes setting up a Chromium checkout, installing a current version of Xcode, and waiting for the build to complete. Additionally, a Mac with enough disk space to hold the code and tools is required. This barrier to debugging has led to bugs being filed for specific website failures on Chrome for iOS.
These bugs can be difficult to diagnose as they are generally based on a single failure case. Chrome developers most likely don’t know the website application well enough to fully understand what is causing the bug. Often, the reporter has even spent time to build a dedicated test page to more precisely understand the issue. The lack of debugging tools require developers to come up with alternative methods in order to debug their websites. Of course, nothing is wrong with filing bugs, and we certainly don’t want to discourage it, but we do want to improve the web developer experience.
In-app JavaScript Console
Enable JavaScript log collection by navigating to chrome://inspect in Chrome for iOS and leaving that tab open to collect logs. In another tab, reproduce the case for which you are interested. Then switch back to the chrome://inspect tab to view the collected logs. (Log collection will stop if the chrome://inspect page closes or navigates and logs will be lost as they are not persisted.)
Chrome on Android’s Data Saver feature helps by automatically optimizing web pages to make them load faster. When users are facing network or data constraints, Data Saver may reduce data use by up to 90% and load pages two times faster, and by making pages load faster, a larger fraction of pages actually finish loading on slow networks. Now, we are securely extending performance improvements beyond HTTP pages to HTTPS pages and providing direct feedback to the developers who want it.
To show users when a page has been optimized, Chrome now shows in the URL bar that a Lite version of the page is being displayed. Users can tap this indicator to see more information and to access an option to load the original version of the page. Chrome automatically disables Lite pages on a per-site or per-user basis when it detects that users frequently opt to load the original page.
How do Lite pages work?
We use built-in optimizations and Google servers to improve page loading. The specific optimization techniques depend on what region the user is in and on how the developer wrote and served that particular page. When Chrome optimizes an HTTPS page, only the URL is shared with Google; other information – cookies, login information, and personalized page content – is not shared with Google.
These optimizations are only applied when the loading experience would be painful to users. Specifically, they are applied when the network’s effective connection type is “2G” or “slow-2G,” or when Chrome estimates the page load will take more than 5 seconds to reach first contentful paint given current network conditions and device capabilities. Chrome applies these criteria equally to all pages. For all but the slowest sites, we expect this to affect a very small percentage of page loads.
What does this mean for developers?
To try out Lite pages on Chrome for Android, simply enable Data Saver from the settings menu and load a page on a very slow network.
If you’re using a faster network, set #force-effective-connection-type to any 2G option at chrome://flags. To prevent automatic disabling of the feature as a result of users opting out, enable #ignore-previews-blocklist.
We want developers to know when and why Lite pages are being shown, so starting with Chrome 72, you can implement intervention reports with the Reporting API, which detail when these optimizations are used.
Lite pages are only triggered for extremely slow sites, so we encourage developers to measure how well their pages are currently performing over slow networks. We recommend several tools to evaluate and improve a web page’s performance:
PageSpeed Insights (part of the Chrome UX Report) indicates performance and suggests optimizations.
WebPageTest evaluates performance on a real device under various conditions.
In addition, web.dev is a guide for developers to learn about best practices for building fast and performant web experiences.
As we continue to improve this feature, we are providing an option to disable it on your site. Chrome will not show a Lite page if the original page’s main HTML response includes the ‘no-transform’ directive in the ‘cache-control’ header. If you use this option, please file a bug since we don’t intend for it ever to be necessary to opt out.
Posted by Ben Greenstein, Lite Pages Technical Lead and Nancy Gao, Product Manager, Chrome
