Keynotes Summit/2020: Performance and User Experience for the Web of Tomorrow
During WP Engine’s 2020 Summit, Mariya Moeva, Product Manager at Google, discusses the future of the web and the important roles privacy, speed, and fostering quality user experiences have to play in it. Learn about tools like AMP, Site Kit and Web Stories for WordPress that you can use to assess and advance the performance of your WordPress site.
Mariya Moeva, Product Manager at Google, discusses:
- How Google works very closely with WordPress, WP Engine and the community to advance and support the WordPress ecosystem.
- Sharing insights on the three key ways Google is helping keep the web thriving and healthy, and make it useful tomorrow:
- Speed and Performance: define metrics that match the user experience and share them with the community in an actionable way.
- Excellent User Experiences: ensure both the site owners and the end users have the most relevant information from across Google products at the time they need it and in the right context.
- Privacy and Security: design a new model of supporting the ecosystem while respecting user privacy.
It’s not just for the sake of the fact that if the experience is slow, users will go elsewhere, but it’s also because user’s expectations shift upward, as they use pleasing native applications experiences throughout their daily digital lives.
Full text transcript
[00:00:00.03]
Hello everyone. My name is Maria and I’m a Product Manager in the Google search team. I spend most of my time building products to help site owners succeed on the web.
[00:00:09.08]
And so today I’m really excited to share with you what we at Google think it’s important for the web to be healthy and thriving, and also what we’re doing about it, and how can we work together.
[00:00:21.03]
But in order to look forward, let’s look around first, where are we right now? And what is the web landscape like?
[00:00:27.07]
CMS platforms are becoming more and more critical to the success of the web.
[00:00:32.03]
We see a steady growth in the overall percentage of sites who are built with CMS platforms.
[00:00:37.08]
They’re critical, especially for the tail and torso businesses, but also for really big sites who using CMSs as well.
[00:00:44.04]
And we at Google, work closely with a range of CMS platforms in order to keep the
web healthy and private.
[00:00:51.02]
And of course, we are committed to working very closely with WordPress and the community to advance and support the WordPress ecosystem.
[00:00:59.04]
We do this in a number of ways. For example, by contributing to core WordPress platform to improve the performance with things like lazy loading images, or to increase the discovery of content with things like Sitemaps.
[00:01:12.03]
We also build plugins, which offer important functionality from various Google products or show how to enable specific technologies like, AMP on your WordPress site.
[00:01:23.01]
And we offer them to everybody in the WordPress plugin directory.
[00:01:26.09]
And last but not least, we actively engage with the community by speaking and sponsoring various events, like the various WordCamps in Europe, in Asia and the US, and also locally in smaller cities and other industry events.
[00:01:41.06]
And when it comes with WP Engine, we do have a thriving relationship as well, that spans across all the same areas that I just mentioned when it comes to WordPress.
[00:01:51.01]
For example, WP Engine’s platform now offers Google Cloud Platform’s compute-optimized virtual machines, which allows server execution time to drop drastically.
[00:02:01.00]
For example, site like, boardingarea.com, which migrated to this new infrastructure, saw an immediate drop in backend_processing_times, resulting in up to 40% improvement in site performance.
[00:02:13.00]
Key plugins like the AMP plugin and Site Kit are featured in WP Engine Solution Center and the Genesis Framework is AMP compatible, helping customers build high performing and beautiful sites.
[00:02:25.06]
And last but not least, we come together at key events like the WP Engine party at WordCamp US, or here today.
[00:02:34.04]
Besides the importance of CMS platforms on the web, one factor that we can’t ignore, is how the world has drastically changed in just a few months across all spheres of activity, due to the COVID-19 pandemic.
[00:02:46.09]
This has affected the web as well. Some sites are experiencing an overload of visits and traffic, while others have had to temporarily suspend activity.
[00:02:57.07]
The web right now is critical for growth and in some cases it’s the only chance for survival, for a lot of businesses.
[00:03:05.01]
Keeping the businesses alive and helping them get online and grow online is a key
priority in our perspective.
[00:03:12.08]
It’s also critical for the end users because a lot of the important services and information have moved online as a result of the pandemic.
[00:03:22.07]
Knowing all of this, let’s look at the three key directions that we think are really important to keep the web thriving and healthy, and make it useful tomorrow.
[00:03:32.08]
There are three areas that we consider critical.
[00:03:35.08]
Making sure sites are fast, performing highly and accessible.
[00:03:39.09]
Making sure both site owners and end users enjoy an excellent user experience on the web.
[00:03:46.00]
And then also making sure that we maintain a thriving ecosystem, while we recognize the privacy and choices of end users.
[00:03:53.04]
So, what I would like to do now, is to tell you what we at Google are doing for each of these areas and how we can work together.
[00:04:01.01]
For each of these three important areas, I’d like to share with you, what we think is important and the steps we’re taking to work together with our partners in the ecosystem, including CMS platforms, site owners, and hosting providers.
[00:04:15.06]
When it comes to speed and performance, we’re working hard to define metrics that match the actual user experience as closely as possible and share them with the community in an actionable way.
[00:04:26.04]
For excellent user experiences, we work to make sure both the site owners and the end users have the most relevant information from across Google products, exactly at the time they need it and in the right context.
[00:04:38.05]
And last but not least, for privacy and security, we are working to help design a new model of supporting the ecosystem while respecting user privacy.
[00:04:49.00]
So, let’s start with speed and performance.
[00:04:51.07]
Optimizing for these factors makes the web more delightful for users across all web browsers and services and help sites evolve towards user expectations on mobile.
[00:05:02.00]
We believe that this will contribute to business success on the web, as users are growing more and more engaged and can get done what they need with a lot less friction.
[00:05:12.01]
So, I think we all know this, but it’s really worth reiterating, user-first focus is critical on today’s web.
[00:05:18.08]
It’s not just for the sake of the fact that if the experience is slow, users will go elsewhere, but it’s also because user’s expectations shift upward, as they use pleasing native applications experiences throughout their daily digital lives.
[00:05:33.06]
Here are just two stats that demonstrate how a relatively small improvement or delay can make a significant difference in user experience and affect conversion rates.
[00:05:45.02]
We focused on three key areas for high quality experience. First, a fast load. So you can see something right away. Then, interactions which are responsive and finally a smooth, delightful page that doesn’t shift or jink.
[00:06:00.09]
We sought to measure these three attributes and we’re excited to introduce them to you and get your feedback.
[00:06:06.03]
So let’s have a look. These are the new metrics, core web vitals.
[00:06:12.03]
It’s a set of real world user-centered metrics that qualify key aspects of the user experience. They measure dimensions of web usability, such as low time, interactivity, and the stability of content as it loads. So you don’t accidentally tap that button that you didn’t want to tap.
[00:06:30.06]
Our goal is to help site owners measure and improve user experience on the web.
[00:06:35.03]
For most of these metrics, we provide both field and lab data, meaning data based on aggregated stats of how users have experienced this page in Chrome, as well as data based on analysis we ran on the page.
[00:06:49.02]
So, the first metric is Largest Contentful Paint. This is one of our newer metrics and it serves to measure how quickly the main content of a webpage loads and is visible to users.
[00:07:01.08]
This metric is the combination of quite a bit of research and metric development. It’s predecessors are metrics like, speed index and first meaningful paint.
[00:07:11.03]
LCP is aiming to capture when the largest content element is visible in the viewport of the browser. Major factors like, server response time, CSS blocking time and asset sub resource loading time affect LCP. And it’s available both in the lab and the field data sets.
[00:07:32.02]
Second metric, is First Input Delay, and it is a field only metric, because it requires real user interaction. It’s a measurement of the time it takes for the browser to actually respond for the first time a user provides input on a page.
[00:07:47.00]
It’s critically important to look at First Input Delay, because it gives you an indication of the user’s first impression of your site’s responsiveness.
[00:07:56.04]
Solutions to improve this metric, include things like loading JavaScript upfront, code splitting and so on.
[00:08:03.06]
Anything over 300 milliseconds is perceived by the users as a poor experience. And anything above a 100 milliseconds is good.
[00:08:14.01]
And last but not least, Cumulative Layout Shift or CLS. Here on the slide, you can see an example of what happens when this metric is not particularly good.
[00:08:24.03]
It can result in a lot of frustration for users. It measures the amount that the elements within the viewport move around during load.
[00:08:32.09]
CLS is trying to measure things like, prepending an ad to a list in a way that increases the chances of accidental clicks on the ad, or having a news page in which the stories photo shifts the text content down the page when it fully loads.
[00:08:47.08]
To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between the two rendered frames.
[00:08:57.04]
The layout shift score, is a product of two measures of that movement. The impact fraction and the distance fraction.
[00:09:04.04]
In other words, you’re measuring how much content actually moved and how far it moved.
[00:09:11.00]
To provide a good user experience, sites should strive to have Cumulative Layout Shift of less than 0.1.
[00:09:18.09]
CLS can be measured in both the field and the lab, similar to Largest Contentful Paint.
[00:09:24.04]
Whereas, for simple delay, as I mentioned before, is only in the field.
[00:09:30.01]
We’re working across all of our different tools to make sure that they’re instrumented effectively and consistently, so that you can get information about how a specific page or a site is doing across these metrics and share that information either with your team or with your clients.
[00:09:46.05]
And of course, when we’re talking about performance, one thing to keep in mind is that, we need to mention the AMP Framework.
[00:09:53.06]
This is a web components framework to easily create user first websites, emails, and stories. And it solves already a lot of the common performance issues on the web.
[00:10:03.05]
To give you just a few examples, AMP automatically takes care of things like, lazy loading noncritical content.
[00:10:10.02]
So, it would load the visible content much faster, while the other elements elsewhere on the page download in the background.
[00:10:17.05]
And it gives the user a better perception of the site importance. Also it optimizes tracking for your site.
[00:10:24.01]
With the AMP analytics component, you can measure behaviors and interactions with your site once and then deliver them to many analytics backends efficiently.
[00:10:35.02]
And finally, it also enables you to achieve responsive design as easily, as adding attributes to HTML tags.
[00:10:42.08]
So if you care about performance, it’s an interesting framework to investigate whether it might fit with your current site set up and it’ll solve a lot of your performance issues.
[00:10:52.05]
The second key area that we’re focusing on today, is excellent user experiences.
[00:10:57.09]
Empowering business owners and content creators to make the right steps, to get online, grow their presence, get more visitors and turn them into customers.
[00:11:08.07]
What we hear again and again, when we talk to business owners and content creators, is that they find it really hard to deduce what steps they’re supposed to take from the variety of complex reports, especially when they need to pull information from multiple products in order to get the full picture of what’s going on with their site.
[00:11:28.02]
They need to focus on their business and they don’t have the knowledge or the time to also become web experts. And they shouldn’t have to.
[00:11:36.05]
We can offer them intuitive, easy to understand and actionable suggestions on how to improve and grow.
[00:11:44.06]
We took this feedback to define the guiding principles when we built products. For example, plugins for WordPress, like Site Kit.
[00:11:52.08]
We aim to show information exactly where and when the users need it. Directly in their WP admin dashboard, we eliminate complex reports and show only the most relevant stats. And we do that from across a variety of different Google products.
[00:12:09.08]
It doesn’t matter if the metric comes from analytics, AdSense, or page speed insights, we will display it in the same easy to use dashboard, so people can have one place where they can check everything related to their site and Google.
[00:12:24.01]
A good example of applying these principles in practice, is Site Kit. That’s Google’s official plugin for WordPress.
[00:12:30.05]
It combines stats, currently from four different Google products into insights on a very simple dashboard, directly in the admin dashboard of the WordPress site.
[00:12:40.09]
It gives information about how the site is doing at a glance. Makes it easy to keep up on a regular basis for really busy site owners.
[00:12:50.00]
The approach of providing the right insights and context has really resonated with WordPress site owners.
[00:12:55.09]
Since launch, in November, 2019, we’re seeing very strong organic adoption and currently we are at more than 400,000 active installs, and continuing to grow steadily every day.
[00:13:09.06]
So, what’s so special about Site Kit? It was designed to improve the friction at the beginning of the journey on the web.
[00:13:16.06]
Especially during initial setup, a lot of users don’t know how to edit their site, to place tracking snippets or tags in order to collect and access important data from various products.
[00:13:29.05]
With the user’s permission, Site Kit can take care of that on their behalf and removes the bottlenecks in those first moments of sending up the site and connecting the right product accounts.
[00:13:42.04]
And here’s an example. Once you have connected those products, of how Site Kit brings the relevant information when it is needed directly in the user’s dashboard.
[00:13:51.08]
Lots of users prefer proactive sharing of information to let them know when something important happened rather than having to check again and again on their own.
[00:14:01.03]
This is also an opportunity to combine information from multiple products into an insight.
[00:14:06.06]
Like, your fastest loading pages are also the pages with the highest time on page and highest access revenue.
[00:14:13.01]
So, these are three stats that came from P speed insights, accents, and analytics, and we put them together in order to give the user an understanding of what’s going on.
[00:14:23.00]
Another critical aspect of excellent user experiences, both for site owners and end users, is understanding what content is sought after and how to create strategically in order to get more visitors and users.
[00:14:36.02]
There’s some shifts that we are observing in the ecosystem as a whole in terms of what type of content is being consumed and what is popular. And I want to share with you what we’re doing in order to move the web forward in that direction.
[00:14:50.01]
Most of you are already probably familiar with Stories. They’re the first mobile native content format. Nearly three out of four smartphone users read or view tappable Stories on social
media, at least weekly.
[00:15:05.04]
64% of users prefer the story format and more than 75% are interested in reading tappable Stories in the top read content categories.
[00:15:16.08]
We believe that the stories format works beyond the ephemeral use case, and it can become its own pillar in the media landscape.
[00:15:25.03]
Stories are web pages that can be seen anywhere a webpage can be seen, but at Google we’re going the extra mile to let them shine.
[00:15:34.07]
So, on select queries like, things to do in New York, for example. We will trigger a visual block like this with publisher stories.
[00:15:44.01]
Discover is another product where stories surface and it is hugely popular amongst both Android and iPhone users, with more than 800 million monthly active users, and this is already two years ago.
[00:15:59.04]
For those who are regular Discover users, you’ve probably already seen this pretty unique looking large preview experience of stories in Discover.
[00:16:08.06]
The stories take up quite a bit of real estate in the feed and if you tap one of those, it would put you directly in the publisher story.
[00:16:16.06]
This is already life today and it delivers a decent amount of traffic to a lot of publishers.
[00:16:23.01]
We want to help site owners on WordPress get easier access to the Stories format. So, we created a re envisioned Stories for WordPress plugin.
[00:16:33.01]
We set out to build an editor that makes it easy and fun to produce visually stunning stories.
[00:16:39.02]
It features numerous templates and a lot of functionality like, masking presets, dropping images into other images, extensive options to edit fonts, text images, shapes, and videos, and all of this into a very simple and intuitive UI.
[00:16:54.04]
If you would like to be notified when the better version of this is out, you can express your interest on the short link on this slide.
[00:17:01.08]
And if you’d like to find out even more about this, you can watch the session of
my colleague, Paul Bakaus, who will be talking about web stories plugin and giving a sneak preview today.
[00:17:15.07]
Last but not least, I’d like to give a brief overview of our vision for web privacy, explain the path to realizing that vision and talk through options for sharing feedback and collaborating in the process.
[00:17:29.07]
You’ve probably seen headlines about Chrome’s plans to end support for third party cookies.
[00:17:35.03]
But the vision is broader and more nuanced than the headlines may suggest.
[00:17:40.06]
This is really about evolving the web to better respect user privacy, while at the same time, ensuring that it continues to support core business models and use cases that keep the web vibrant and healthy for everyone.
[00:17:55.05]
The web community needs to do more to support user privacy and choices.
[00:18:01.03]
This means, addressing the problem that the same technologies, which support use cases like content and advertising relevance or fraud prevention, are also used for unwanted
tracking across the web.
[00:18:15.04]
Primarily we’re talking about third party cookies and covert tracking methods, such as fingerprinting.
[00:18:21.05]
While users can control cookie based tracking through browser settings, for example, they can’t really opt out of fingerprinting and often have no way of even knowing that it’s happening.
[00:18:31.07]
And neither of these mechanisms is private by default.
[00:18:36.02]
That’s why we believe the responsible approach is to replace legacy practices with new privacy preserving solutions.
[00:18:45.08]
Think of this work in three phases. First, there are things that we can do already today to improve cookie security and choice.
[00:18:55.01]
An example is the new cookie labeling policy, known as SameSite cookies, which makes cookies first party by default, improving security and reducing the opportunity for covert tracking.
[00:19:08.03]
And it also ensures third party cookies are accessed over secure connections. In April, Chrome temporarily wrote back the SameSite cookie changes to ensure stability and avoid any distractions for websites, providing essential services during the COVID-19 crisis. This rollout has just recently resumed.
[00:19:29.07]
Second, we’re championing an open and collaborative effort to develop new web standards for privacy. This is the Privacy Sandbox initiative.
[00:19:39.09]
This work includes the creation of new technologies and supporting key use cases without identifying users across sites, along with efforts to mitigate covert tracking by limiting passive data collection.
[00:19:55.00]
And only after these new privacy preserving solutions are in place and they meet the needs of the ecosystem, we intend to phase out support for third party cookies in Chrome.
[00:20:08.06]
So, these have been the three areas that we consider critical to keep working and improving in order to ensure a thriving web today and tomorrow.
[00:20:19.01]
And I hope that now you understand better why each of them are so important and what big changes are happening within each.
[00:20:26.06]
Needless to say, this is also up to you, whether it’s to ensure that your clients or partners understand and benefit from site performance metrics, or whether it’s giving access to the right stats and the right context to your team or your clients, or perhaps contributing to the discussion around the new privacy standards.
[00:20:47.03]
Together, we can make the web safer, faster, and more delightful for end users and site owners alike. Thank you.
