 Hey guys and welcome to our newest hackathon on air today. We're talking about amp So we're talking about like, you know, how to get started. What are the benefits of amp? How do you actually implement certain features? Today with you is again Dom Dennis Both from Google in Dublin. We're both mobile UX managers and as a special guest today We we have invited to Ben Ben Morse He's a developer advocate sitting in the US and he'll be joining us because he is the expert on amp And he's also the host of the amp roadshow that some of you probably have heard of So to talk a little bit through the agenda So we're you know, just talking a little bit about benchmarks and you know, what amp is all about We will present you also some case studies To show you, you know, how amp works. What are the benefits? What are the results? Then Ben should be joining us live and he will be here to answer all of your questions and we have You know, some questions prepared But if there's anything we don't cover just, you know, type away in the live chat and we'll try to pick it up And to conclude the session we're showing you a few simple code examples of how you can get started today So, um, yeah, the stage is yours Dennis and go get started. Thank you very much Dom So just a very quick introduction on what we are talking about things we call the session getting started with amp There's probably a few of you who are already familiar with them. Maybe a few are not so no worries there To sum it up really quickly amp is an open source initiative Which is powered by Google but not an Google initiative by any means at open source and it basically targets Well, the main problems we see with the mobile web these days It makes landing pages more beautiful, of course, but most of all it makes it faster And well mobile friendly air also in terms of like Having your mobile payments Easy and stuff like that. But more on that later So just a very quick overview on what amp is I think the the main Well usp of amp is probably the speed So we can confidently say that amp pages are 85 58% faster than regular web pages. So you can see This is the main thing which makes amp great. It's lightning fast But more over it also has a lot of best practices in terms of design It's of course is responsive, but it's not just as responsive. It's also mobile friendly. So It helps you with a lot of stuff In terms of ux form inputs and stuff like that It is very easy to test especially if you use at words You could use a draft and experiments So if you after this session decide to well start with your first amp page You can basically just recreate your page And then test it on at words your well usual old page and test it towards Amp page and see if you got more conversions, etc And of course, it's easy to scale. Well, basically all of our initiatives we're presenting here Are made for scale ideally. So It's another great feature about amp So to give you a quick overview on what we are covering today So I'll probably talk about 10 to 15 minutes now about amp speed And a few of a few other features Then I would like to present you with some success stories of customers or well, yeah, well Customers who already implemented amp Then hopefully we get ben life on stream. He will be dialing in from new york. So I think it's on his way to the office now I hope we get that set up and amp ben. So we will be here to well, basically demystify amps. So If you already heard about amp, you probably already have a few questions We try to come up with the well most frequently asked questions and misconceptions about amp But this will also be the time where you can just type away in the chat and ask ben questions about Whatever is interesting you about amp And then last but not least dom will show you some amp coding examples. Just to I think mainly showcase, but correct me if I'm wrong here dom. How easy it is to Set up your first amp page, I guess Yeah, exactly. So, um I think that's that's uh, you know Really important to to understand sometimes people think amp is like a new programming language or new technology and Therefore has like, um, you know a like a pretty steep learning curve It's actually pretty simple. Um, and we basically show you How to get started as quickly as possible. Obviously, that's going to be very basic examples But we're also guiding you to resources online where you can get some better information and some, you know, deeper Insights in, you know, developing something more complex like an e-commerce page, which is also possible in amp So, yeah, I think it's going to be super interesting and We hope you enjoy it and if you have any questions at any time, please type it in the chat and we're super happy to pick it up perfect Okay, let's get started. Um, well at last point, of course at the end we have another q and a session But as I said before If you have questions type away in the chat and we'll try and answer them as soon as possible. Um, yeah so To give you a quick overview of the benefits of amp um, so first of all, um Or more as in why do you need to be fast on mobile? If you're following our episodes, um, you've probably seen some of the stats for just to recap Speed is very important. It's not a nice to have it's more or less a feature. Um, why is that? Because 75 percent of mobile sites now Take over 10 seconds to load. Um, which is a big problem, especially if you're trying to target new users Because users on mobile, especially on the go are very impatient. So, um, our stats show that you Might be losing up to 53 percent of your mobile visitors if your site takes longer than three seconds to load. Um This might um depend on your vertical a bit. Um, if you're in a highly competitive vertical, um This is probably very true if you use is a bit more price sensitive. They might be willing to wait a bit more But even if you just lose out on let's say 20 percent of your new customers, which you'll probably pay Advertising money for to get them Well, that's not ideal by any means um, and another point is um that you see a lot of well A lot of incremental revenue If your site loads faster in this example, um a site that like loads in five seconds has twice the ad revenue Compared to a site which would load in 19 seconds. Um, and let's say 19 seconds sounds a lot here, but It isn't so well, I don't know about you Dom, but I have I have a few customers if you look at their um, well loading time they are around 19 seconds in a 3g network So it's not super Unrealistical to see these numbers. I guess no, I totally agree. I think um, you know, we we we are we're all used to too fast Loading sites, um, but I think what we often forget is that we're sitting, you know at home in the office Um, and we're, you know, kind of like locked into the wi-fi network and obviously everything is lightning fast then but You know, we do know that You know, we don't have this this this last click model anymore where people go on the web and you know, then they buy Like there's a long journey until they make a decision Um, and often like, you know information is gathered while you're on the go While you're maybe walking down the the high street or while you're on the bus And if you're like in a 3g network, it's um, you know, you you you experience much slower You know a network bandwidth and um 19 seconds is something we come across Quite frequently. So I'm definitely something to to keep an eye Keep an eye on and make sure that you're Providing your customers a fast experience, you know, wherever they are at the moment Yeah, I think this is um pretty much the three biggest, um Challenges that amp now tries to tackle. So first of all, it's the slow loading of sites, which we still see a lot And also in very mature markets, we're going to show you a few benchmarks later on Just to prove this is not for like smaller markets. This is for really mature markets So make a lot of money in e-commerce or like in e-business So this is probably the first big pillar we try to solve here is slow loading times or slow loading mobile pages Um, the other one would be that There's still a lot of pages who are unresponsive. Um, and not just unresponsive in terms of it is not a responsive page in technical terms Um, but also it is very hard to for example, do a checkout. Um buy stuff Have payment on mobile. Um We see that quite a lot. Um, there's also a few solutions for that But this is one of the other parts amp tries to um Well, one of the other challenges amp tries to tackle And I think the third part is like the content which is often time displaced by ads or like You have pop-ups and layovers who actually distract from the content of your site, which it's Might not be that crucial on desktop because you have more space to work with but a mobile can be Super annoying. I guess you know that for yourselves Um So, um, this is another question we usually get I think we also talked about this the last time But it's a such a frequent questions. I get from my customers That we decided to show you that again Because people like to have benchmarks. I can totally understand it. It's well at least some kind of goal you can work towards to Keep in mind. It's always a bit hard to give general benchmarks because the verticals and businesses are very different from each other. So This is more like a I'd say a guideline you can work towards to And that you might want to keep in mind But not a hot like take it with a pinch of salt. That's all I'm saying So, um, in general we are using speed index for measuring site speed and well Don't do you want to explain really quickly what speed index is and why we're using speed index? Yeah, I mean speed index is just you know one metric we use to to determine how well does the site perform it basically means You know, how long does it take for the relevant content the above default content to be painted to the screen So that the user gets the feel of completeness and you know, it's able to interact with your site So it's not so much about the total loading time of your page Because it's totally fine to load, you know, some, you know, some additional css javascript Whatever you require further down the line But it's really important to get this first paint You know on you know on the screen as quickly as possible and speed index is the metric that that measures this Makes sense. So it's more like of a Perceived speed for the user. I guess we tend to say which is probably more important than your overall Exactly. Yeah, it's it's like speed perception. And you know, we we actually had a Hackathon near session on the psychology of how people perceive speed and and that's kind of like taps into that. So, you know trying to To you know to keep the user busy and you know and and and render something to the page so that the user doesn't feel lost or Possibly even things that the page is broken Okay, let's have a look at the other steps. We usually recommend another one Just because it's a bit more Well, the concept is a bit more easy to grasp like measuring speed can be a bit volatile every once in a while Total request is very straightforward. So We'd recommend that your total requests on your mobile site should be around 75. Let's say 80 requests in total Just because we see a lot of bloated mobile sites and which of course affects loading time and also speed index a lot so Try to not bloat your mobile pages wherever it's possible save some requests And which will ties into the next concept as well as save some bytes. Don't have your mobile page to bloated As a general guidance, we'd say around one megabyte would be Good for for a mobile site, I guess Yeah, I mean that that would be ideal. I think what's important to to So to add to these benchmarks is those are the benchmarks that we usually recommend for non amp pages, right? So basically the beauty of amp is that it covers all this so You know as Dennis will Tap into a little bit later amp is sort of like a collection of best practices and those Those best practices take care of you know, then the total number of requests the page weight the speed index So, you know, basically, it's it's it's sort of like a way like like, you know, it's it's a tool that we give you to achieve those benchmarks and Technically the easiest way possible. So, um, I think that's just something to to add here But other than that yet, it's that's totally totally true and If possible, you should aim for those targets Although as Dennis said, you know, take it with a pinch of salt, you know, sometimes It's not possible depending on how complex your site is Okay So, um, yeah, we also mentioned that before just to give you an idea I hope you can see that on the screen. I hope it's not too small. Um, If it is them, I also put a short link down there for you Some well benchmarks for maybe or hopefully your market. Um, I think just to sum it up, um Almost every vertical is Pretty far away from the best practices we would recommend. Um, there's a few who's doing better a few is doing worse Which is mostly due to They probably need a more complex side if you well, let's say compare e-commerce To a lead gen side It's probably easier for a lead generation side. Um to have like a less bloated side because usually they don't need as much features as e-commerce do um, so That's well tying back again to don't take the stats too serious. Um, but here you have A benchmark, um, how you might stick up as well In turn in your own vertical and also in your own market. Um, so what you see on the screen now would be germany But if you open the link, um down there, please keep in mind it's case sensitive, um, but you can just type it in Um, they will also see stats for the yes and for your case. So two other very mature markets where we also see that it's a bit behind what we Would like to have, um mobiles or where we would like to have mobile sites at the moment. Um so, um And this is pretty much what amp can do for you. So if you keep in mind all the stats we've just shown you, um If you look at the medium low time of an m page, we're under one second So this basically means it's four time faster and it's 10 time less data um But not compromising on the quality or on the features you can show or Sorry provide your customers with so, um, I think this is Summed it up very good. What amp can do for you and I'd say Well, not too much, um, implementation. Um Effort you have to put in right um Yeah, I think um, no, I think it's true and I think it's really important to you know to to stress that Amp doesn't really limit you in in in any way. I mean, you know, obviously there are certain things that that you know That you have restrictions on like custom javascript or too much css But usually this is not a limitation. It's more like, um, you know help to You know to maybe find a slightly different solution, but you will have the same end result Um, as I said earlier, um, you know, there are e-commerce shops that are built in like like in amp and You know, when you think about like a like a product page with like, you know, maybe a carousel and an accordion You know, like a light box Whatever you kind of like think about when you think about a product page on an e-commerce site You you can do that in amp. So I personally really feel you are not limited Um, you're just reminded to you know to not put everything on the table That's sort of like you you can think of but rather be a little bit more You know, like like a little bit be a little bit more careful You know what you use why you use it and maybe there are better ways of of solving like a certain problem Yeah makes sense. Um, I guess it's more like prioritizing a little bit Which features um, you really need I guess And to not to sacrifice too much of speed for Maybe features you don't even need or who's not really working towards your conversion rates, etc. Exactly Cool. Um, yeah, so This is also more of a high level overview. Why amp or what amp is and there are three big components I guess which make amp so fast One of them is uh, well amp html The other one would be the amp js. Um, which is correct me if i'm wrong here don't but not too different from like what you would Expect from traditional html and javascript, is it? I mean it amp html is It's basically you can use almost all tags that that you're used to using in in javascript in html like all elements And then we have some custom ones. So for example In instead of using the image tag he would use the amp minus image tag Which is slightly different, but as I said before it's not a steep learning curve It's it's just you know allowing us to better understand your content and and you know better better work out what is Uh, prior what should we prioritize what you know? What is important to the to the user and what is not? And amp js is basically we have a base javascript library that you know gives you certain features For example built-in lazy loading Which all comes with the base job, you know the the base js file and Then you add some you know sort of like extend components Which is an additional javascript file that allows you for example to build to use forms on your amp page to use a gallery to use You know web fonts And the great thing about is that all the js is loaded async which means that you're not blocking the rendering path But rather you know, you're loading it synchronously and then you only stop the rendering for the execution And of course last but not least the amp cache Which you know, which is one of the main reasons why it's so lightning fast and I'm sure We might have some questions on that and ben is Ben is the guy that that will give you some cool insights about that Yeah, definitely also Yeah, I think this is also a question I tend to get from my customers Is there a big difference in terms of if I hand tune my sign my side? Sorry, meaning well, I highly optimize it for speed versus amp. Can I achieve the same here? I usually tend to say yes, you can but you're still missing out on the amp cache so this is probably the extra feature who comes on top with with amp And well, you probably won't get the same results From you from a hand-tuned side that you would get from an amp cached side So as we said an amp cached side can load almost instantly. Yeah. Yeah, I would agree. I think it is possible but Considering, you know, we're looking at how modern sites are built with usually a lot of javascript Possibly some jQuery. It's rather tricky. So I personally think that You know using amp to speed up your side is the easier solution than fine-tuning your your your own pages Especially because I think it's always important to mention is amp a standalone So you're not actually tweaking the code of your website So you're not tapping into into anything that you could potentially break But you're basically building a standalone page And I think that is the beauty of it that you're you know, you you you speed up your side yet You leave the the core code of of your site basically untouched And you just You know add some canonical so that we understand. Okay, there's an amp page to this html page and write vice versa Makes sense So, let's have a look What makes amp so fast. I think well, we already touched on a few of these points And you're so mentioned in the beginning Um, also if you have been following our episodes or previous episodes here You will probably recognize a few of the best practices we try to highlight They are already built in in in the amp framework more or less If you already mentioned async javascript, this would probably be our one of our go-to recommendations Which we touched upon in previous episodes Well, ideally don't load javascript in the head because it's render blocking of course try to move to the photo and well defer it or load it async Also in terms of like don't well load up your sites Site with like too much css. So we have some restrictions there So it's more or less as you said before Well A bunch of web best practices, I would say yeah, exactly. Yeah, totally agree Yeah, it's not it's not rocket science It's it's just really reminding you to be you know To be careful about what you use why you use it and how much you You you know use of let's say css or javascript Well, here we have it again So yeah amp is just a bunch of web best practices you can say including well the amp cache Which then in conclusion leads to this? Well instant experience for your users Another point which is the question I tend to get a lot and You mentioned this a little bit or tapped into this a little bit is is it hard to develop a site? like We have this stat here which says 80 of development teams build an amp landing page in one week But like I've attended hackathons with you and we are teams there who build an amp page actually in one day So of course it depends a bit on what kind of site you try to rebuild But in general what is your opinion on developing an amp site if you're let's say elite gen I'd say you well you're a lead gen site and what would you say how long would it take to to build an amp site? Yeah, I mean it totally depends on the complexity of the site As you said, we we constantly run hackathons in emia and and minna and we see You know developers build it within a day It really depends what you require obviously if you're you know having a slightly more complex page like an e-commerce shop Where you want to develop amp pages for it might take some more time because you need to use You know a bit more like like some more extended components But in general it's it's pretty straightforward and we have some great resources online That I will talk about a little later one of them is a amp by example.com which basically Shows you exactly how you do certain things how you implement certain components. What are the restrictions? So it's it's very quick to learn very quick to pick up and to develop and as I said I think one of the big benefits is standalone so you can really play around a little bit Without sort of like you know being afraid of breaking anything and I think that's always really important because I totally understand You know if you're running a big shop, you you know, you don't want to tweak your your templates Risking maybe that's you know users won't be able to check out or you know Whatever risks you're you're facing so amp a standalone and you can you know just kind of like Hack it a little bit and just see what you can come up with and once you feel confident that you know that it's working for you You know you can you can reference it in in the canonical and then And then you're good to go So well to Close this part. Let me show you a few amp success stories. We collected so there's if well not a few there's quite a lot people already actually Who started experimenting with amp sites? So I guess you've heard about this this is If you want to call it a vertical the one Vertical as in publishers who started first, I'd say mostly because there used to be in a very High competitive environment And people will use to read news on the go This is probably one of the main use cases for your phone next to others, of course But publishers started very early on amping their pages and I guess you probably have seen that Whatever your favorite digital newspaper or publishers They it's very likely that they already have an m page. So this was probably the one first big use case we found in the beginning And where we found a lot of well early adopters and publishers We can see a few stats here that want to get into too deep But all of our publishers here saw great improvements In their well KPIs whatever KPIs they were using and was important for them, but they saw great improvement in in that because Especially in this vertical or I'd say speed is very very important. Yeah, definitely And I actually I'm just having a glimpse at the live chat and I see Joachim's question how to Tag your aims amp side with canonical versus desktop version If I understand correctly You know, you're asking How to implement a canonical when you're running Or like on your on the desktop version of your website. I think maybe I hopefully go into the right direction here. If not, just put another comment You know online In the chat, but I think one misperception is that amp is mobile only and It's actually not and Ben will actually talk about about that. So like There's, you know, you can totally, um, you know reference the amp page from your desktop side because amp also works on desktop So, um, there's no limitation there But should that not a hundred percent address your question that I'm sure ben will have some More information on that but I hope that's sort of like answers what you were trying to to ask Okay, um, well, so as we just touched upon publishers that is well Our number one use case for amp. And but of course, um, amp is not only for publishers There's another question we tend to get a lot. Is amp ready for e-commerce? Uh, I think we can confidently say yes, it is there It's a ton of new features which came out over the last few months. Um, Which were specifically targeted towards e-commerce to support Crucial e-commerce functions that you just need on your side If you want to have a nice experience for your customers Um, so here's a few examples we brought with you will form like big e-commerce sites Gets very well known ebay, um, or ali express Um, I think even now has 15 million pages amped already. Um, so and well Big number there So, yeah, it is ready for e-commerce. Um, and I think dom will maybe And ben will show us some features why what we what, um, is new and what makes it more feasible for For e-commerce, I guess Yep Um, and here just to round it up as well We're now have four billion over four billion mobile pages That are amped and millions of domains globally. So, um, it's not early adopter anymore by any means And it's not future technology. Um I think it's definitely the time now to think about amp. I guess what is your opinion on that? Yeah, for sure. I mean, you know, if I think If you're confident that you you know that you sort of like optimized your side as much as possible and you're You're looking at, you know, the next step or if you say, um, you know It's maybe a little too complicated to optimize my My pages for certain reasons then amp could also be a great solution. So, um, yeah, it's it's You know, it's definitely not in its early stages anymore. Um, you know, it's it's well adopted. You know, we see promising results and Yeah, we definitely hope that you know more of you, you know, give it a try and you know, just test it out and see that You know the loading times you can achieve with amp are usually So much quicker than what you could achieve on your on your own website perfect, um Yeah, this is one use case abroad for you. Um, which is a mobile like an agency specialized in mobile Also helping their clients with amping their sites. Um Mostly e-commerce sites. Um, and they have great success for this with this. So this is another well That's a use case for amp if you're tuning in as an agency, uh, this might be another Interesting usp. You could also offer for your customers helping them in mapping a site Um, and they've seen great results here. So they have conversion rate improvements of 105 percent for the m pages Um, the bounce rate, of course, this is one of our go-to stats. We use we always mention Because speed is really narrowly tight to bounce rate. Um And the ctr also went up. So, um It's it's a great use case For e-commerce. Um, well, of course for other verticals as well. Um Yeah, so, um, another mention so you see there is a lot of text on this slide. Um, if you want to have more information about Well amp in general, of course use cases and success stories We recommend to go to amp project.org. Um, this is your well Go to hop where you will be linked to other sites as well. I think you can basically find Everything what is important about amp there? Um, I think another fun fact as well It's this site is purely made with amp as well. So And you can use it on the desktop, which again proves that it's not just a mobile only solution Exactly. So it's amp project at work or you know, a and p by example dot com Both great resources to to get some more information on amp and you know view some great tutorials Cool, um So i'm guessing ben is still stuck in traffic. Uh, so we might want to switch over to our, um To our live coding and samples then and wait um for ben and just um having in our q and a session I hope you'll make it. Um, yeah, I think ben actually notified us Just a couple seconds ago and he said he will have some great stories on trains in the u.s Versus trains in germany. So i'm like quite interested to see what he's uh What he will be able to tell us so Yeah, so let's just jump ahead and go into like a few amp coding examples. Um while we're waiting for ben so, um Again, it's gonna be um, it's gonna be very, you know, high level. So we're just trying to show you how to get started What to watch out for? And then i'll give you the links to where you can actually get some more information Including tutorials, um, you know and and and you know an overview over which components exist, etc. So Let's start with this slide. So that you know, how do you actually start your first amp page? um, again, it's It's it's very straightforward. So Basically, there are a few tweaks that you have to do and you a few a few rules to follow But once you do so you're basically ready to go. So The one thing is that to the html tag you have to um add, you know a little Something which is um either going to be the lightning or you can also just write html amp Which basically just says okay. This is going to be an amp page so that we know, okay How to how to handle this This specific page um The second thing you then need to do which is very important and the order is very important Is that you need to define the character set as the first child of the Head tech so that's very important if you don't do that It's going to be invalid and it would not be picked up as an amp page So that's very important that when that only those pages that are valid amp are going to be picked up as an amp page um, so make sure that you declare the um, you know the char set or like define the char set as the first child Um, third you need to include the amp base library, which we touched earlier It's it's basically enabling you to um use, you know, some of the amp features. Um, for example images and amp um, and it allows you to Basically add Some, you know extended components. So it's sort of like, you know, the the extended components would have the amp library as a dependency What's important about the amp base library is it must be loaded the second child of the Head tech so it's very important to keep that order To ensure that it's um valid Now we're coming back to the canonicals So what you need to do is So that we know there is an amp page you need to actually add a canonical that points to the regular html file Um, that's very very important so that you know, we know, okay, there's an html file But we also know there's an amp file so that we can you know Pick up the the the correct page If you know if we uh when we crawl your site and Now there's one thing that could happen is that you say look I might Just develop my entire site in amp which is totally fine. You can do that um And in this case you will still need a canonical However, in this in the case of an amp only page you just point it to itself So, um, again either point it to the regular html file or point it to itself Now um amp html also requires a viewport declaration Um, just as shown. So, you know, you add the meta tag name viewport and then we recommend the initial scale Set to one. This is not required, but it's recommended. So, um, I would highly suggest you just do it like that Now the next thing would be that you probably want to have some custom css um And as we touched earlier because it's a bunch of best practices All css needs to be in line Um, the the reason for that is just simply that you know each server request adds, you know, some You know adds additional loading time to your page We try to avoid that So we want to load uh css in line And in order to not um, you know, sort of like blow up that uh that document We limit the amount of css to 50 kilobytes which is more than enough to develop even complex sites um, you know, usually css is just bloated because you know Kind of like a lot of teams working on it and it's maybe a few years old and you know So so it kind of like gets bigger bigger bigger because there's not not enough maintenance and cleaning being done 50 kilobytes is more than enough And last but not least you're gonna add the amp boilerplate which basically, you know add some Some some general, uh, you know styling that that you know that that allows you to to implement features So think of it as sort of like a framework. Um, and then with the custom css you can tweak it a little bit to You know to to to match your current design This is your first amp page. So once you have included that you can go ahead and just use you know very You know common elements such as an h1 tag Or you know a paragraph or you know, whatever you're used to however Be aware that there are going to be some custom elements For example for images. I'm going to speak about that in a little bit so When uh developing a page, you know always have a look at you know the the tutorials and the and the documentation see Oh, can I actually use um this element or is there a custom element for it? In most cases you you should be fine using The elements you're used to but you know, just just have a look and uh and and be safe And yeah when you do that then basically you have your first hello world in amp and I see Ben just joined which we're really excited about Good to see you guys Hi, Ben Cool. Thanks. You make it. Um, yeah, I think I'd suggest we just go through Our coding samples real quickly and then we'll have our q&a with you if that's fine for you Whatever you like. Yeah, I will discuss all the differences between trains in germany and trains in u.s Where they're often canceled They're one on time and so on and so forth But yeah, go on and I'll just kind of follow along and let me know what I can do Perfect so we just go through a few more slides. I think it's in four in total And then we have our q&a with ben which is really exciting Um, so just to wrap it up the first, you know, kind of like hello world in amp. It's pretty straightforward Um, you know, if you follow the steps from the previous slide You will have an outcome that looks something like that. Um, and as you can see We're following The rules to have the character set defined as a first child then we have the The amp, um, you know base a javascript. We have our canonical. We have the viewport Declaration and then we just go along with some custom css and as you see here This is where it slightly differs. So instead of like having just the image tag you have like the amp dash image tag And talking about the components because I touched it quite a bit so Um amp comes with a lot of exciting components that allows you to build even complex pages Some of them are building So they are basically building in the base library, which I already, uh, you know talked about for example the amp dash image Then we have some extended components, which is something like, you know amp analytics or Fonts so if you want to use custom fonts or if you you know want to use google analytics on your amp page The extended components will allow you to do so and we show you how that works And then we got some experimental Components, which are not ready to use yet. You're more than welcome to play around with them But um, you know, they're you know, they're not ready for wide use. So, um, you know, it's a bit like in experimental mode And I guess like one question we get quite frequently is You know how to actually add google analytics to an amp page And so we just want to quickly show you how that works So again, as I said earlier amp or google analytics requires the amp analytics extended component Which means that you have to add a An additional javascript file to your document In this case, it would be this snippet that you see here Um, and again, it needs to be explicitly included if it's not then it wouldn't work Um, then the second thing you would need to do is like to enable the build in support for google analytics You would need to Set the type attribute to google analytics Um, that's really important, you know in order to you know to tell amp analytics that you want to use google analytics And then all you have to do is to replace obviously the property id to Something that you own so like, you know, like a valid property id and don't leave it at, you know, x x x x y And then really important, you know, you want to Add trigger requests and the value sort of support it or page view event and social So in this case in this example We use the page view request. So this will be able to You know to let you track the the number of page views that you receive on your amp page and if you want to get some more information on, you know, how that works and what do I do in case I want to, you know, use a Like the event request or the social request then I created this Short link here which guides you to the correct page And it's going to be, you know, the google short domain and then x s for m cr and obviously You can always go back Into Into the slides and, you know, copy paste the url later on Great also that analytics support amp is always growing and you also can not just add analytics for page views and so on You can also add it in the ways that you like so that, for example, when user presses a button or tap something Analytics also gets hit and also google tag manager is supported Yes, I think that's a really important piece of information because people are often, you know, a little bit worried that You know, there's some sort of limitation In terms of using google analytics for ben as you just said, so I guess it's evolving quite quickly and so would you say like that for The majority of the things that you want to get done with google analytics amp is ready for it already I think so. Yeah. I mean it does the things other analytics Um environments would do it supports all the major providers Those are not supported. You can make your own components and add things to amp um People have trouble sometimes with some backwards compatibility sometimes on the chair apparently The other results that are surprising when it's attached to events instead of attached to page views but the various problems are being worked out and Yeah, it's much easier also than other than at html everything is built into a component So there's no adding JavaScript to the page. It's just simpler tends to work in my experience quite reliably in the vast majority of cases That's that sounds great. So, um, yeah, I mean super excited to hear that so as you can see there There are just a few limitations here um The the link will still point you to some more information But there's so much documentation out there already and again, like if you have any question Just put it in the comments. We're trying to pick up as many questions as we can in you know in the FA FAQ session um To just you know move forward with you know, what else you can do Obviously, you want to include images into your amp page, which is sort of like a basic requirement And it's pretty straightforward as well. So The only difference at first is that you don't use just the image element But you rather use the amp dash image element And then what's really important is that you need to define a width and a height of the image Because you know, we want to know like how to render the page beforehand So that's very important to you know to add the the width and the height attribute Now Probably most of you say okay, but just having you know Sort of like a static image is not enough. I want to have a responsive image And I think what's great about amp is that that is even easier Probably then in most cases when you you know, just build a regular page Because by adding the layout attribute and setting it to responsive You're automatically creating a responsive image, which is you know, super cool And you know, I just played around with it a little bit earlier and it you know, it works like a charm um However, that doesn't mean that you're just sort of like limited to just have one image version on your amp page because We totally understand that you might require several versions depending on the resolution of you know of your device So amp does not limit you on using for example, source set. You're still able to do that You can also use the sizes attribute So as it as it's shown here, you know, you can just use source set and then specify the image usage based on the screen with So everything is the same as you would do it on your regular page um, and there's actually a really handy tutorial on how to do that And again, we created short link. It's capital h F capital r capital x c6 where you literally are guided step by step through the process of implementing an image and how to use source sets or sizes You know to to make it work In the best possible way and really keep an eye on performance Depending on the uh screen width. So this is really exciting and again I think it's even easier than working with responsive images on a non amp page And last but not least, I think that's one common questions we especially get from lead You know lead generation sites. It's Can I actually use forms on on an amp page and the good news is yes, you can Again for amp forms is an extended component. So what that means is that you need to add Another javascript file to your page. It would be to snip it here So you see it here. It's loaded async again. So it's not blocking the rendering path, which is really important So you just you need to express explicit explicitly include this and now you have two You know two ways of embedding forms Just as you know it there is the form submission with the page update and there's a form submission with the page reload and You can do it like that. So for example, you can use the method attribute and set it to get Then you define the action attribute And basically that will allow you to submit the form and you will land on the page that you specified Where the user should land on so let's let it be like a search field or simply form submission You know, whatever you need to use a form for You can use it just as you're you know used to what's important You do need the target attribute and you need to you need to set it to top or blank Otherwise it won't work And then for those of you that say well, I rather want to have you know, like the page reload So like the you know the the age x way you can do that as well So you can use instead of like using method get you would use method post And then instead of the action attribute you would use the action Minus 8 x hr attribute and then again you specify the server endpoint And then you are able to you know have the form submission while staying on the same page Now some of you might say like well, but how do I notify the user if something went wrong or something? You know, or if the form was submitted successfully There's also a component for that and I believe it's called a amp mustache, which allows you to define Specific messages to the user to you know, allow to communicate to the user Which is really important because we're talking also about UX and you know without Communicating to the user if something was successful or non successful. Obviously It would be quite pointless to have a form on your page the last thing to mention about forms is that Form submissions on amp require security, which means your page needs to be secured with SSL I think that is probably an important point about an amp page, but it's an important point in general You know, we all want to be safe On the web. So like, you know that is required and I think that's a good thing. So that is no limitation by by any means There are a couple of points on that I want to add to that Yeah amp mustache is your general way to get templates to get content onto your page So amp mustache is your templating system the standard mustache templating button amp Also, as he's pointing out forms are really important and when amp first came out I want to mention there were no forms people still think sometimes amp doesn't have forms I can't make my e-commerce site with amp because there are no forms. Well Not true. There's forms on amp and you can't control the forms if you can normally but All this stuff is built into forms. You wouldn't usually get a lot of forms I've done a very good validation. For example, don't look very good Amp forms you have built-in user validation You're asking for a number they put in a bunch of other things that aren't numbers It will gently tell the user that and beautiful texts. Let them correct it There's now a date picker. There's a lot of stuff makes the forms amp beautiful easy for users and Stylable by you. So they're really nice now Cool, perfect. Um, well, I think that's a good well Star to well a good thing to start our Q&A now guess you're done So I suggest we'll um start with some questions We have prepared for you Ben, um, and then we'll see if there's a few more questions on the chat as well And you'll just give us throw your knowledge at us Well, I'll try to have some knowledge first to throw out to you. Um, yeah, I am Ben Morse I'm a developer advocate here at google working on making the web Better for everybody making the web easy for users web easy for developers focusing on amp these days and on twitter is b e n m o r s s Sorry, go ahead No, no worries. We can also add that to our description later on Where we also want to add our world general event page As well as a few of the sources. We just shown you a dumb just Showed you. Um, so yeah, Ben Let's start our amp demystified Session, I hope we don't have too much trouble with the sound. I heard it might be a bit tricky, but So if you're in the chat and you're experiencing sound issues Just let us know and we'll try to Come up with a solution So Ben to put you on the spot First question I would think of from a user's point of view or well Developers point of view and or marketeers point of view would be will amp work with my existing content management systems And is there well there probably is build in plugins and stuff like that But can you touch a little bit up on? What there is and if there is any challenges, etc Yeah, that's a really important question because a lot of sites use cms's I think that the last that I saw was that 30 percent of sites are built on wordpress So cms's are really important. Um, it's honestly, it's a work in progress There's plugins out there for most of the major cms's so wordpress is a couple of plugins for example I know Drupal has a plugin That magento has one e-commerce systems. There are plugins for most systems But if you just stick a plugin into your existing cms for amp And just say you're done your library be disappointed because the plugin will probably be missing some things I've seen cases where people use the wordpress plugin for example And the site looks okay, but it has no menu anymore And people just go ahead and put it live and there's a prize when it doesn't do as well as their previous pages But there's no menu. So that's not going to be really a great user experience so use the plugins and then Check your site and then customize afterwards. That's really important to use the plugins and then check the result, of course Customize until it's just as good as your existing page There's very few reasons to have an amp page that looks any worse than page No reasons actually Maybe a couple of features can't be implemented as easily or aren't worth doing because they're more difficult And most things are much easier and it should look just as good also Look for changes in the near future. We're helping Out with the wordpress effort. We're working on a new plugin for wordpress with people from automatic and other places Other plugins are being worked on by various people around the world. So i'd look for some Some nice things happening with plugins for cms's especially wordpress in the next two or three months Also, of course, you should get involved make it better You could become an important person in the world of cms's and the world of amp And you'll get personal glory Well, that's always nice And I think there was a really important Thing to mention because denis touched earlier that you know amp is an open source project So I think it's it's really important that you know We want to work with you as a developer and with you know Many developers all over the world on making amp better rather than providing this Sort of solution to developers as like this is the google solution, right then Right, that's the exact idea because I mean you know your site's more than we do of course google doesn't want to prescribe What people should do google's trying to help in this case because performance Has been a problem on the web for a long time and on mobile phones, especially this is just a crazy new idea to actually make performance better, but it's been really popular and Yeah, it's it belongs everybody. So it's it's not a google amp. It's amp And work on it make it better If you have suggestions or ideas, especially go on github and suggest these things to us or go on twitter and tell us The amp team is very very responsive and loves to hear feedback. This is really true And people love to make new components or enhance existing components to meet use cases cool, um, maybe let's take a quick question from the chat. So, um, Zacharias is asking Is it necessary to migrate all pages of a site to start with amp? Then you want to take this? Okay No, it is not necessary. I mean amp is just stuff that lives in html. It's just javascript You know some css html extensions things like that. So There's no reason for that The best thing to do is take the site the pages where Users get there first Maybe where they arrive from search because in the app cash can fall into play So, you know, start with your landing pages those kinds of things make those amp And then just go from there. It's easy to link out of amp Back to html back and forth if you want to there's no reason you have to really stay in one World they're you know, just web pages really That's great. Um And another question that we get quite frequently or it's a concern rather That you know developers ask us Will amp limit my layout and design options or they're worried that it that it limits the options too much What is your stand on that? Well, the css still belongs to you You get 50 000 bytes of css still and I've never seen a site that needs more than that I mean if you've got a bunch of frameworks lying around your css You might have more than that but you really never need to you honestly shouldn't have to And you control the css So yeah, go for it. The only thing you think of that could be a limit Or if you do things that we consider to be bad user experiences So it's really important for you to have things that fly around the screen Take over the screen things that just are Unpleasant for users then those can be hard to duplicate and amp because there are some restrictions Otherwise, it's your css. So same stuff same design possibilities Okay, um, I think the next question we prepared is a bit Well, it ties to a question from the chat as well Um, can you tell us a bit about limitations? A question in the chat would be is there for example database? concerns like Does it work with my sql and stuff like this? Our question would also be can you recreate More tricky features as in carousels accordions Let's say stuff that marketeers really like I'm taking the last question first because I just heard it last for some odd reason. I'm answering it first Um, yeah accordions as the amp accordion component For image carousels and image sliders. There's the amp carousel. So We know those things are popular They're built into amp There's a lot of effects and things that you can do with amps including uh flying carpet things and parallax things And some of the fancier things you see on websites Already your amp components if there are things you can't do, you know, make them let us know for the amp team know Back to the first question Uh databases and so on your back end won't change So your back end code could be whatever it was before just the front end will have amp html instead of regular html So, yeah, my sql Whatever you want to use in the back end is totally up to you and totally unchanged Like if we'd also add to my comments here, I may be missing important things No, that's great. And I think like the next question that we prepared Sort of like, you know, is a good like sort of like continuation So What about dynamic content? Can I use dynamic content using amp or is it just static? You know, what are my limitations here? I'm glad you asked that question because amp was designed for static pages And actually there's a post we have still on our site that I found last week Going through amp project org It's a post by multi ubel kind of the inventor of amp saying this is the idea. It's for static pages and it was because You can make you can do more performance on static pages and it was a easy way to start and good enough for publishers Then but it's totally changed. We have now amp lists. We have amp find amp live lists amp mustaches you were saying before Dominic there's various ways to make dynamic contents on amp and we're seeing an increasing Number of verticals adopting amp different kinds of applications. We never saw before Plenty of e-commerce things happening out there You can do things like you can have a thing where you know a user clicks something and what's on the screen changes Or they do something and something gets pulled from the server and gets put onto the page So for example, search out a completion. That's possible now So we're seeing that you can do most of the things that most web pages do now at amp and there are fewer and fewer Limits There's still some that much less the people think Well, um That's cool. Um, I think next question is a bit broader Could you tell us a bit because you're very close with the amp team? What's next on the rope map? Of course, there's also well stuff that hopefully will surprise us being developed by non amp team members, but um, yeah, can you can you give us a little well? glimpse into the future here there's always a lot happening with amp and uh, yeah, things are always going on Some things that come to mind immediately are infinite scroll of various sorts is being worked on I know a new lightbox is being worked on A lot of new ad stuff is being worked on We know that there are those one different kinds of ads and things like header bidding and those things are being worked on Um, a lot of e-commerce type things a lot of things make dynamic pages More possible and easier are also being worked on There's some stuff that also help out with migrating your css from your past site some stuff for react A lot new templates coming up on amp start. I think um, and yeah, I think actually maybe in some ways most importantly working really hard on cms support I'm sure there's a lot more than that going on that. That's what came to mind there spontaneously Oh, I think there's a big picker also a new big picker that I've seen some moxib that looks really promising Cool. That's really cool. So um, yeah, I mean as I as I mentioned earlier There are a lot of resources and tutorials online um Probably the two sides that you know come come into my mind is amp by example, which is you know, just kind of like a really Good way to get started because it walks you through each step For almost each component that we have and then the amp project at org domain, of course but we also heard that there is some amp rocho happening and um And maybe you want to talk a little bit about that because that sounds pretty exciting Interesting I heard the same thing actually that before I mentioned that I also mentioned that amp start.com is a great way to actually Go started with amp amp start contains templates of various sorts That are really nice and the thing with amp is it doesn't really come with design But amp start does So if I'm going to make a nice accordion that already is already styled look nicely by some of the best designers I can think of go to amp start and just copy and paste the code and start with that The amp rocho. Yes. So we've been going around the world talking about amp with people and learning about what people Want to use from amp? You know, we're we're trying to convey what amp does now and all of amp's new features But also trying to learn from you about what you want from amp problems you're having or feature requests you might have so people were in uh They were in indonesia and I think sydney and some other places in october We're going to be going to four european cities in november We're going to munich madrid Paris and london I'll be there for those And then uh, if you're elsewhere in the world We'll be visiting some places in china in december and then south america in january and eventually we're going to go to the us United states. We're here. The trains run very poorly, but there are still plenty of amp users in this country over here So, yeah, just check out, you know google amp rocho Come visit us come say hello, wherever you are We want to meet you And is it generally open to everyone to attend? Do you need to register? What is the process here to actually attend one of these events? There is indeed a link to register on the sites You also can go to I think I think that amp project org Have a link to the amp road show as well. I'm taking out of here. Yeah, it does. Okay. Thank you I Google amp road show. Well, I find links to the road show. I think I've done this before Yes, look at that as you up here is the first results So yeah, check out amp road show, please perfect Yeah, I think with that we're almost out of time I'll have one final look at the chat and see if there's any questions. We haven't touched on Um, but I'd say for now we answered most of it Um Yeah, maybe the first question I'm not sure if we actually have an average, but I mean, we do know the median load time on an amp page is 0.9 seconds and Usher cry was asking if we know the average load time for a video amp page Do we have any benchmarks on that yet or anything you can tell us about this? I guess it depends on the page Yeah, the general question, but uh, Yeah video, I mean it will involve loading a bit of JavaScript for the video, but Yeah, the video itself is a whole other issue because it doesn't load to you play it probably so yeah So I guess the best answer is it depends Always a good answer My favorite answer Great. Um, is there anything you would like to add, uh, ben, um, besides the road show and the stuff you touched upon I think you guys covered it really well. Um, just I I could say also that amp as it kind of gets, you know, it gets more mature and becomes more full of features We're seeing it use more and more not just for mobile or as an alternative to web pages, but as general So think about amp also as just a web components library Just a way to make web pages a bit just simpler. We just easier. There are some restrictions But it's just a lot simpler people often are able to make an amp page in a day And convert an entire site in one to four weeks So it's pretty quick. It's pretty easy to use And it's just a way you can make websites more easily in general It happens to be useful on mobile, especially because of amp caches and google's amp carousel and things like that and because I think web load time is often worse on mobile than on desktop But yeah, it's just a generally useful library for making web pages Okay. Uh, well, thank you so much Ben for tuning in. Um, I hope the us trains will get better and faster like them Definitely thanks for making the time we know you're really busy. Um, and so yeah, we really appreciate it and We're looking forward to see you On this side of the world for the amp roadshow Yeah, that'll be fun And um, yeah, so like guys if you have any questions, uh, you can still let us know in the chat and we will Um, you know, try to answer all of them. We will be able to connect to ben and see if we get some more critical crucial information out of him and and so yeah, please feel free to comment and um Definitely tune in next month uh to our uh, next hackathon on air And I'm sure in the future then we will welcome you again if uh amp continues to Develop as quickly as it has in the in the past. So um, yeah, thanks a lot. I appreciate that. Thanks for having me Thank you very much ben and um, well see you soon in well munich for me. That is Yeah Bye. Bye. Bye. Take care