Fast by default: AMP powering WordPress (AMP Conf 2018)
Yeah so my name is Alberto I. Work. And the web content, assistance team at Google and we'll, tell. You in this session how, it is possible today for, publishers. To take advantage, of. The. Benefits. Of using amp when they are publishing content with WordPress but, first let me put, this work, it. Was the first slide, let. Me put this work, in the context of what my team at Google does so, you think about okay. What. An ecosystem is basically, it's a community of interacting, part. And, organisms, and their, environment, and, the important things here is that every member of that ecosystem. Is. Important. To, all the other members so you cannot get rid of the trees and then, have birds for, example right so that's, a big deal with global warming right so this, is the, essence of what an ecosystem is and this thing happens with content, ecosystem a, content ecosystem is, a. Community. Of content, creators and content, consumption. Participants. Interacting. Between themselves and, their environment, and. There, are many. Of these ecosystems. Continuous. Systems in the web and I like to think about. The. Web as a sort, of like a Federation, of this. Continent, of systems and for. The purpose of my team there. Is one, important. Thing that is all these ecosystem, share, one, goal, the. Experience, that the users get when accessing, consuming, or polishing content in the Aussie consistent, ecosystem, should be an awesome. Experience. And. Since, amp is all about, achieving. An awesome experience for all users we. Are interested, in seeing how can we bring the, power of and to. As many of these ecosystems as possible, so. One. Of the most relevant content ecosystem arguably, and we're gonna see why of. Content. Ecosystem in the web today is WordPress, WordPress I can, be fine it as a content. Management system for for, websites and. As. Multa said it was. One of the early earth of the earliest, adopters of am. Historically. When, people hear, the word wordpress usually, used. To associated. With a, platform, that enables bloggers. To, polish the content an easier way but WordPress. Has been evolving steadily, since it, started, back in 2003, and, nowadays is like basically. Powered, website across, a wide variety of verticals, you know you name it blogging, the. Initial. One travel ducation real estate you. Name it so it's, a very very powerful platform in this sense and, it's. Reflected, by. Definitely. The largest contain. Management systems in the out, there right now with 59%, of the open source content. Management systems market share so that, is impressive and what is more impressive is that nowadays, 1/3, of websites, are powered by WordPress. So, these stats are very very, impressive, but, again. They tell me one, thing so. 1/3 of the web is a lot of the, web so there are many many many many users both publishing, and consuming. Content via. WordPress, and my, goal is all, of them should get an awesome, experience when they are doing that so. One. Of the. You. Know may. Your strength of the WordPress platform is the flexibility, that they offers, and that is reflected by a very, very large, and ever-expanding. Ecosystem. Of plugins and themes ok so there are like this many on each of those. Sites. You. Can use themes and plugins to basically customize, your WordPress site in a myriad of way you, in any way you can imagine it now. This, virtual. Also. Can be turned into one of the major challenges of the platform, right because even. If you take into account plugins, that are code. It perfectly, there are very performance, and they behave nicely. You. Know the, probability, of having two. Plugins or more that collide, when installed, at the same time in aside or, affecting, the performance of a site is this is not negligible, and. This. What. I like to think about this duality between a virtue. And a challenge, it, is parallel to the, very challenging, in the open web right so in the open web nothing. Prevents, a developer. To. Basically, screw the performance of a site by, following. Development.
And The VIP platform, and, the plug-in also has been. Adopted. You. Know relatively. Good, size you have 200 more. Than 200 thousand installs, and, it also has been used as the core of other plugins that have been built around it, okay, but, thinking, about the, initial, goals of the plug-in that it, was basically satisfied, in it so the VIP platform, that usually have agency, partners working with them the. Characteristics, of the initial plugin implementation, make sense basically, it's a developer, oriented, plug-in basically. You, offer minimal, functionality. With. A set of core abstraction. That, enable, amp but, all but then allow, developers. To extend, in a custom IC to satisfy the needs of specific sites. But. You. Know that means also that for, sites that do not have strong, engineer support the, plug-in was very difficult to adopt because. You. Got you get play is that I'm going to show you in a second that makes, it difficult, as. Barb so yes I mentioned to the, plug-in enabled, millions of pages in thousands, of sites in WordPress. And on. The outside we heard a lot of feedback about we. Generated pages and most. Of the feedback that we heard was like well but all the amp pages, looked the same and they, looked a little bit kind of lame right so here, on the Left we have. You. Know so-called canonical on the original, sorry, the canonical side original, content, and, on the right is a page. That was generated using. The plug-in version, point zero point four and. Here. You can see two problems one is that there is, you. Know doesn't. Matter how the page on the left looks like the. Page on the right is going to look pretty much like this right, I know, the second thing you can see how we basically. That's what I call a, visual. Gap, right, so there is a little difference between them and then you see for example here there is no the hamburger menu the. Low updates, button with. Not present, here and there, is a lot of functionality that is is gone and the reason for this is that you, know you, can take this output. Tweak, the plug-in and then make it look nicer but if you don't have engineering support then, you cannot do it and your pages are going to look like this. So. Google. And automatic, started collaborating, around. Meet last year with. The purpose, of taking the plug-in and evolving. It to a point in which budget can, be adopted, as scale so, we, started working and we release, version. 0.5, a little while after we started collaborating and, this, release brought support. For new embeds for example via SoundCloud. Pinterest. We. Also changed the the. Original version of the plug-in use a black list sanitizer, or preprocessor. That basically you. Know take. You know you have to get rid of things that are not and we change it for the preprocessor that add a lot of intelligence to it and also, allows the plug-in to stay in sync with the amp specification. So everything that the UM projects evolve the plug-in stays up to date with. It you know whatever, use of code. And documented. Documentation. Improvements, and we added a basic UI to. Analytics. To the sides, short. After, we finished. That we were okay up on top ok sloths let's move you. Know towards the path to getting an old ant experience, and by. Mere chance, somehow. We, came across with the awesome fox with the or the xwp, engineering, team and. We start the talking yet we are doing this we are doing that and it should turn out that we shared a lot, of our visions and we decided to start working together so we join forces together with automatic and we, not. Long after our collaboration, started we released 0.6. And 0.6 is loaded, with a lot of new things but. I'm very excited about, I'm. Going to show each of them here. For example you can, see before, in, the previous version of the plugin you, could only preview, the, latest, pose that, you were working. In amp you know did you want to see how the amp version look you had you can only preview the last post and the, preview functionality, was separate from the integrated. Or the normal workflow in, WordPress, for doing. The previews here you can see. You. Know this is just a regular WordPress, role flow and now you can see they can preview the, changes in. The normal WordPress, and next. To it you have the little lamp icon, they say okay preview how the amp version looks like so. This is pretty cool because then the developer doesn't have to leave the normal workflow in WordPress to see how amp is behaving, or the, version of ambe's looking at, other. Thing is that the initial version of the plug-in only supported the post content type you know in WordPress there are different, type, of content. That you can create post.
Content. Type is one set of the of them and it was the only one supported, by the plug-in in, this version we had the support for pages that was one of the things that the community was asking, the most you know we need support for pages, here. There's not much to show only that this is a page and then it's been converted. To amp. And. The, other thing that we added is like because. Of the plug-in was. Evolving, we, wanted to give the user the power to say for, this particular, piece of content I want em to. Be disabled, for whatever reason, they have a functionality, that is, not supported for any reason so they have now they really. Need to say for, this particular post disable amp or vice. Versa you can see the Sonam tin which is actually very good to give the users the capability although. You're gonna see soon that this is not one IV needed and. It's very nice it, is gonna tell you all about it and another. Thing that was very cool it's like also, in WordPress, you have the ability to create what is called post. On post types you can create your own layout. And you define up a account, in time that you'd if you, create and before. In the initial versions of the plug-in in order to add an support, then you have to go to the code like, in the lower side. Of this slide, and you had to manually you, know say okay, I'm gonna put you, know this specifically. I want am support, for this content. Type now on, the upper part you see now you can't do it in the seed 0.6 version you can just click, and say I want an support for this post for this post content time and so on so, this is very good because adds a lot of flexibility, and don't require, the user to go to the code. Now. Beside. Those you, know the seed 0.6 has many. Of the things we. Added Auto loading capabilities. That basically allows to simplify the code because, you don't have to be including, all classes, and interfaces manually. We. Integrated, the ant customizers. With the regular customizer in the regular WordPress. Workflow, a lot, of you know one of the this, is important, because one, in, the content ecosystem team, one of the thing that we want to do is to, bring coding. And performance based practices, to. The WordPress, ecosystem, and we are applying those, principles in. The plug-in by, adding a lot of code quality checking in the build process of the plug-in itself and. You. Know the zero point six version also enhance the preprocessor a lot, added, a lot of intelligence, and actually fixed some box that, prevented. The plug-in to be actually, completed, in sync, with the amp specification. Now. Since. The beginning when, we started this work. We. Had, our site in an, all. And experience, in WordPress we can call it native and or all amp and it's. An experience in we're not. Per mode is needed but, if, there are you. Know no, visual gaps and not functional. Gas between the regular, version and the on version then you don't need two versions, and. I'm. Gonna invite theory, my colleague and friend from xwp, to, tell you the progress that we have made towards, this goal with. Version 0.7, of the plug-in. The. 0.5 and 0.6. Included. Great. Features, no. Doubt about that but like, any. Early. Versions, of software's, it, also came with its, limitation, and. By. That I mean. Until. Today the, WordPress M plug-in, only. Converted, certain. Type of pages. Imagine. A user coming, from Google, search and landing, on. The WordPress amp article, what. They would get is the, default styling, that, the WordPress plug-in provides and, that would, be the same across all WordPress, websites. Which. Uses, the. M plug-in. Not. Only that but when this user is done reading, the article, and goes.
And Click on the logo to go back to the home page then. They land to a non M version. Which. Provides a completely, different visual, experience, and that. Is because until, today, the. Zero-point-six, version, of the plug-in did, not convert, the, home page by default. Now. We've. Thought with the team how can we come over these, limitations, and we, brainstorm, and we, came to the conclusion, that we. Needed to combine this, non M version of the website with. The M version, into. One beautiful, native. M experience. When. Building beautiful WordPress. Websites, users, and site owners have, accessed, your large built in libraries, of, components. The, WordPress components, but. These are not all am compatible. Now. This. Obviously expose. Great, challenges, and. What. We wanted to do is take the power of these WordPress components. And, make. Sure that, what powers. One-third of the web today is AM valid, and in. Order to achieve that we had to completely rethink, the. Way the amp integration. In WordPress, was, done. Well. I'm, so proud to announce that through. Collaboration. With the Google aim team as, well as our friends at automatic, we, overcame. These. Challenges, and that. Via, the new version. 0.7. Beta, of the. Wordpress and plugin. Not. Only does it convert, all WordPress components, and make, them n valid it. Also allows WordPress, developers, to, continue, coding. The WordPress way and let, the plug-in do the rest and I think the best way to put this in context, is to, actually look, at the real world, example. Before. We do that we're, going to look at a website without. The, EM plugin, and that, is a beautiful, news websites, and it's. A non amp website. And it, has a fairly complex, layout, with, a drop-down and on. The right we have a search which, animates, our click and of, course this website looks beautiful, and mobile we, say with, the hamburger, menu nobody. Knows, why why is it hamburger but everybody, knows what it does. Now. At this stage before, 0.7. People would install the 0.6. Version, of the plug-in and what they would get when they activate, the plug-in is the, same looking homepage, an. On M version, of the homepage and then, they would have the, same nan M version of all the articles and on top of that another version with, a completely, different styling. Now. With 0.7. And we're. Going to activate the plugin in the admin. We. Were able to provide, this native, amp experience, and let's, look at the same website again. This. Is native amp in WordPress. We. Still have our drop-down we.
Only Thing that we would have to do then is to do, the declarative, part and amp is going to take care of all, the rest so it's gonna be much easier to, create Gutenberg. Blocks. So. Definitely. Gutenberg. Is one thing, that we want to do in full integration with it and. Remember. That I am part of the content ecosystem team, so, the work that we do with, the unplugging, is in the bigger context, of the WordPress ecosystem, as a whole so we are, going to continue working on the unplugging, to, reach. As close, as possible to this native. All aren't experiencing WordPress, one, of the things that I am excited about is what Aundre. Talk. About services, rendering, for amp we are going to port the code that they growth to PHP and put, it also as part of the kinetics deploying so that can it be integrated. Then we WordPress caching. Plugins so that the, amp pages are already rendered so that's something that is gonna be very powerful, now. And, as. I said in in WordPress you have plugins and you have themes, so. There, is a lot of work that we want to do in the area of themes to create what I like to refer to as progressive, themes that are themes. That, integrate. Calling, and performance best practices enable. All. The new, technologies. Of the web platform and. Also, integrate, seamlessly seamlessly. With, the unplugging I mentioned. Woodinville, integration, is a big deal we're gonna continue working on that and. Another. Project that we are working coincidentally. With the X of you folks, again as well is called. Tie and. Tie. Is important, because we need to empower WordPress. Users, to, make decisions, about which plugins and things use based on concrete, quality, metrics not only on popularity okay. And the type project, is seeking, to do that and also, we want to use another, project that we you, know that. We are spearheading. And Google, that is called the HTTP archive we, want to create or. Keep. Track of the, performance. The WordPress ecosystem. And we. Do, things to it so like how is the performance today how we evolve it it's, important to keep track of how things are progressing and, and. Also we want to continue, engaging with, the WordPress community in general with, theme. And plug-in makers and everybody. In the community to. Make sure that the whole blogging, ecosystem. Is compatible, with amp there is a quite a bit of work there but I think that is very doable with, the world that we are laying out one. Particular collaboration. That I would like to call out is, with a company that is called Marshfield, Muirfield, is a it's, a very cool company based in Spain I think they have around 80 engineers, and they, have been involved with the UM project, for a quite.
A Bit and they have doing contributions. And one. Of the particular, things that I'm very interested in is what a protein, that they build that is called Muirfield press Muirfield. Press is a plug-in that was built. On top of the unplugging, that we are working on and, it. Offers, progressive. Web app capabilities. To corporate sites basically, they implemented. The amp shell model on top of the shadow API which, then allows. WordPress. Publishers. To use em as a embeddable. Data, unit, which is one of the most powerful things that I like about amp is that you can take and embed it anywhere, so, we want to have that capability ubiquitous. In WordPress something. That there is a lot of room. For us to collaborate they, did a lot of things they also have this what you see what you get kind of experience, that they implemented so that's. Something that is very exciting so. Certainly, the development, of the and. In WordPress has come a long way in the last since. I'm started, and. I want to again take. And. Acknowledge. The xwp team that have done a super, job with us and also, the collaboration that we have with several, teams in the automatic, like, the jet pack the team's team the VIP theme so, it's very very very remarkable, they. Were that, that has been happening and I'm really looking forward to the, future thank. You.