Make your WordPress site progressive (Google I/O '18)
I. Bet. That you have heard before they. Turn progressive. Today we're gonna be talking about how, to make progressive WordPress. Sites and. You have heard the term progressive probably. In, that in the context of progressive web apps which means basically. Pro web, apps that have been developed, using modern web capabilities or. In. The context of progressive. Enhancements which is the application of those modern capabilities web. Capabilities into, your sites in, a step-by-step way, instead, of like all at, once, here. We are using the term progressive to. Capture the notion of progressive. Web development, which. Means development. Of user first web. Experiences, using, modern, web capabilities. Coding. And, performance, based practices, and the key here is, the word user first, which, means that, at the core of progressive, web development. Is, user. Experience so, let's start at the core what is user experience, user. Experience, refers to a, person. Emotion. When they are using a product in our case that, product is our website. Or WordPress. Site, so, it's all about how users, feel when, they are engaging with the content that we create and we publish, so, the way that I like to imagine this is you know in a nutshell what, I want is my, users to have that expression in their faces every, time that they go to my site a little. Bit but what. Are the qualities, in web, experiences. That actually, bring joy to users, and there, are mainly four, main, factors, there, are commonly, present, in what we define as a delightful, UX experiences, users. Love applications, that are fast, and reliable. They know they load quickly, consistently. And they, behave well once, they are running user. Loss. Oops sorry. Users. Love, applications, that are secure they want to feel safe when, they are trusting, their data and a transaction to, the apps users. Love, applications, that feel. Integrated, with their device know that they can take advantage of all the features that the device has to offer and users. Love applications, that are engaging right they like that kick, of wanting. To go back to the application and the, application makes. It very easy to. Come back to, them but. For, a long time building, applications, in the web that satisfies. These four pillars of delightful 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, the, URL, the hyper linking capabilities but. If you compare it to platforms, to develop native apps for example in the island road plant from the, word lag behind in, the terms in this in terms of the things that you could do with, it however, the. Good news is, that the web has, been. Evolving, quickly, in, the in recent years and nowadays is, fully.
Possible To, build awesome web experiences, only using web capabilities. This, year is a subset, of the, web api that are available in the web platform today. So you can do a lot of things with them for, example accessing, device. Features, like the vibration, signal the, gyroscope, you, can implement. Native like features. Like add to homescreen offline. Access and so, on even augmented, reality is. A thing today in, the web now. On top of this we, have modern. Development, workflows a lot of tooling and powerful. Java screen frameworks, that add additional. Layers of abstraction that, allows, us to build very very complex, and awesome experiences. And, on top of all these you have yourself. The web developer, eager. To harness the power of this mountain of capabilities, right the, challenge, is that the complexity. Is such. That. Truly, taking advantage, of what the web has to offer is very difficult, right, so, as the. Complexity. Of the web ecosystem, has, increased, we also have seen an increase, in what I like to call the, capabilities, usage, gap which, simply is the difference, between what. Can be done and what, is actually actually. Done for, example if we go back to. Say. 1999. Probably. Most of you would not develop another way at the time but. Arguably. The gap was not big at that time there were no many things that we could do in the web there, was HTML, CSS, and, the, best thing is it was only a singer, phone factor, that you had to develop now, fast forward to today the. Complexity, has grown so much there are so many tools so many frameworks and so many things and we. Have to develop, applications. That had. To run well in what it seems to me an infinite. Number of form factors so no, wonder that that gap has grown and the. Problem. With this gap is that if we don't take advantage, of. What the way has to offer it's, very difficult to, build applications that satisfy the pillars, of a delightful, UX and we. See evidence, of this a lot in the wild there, are studies that show the prevalence, of applications, that from very, slow day of the exhibit, very poor, load, time. Performance, for example 19. Seconds long time on 3e on mobile. 75%. Of mobile it takes 10 seconds or more to load and, also there, are a lot of applications to many that, exhibit, poor, runtime. Performance so, things, like on responsive, pages, or content. Shifting in front of your eyes when you're engaging with it and, the bad news is, the users hate. This and we. See, evidence of that in the world as well in the, impact. That, these experiences has, on the, revenue potential of our site for example more. Than half the users are going to leave aside, that. Takes more than three seconds to load. 75, percent takes more than 10 seconds when, you. Figure it out right there is an inverse correlation between. Low time and conversions. And there is an inverse correlation between. Revenue, and low, time so. But. For me the, worst collateral. Effect of not, being able to take advantage of the web is what. Is known in sociology as the. Matthew. Effect of, accumulated, advantage. Product you have heard of it as the rich, get richer principal, which, means in our context, that given, the complexity, of the web platform. It seems that only, superstars. Developers. Organization. That have. Capability. To afford, large, high quality engineering teams are, the only ones that have a true chance to take advantage of the web and that is not what the web is all about, okay and notice. That given the prevalence of the experiences, that I just described even. Superstars developers, have a hard time to do it okay so the bottom line is we. Must strive to, close the, capabilities, usage gap and. There are mainly. Two ways that we can go about it one, is on us. Even. That the web capabilities, are, there for, us to use them if, we all do the right thing things, will be okay right we should not see those experiences, however. That, is easier said than. Done the reality looks more like this right. You, have to master so, many things to, have applications, that are delightful. That. It's very challenging you have to be, careful do not interfere with the critical rendering path low. Resources asynchronously. You, know do, code splitting, etcetera. Master, browser caching, so, many things so the landscape is so complex, that is very difficult to do the right thing the first time imagine. Doing the right thing all the, time for, the lifetime, of your application, in all circumstances, all, the, time so if you, know it's very hard a better. Option is what I'd like to think about a progressive. Web ecosystem, is. A, platform. Of what ecosystem, when, doing the right thing is, easy right, and. It. Involves several factors, the first one is an evolving web platform, right a platform, where new, wet api's are added probably, existing. API is are improved, you know we, have good, set of tools that help, developers, automate. Complex, tasks we. Have frameworks. That add, layers of a stratum to do complex applications, and a, key point in a progressive web ecosystem is, that we take the, learnings, and that we get from, using the tooling and the frameworks, and we, see what works and we baked 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 in. Order to to, answer that question it's very useful for me to think about the web in terms of a very very simple, model, that has three layers the top, layer has the content ecosystem that we all use every day, and give the perception of the web as one theme right, then, there is a second layer conformed. By content. Management systems, that are basically software, platforms, that make it easy to create and maintain, content. Okay I don't top of that the bottom layer, what. You hear many times has the web platform okay, there is nothing else that, the, implementation or, the power, of the web exposed. By, browsers in, implementation, of the Web API so. You can see that. The content ecosystem there is a dotted. Line divided, in two and that's very important, because nowadays, about. 50%. Of sites, in the web are powered, by some sort of content, management system, okay, and the other ones by some configuration. Combination. Of. Tools. And frameworks and so on. Now. At Google we, are interested, in, closing the capabilities, usage gap, everywhere. And we are pursuing significant. Answers across all dimension of the web ecosystem our. Effort, particularly. In this talk focuses. On closing the capabilities, usage gap in, the area of content management systems, now I wanna make clear all, containment. Systems are very important, and we want and, we want to help to make them all progressive platforms, but in this work we are focusing, specifically, in WordPress, and there are several reason why focusing. On WordPress will cause an impact not, only for the WordPress platform but also for. The content management space in general and the web as a whole, okay first. Historically. WordPress, has been seen as a blogging platform right. But the platform. Has been evolving steadily. Since, started, back in 2003, if I am not mistaken and. Now it powers experiences. Across, a variety of areas you know you name it travel education. Shopping. Etc, okay so if we close the capabilities, usage gap in, WordPress, we are going to be improving the, experience for users across, a variety of verticals, that's very important, the second one wordpress, is certainly the largest player, in the content management system, enjoying. Right now like a fifty nine percent of the open, source CMS. Market, share and, the, third, reason which is for me staggering, nowadays. WordPress, powers, around thirty, percent of the web so in a nutshell when I think about WordPress, I think, about so. Many users, publishing. And consuming, content in, the platform, and I would like all of them to, be able to get, a delightful, user experience both creating, the content and consuming. It so. Going. Back to our definition of progressive, web development when I say progressive. WordPress, what, I mean is a, wordpress. Platform where. Modern, workflows, coding, and performance best practices and, the, use of modern web api is the standard and not the exception is commonplace, okay, now you, must be asking yourself, how in, the world given, the size and scope of all press how can we make progress quickly we, want to have a progressive or precise yesterday. Not, five years from now but. Fear, not I am sure that you have heard about the, accelerated, mobile pages project.
We Refer to as an in WordPress, now. The. Plugin, for, WordPress was. Pioneered, by an open source project. Started. By automatic. And it was started at the very very early, ages of amber they were the one of the earliest adopters of the framework, and. They implemented, a very, simple. But effective mechanism, that we call the, per mode which. Means that for every piece of poster content. In a pose, there was an equivalent. Version but, for amp okay. So. You had to for. Every piece of content you had two versions and the, plug-in succeeded, in achieving this goal but has one main limitation. That it was that if you didn't have enough, engineering. Capabilities, to, work on the results you usually, got a lot of functional, and visual disparity. Between the original content and the. End. Version so. After the diversion, plug-in. 0.5. Of the plug-in we, join forces with, xwp. And, basically. We set our eyes in our, site and on, enabling. What. We call native, experiences. In WordPress so a world, where, there is no need to have two versions of the same content because. There is no visual, disparity. Or functional, disparity, you can have only the Amazon, and get all the benefits of that. And has to offer without. Sacrificing. The. Flexibility. Of the WordPress platform that was our goal now there was a lot of work put, into this version and it, indeed, enabled, maybe, five experiences. We presented, that work in an Kampf couple. Of months ago and it's, very good however it's. Still, oriented, to power users, it is not as easy as we would like to be in order to make it mainstream so. We are here at i/o and we, are going, to you soon a lot of improvement. That we did in the area of tooling and also, the in the editorial workflow of, content creation in WordPress in, a second we're gonna talk about that and after this after 1.0, of the plugin i said, that we have right now on the alpha version of the 1.0. Then. Consider a word that we wanna mention a little bit at the end they, had to do with content ecosystem adoption. But before we do that i would like to you, know call theory, noodle, from xwp, to show where, we are in, the along. The road to progressive wordpress. Good. Morning. The. Latest work on, the. M plugin. Is focused on closing the capability, usage gap in two ways the. First one is by, providing a framework to, empower developers to. Integrate em in the WordPress ecosystem. And the, second one is by, providing tools, which, seamlessly, integrate, M components. In the brand-new content, creation workflow in WordPress. To. Put this in context, and better understand, how we closing, the capability, usage gap we're. Going to look at some real-world example. Let's. Take the 2015. Theme which, comes by default, bundled. In WordPress. It. Is active, on half, a million websites today, but. What would you really take to, actually convert, this theme to be M compatible, and, specifically.
Now Before. Because, we applied the M bind the, menu is still working is. It passing M validation. If you look at the console we can see that it has invalidation. Successfully. And. Next, look on the performance, side let's. Run the, lighthouse audit. Without. The M plugin so that's before the M conversion. We. Get a score of 66. With, a 4.8, first, meaningful prints. If. We run the same lighthouse. Test which is running on 3G. Slow mobile after the, M conversion. We, get an 88. With, the first meaningful paint of 2.8. Second. Amazing. We. Really see how, the latest, development, work done, on the, plugin is helping. Converting, existing, products. 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 revolutionary. Content, creation experience. In WordPress, it. Replaces, half, a dozen constants. Inconsistent. Ways of customizing WordPress. Bringing. It in line with, the modern code standards, and aligning. With. With. Web initiatives. It. Also closes the gap between the back end and the front end offering. An amazing, visual building, experience. So. Gutenberg, has the concept of blocks to build pages, and on, the other side M as the concept. Of components. Micro. Libraries to build pages but, what about combining. The power of bars and build, Gutenberg, M blocks, and this. Is exactly, what we did and it. Opens, the door for amazing. Things to happen, we. Worked hard on pushing the boundaries to take the native amp experience, in WordPress a step further, leveraging. All the, latest work done on the plug-in as well. As a range of custom, Gutenberg, M blocks and this, is what it looks like what. We're looking at right now is a, WordPress, and Gooden burg powered theme, it's. Inspired, from the M star travel, and all, functionalities. That we see on the page is powered, by WordPress, and couldn't work. If. We look at a single adventure. We. Can see that we also leveraging, some of the M components, for example the MK result slides, through the images, or in. The Empire, to. Actually toggle the price. We. Are also using. Some of the WordPress. Components, such as the comments, to actually allow users, to submit. Reviews. Or. The. WordPress search to actually 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 this team and it looks just as great out, of the box what we're looking at is Native, em but it is seamlessly, integrated. Once. Again if, you look at how. Adventures. Are categorized, we can see that it is pretty, well. Organized, and if. You look at a single adventure, we see other M components, like the MQ tube to, make the user experience better. So. This theme is fast right, super, fast it's actually secure and seamlessly, integrating. And it, is pretty engaging. Which. Which, makes it perfectly 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 well. Let's look at how Gooden burg can be used to rebuild a different, version of the, homepage. But. We don't 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 homepage is just. Click on the hero block. And. As we can see what. We see immediately is that it resembled, the front-end and we have access to really cool things like inline, editing, to change the text.
This. Is new, in WordPress and it's pretty amazing, let's. Continue building, our page and add a discover, block, from. The latest three suggested, block which is the most use. Right. There we have a second, block on the page and we can continue editing, our, page for example by changing the, subtitle, and let's. Add one more, third block the. Featured destination. Block. Once. Again as we can see it post the content automatically, and if we were to reorder. These blocks to change the look and feel of the page we, could just go ahead and click on the little icon on the left hand side and boom, our block has moved up and is now under the hey row block, this. Is a pretty, amazing. Editing. Experience from. My perspective at least. Let's. Preview what we just built in 30, seconds, a different, version of the home page native, amp with, access, of the. Amazing, M components. And an amazing, content creation experience. Powered. By Gutenberg. So. Where we are today the. Zero-point-seven, plug-in. Version, of the plug-in was, released last week. And. 0.7. Is really the first step towards, native m it is more orientated. Towards, power, users, to build themes 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. The. Co Gutenberg blocks made, em compatible, and 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 Alberto, back on stage to tell you more about it thank. You. Thank, You theory oh my god that's so exciting. I feel. Like I never saw it before but it's awesome, so we, have certainly gone a long way, in. Our on our quest to achieve progressive. WordPress 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. Efforts in three main areas one. Is, enabling. The app shell, navigation. Model in WordPress, you. May have heard of it as the app shell architecture, which is an architectural, pattern to, build sites in a way that, if, pages have static. Sections, that do not change across, navigation, we, could catch them easily, so that when, you navigate a page they can be loaded very quickly, and provide a very nice onwards, experience, for the user and the part. Of the pages that are changing, that can be then render dynamically, either on the client on or. On, the server and. What. I excited, in motion about, this work is that it includes, the incorporation. Of the service workers API into. The WordPress core platform, I'm very excited about this particular area another. Area is has. To do with remember. Our progressive web development. Model we, need tooling. To help users developers. To do complex, things in an easy way and one of those areas is tooling, to facilitate, the development of, WordPress themes. Progressive, WordPress themes I'm going to say a few more words about this in a second and. The. Last part which, is like an uber area had to do with ecosystem, adoption, right because you know as you saw WordPress. Is a has a vibrant, ecosystem of, thousands of plugins thousands, of themes and we want to and need to work with the WordPress community to.
Push. WordPress. Towards the progressive. Road. There, are many many, projects that are here and and, stay tuned for them now our friends. Are LinkedIn learning have been working very very hard developing. A progressive. Theme boilerplate. Essentially. It is a theme development starter kit that allows, or makes it easier for WordPress. Theme developers, to go from zero to a full progressive, theme very. Quickly so, the boilerplate comes, loaded with modern. Development workflow you, know highly configurable uses. Tools like composer and gold browser, sync, it. Comes, with a range of coding and performance best practices baked, in so, that for, example, asynchronous. Loading of resources, is by default lazy, loading, of images, is by default, okay, and it has an own theme and. Plug-in. Integration. So, that if the theme developer, decides. To have an incompatible, theme, he, can switch a flag and voila you're gonna get a incompatible. Start a theme from the get-go so the, main development of this project which is morten grant Hendrickson who. Is also a staff instructor, and LinkedIn learning it's, preparing an awesome course that is going to teach you everything about how to use this boilerplate and that, particular code is going to be free so don't miss out okay. And. Other things if you can take three things from this talk are the following success. In the web is all, about user, experience and, building. Delightful. User experiences. To. Do, that we need to strive to, close the capabilities, usage gap it. Should be easy to do the right thing in the web and, the. Topic of today it is possible today. For, WordPress developers, to. Get, native, ant experiences. Without sacrificing. Sacrificing the, fidelity of their side of the content, or the flexibility. Of the WordPress platform, remember. Those three things and if. You are a WordPress expert you. Like, to code quite a bit and you are passionate about making the WordPress ecosystem, better and the, web better as a whole you, may consider working with us exactly. On doing that and. With that I want to thank you there are some useful resources here, and I want to extend special thanks, to Western Rooter the, whole xwp, team and automatic, for all the awesome contribution, to this work and I'm very looking forward to what we're gonna achieve in, the coming month thank you very much.