EP305 – Intro to AMP with WordPress

(00:00) now we’re not live just yet but we are we are live in just a moment here all right what’s up everyone this is Jason Tucker and this is WP water cooler and this is episode number 305 3x hey I just want to make sure that you are aware of the fact that we are recording this live we are streaming this live both to YouTube as well as to Facebook and on on Twitter using periscope so feel free to let your mom know we’re we’re recording this and she can pick her method of choice and then be able to watch the
(00:32) live stream on Twitch so okay I’ll make sure to get it on Twitch let’s go quick and get everyone introduced Steve you know what you and I we even Jonathan had this problem as well where we we always were at the end of the list and I feel that we need to start at the begin at the end it will just I’m going first I never go first last name I know right seems thinking of the founder of Zeke Interactive and I run the OC WordPress meetup awesome good to have you as always Steve you know your your second-to-last in the list here so how
(01:13) about you tell us about yourself Jonathan woulld I love WordPress I live in North Idaho and I work next to me pee nice let’s see here Weston how about you I am engineer and see Reid how about you know technology works my name is Jay Reid and I make requests each request preach WordPress love WordPress WordPress WordPress externa like WordPress on all the things I’d say read media I’m also a big fan of Google despite all my desires should not be we’re surrounded by Googlers at this point here how about you tell us about
(02:11) yourself yes I’m also an engineer at Google and together we Western we are part of a team that is called content experience and we work on a lot of initiatives that have to do with making the web as good as it can be and that includes specifically things like amp and progress these technologies awesome what’s good to have you on Jason Kasper you know you are towards the beginning of the list every single time so yeah I’m happy to bring up the rear what’s up everybody cost for aka fat Mullenweg and I’m holding out for for a
(02:49) hot bot revival red Jason Tucker on Twitter my website is Jason Tucker about blog and I do this show as well as another show called the BP blab where we talk about social media marketing with WordPress before you go take a look at that on Thursdays we do that and also this show just let you know this particular show is brought to you by desktop server and server press so make sure you go take a look at them over at that server presses website they do some amazing stuff on all sorts of things being able to create live create
(03:22) websites on locally on your computer and be able to push those out live and be able to kind of play with things in WordPress but in a local environment so thank you very much for them and all the stuff that they do for us all right amp my understanding is Google had something to do with that at one point right and then after that what happened what ended up happening with it with with amp I I’ve heard just recently we had kind of some governance stuff that happened and then went from there either of you two
(03:54) either Westerner Alberto Rodriguez both they’re kind of talking to that a teeny bit well I’m PC it pro you the started around 2015 2015 I believe and and the purpose of em is address you know performance issues that you know take place when you try to run what pages on mobile devices mostly and there are many reasons why that is the case what is an initiative if an open source initiative that emerge out of the need to do certain things to ensure that users get the best experience possible when they accessing the web on mobile
(04:33) devices um the project has evolved quite a bit since it started 2015 and now it’s basically not it’s not an alternative format to to to ensure performance but it’s actually a full framework that on top of which you can build fast and beautiful websites overall so the governance model that the project that you’re and mentioning is basically trying to or the materialization of actually the am project to be a open source truly community driven project moving forward I brought that up initially at the top here is the fact
(05:20) that you know a lot of folks leave that that amp and Google are that’s that that’s what those two pieces are married you know forever and it the fact that they’re just you know Google is definitely involved in amp but but there’s plenty of other communities and projects that are kind of tied into this as well right yes so you know ants was pre headed by Google and as I said it was his realization that things were in very bad shape and and we needed to do something and and they were basically
(05:53) two paths to follow right either we sit down and wait until the web evolved by itself organically and things go well or we do something at the moment that right now in order to provide good service right now the situation yeah yeah and the key thing that what Google did was use open technologies to go down the path of delivering something as soon as possible and Nampa started out as a reaction against the mobile web really being suffering and being a horrible user experience and so that’s that was the initial focus of vamp was to save
(06:41) the but to do it in a way that is fully open source and that you host your own aunt pages on your own domains and then but over time now amp has evolved to a point where it’s not just about mobile just about the web and amp is a framework that you can use for desktop pages or mobile pages or anything the framework for your entire site I want to add two things we talked about last week I think it’s important for folks to remember because it’s like done in the open we need to be a little bit more generous
(07:08) about like WordPress is a great example because all these things are very easy to like form opinions and feel strongly about things so and it’s warranted right like this is the trade-off of things being done on the open this is what a lot of companies get scared of it but like yeah is it kind of built in the open the other thing that I think is really important for this particular project is how much it’s evolved since it started and a lot of people because it came from Google like like we looked at it gave a lot of interest and
(07:36) attention in the early days and then form their opinions based on what amp was at it starts and there’s a lot of smart people working on it’s evolved significantly in the years since I think that that’s always like I think worth reminding folks of is if you have an opinion based on HAMP in the past take a look again the blogging platform and I have a question about that so you get so it evolved and it switched from being a explicit and explicit Google project to be an open-source can you talk maybe a little bit about
(08:09) that you both been on the project since then yes it was never meant to be a Google project so it started from the beginning as an open source initiative so it was never a project that we develop and then we open source so then to that same question then how did you decide upon the governance structure for that given that you have Google which is this large company and then you have a you know this open source thing that you’re trying to do I’m asking for a friend as a be DFL model like with WordPress with Matt Mullenweg being the
(08:47) BD FL of the WordPress and then ever that dictator for life for the project and HAMP came to a point where that model was inhibiting its adoption because people didn’t trust maybe the BD FL so then the open governance model came about to make it inclusive to other companies who then be given a say in the governor structure of the future and the way that that was approached is you know you know there are a lot of important contributors to the open source world people that has like open open what passionate advocates
(09:34) so there was a process that actually we were not involved with but they was reaching out and then engage in so like you know you would you like to be part of this effort and it is supported by source and Technical Committee you know Advisory Board so it was a lot of thinking into it and then you know a lot of reaching out and engaging with the community and then see who was going to be part you know yeah to make sure that it’s like diverse and inclusive and actually he said truly open source governance model where are those
(10:05) documents published somewhere on the web right now like the amp governance model again yes yes yeah if you check the project org site there are information there we can definitely it is publicly available do you think that might be helpful to your friend yeah I think so that so the change gears a little bit on this how how should someone kind of step you know get their first step into using amp on their site like what’s what should people be looking for and kind of working through their journey of implementing amp on their on their
(10:48) website you usually through like a mineral or anthing WordPress app in WordPress yeah and is if maybe we’re speaking to the why first before the how I was gonna say yeah I would people I would probably be a good one yeah yeah I think the main thing one of the main reasons of being or am is like with wordpress to democratize publishing amp is really about too much democratizing performance and it is very difficult as a developer to know all the best practices to develop a high performance website and so amp
(11:24) makes all those best practices part of the platform itself and so you don’t have to worry about a secrets JavaScript or render blocking resources or critical assets or layout reflows all that stuff aunt makes that all part of the framework itself and it’s all just JavaScript CSS and HTML and so by following the amp specification for which there’s a validator then you can be assured not promise but you probably are going to be having a website it’s going to be much more performant than you would if you do it from scratch yeah
(12:03) and you know answer your question – how to get started – a project that we have been pushing a lot for the past two years is unplugging the official and plugin for WordPress so we actually the version 1.0 stable was released or workcamp us last year so the unplugging supports a lot of what you need to get started with an ink or press it’s important to realize that the unplugging is not a turnkey solution so it’s not that you have any wordpress site with a lot of plugins and an arbitrary theme and you turn the plug-in
(12:37) on and everything works but it definitely offers you a lot of capabilities and other features that make the development process easier and then and we are working into making you know something that I’d like to think about you know solution packs like they know that you have all the components that you need to have a fully incompatible publishing experience from the get-go and there are like also support for Cortines all day 20 you know all the core scenes from 2015 to 2019 an incompatible supported by the
(13:09) I mean it is you know a little into you know making on compatibility for plugins and themes and so on and there are people development websites you can check and that and – WP doc or so and then there’s a lot of information there about the plug-in how to download it you know how it works some showcases and and so on and that side is going to grow significantly this year and hopefully the community is going to like I don’t be more more yeah this plugin is the one that’s a request I org slash plugin slash Pam and this is
(13:47) the one the first ant plugin for WordPress the one that was introduced shortly after amp became a project and as part of that when hip was in its infancy it had a limited keep the limited feature set so that’s why you saw so many of those templates out there that had a very basic template with just the blue bar at the top and the basic text and not very you know aligned at all with your main site and so now with last year one of the big things we were working on was was bringing the amp plugin up-to-date to be able to leverage
(14:19) all the features of amp today and so now with the ant plugin you can take your existing theme that you have active and enable amp on that and it can reuse your active themed templates and style sheets and serve them as amp and it’ll get you let’s say 80% of the way there are to having a your your site being served as an amp and the core themes from 2015 to 2019 have built up this built-in support in the plugin but if you have plugins because one of the one of the requirements of amp is that you can’t
(14:53) have custom JavaScript and you have to use components instead to do that so that it can help guarantee performance and security and so if you have plugins that introduce JavaScript then those are going to be stripped out by the up plugin so that’s one important thing to remember although the plug-in does have if you have a theme or plugin that has built-in fall backs for with you have JavaScript turned off in your browser that plug-in will will essentially promote those fall backs as the the alternative to when those JavaScript’s
(15:25) hold out so solid I love that yeah I’m sorry go ahead go ahead Oh since a part of our effort was on something that we wanted to achieve was try to integrate and content creation in WordPress you know in the way that content is created in WordPress in the first place we didn’t want to you know there are other employees around and there are other studies that people follow that they try to use take your content on you know kick your version of it all right restrict you to use only what they want you to do you know – oh they they allow
(16:01) you to use the approach that we have is like we want to empower poor press developers to create an content plug-in makers to make the proteins incompatible and seen developers to make the themes incompatible so the plug-in is a – it’s a developer tool and it’s also an element of a thing only solution for incompatible sites and it allows you to to build camp based WordPress sites in the WordPress way so if you develop a theme we just used a wiki in queue style you know all the regular template calls e that you would normally do just
(16:33) continue to do that and ant plugin if it encounters something that’s invalid then it will will remove it from the response but it will tell you that it was is removing it and it will tell you where it’s coming from so if you have jet pack assault or something and and there’s a module in jet pack that’s doing something that isn’t compatible it’ll say jet pack is adding the script to the page each if I check this out and make sure that it’s not adversely impacting how the page is performing I just want to call out one
(17:03) of the things that I mean for all those those of us in WordPress for a long time like there’s this thing like the WordPress way and it can be very kind of frustrating intimidating for people who don’t have that context so I wouldn’t think from my perspective Google gets a lot of credit for taking the time to figure out like okay we what does it mean to do things the WordPress way and things like Wesson’s mentioning like okay it’s not about replacing all these things how can we bring the power of amp
(17:29) its democratization of performance within what WordPress is and I think that’s something that we’re still it’s still moving there’s still lots of work to be done but there’s so many early promises of that and that came as a result of investment okay let’s understand WordPress and figure out how to bring what we have to what the things that we know it was Google they’re experts on performance they have all this expertise and capability how do we bring that to WordPress and it’s taken time it’s taken
(17:56) years and but now you’re starting to see the payoff of that it’s it’s a relief that the WordPress way you’re referring to is that rather than install a bunch of plugins and hope it works because for a lot of people that’s the WordPress way yeah there is a third degree to hoping it works because if you have plugins and themes that use a lot of JavaScript and of course yeah but they to answer your question at the beginning is like why would you know why somebody would want to create and containing WordPress right
(18:30) and I think the main person and you know they mentioned this before but there has been a lot of studies that tied performance to user retention to use an engagement right so the monetization so at the end of the day as a publisher you want to succeed with your content strategy and there are two ways to do it you can take care of yourself although of all the performance and content experience quality that you want to achieve but and is a library that allows you to do all those things very easily and continuously so you don’t has to be
(19:06) worrying about oh I have performance now it’s gonna I’m gonna add this JavaScript and my performance went bonkers so if you want to in the in the in the spirit of democratizing awesome content experiences and is a tool that allows you to other to do that yeah it helps you to develop the website and then maintain the app performance when Leo was on the show last week he was talking about what was the ad acronym I had never built one of these yet though they be having a what is it bwa yeah yeah that idea of having something that was
(19:42) more of a more of an application that that’s running rather than that’s just yeah that’s incorrect that’s a very tricky definition though should like a dress carefully because the PWA term is uploaded a term that has been used for many things the way that we are looking at it in from the continent regions team and Google and Google in general is like the web is evolving and the capability gap between what you can do in the web versus what you can do in native apps on mobile phones is closing with time by the
(20:16) addition of new API to the web platform so all these new API is underway that the web platform is evolving is what we call the progressive web now the progressive web capabilities allow you to do many many things and one of the things that they allow you to do is that to build websites sometimes in some cases that behaves similarly to native apps in turn for example of like having your your website installed in your home screen or like having a full-screen view or working offline but there are many other progressive capabilities that not
(20:50) necessarily fall into the diffusion of progressive web and that’s another area that we have been working heavily on what is is related to amp but is also its own thing up was the was the simple fact that when you were saying earlier is that is that having custom JavaScript run on the site where’s that balance that if the if the your business or what your goal is on that site is to have custom JavaScript run to do something on the site how do you kind of bridge that gap between the two one of the key uses
(21:24) or use cases of amp is as a embeddable content unit and so if you have a a single page application website SVA where you have you know the header and footer and you click around and it’s you’re not leaving the page but you know it may be the URL dates or should update but you know it’s it’s like an application and maybe you have an audio player in the bottom and it’s continuing to play as you click around well amp is ideally suited for for being used in a Content area because aunt uses web
(21:58) components which are able to are encapsulated and can they can construct themselves and they can turn themselves down and so amp specifically there’s a specific API called the amp shadow API which is designed for taking a document and embedding it inside of that that kind of a single page application context and also to complement that and a couple amp is not necessarily an all-or-nothing thing so you could have your whole website build on amp but there are some cases that you suggested that well you know I want to have this third-party
(22:37) JavaScript here because this is a specific feature that I want to provide well probably that piece of content is not going to be uncomfortable but it could be part of a bigger site that has some uncon tent and some non on content and usually I’m content is very very effective in it’s very effective in general in terms of content experience but we think of it as a very good first experience when you used to find your content if you for example your York site is distributed via search results so you want that first experience when
(23:11) the user clicks on your site will be snappy to be very very very very pleasant and then the user can write like this about like what we want to see next is like yeah and planning pages is great and that’s a good example with me commerce and today it’s we’re landing pages but if the e-commerce stuff is still more complex it’s not quite there yet but ultimately this is about how we make sure that people have good experiences from end to end right because that’s one of the big problems we see now is that people separate these
(23:57) things well we want them to have a great experience from that first click all the way through like all the things they do and that’s where I think WordPress is so key to this is that word prep people are building an entire experience if is on a WordPress so let’s give them the way to make those entire experiences fast one thing I want to mention as well is that while custom javascript is not allowed today work is underway to allow custom JavaScript to run in ant pages via an amp script web component so
(24:25) you’ll deal the and it’s going to work in a way that sandbox is that that script inside of a web worker in the browser so that it can be guaranteed to not in fact the performance of the main thread and it will allow you to run a javascript securely in that context so that sticking point for migrating over to amp with custom javascript is going to be alleviated this year costs per you bit you’ve talked a lot about especially last last episode you know I found out that performance is your middle name I
(24:56) had no idea that that was that was the thing but you’ve been spend a lot of time and energy and your previous two jobs of working in web hosting space and trying to get trying to get all those bits and bytes out as fast as possible from the web server to the browser and now we’re looking at this saying like okay we’ve kind of figured that out we’re pretty good at that now we need to get the web browser to get the data painted onto the screen as fast as possible what’s your what’s your
(25:23) thoughts on this with having web hosting go as fast as possible get this stuff out there and then now you kind of handed it off to you know to the amp side of things it’s like okay browser go do your thing yeah I mean the less hits that the server basically has to take on especially on a popular post on you know uh especially in the case where where I mainly see amp uses in news articles you know a new week of fortnight kicks off and everybody wants to find out where the the chests are and you know like though there’ll be a whole list of like
(26:03) you know here’s here’s all the chest locations in fortnight for you know for tilt the towers or whatever like you know hit it up right but but either way and and being able to to get to that data to get to it quickly and not have an impact the server load overall because you are kind of dishing it off to the the CDN that Google is is very generously providing you know as far as that goes kind of the less hits that your server has to bear especially on a popular article on a big news story something like that the better as far as
(26:48) I’m concerned so yeah and and I wanted to bring up that exactly that the cash point because I was talking about last week and the problem of the the google.com slash and you have URLs and how that’s a pain point for for an and it is and it just decent Isis being a pain point even an app team like that’s not the ideal it’s just a technical limitation for for providing that cash today and but I want to just the reason why the MCATs exists number one is to have a cache to send out the content to
(27:22) the edge around the world but also for a very important reason which is the privacy preserving pre-rendering which allows for services of search results to to to render a given and page in the background without leaking the fact that you are free rendering that page to the origin so then the origin site isn’t able to set cookies on your browser isn’t able to run javascript in your browser until you explicitly say i want to look at this content and so that’s why amp pages can render instantly when
(27:58) you click on them in search results it’s because they pre-rendered in the background but they’ve pre-rendered in a way that doesn’t compromise your privacy and so that’s those are two reasons why the amp has to exists is this performance and also for privacy but then that URL problem is going away as well because with signed exchanges or web packaging browsers are going to be able to show the actual URL for the amp page as coming from the origin and not have to resort to showing the google.com
(28:28) slash amp will it still be there or just be like mask does that boy or it’ll still be won’t be there still at all it’ll be similar to like if you were getting the content via a cloud flare or Akamai some intermediary CDN you’d also be getting it maybe the bytes will be delivered the CDN but the mate or do cryptographically signed to the yes this truly came from your website so it showed your website’s URL in the browser mmm I love how Google introduced this right before they were like and we’re
(29:02) gonna downgrade everyone who’s not moving quickly on mobile feel like I feel like Google is basically like we really want to downgrade you guys but there’s no solution for making it fast so we’re gonna make the solution and then we’re gonna hit you with the ranking and mobile ranking hit on that like they made they like adjust the problem but they also provided a solution which I hear it in stick okay and fit together Google approach well you think about the big picture though I mean this is part
(29:30) of the the issue we run into is that a lot of these mobile experiences are pretty terrible which the more terrible these mobile experiences are the worse it is for the web it’s just a driver towards all right I don’t trust my browser anymore I’m gonna use apps which is not an ideal state for the future so yeah Assam um where can we find more about more about amp on on either Google Sites or outside of the Google verse part of it but should we be looking at there are many many sources I think that
(30:00) the main that user should look at is one is the unprojected org site it’s a lot of information about and reference dogs everything there are sites like for example and by example that you can learn and looking at code snippet that you could you know experiment there is a playground all those sites are going to be integrated in a new am site that is going to be released and sometime soon this year and then for the plug-in in the WordPress site we have the amp – WP dot org plug inside there is a lot of information there the plug-in is open
(30:34) source you can find it in the unprojected hope repository you should look for am – WP kit hope you wanna get it I think those are the main sources and then of course Westone blog my blog medina thought home our twitter account so follow us if you want to stay in touch with what’s happening I want to say thank you very much for your the two of you and for the rest of you to be on the show and to talk about this I really appreciate it and I think our I think our listeners and viewers will definitely appreciate it as well because
(31:06) this is definitely the future of the web especially when it comes to making sure that this stuff loads up fast and works well and that yeah performing is possible and I appreciate I would like to like one closing comment I sorry to interrupt you it’s like probably the web performance problem and the WordPress performance problem is something that we owned collectively as a community and we need to work together collectively to solve it so let’s work together so we are pulling all the resources and so
(31:35) let’s do it awesome well thank you very much folks talk to you later bye bye [Music]