Chromium Blog
News and developments from the open source browser project
The Mobile Web Is Open for Business
Thursday, May 19, 2016
Posted by Rahul Roy-chowdhury, VP Product Management, Chrome
One of the virtues of the web is its immense reach, providing access to information for all internet users regardless of device or platform.
With the explosion of mobile devices, the web has had to evolve to deliver great experiences on the small screen. This journey began a few years ago, and I am excited to be able to say that the mobile web is
open for business
.
Hear the recording from Google I/O where I discussed the state of the union and how to take advantage of
new experiences like AMP and Progressive Web Apps (PWAs)
to deliver a best-in-class mobile experience.
If you don’t have time to watch,
here’s a quick recap of the four aspects to focus on while building
a great mobile web experience:
Accelerate
Expressiveness has always been a strength of the web, but sometimes that expressiveness can come at the cost of loading time or smooth scrolling. For example, event listeners allow developers to create custom scrolling effects for their website, but they can introduce jank when Chrome needs to wait for any touch handler to finish before scrolling a page. With the new
passive event listener API
, we've given control back to the developer, who can indicate whether they plan to handle the scroll or if Chrome can begin scrolling immediately.
Speed also goes beyond user experience gains.
Studies
have shown that 40% of users will leave a retail site if it takes longer than 3 seconds to load. To get a blazing fast web page in front of users immediately, we've introduced
Accelerated Mobile Pages (AMP)
. With AMP, we have seen pages load 4x faster and use up to 10x less data. AMP is already seeing great adoption by developers, with more than 640,000 domains serving AMP pages.
Engage
Progressive Web Apps (PWAs)
let developers take advantage of new technologies to provide users with an engaging experience from the very first moment. Thanks to a new API called service worker, all the important parts of a web app can be cached so that it loads instantly the next time a user opens it. This caching also allows developers to continue to provide a fast and meaningful experience even when the user is offline or on an unreliable network. PWAs provide elements of polish too: an icon users can add to their home screen, a splash screen when they open it, and a full-screen experience with no address bar.
JalanTikus Progressive Web App
Convert
Logging in is a ubiquitous pattern on the web, but
92% of users
abandon a task if they've forgotten their password. To alleviate this pain, Chrome's password manager enables more than 8-billion sign-ins per month, and we're expanding support with the
Credential Management API
. Using this API allows web apps to more closely integrate with the password manager and streamline the sign-in process.
Even once logged in, checkout can be a complicated process to complete. That's why we're also investing in capabilities such as the
Web Payment API
and enhanced autofill, assisting users by accurately filling in forms for them. We've found that forms are completed 25% more when autofill is available, increasing odds for conversion.
Retain
Once the first interaction with a user is complete, re-engaging on the web can be tricky. Push notifications address this challenge on native apps, and now the
push API
is available on the web as well. This allows developers to reconnect with their users even if the browser isn't running.
Over 10 billion push notifications are sent every day in Chrome, and it’s growing quickly. Jumia
found
that users who enabled push notifications opened those notifications 38% of the time and recovered carts 9x more often than other users.
Jumia Mobile Web Push Notifications
Success Stories
As developers begin embracing these new technologies, we're seeing success stories from around the world.
AliExpress
,
one of the world's largest e-commerce sites, built a PWA and saw conversion rates for new users increase by 104%.
They've also found that u
sers love the experience, spending
74% more time on their site per session.
Another great example is
BaBe
, an Indonesian news aggregator service that was app-only until they developed a PWA with feature parity to their native app. Since launching they have found it to perform even faster than their native app, and have seen comparable time spent per session:
3 minutes on average on both their mobile website and their native app.
Even developers who have only begun implementing certain PWA technologies have seen success.
United eXtra
,
a leading retailer in Saudi Arabia, implemented push notifications and saw users who opted-in returned 4x more often.
These returning users also spent 100% more than users returning from other channels.
These are just a handful of businesses that have begun reaping the benefits of investing in Progressive Web Apps.
Learn more
about our how partners are using PWA technologies to enhance their mobile web experience.
Subscribe
to our YouTube channel to stay up to date with all the mobile web sessions from Google I/O, which we will continue to upload as they’re ready. Thanks for coming, thanks for watching, and most of all, thank you for developing for the web!
Saving data with Google’s PageSpeed Modules
Thursday, May 12, 2016
The web is a rich and diverse ecosystem, but sometimes that diversity comes at a price. Authoring a website that works quickly and correctly for all browsers, devices, and connections can be a time-consuming task.
Google’s PageSpeed Modules
, launched in 2010, enable web servers to automatically speed up sites as content is served. Two new features are available in the latest stable release of PageSpeed to accommodate the diversity of screen sizes and data connections.
Screen resolutions are a common difference among devices. Users with high-resolution screens on fast connections will love crisp, detailed images. Sending those same images to users with small screens on slow connections will unnecessarily delay the page load and waste their potentially expensive bandwidth. The HTML
srcset
attribute
attribute allows developers to specify alternative versions of an image for the browser to use depending on screen size, but they must manually add this to every image on the page, and also encode the images in several sizes. Fortunately, the latest release of PageSpeed Modules can automate this process. For example, imagine a page containing the following image element:
<img width="500" height="500" src="Beach.jpg">
When PageSpeed's
responsive_images filter
encounters this, it will automatically create resized versions of the images, then rewrite the element as :
<img width="500" height="500" src="500x500xBeach.jpg..."
srcset="750x750xBeach.jpg... 1.5x,
1000x1000xBeach.jpg... 2x,
1500x1500xBeach.jpg... 3x,
xBeach.jpg... 3.4x">
PageSpeed inserts 1.5x, 2x and 3x variants which provides coverage for the most common devices. It also includes the original full-size image and calculates its effective multiple
—
3.4x, in the above example. The original will be used by high-density displays or when zoomed in.
For users that want to save as much data as possible, PageSpeed Modules can take this one step further. Chromium-based browsers send the
“Save-Data” header
when the user has indicated a desire to conserve bandwidth. Supporting this typically requires site developers to re-encode low bandwidth versions of all images and serve these just to the clients that send this header. The latest
release
of PageSpeed understands the Save-Data header and will automatically compress images more aggressively for these data-sensitive users.
Mock storefront
without PageSpeed (left), and with PageSpeed and the Save-Data header (right).
Even though there are no apparent visual differences, without PageSpeed the page is 350KB and takes over a minute to load on our simulated 2G connection. With PageSpeed and the Save-Data header the page is 120KB and loads in less than 30 seconds.
These new features, along with many others to make sites smaller and load faster, are available in the
latest release
of PageSpeed Modules. Developers interested in trying it out can
download the modules
from the Google Developers site.
Posted by Steve Hill, PageSpeed Engineer and Reducer of Bytes
New APIs to help developers improve scroll performance
Tuesday, May 3, 2016
Speed has been a top priority since Chrome's first release, and it's only gotten more important as developers continue to push the boundaries of interactive web experiences. While there are many performance optimizations Chrome can make without involving the developer, sometimes it's impossible for Chrome to execute as quickly as possible without more information. In
Chrome 51
we've introduced support for
passive event listeners
and
Intersection Observer
, two emerging web standards that help developers create engaging, efficient experiences.
Touch event listeners are often used on the web for custom scrolling experiences and user engagement analytics. They allow developers to register JavaScript to run when the user touches the screen, and give web apps the opportunity to cancel scrolling altogether. Without knowing in advance if the web app will cancel scrolling, Chrome needs to wait for this JavaScript to finish before scrolling the page itself. Over 80% of touch listeners don't cancel the scroll and unnecessarily delay scrolling by up to several seconds. This results in a large amount of jank where the page doesn't seem anchored to the user's finger.
Chrome 51 allows developers to proactively declare that an event listener won't prevent a scroll. While developers should continue to avoid long-running script to
reduce all forms of jank
, this change eliminates the need to delay scrolling until the JavaScript completes. To learn more about passive event listeners and how to use them, check out the in-depth
EventListenerOptions explainer
.
Touch scrolling on cnn.com unmodified (left) and with a planned site update to make touch listeners passive (right).
Another way web platform improvements can help developers reduce delays is take common operations that can't be implemented efficiently in JavaScript and instead build them natively into the browser. One prevalent example is heavy Javascript used to calculate whether an element is visible in the document's viewport or other scrolling container. This is useful for knowing whether a certain element was seen or when to dynamically load more content at the bottom of a page, but can cause annoying jank and unnecessary battery drain if run frequently on user interactions.
Chrome 51 includes support for Intersection Observer, a new API to provide viewability information in a more efficient way. Sites can receive a callback whenever any element intersects a watched element or its children. The site no longer needs to implement this functionality with its own custom JavaScript, and gains the benefits of improved page load and scroll performance. For more information and implementation details, see the
Intersection Observer explainer
.
Studies
have
shown
that an increase in performance leads to happier, more engaged users. Performance is something for everyone in the web ecosystem to care about--not just browser implementers, but also web authors. As developers of both top-level sites and embedded content make use of these new APIs, the result will be a faster web for everyone.
Posted by Rick Byers and Stefan Zager, Professional Jank Busters
ES6 & ES7 in the browser
Friday, April 29, 2016
JavaScript is a continually evolving programming language standardized over time by a committee of browser vendors, developers, and community members. In the past two years, this committee has introduced ES6, the largest update in the history of JavaScript, and ES7, the first of more frequent annual releases. Together the two versions add hundreds of new features to help developers write expressive, concise, and fast applications. After a long, collaborative journey of design, specification, and implementation work, the V8 JavaScript team has reached a major milestone in language support. Chrome Canary now runs both ES6 and ES7, which will ship to all users in Chrome 52.
ES6 and ES7 support in Chromium provides JavaScript developers with many sought-after features common in other programming languages, but previously missing from the web. These features include ways to simplify common programming patterns, make code easier to write, and customize low-level JavaScript behavior.
Classes
, for example, allow developers to easily write object-oriented programs and safely
extend
built-in JavaScript objects.
Arrow functions
,
default parameters
, and
array convenience methods
make common idioms simpler to program and reduce the need to copy and paste boilerplate code between projects. It can be difficult to reason about JavaScript’s asynchronous execution flow and nested callbacks, so ES6 introduces
promises
,
iterators, and generators
to simplify asynchronous code, make control flow more expressive, and make writing bug-free code easier. Powerful features like
proxies
and
well-known symbols
also give advanced developers the ability to customize language behavior to better match their application’s needs.
In order for websites to take full advantage of these new JavaScript features, multiple browsers must support the latest specifications. Fortunately, cross-browser support has rapidly improved in the past few months. The latest development versions of all modern browsers now support more than 90% of ES6, with polyfills and transpilation available to add support to older browsers as well. Adoption will continue to expand over the coming months, given that the ability to load JavaScript modules from HTML was recently standardized with the
<script type="module">
tag. Chromium has already started implementing this new tag, and module support will be
available soon
, making it even easier to write and ship websites with ES6 and ES7 code.
For more details on the JavaScript standards process, features still under discussion such as proper tail calls, and a deeper dive into the technical side of spec conformance, visit the
V8 blog
. Check back soon to hear more about upcoming JavaScript features and continued performance optimizations.
Posted by Seth Thompson, Product Manager and ECMAScript ESsayist
Chrome 51 Beta: Credential Management API and reducing the overhead of offscreen rendering
Friday, April 29, 2016
Unless otherwise noted, changes described below apply to the newest Chrome
Beta
channel release for Android, Chrome OS, Linux, Mac, and Windows.
Credential Management API
Many sites allow their users to sign in to receive personalized content. Today that requires remembering and typing credentials, which lowers account security when users reuse passwords across multiple sites. Modern browsers have credential managers that remember and autofill saved passwords, but these managers cannot account for custom login flows or remember
federated identity
preferences.
The latest version of Chrome now supports the
Credential Management API
, allowing sites to
interact with the browser’s credential manager
to improve the login experience for users. The API enables users to sign in with one tap and lets them automatically sign back in when returning to the site.
Signing in with one tap using the Credential Management API
Reducing the overhead of offscreen rendering
Modern websites commonly embed cross-origin content like videos, social widgets, and ads. Embedding these resources allows sites to offer compelling content experiences, but it also creates a lot of overhead that can jank the page in ways the embedding site can’t control. The latest version of Chrome
no longer runs the rendering pipeline
or
requestAnimationFrame()
callbacks for cross-origin frames that are offscreen. This eliminates unnecessary work and
reduces power consumption by up to 30%
on several popular mobile sites without affecting the user experience.
Additional features in this release
The
Intersection Observer API
allows sites to
detect element intersections
as an asynchronous event, eliminating the need for costly document monitoring.
The latest version of Chrome supports
passive event listeners
, which allow sites to run JavaScript in response to touch and wheel input without blocking scrolling.
Blobs are now
constructed and transferred to the browser asynchronously
, allowing large data files to be moved without janking the page.
The
SameSite
cookie attribute
allows sites to restrict cookies to requests from the same domain.
Support for the
AES_256_GCM
cipher on TLS
improves security on servers that choose cipher by key size, where legacy 256-bit ciphers were used over more secure, but smaller, ciphers.
Array.prototype.values()
makes it easier to iterate over the elements of an array.
The
function
name
property
now infers useful names for properties and methods with computed property names,
making debugging easier with clearer labels and error messages
.
Iterators that are part of a
for-of
loop that terminates early now call a developer-provided
close()
method, making it easier to respond to the end of an iteration.
Symbol.species
makes subclassing
built-in classes such as Array and RegExp
more powerful by allowing custom constructors to be called for derived objects.
RegExp
subclasses can overwrite the
exec()
method to change the matching algorithm, making it easier to write custom subclasses.
Sites can now can implement their own
Symbol.hasInstance()
method to customize behavior of the
instanceof
operator.
Sites can now retrieve a service worker’s
Client
object using
Clients.get(id)
.
ServiceWorker.postMessage()
now fires an
ExtendableMessageEvent
on
ServiceWorkerGlobalScope
, allowing the message to extend the service worker lifetime and provide more accurate message sources.
The HTML
referrerpolicy
attribute
allows sites to control what information is sent in the referrer headers of
<a>
,
<area>
,
<img>
, and
<iframe>
elements.
The
UIEvents KeyboardEvent |key|
attribute
allows sites to reliably
determine the meaning of the key being pressed
.
Sites can now detect the duration of batched offline audio contexts using the
OfflineAudioContext.length
attribute
.
SPDY and ALPN support has been removed in favor of the standards-based HTTP/2 protocol.
Other changes
The ability to customize the message shown in the
onbeforeunload
dialog
has been removed
to protect users from malicious websites and align with other browsers.
Chrome on Android now uses the same media pipeline as desktop Chrome, improving
WebAudio
support and allowing sites to interact with the playback rate on
<audio>
and
<video> tags
.
The latest version of Chrome improves web animations interoperability by supporting lists of values and removing dashed-names in keyframes.
Chrome now
requires a border style
to paint border images, improving
spec
compliance and interoperability.
Percentages can now be used
for the sizes of flex item children.
DHE-based ciphers have been deprecated and will be removed in Chrome 52
in favor of ECDHE
ciphers to improve TLS security.
Posted by Sabine Borsay and Mike West, Authenticator's Apprentices
Labels
$200K
1
10th birthday
4
abusive ads
1
abusive notifications
2
accessibility
3
ad blockers
1
ad blocking
2
advanced capabilities
1
android
2
anti abuse
1
anti-deception
1
background periodic sync
1
badging
1
benchmarks
1
beta
83
better ads standards
1
billing
1
birthday
4
blink
2
browser
2
browser interoperability
1
bundles
1
capabilities
6
capable web
1
cds
1
cds18
2
cds2018
1
chrome
35
chrome 81
1
chrome 83
2
chrome 84
2
chrome ads
1
chrome apps
5
Chrome dev
1
chrome dev summit
1
chrome dev summit 2018
1
chrome dev summit 2019
1
chrome developer
1
Chrome Developer Center
1
chrome developer summit
1
chrome devtools
1
Chrome extension
1
chrome extensions
3
Chrome Frame
1
Chrome lite
1
Chrome on Android
2
chrome on ios
1
Chrome on Mac
1
Chrome OS
1
chrome privacy
4
chrome releases
1
chrome security
10
chrome web store
32
chromedevtools
1
chromeframe
3
chromeos
4
chromeos.dev
1
chromium
9
cloud print
1
coalition
1
coalition for better ads
1
contact picker
1
content indexing
1
cookies
1
core web vitals
2
csrf
1
css
1
cumulative layout shift
1
custom tabs
1
dart
8
dashboard
1
Data Saver
3
Data saver desktop extension
1
day 2
1
deceptive installation
1
declarative net request api
1
design
2
developer dashboard
1
Developer Program Policy
2
developer website
1
devtools
13
digital event
1
discoverability
1
DNS-over-HTTPS
4
DoH
4
emoji
1
emscriptem
1
enterprise
1
extensions
27
Fast badging
1
faster web
1
features
1
feedback
2
field data
1
first input delay
1
Follow
1
fonts
1
form controls
1
frameworks
1
fugu
2
fund
1
funding
1
gdd
1
google earth
1
google event
1
google io 2019
1
google web developer
1
googlechrome
12
harmful ads
1
html5
11
HTTP/3
1
HTTPS
4
iframes
1
images
1
incognito
1
insecure forms
1
intent to explain
1
ios
1
ios Chrome
1
issue tracker
3
jank
1
javascript
5
lab data
1
labelling
1
largest contentful paint
1
launch
1
lazy-loading
1
lighthouse
2
linux
2
Lite Mode
2
Lite pages
1
loading interventions
1
loading optimizations
1
lock icon
1
long-tail
1
mac
1
manifest v3
2
metrics
2
microsoft edge
1
mixed forms
1
mobile
2
na
1
native client
8
native file system
1
New Features
5
notifications
1
octane
1
open web
4
origin trials
2
pagespeed insights
1
pagespeedinsights
1
passwords
1
payment handler
1
payment request
1
payments
2
performance
20
performance tools
1
permission UI
1
permissions
1
play store
1
portals
3
prefetching
1
privacy
2
privacy sandbox
4
private prefetch proxy
1
profile guided optimization
1
progressive web apps
2
Project Strobe
1
protection
1
pwa
1
QUIC
1
quieter permissions
1
releases
3
removals
1
rlz
1
root program
1
safe browsing
2
Secure DNS
2
security
36
site isolation
1
slow loading
1
sms receiver
1
spam policy
1
spdy
2
spectre
1
speed
4
ssl
2
store listing
1
strobe
2
subscription pages
1
suspicious site reporter extension
1
TCP
1
the fast and the curious
23
TLS
1
tools
1
tracing
1
transparency
1
trusted web activities
1
twa
2
user agent string
1
user data policy
1
v8
6
video
2
wasm
1
web
1
web apps
1
web assembly
2
web developers
1
web intents
1
web packaging
1
web payments
1
web platform
1
web request api
1
web vitals
1
web.dev
1
web.dev live
1
webapi
1
webassembly
1
webaudio
3
webgl
7
webkit
5
WebM
1
webmaster
1
webp
5
webrtc
6
websockets
5
webtiming
1
writable-files
1
yerba beuna center for the arts
1
Archive
2024
Aug
Jun
May
Apr
Mar
Feb
2023
Nov
Oct
Sep
Aug
Jun
May
Apr
Feb
2022
Dec
Sep
Aug
Jun
May
Apr
Mar
Feb
Jan
2021
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2020
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2019
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2018
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2017
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Feed
Follow @ChromiumDev
Give us feedback in our
Product Forums
.