Duration 38:47
16+
Play
Video

Make your WordPress site progressive

Alberto Medina
Developer Advocate at Google
+ 1 speaker
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 8, 2018, Mountain View, USA
2018 Google I/O
Video
Make your WordPress site progressive
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
11.86 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Alberto Medina
Developer Advocate at Google
Thierry Muller
Engineering - Developer Relations Program Manager at Google

Alberto Medina is a Developer Advocate in the Web Content Ecosystems Team at Google, focusing on AMP, Progressive Technologies, and Content Management Systems. Alberto is a Computer Scientist by training and has worked in academic environments, research labs, startups, medium companies (~300M users), and large companies (~1B+ users). Passionate about enabling awesome web experiences for all users.

View the profile

Thierry is a Swiss Digital Wrangler writing code and architecting softwares for a decade. He is truly passionate about web engineering, code quality, open source, community driven projects and building enterprise solutions. He spent a great part of his career building products and web solutions for WordPress as well as driving open source projects. Thierry is fortunate to work at XWP as an Engineering Program Director, working alongside some of the brightest WordPress experts in the world.

View the profile

About the talk

Approximately one third of web content is published by WordPress-powered sites. This talk will show how the power of progressive technologies and AMP can be leveraged easily in WordPress sites with minimal user intervention.

Share

I bet that you have heard before the term Progressive how to make Progressive WordPress site which means basically Pro Shops that have been developed using more than welcome or enhancement, which is the application of a teaspoon to your site in a step-by-step way instead of like all at once. We are using Progressive to capture the notion of progressive web development, which means development of user first experience using more than welcome abilities and performance best practices and the key

here is the word user first which means that at the Quorum of progressive web development is user experience. So they start at the court what is user experience. You said experience refers to a person in motion when they're using a product in our case. Product is our website WordPress site. So is all about how users feel when they are engaging with the content that we create and that we published so that I like to imagine baby and I'm not sure what I want is my user to have that expression in their faces every time they go to my side I need a

bit but what are the qualities in where the experiences that actually bring joy to users and four main factors that are commonly present in what way is defined as a delightful us experiences users love applications that are fast and reliable below and they behave well once they're running user love story. Users at love applications that are secure. They want to feel safe when they are throwing the data and the transaction to the apps users of applications that still know that they can take advantage of all the features of the device has to offer and users love application that are engaged

in right they like that kick wanted to go back to the application and their applications make it very easy to come back to them for a long time building applications in the web that satisfies this four pillars of the life of the US was not easy or not possible at all. And the main reason was that for a long time. The main power of the web was that URL hyperlink in calf abilities. What is you compare it to platforms to develop native what's happening the Android platform the wet like behind the tents in the interest of the things that you could do with it. However,

is that the web has been in Weekly in the in recent years and nowadays is fully possible to build awesome web experiences only using what capability is a subset of the weather today. So if you can do a lot of things with them for example accessing device pictures, like the vibration signals with gyroscope, you can Implement snake-like pictures like a to home screen offline access and someone even augmented reality is a thing today in the web. We have more than developing workflows a lot of students and Powerful Java spring framework that add additional layers of abstraction that allows us to

be very very complex and awesome experiences vocal fold. These you have yourself a web developer eager to harness the power of this mountain. Abilities. Truly taken advantage of the web has to offer is very difficult. Right? So ask the complexity of the web ecosystem has increased we also have seen an increase in what I like to call pick up abilities you search guy with simply is the difference between what county is on and what is actually actually say 1999 cuz you wouldn't have the time but

the time that we could do in the web and the best thing is it was only a single form factor that you have to leave now fast forward to today. We have to develop application that has run well in what he seems to me an infinite number the phone Factor. So no wonder that that got has grown and the problem with this guy. If that if we don't take advantage of what the weather has to offer is very difficult to build application to certify the pillars of a delightful you ask and we see evidence of this in the wild. Where are stories that show the prevalence of applications that run

very slow day of the dead full load on mobile 75% of mobile site takes 10 seconds or more to lure and also there are a lot of applications too many poor Wrong Time Performance things, like unresponsive Pages or counting chieftain in front of your eyes when they are engaging with it and the bad news is a user hate this and we see evidence of that in the white as well in the impact that these experiences has on the revenue potential of our site for something more than half. The users are going to leave aside. It's more than three seconds to love. 75% take

more than 10 seconds when you figure it out right now between time and conversions. So but for me, they were score lateral aspect of not being able to take advantage of the web is what is known in sociology as the Matthew effect of accumulated Advantage Pro. Do you have heard of it. Rich get richer principle which means in our context that given the complexity of the web platform. It seems that only super stack developers organization that has a high quality engineering things are the only ones I have a 3 chance to take advantage of the web and that is not what the weather is

all about. Give me the prevalence of the feelings that I just described even Superstar. Look up abilities usage. We can go about it one is or not. Given that the wet stuff abilities are there for us to use them if we all do the right thing since we'll be okay. Like we should not see those expensive that is easier said than done the real if it looks more like this, right you have to answer so many things to have applications that are delightful that is

very trying to do you have to be careful to not interfere with the people trying to imply resources synchronously, you know, so many things so that the landscape is so complex. That is Google the right thing the First Time Imagine doing the right thing all the time for the lifetime of Europe inflation in all circumstances all the time. So he's you know, it's very hard is what I like to think about a progressive web ecosystem is ecosystem when doing the right

thing is easy, right and Even bowled seven artifact of the first one is an evolving with Platinum write a place somewhere new where they'd probably improved. You know, we have a good set of tools that help developers ultimate complex tasks. We have Frameworks that applications and a key points in a progressive web systems that we take the learning so that we get from using the tools and the framework and we see what works and we beg them in back into the web platform. So this is a better option, right

we want to pursue this. How should we focus our efforts to achieve this to answer that question for me to think about the dance of a very very simple past three layers the top layer has the continental system that we all use everyday and give her the perception of the web has one thing right from formed by content Management systems that are basically software platforms that make it easy to create and maintain content what platform is nothing else that the

implementation or the power of the web exposed by browser implementation of the web API, so you can see that the ecosystem Lisa dotted line dividing it into and that's very important because nowadays about 50% of sites in the web are powered by some sort of content management system and then What It Wants by some configuration a combination of Tulsa Prem ratan song Google we are interested in closing the cap ability to search everywhere and we are pursuing significant answers actress old. I mentioned on the web

ecosystem. Focuses on closing the capability of such Gap in the area of content management system call Progressive plasma. We are focusing specifically in WordPress. And there are several reasons. Why focusing on WordPress will cause an impact not only for the weather also for the content management space in general and the web as a whole Historically low price has been seen as a blogging platform has been evolving steadily since I started back in 2003. If I am not mistaken across a variety

of areas new education shopping Etc improving the speeding for you across a variety of Rarity cuz that's very important. The second one is certainly the largest player in the content management system open source, CMS market share this every sandwiches for me staggering nowadays were pressed flowers around 30% of the web. So when I think about what I think about how many users publishing and consuming content in the platform and I would like all of them to be able to get a delightful experience.

Going back towards definition of progressive web development. When I say progressive WordPress what I mean is a WordPress platform where more than dwarf Lowe's calling and performance best practices and the use of more than web API is the standard. I know the exception is commonplace. Okay. Now, how can we make progress quickly? We want to have a progressive or precise yesterday Note 5 years from now, but fear not I am sure that you have heard about the accelerated mobile Pages for sure

is a open source library that makes it easy to build web pages on side engine that can provide those kind of experiences that are very compelling unload near instantaneously, right? In a nutshell what does it is to provide out-of-the-box a set of powerful capabilities and performance of the musician that address 339 performance. NY wants nobilo times Wrong Time Performance. I don't want something she standing from my iPhone to repost pages and usability. Don't know what I want a smooth transition between my

direction when I ain't a 10 gauge refund. So if we could integrate with a worthless far as a choice, right, we will be pulling at the fingertips of or WordPress developer pickup ability of taking advantage of what time has to offer to create experiences that are compelling under very easy to see what is in an actual and then we want to see the integration in action. So I'm sorry. I need to click faster. So. It entails three components of the first things

is an HTML medical think of it as both a subset of HTML because they allow and the reason is that in order to satisfy reliable performance, you have to impose certain constant Advanced functionality that you can have at your fingertips in the form of possum element that that is a piece of that runs on every on feet and has you know logic to control custom elements a lot of performance optimization load scheduling and so on. And then we have the anti noticed that the MCAT is not necessary to develop but if it's sort of like content distribution Network

that serve to make Valley temperatures available and ready for you to everyone I said that is not necessary, but you don't offer a lot of Optimus Performance internet providers low time not a long time that users lost. I'm finally is the use of amp in the wealth ecosystem that encompasses the implementation of product features as important brother pictures across a variety of platform that are seeking the same that we are seeking enhancing the speeds of the use of the classrooms get things like a Kyocera Google

is one of those pictures Twitter user set LinkedIn an hour prayer Islam on these platforms that can benefit of what I'm has to offer. I think you would press everything happens in 1 or 3 places right upper score. That is the plan itself seems that have to do with the look and feel of a WordPress site and blue jeans that has to do with extending the functionality. The platform has to offer so when we say I'm impressed we are referring to an amp plug in that is integrated with the option of that

login with all the components of War 4 size or the problems that may be installed. So that is one with what we refer to as am in WordPress plugin for WordPress nearby open source project started by automatic at the very very early stages of am one of the earliest adopters of the framework and they implemented a very simple but effective mechanism that we called the pair mode, which means For every piece of post content in a post that was Anna Kiawah Island version, but 4:00 amp

for everything that you have to version of one main limitation, but he was that if you didn't have enough engineering capabilities to work on the result, you usually go to the function of disparity between the original content and the version 0.5 of the plug-in We join forces with X WP and basically we set our eyes in ourside on enabling what we call native experiences in gold price of a world where there is no need to have two versions of the same, then because there is no official Authority or

functional disparity. You can have only the Amberson and get all the benefits of that. I'm happy. Without sacrificing the flexibility of the WordPress platform that was our goal of work put into this version and it ended enabled 95%. Working on a couple of months ago and is very good. However, it still oriented to power users. It's not that easy as we would like to be in order to make it mainstream. So we're here and we're going to tell you soon Improvement that we did in there and also the end of a flow or

contemplation in WordPress on after this after 1.0 the plug in and said that we have right now on the alphabet action with a 1.0 at the end of the week before we do that I would like to do, you know Siri from swp to show we are in the breast. Good morning. The latest work on the plug-in is focused on closing the capability usage Gap in two ways. The first one is by providing a framework to empower developers to integrate amp in the word forest ecosystem. And the second one is by providing

tools which seamlessly integrate and components in the brand new content creation work in WordPress. To put this in context and better understand how we closing the capability usage got we're going to look at some real world example. Lipstick the 2015 theme which comes by default bundled in WordPress website today, but what would it really take to actually convert this team to be incompatible and specifically provide and Native amp expands. The 2016 theme is all about content. It is designed for clarity.

It is also designed with a mobile-first approach. One thing we want to pay a specific attention to is the menu drop-down, which is his JavaScript custom JavaScript. On the Courtside if we look closer at The Archives widget, it's using these allowed in line JavaScript odila surrounding amp, at least if you look at the image, it uses an image tag and not an image tag. on the CSS side It loads 3 CSS style sheets. I need to look closer at the turtle size. It's close to 114 KGB which is way above the 50 kg be allowed in m. If you look at

the JavaScript, there is multiple JavaScript files loading and if we take a closer look at the function that Jas. It includes or contains the handlers for the navigation in which area was so early on a mobile. So we have some challenges custom JavaScript too much CSS for amp and a lot of known amp HTML how we can convert this theme. Dim plug-in comes with a set of amazing features that can really help us overcome these challenges and it will actually do most of the heavy lifting for us.

So the first thing we would need to do is to declare the so-called M Steam support. It is extremely simple. All it takes is 3 and of course Newport that you see on the screen right now in the custom Plug-In or in the child theme and once the M Steam support has declared the end plug in wall consider the active theme for instance to 2015 theme as a native am Citizen and the pliers set of really Nifty features. For example game plug-in is capable of converting all the WordPress building components and make them incompatible and by that women

widgets embeds comments, literally everything branded by the WordPress components. So we so early on the problem with the archives widgets. And if you look at the corn on top before in the M plug-in conversion, we have this inline diesel out JavaScript in em, and you put after the m conversion we can see that the plug-in is change that to use the end navigation to function which is part of the runtime JavaScript library and that will help or actually that will pass and validation to look at the invalid amp in the valley damp. What

we're after is to get exactly the same result and that's what we see on the screen. We didn't lose any function that it is, but on the right hand side we can see that it passes and validation. Only 50 kg of Cs is allowed in amp to ensure maximum page speed but the reality is a lot of the themes contain a lot more than that enter address this issue and make it easier the M plug-in includes a CSS tree shaking mechanism. Which has the ability to only load the CSS

needed on any given page and remove all the unnecessary CSS. She will look once again as the street down the street down version of the 2015 team cord. There are two style sheets disallow style sheets. CSS alone is 96 kilobytes. The plugin has the ability to concatenate the CSS apply the tree shaking and printed in line using the M. Custom style HTML has prescribed I am and that won't pass validation. If we look once again that the invalid and valid amp we can

see that we achieve what we are after which is exactly the same result. But we gone from 114 kg of CSS down to 9 KGB. Is 10 times smaller? Predicting when thousands of plugins and custom Integrations will rain down on the page is extremely difficult to address that the plug-in includes a post processor which is capable of validating the page output and entering and compatibility wherever possible but in some cases. It may come or crossed some functionality, especially when JavaScript is involved. Let's look at this little bit in

more details. Once again, if we look at the HTML before the end plug in conversion, which is an image, and if you look at the gym plug-in is able to convert this image using the image tag considered as a safe change, but if you look at the chairs in order to pass and validation, it would have to be removed and the dragon is capable of doing that. But if we look at the invited them but inversion the invalid works the menu Taco because it contains the JavaScript put on the right hand side. The

menu doesn't work anymore. And then we have a problem, right? The goal of the plug-in is to make hemp integration as easy as possible and to improve the user experience, but not damage it by any mean and that's why we saw the need for validation workflow which allows developers to benefit from all the features that the plug-in includes but also have control and be able to manage it. So my default the plug in wall convert and apply only conversions with are considered a safe for example the mph to mile conversion and for the

changes which could potentially be introduced regression. They would have to go through a validation work for now where she looks like this for example for the CSS tree shaking which is still in theatre. The developer can go ahead and do the front end as if the plug-in whilst you apply this feature. It works perfectly fine. And at that point we can go ahead and tell the plug-in please enable it so that it passes and validation in the context of function the Jazz we saw earlier on that it actually breaks the menu and the plug-in will not apply Distance

by default not to introduce regression and that will give developers a chance to go ahead and fix it. For example using the M buying components and use the set State function to toggle the class, right and then preview the page again, once this change has been applied in a child theme for example by overwriting the head of a PHP. And once it's proven to be working the developer can go ahead and tell the plug-in now that we fixed it. You can go ahead and remove the functions that Jas and that will then fast the a validation. So to recap

what it took to actually convert 2015 CM which is a popular theme, right we had to declare or enable the M Steam support. We have to apply Wednesdays for the menu Saigon by using the n-bomb components and we went through your validation workflow and told the plug-in to apply all the m conversion after reviewing them. And this is the end results. What we looking at right now is a native M version of the 2015 theme. It looks as great as the nonantum version. Of course, if you look at it on mobile, it looks similar as well and as we can see just now before because

we applied the am buying the man you still working. Is it passing invalidation to look at the console we can see that in fast invalidation successfully. And this look on the performance. I'd list run the lighthouse orders without the M plug-in. So that's before the m conversion. We get a score of 66 with a 4.8 first meaningful friends. If we run the same Lighthouse test which is running on 3G slow mobile after the end conversion. We can an 88 with the first meaningful Pains

of 2.8 second. amazing We really see how the latest development work done on the plug-in is helping converting existing product existing themes and plugins used by millions of people to be M compatible. The other main focus area is in the content creation side. Gutenberg is the new Revolution reconcentration experience in WordPress. It replaces half a dozen constants in consistent ways of customizing WordPress bring it in line with the modern Coast standards and aligning with with web initiatives.

It also closes the gap between the back and the front end offering an amazing visual building experience. Goldenberg has the concept of blocks to build pages and on the other side and as the concept of components micro library is to build pages. But what about combining of the power of bows and Bill Guttenberg and blocks and this is exactly what we did and it opens the door for amazing things to happen. We were pushing the boundaries to take the native amp experience in WordPress a step further leveraging

all the latest work done in the plug-in as well as a range of custom Goldenberg and block and this is what it looks like. What we looking at right now is a waitress and Gutenberg powered steam. It's inspired from the M Star Travel and old functionalities that we see on the page is powered by WordPress + could infect. If you look at a single Adventure. We can see that we also leveraging some of the M components for example of the MCAT results lights through the images or the end by 9 to actually talk all the price. We are

also using some of the WordPress components such as the comments to actually allow users to submit reviews. Or the word phrase search Jack Shirley search for Adventures. And we can really see how the content management system shines to manage the adventures here. On mobile it is the same version of the Steam and it looks just as right out of the box what we're looking at is native am but it is seamlessly integrated. Once again, if we look at how Adventures are categorized we can see that it is free

well-organized and if you look at the single adventure with the other end components like the MP YouTube to make the user experience better. So this thing is fast, right super fast is actually secure and seamlessly integrating and it is pretty engaging which which makes it perfect perfectly aligned with the four pillars of a delightful user experience. And what about the content creation side of it? What about the content creation experience that we spoke about earlier on that can be used to rebuild a different version of the homepage.

But we'll have to do is give the page a title. And then we'll have access to a set of blocks for instance custom blocks by clicking on the little plus button. It will open a drop-down with a set of blocks and what we want to do for example to rebuild. Our home page is just click on the gyro block. And as we can see what we see immediately is that it resemble the front end and we have access to really cool things like in line editing to change the text. This is new and where person is pretty amazing. Let's continue building our page and add a

discover blog. From the latest we suggested block which is the most used. Right there where I have a second block on the page and we can continue attending our page for example by changing the subtitle and they said one more 3rd block the feature destination. Once again as we can see the pool to contact automatically if we were to reorder his blocks to change the look and feel of the page we could just go ahead and click on the little icon on left hand side and boom block has moved up and is now under the

Harrow block. This is a pretty amazing editing experience from my perspective and fees. Let's preview what we just both in 30 seconds a different version of the homepage native amp with access of the amazing and components and an amazing content creation experience powered by Gutenberg. So where we are today? 0.7 plug-in version of the plug-in was released last week. And 0.7 is really the first step towards Native. Am it is more orientated towards power users to build teams from scratch on the other hand. We have the M plug-in 1.0 which is still in progress

and that will include the validation workflow. We looked at today the CSS tree shaking. Decor good and bad Blocks made em compatible in a range of custom Gutenberg blocks which integrates the M components. What we have today is amazing, but the future is also very very bright and for that I would like to invite alberone back on stage to tell you more about it. Thank you. Thank U Verry, ohmygod That's so exciting. I fits I feel like I never saw it before but it's awesome. So we have a long way in a

request to rest, but we are not what we want to be. There is quite a bit of work that we have to do and we are pursuing significant landforms in three main area one is enabling the app shell navigation tomatoes in WordPress architecture, which is an architectural pattern to be outside in a way that if they don't have static section that do not change a close navigation we could pass them easily so that when you navigate the page, they can't be loaded very quickly and provide a very nice own words experience for the user and the

Brain to dynamically either on the client on or on the server. What I expected the most about is what is an evening flute the incorporation of the service workers API into the World Press Corps Platinum are excited about this particular area is at the hospital with remember our Progressive web development model. We need tune in to help users developers to do complex things in an easy way and one of those areas a student to facilitate the development of Wordpress themes Progressive WordPress themes. I

want to say a few more worried about getting a second and the last part which is like an Uber area has to do with it cuz it's an adoption you're so repressed if it has a vibrant and we want to and need to work with the community to push or Preston Road and stay tuned for them now have been working very very hard development. Boilerplate essentially, it is a Cinderella Man start a kid that allows or makes it easier for WordPress theme developers to go from 0 to a full Progressive theme very quickly. So the boilerplate comes

loaded with more than development workflow, you know, it's highly configurable that uses tools like composer and gold browsersync. It comes with a range of colon and performances practices baked beans so that for sample I synchronize loading of resources used by default lazy loading off by default. OK, it has a known thing. I'm blocking integration so that if it's in developer decides to have an incompatible theme he can switch a flag and what you're going to get a tan compatible start the theme from the get-go so The Mindy Project

which is more than Grant Hendrickson, please also a staff instructor and Link you learning Course that is going to teach you everything about how to use this void a plate and that particular goal is going to be free. So don't miss out if you can take three things from this dog out of the following success in the web is all about user experience and delightful user experiences. We need to strive to close the music app. It should be easy to do the right thing in the web and the topic it is possible today

for WordPress developers to get negative experiences without sacrifice sacrificing the severity of their side of the continent or the flexibility of the WordPress platform. Remember those three things and you are a WordPress expert you like to cause quite a bit and you are passionate about making it worse ecosystem better and they work better as a whole. You may consider working with us exactly on doing that. Angry Bird I want to thank you. There are some useful resources here and I want to extend a special thanks to Western Rooter the whole SW between him and

automatic for all the donut Chief in the coming month. Thank you very much.

Cackle comments for the website

Buy this talk

Access to the talk “Make your WordPress site progressive”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Adam Greenberg
Sr. Global Product Partnerships Lead at Google
+ 1 speaker
Rowan Merewood
Developer Advocate at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Kathy Kam
TPM Manager at Google
+ 2 speakers
Aurimas Liutikas
Señor Software Engineer at Google
+ 2 speakers
Alan Viverette
Software Engineer at Google
+ 2 speakers
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “Make your WordPress site progressive”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8245 hours of content