 Workpress and Amsturiz, so first something about myself. So my name is Pratikena and I am the director at Prinser's Holding in Hong Kong Limited. I started touring in 2008 and since then I have not looked back. Four years I was working on Joomla, another CMS. At that time I thought that WordPress is a blogging software and not a CMS. But then in 2012 we started working on WordPress and since then we've improved WordPress people and we've done like 500 plus WordPress games to today. But I don't code anymore and I'm more into customer activist management and project management. But I know coding is the action that might help us in our movie. That's about me. So coming to AMP, anyone of you have heard about AMP before? So yeah, AMP stands for Expanded Mobile Pages. Google announced it in October 2015 as a competitor to Facebook Instant Articles. So if you have ever been to Facebook and you open an article, you see that it comes up very quickly and the content loads very fast. Same with Apple News. So Google came up with this concept of AMP and initially it was forwarded only for publisher. But then Google gives, like Google offers this now to the entire web to make it much faster. And so this Facebook and Apple news were just supported via the app. So you need to open the Apple News app or you need to open the Facebook to view Instant Articles. And that's exactly where Google wanted to change from proprietary tools to open web and that's how AMP came into picture. With Google AMP, Google focuses on their ultimate aim is to load the page within one second. And how do they do that is one second looks very much promising. But how do they deliver it is Google caches each and every page that you have in their own cache. So when you go through Google, the website pages are not served from your server but they are delivered from the Google cache server. And there are about 90 pages that are being cached every second on the Google AMP cache. So that's how Google just tries to deliver it to you within one second. So if you see this, if you have an AMP website, this is a small lightning bolt that comes over on Google that shows you that this particular website is very using AMP. And that's how the AMP, so all these new agencies that were using AMP, they kind of got the priority and they talked a lot about Google. So that's the reason that people are kind of criticizing AMP a bit because they think that it's too proprietary and Google is favoring AMP and there was a misconception out there for a while that if your website is on Google AMP, it's going to be better on SEO and it's going to rank higher, but Google itself came up front and said that that's not the case. Yeah, side good perspective if it's loading in AMP or it's loading. But the only thing that Google wants to do is they want you to load your website quick. Make it be AMP or be it without AMP. So that's the misconception that... So the reason I'm going to talk about AMP is because there are a lot of misconceptions about it. So if you see this website, this is our own website and we just got AMP this year and you can see that we got a small lightning bolt. So even if you see in the search engine rankings, Google says that it does not prioritize AMP pages but it's kind of trying to show people with this lightning bolt that this particular URL is AMP. So if there are any developer clients and project managers, I think everyone needs to understand AMP very well because these three people don't get along with each other. The project manager is kind of always trying to bring the developer and client on the same page and each project client these days are very smart so they try to come up with their own notion of every technology. So this is just a slide that I brought in. Another thing that you see these days is Google is trying to push AMP in a certain way. So this is a website called Ithinkwithgoogle.com and if you go there and you see Ithinkwithgoogle.com and you put in all your sites so it checks your website on a 3G connection and then once the site loads and if it's not loading under three seconds it gives you all the things that you need to do and then it says try accelerated mobile pages. Now the funny thing is that this website that I am checking is already built on AMP and it's still telling me to build using AMP. So Google is like hey use AMP. I'm not telling you but if you use it it's good for you. So here is how and finally I choose the one second load time. So if you are building websites and you are using CSS and JS and all those things Google does what normally happens is that all the JavaScript and everything is loaded right on the website. So Google uses a synchronous JavaScript so it does not load your JavaScript before. It loads it after your dome is loaded. Another thing is that they discourage usage of any third party JS. So if you are using AMP you cannot use jQuery or VNJS or any other third party JS library with AMP. If you do that the tool is going to invalidate your AMP page. Another thing is that all the CSS that you write you cannot link it. So normally if you write the CSS we use a link attribute and we link the CSS. So that's not something you do in AMP. You use it under style space and custom and you write all your CSS within that style and custom tag and there is a restriction on the size. It needs to be under 58. So now when you are using Google AMP there are two versions the desktop version and the AMP version. So this was how it was done initially. So your website page is going to have two different versions. It's a normal HTML and then there is another version that is the AMP version of your page and within the header tag you have to write this thing called link relation AMP HTML. So what Google does is it goes to your page and finds out what the AMP version of your page and it links them. So this is how you need to do canonical verification. So if you want to validate your Google AMP page you need to go to validator.ampproject.org and you need to put your link over there. I'll just show it in your program. So you go to AMP project. So you can pass here. So this is done. If we pass a normal website, say if we pass WordPress or PowerG it says that there are these... Obviously WordPress.org is not AMP page. So this is a normal page. So you need to go to this URL validator and validator URL. So once you have validated you will have the writing board symbol that I showed in the last slide. So these are the restrictions that you have. So you cannot use any third-party JS like AngularJS, Jquery. You cannot have all those fences, riders, browsers, image filters, etc. that you have. So you cannot link any third-party CSS, external CSS and all the CSS that you write that needs to be under 50 kb. Another thing that all the developers we do is we write important tag. You cannot have important in your CSS. You cannot embed iFrame directly. So you cannot use content from plugins like content from 7, gravity forms, and all those things. All these tags that we are used to writing in the IMG tag, video tag, iFrame, you cannot just write it directly. Instead you have to use its own HTML that is called AMP by entry, AMP video, AMP by frame. And if you want to check out these websites called ampproject.org you go to reference components and there you can see all the AMP HTML that you can use. So one thing that you need to understand is that if you are using AMP there is a whole new learning curve attached to it. Because it's like you cannot use your normal HTML where you have been using all of these years. AMP has proprietary AMP tags for everything, like image, video, iFrame. So you need to go through this whole thing. And they have it pretty well documented. So you can just go through ampproject.org where you find all the data. That does make it really proprietary to Google. Yeah, I guess. That's why my boss wouldn't even entertain me. Yeah, so this was our reaction when we first listened to all these fresh predictions. No, we are not doing this. But there are still certain misconceptions about AMP. People think that AMP is only for mobile web but it's not the case because if you see the ampproject.org website it's built using AMP HTML. But of course they will do it because they need to promote their technology. People think that with AMP you need to forget about the website. That's not the case because if you see AMP's own website it's beautiful. Then AMP restricts your layout and design capabilities. That's not the thing. You can design any kind of website that you want using AMP. Then people think that I cannot use AMP with my current website. That's not wrong. That's not true. Because AMP does not want you to use jQuery, carousel, sliders. People think that your website cannot be interactive but that's not the thing because nowadays you've got CSS sliders, CSS carousels, accordions, everything is in CSS. We've been using jQuery, I don't know for the wrong reasons. When we started building AMP we did think that you can do everything using CSS because that's the power of CSS as in itself. Then people think that you need to maintain two different websites. One is the AMP website and one is the non-AMP website. That's not the thing. If you use native AMP you can just use one website for both the non-AMP version. With native AMP there is no non-AMP version. It's just the AMP version of your website. That's the only thing that you have. Now let's come to how do you amplify your WordPress website. Using plugins, now I won't do that. So it's coding your own HTML using native AMP. So there are two plugins that exist right now. One is built by Automatic, HWP and Google. That's called AMP for WordPress. And the other one that we have used is called AMP for WP. And both of these are pretty confusing because the only thing that changes is WordPress and WP, nothing else. And to be honest, I didn't like the official one. I like the non-official version because it's much easier to implement. And that's what we have implemented on our own website. So here are the pros of using AMP for WP. It's a quick setup. If you just want to amplify our WordPress website you can do it within minutes. So what this website does is it takes our video tags, the images tags, and it just converts all of them into AMP video automatically. And it does a nice back-and-interface. It generates valid HTML. And what it does is it removes all this JS that your theme has in it and all the MSS and CSS. And if you have, if someone opens your particular blog page on mobile, it redirects automatically to the AMP version of that particular post. Cons is that it's good only if you use it for your blog. And right now it renders only the WP content in the free version. If you want to render ACF fields, you need to buy another plugin. There is no free support for content forms. It has a very basic implementation. And for everything that you want to do, you have to buy add-ons. And the add-ons are like $9,000 to $100 per add-on. So it's pretty expensive. So these are the few cons of the thing. So here is why now I was talking about not using the plugin and taking the another route that is native AMP. So how you can do that is if you're a good HTML developer and you know CSS pretty well, you just need to, so because this is what was happening with my team, we were using a lot of important tags and we were using a lot of repetitive CSS. So if you have heard about, do not forget yourself to try concepts. If you use all of that pretty well, you can build the entire HTML page under 50k CSS limit. And as low third party chairs, for sliders, carousels, you can use CSS page. And then you don't need to use any ING, video tags and all those things. So these are the basic rules for native AMP. If you follow this, you don't need to have like two different versions. So yeah, so step one, prepare for the nightmare if you as an HTML developer have exploited CSS by using important tags, big, fast names, and repetitive CSS. Step two you need to do is change your HTML to HTML space AMP. So that basically tells Google that this is the AMP page. And then what you do is you use this script from Google called cdn.ampproject.org slash version 0.js into the app. And yeah, just don't do this. We tried to do this. What we did is we just downloaded the whole JS and then we just uploaded it to our server. If you do that, Google is going to mark your pages in weather. Because what Google does is they have cached this whole v0.js in your browser through Chrome. So when you load your website, it does not have to do a round trip to print that JS file. So don't be smart and download this and upload it to your server. And then canonicalization. So now initially what we did is we had a relation tag that says relation is equals to AMP HTML and it was pointed to another AMP URL. So now this particular relation is equals to AMP HTML points to itself because the page itself is the AMP HTML page. Then so if you want, so after that, so even if you want to use an AMP iFrame, you need to include a JS per AMP iFrame and you can find all the list of HTML tags that the project supports. So here if you want to use the AMP video, you have to have the AMP video. So these are the tags that AMP is supporting right now. So you can just go through this and you can find the list of scripts that you need to include. So this is pretty contradicting because Google tells you to not use scripts a lot and that for everything that you do, Google asks you to add a new script. So this is pretty annoying. So this is a case study on how we started doing building our first AMP WordPress website. Initially when I told my team that we need to use to build the website using native AMP, my team did not believe. So it was like the whole team was divided, me versus the team, the team saying me that we cannot build anything using native AMP and I was like no, if Google has did this, then even we can do it. So then my idea was to skip this two versions of the website and just build one version. So then that's the story. And when we started building the SQL, the AMP way, so we used bootstrap framework. So bootstrap CSS itself is like 121KD. So we were like, we are only the base bootstrap that we are using. That's like almost three times what AMP is allowing. So what we did is we stripped of bootstrap because when you use bootstrap, it has got everything like the carousel, and Iconium stash and everything. So we removed all the CSS and we used only the following prints and all the CSS. So now that Google does not allow you to use any carousel and all those things that dropped on menus and sliders. So we skipped from JS to CSS, base sliders and carousel. And if you want to see the... So dropped on menus, sliders are also provided by AMP itself. So if you want to see all the components that AMP gives you, just go to this website called AMP by example. And here are the carousels, all the components that Google gives you. So there's AMP Iconium, then there is carousel. So if you see this, it's not that great, but it does the work for you. So you can have like, tons of different components over here. There's this amazing thing called AMP Anim. So that does nothing but just pulls in the chip. So they have a component for this, believe me. Just to display and chip. So the amazing thing that these guys have is something called as AMP animation. So this whole thing is just to show this small thing over here. They have a component. So everything that you want to do JS based, you have to go to AMP to say, okay, you have that. AMP will say, okay, you don't take this. I have a component for that. And for every component that you use, there is a good amount of documentation. So you could say huge learning curve that you have to go. You have huge sacrifice in a lot of ways. Yeah, just like the whole life you were told that HTML is your mother. AMP comes to you. Oh, no, I'm your new mother. You haven't pushed it for standards for so long. And now they're saying, I'll forget the standards. Yeah, that's what happened with relational database and no SQL. Like all the life we did was relational database. And then there's MongoDB, Firebase, everyone came. And they said, we don't need relational database. We are moving back to Firebase system. And so here's the thing. This is my own personal experience. It's not that I'm pro-AMP or something like that. But the moment my team built one AMP website, the HTML and CSS level, its standard has gone over here. Because all Google wants you to do is stop abusing the jQuery, the CSS, the HTML. Because if you open one WordPress theme out in theme forest, it's like, I don't know how they even sell this thing. Yeah, it's like a back basics. Yeah, I'll just show you one website that we've built. I've never used themes, but I used one theme for this website and you can see the loading time starts. And I'll show you another website that we've built. It's not AMP, but it's something that my team built after using AMP. And you can see the speed that we've got. So I'm an Indian, so you see, look at everything. Yeah, I don't know that speed is a massive problem on our website. Yeah, because we are using, so our major WordPress developers that I see, all they do is go to theme forest. I agree with this. Okay, then just change it and give it to the client. And the issue is that only because a theme offers Corousum and the theme offers like 10 different things and you are using just one out of it, but you are getting a load of almost every other thing. There's actually an avatar on your primary website that isn't even in WordPress. But I can still see redoing it. I don't know, redoing it. I think it'll give results for my policy. Yeah, so here's the accordion. So I've been to AMP Corousum and these guys are trying it hard to make it easier for people because I understand that this is a whole new learning tool. But Google is never... So this was by Martial Wood, who is the product manager for AMP. And he was specifically asked if Google is trying to enforce AMP. So he said that we are not doing it. We are just trying to standardize everything. But I think one thing that they've failed in doing was having components for everything. Like even having a component for image, for video, for iFrame. That kind of sucks. And then you cannot even have inline CSS. Like you're going to have p space style is equal to... and put your style over that. You cannot do that in AMP. I know, that's all. Yeah, so people are finding it very difficult to implement. So that's what our story is about. So then we stripped bootstrap of all... So here you see, this is a good example. Bootstrap, we were using 121kb. We got it down to somewhere about 16 kilobytes. Because there was a whole lot of unnecessary bootstrap CSS that we were using. So we just stripped it off. And we just used the amount of CSS that we needed from bootstrap. So that's how it helped us. And then, as I say, you can go to AMP by example. And you can see all the components that AMP offers. Now, we used pundit from 7 for all of the fonts on our website. But Cf7 uses chainquery for validation and submitting the output to the database. So what we did is we dequeued all the JS file that Cf7 was using. We just removed all of its JS file. And we did code our own extension in AMP for Cf7. And to do that, you just need to refer to this AMP form that tells you how to submit your forms using AMP. And again, with this, you need a bit of knowledge of AngularJS because AMP isn't using AngularJS. So it's all kind of proprietary Google because AngularJS is Google. Then Mpatch.tml is using AngularJS. So we did a bit of AngularJS available so that helped us. So even after doing all of this, like stripping off the CSS and writing over CSS carefully, we were almost at 67 kilobytes, which was 17 kilobytes more than what Google has set the limit for. So the next thing that we did is we replaced the class names. So we had like big class names like dot header or like top header, bottom header. We just removed them. And we had dot A dot B dot C dot AB dot CPU. We had just run two names and we wrote down everything and then brought it down to 37 kilobytes. That's unusable, but it's not. Yeah, you could run it through like a gold pipeline. Yeah, it just automated. So we didn't rewrite them. So we just wrote down a program in PHP that does it for us. Looks like a compiler to minify the code. Yeah, exactly. My team would kill me if I asked them to rewrite all of the class names. They would give the job. They were like, we're not doing, we don't want to work. So finally, once the MSTM was ready, all we had to do now is put it out in WordPress. And then there's the amazing thing called Wisdom Editor. I think it's the biggest scam in the 21st century. Yeah, I don't think that Wisdom Editor, what you see is what you get. We never get what we see. So that's what I think Gutenberg is for. But it's also in like, I don't know, I don't want to speak about it because there's been a lot of Gutenberg class everywhere. And there's a lot going on there. So yeah, so now the issue with WordPress Wisdom Editor was that it gives you IMG, audio tag, video tags. So you cannot use that in AMP. You need to have AMP, IMG, AMP audio, AMP video. So here comes PHP to the rescue and we use Regex. We change all the IMG tag to AMP, IMG to AMP audio, AMP video. So there is a book called, I don't know the book because I'm not the developer who did this. But there is a book specifically for the Wisdom Output that comes. So you can just hook up and before it compiles and gives back the HTML to the browser, you can change all the tags. So that's it. AMP was validated. So now what we did is we cached all the HTML on our server using WPFasterCache. And here are the results. So this was the initial result. We were loading in around like 1.2 seconds or something. I need to check the results here. So it's like the load time is 1.063 seconds, but that's without caching. So then what we did is we cached the results and then with caching, we got it down to 1.162 seconds. So we finally came somewhere close to one second load time which Google wants to. So Google is very happy with us. We are using that now. So you used the Google. Yeah. So I'm going to Google like we did this. What was the timing of the one before anything? We never did this in AMP. Without AMP, it was built from scratch. Yeah, maybe we should have. So now our team is thinking to come up with their own MCU. So I know that none of you is convinced that we use AMP, but still I'll tell you what we are thinking to do this. Number one thing that we're doing is the cached plugin. It's called Carousel's Accordion Tag and Sliders. That helps you build your own Carousel Accordion Tags using AMP. Then we already have the beta version of the content from seven for AMP. So what it does is it just removes all the CSS and JS from content from seven and it replaces all the JS and everything. So we are coming up with the compatibility for Ninja, Clarity, Kilden, and Jetpack Forms. Then the op-in form is like you can create an op-in form for subscribe subscription that connects to MailChimp, constant content, and many other providers. And then there's something called a spirit button which kind of sounds stupid because all it does is you click on it and it just counts the favorite. Then there's social sharing button. And yeah, for school to top, AMP has its own component. And then there's something called as AMP reactions. So you can have Facebook-like reactions on your blog post. So we are thinking to have this somewhere in the mid-of-2019 because to work with AMP, it's a lot of things to do. And there's an AMP editor that we already have. So if you give someone wants this, we can give you the copy of the plugin. And what it does basically, it just replaces all the tags, the ING tag with AMP ING. And so here's another interesting thing that AMP did with video. So if you search for AMP YouTube, so there's a component called amp-youtube. So what you do there is nothing. You just give them the data video ID from YouTube and it renders the YouTube video for you in the AMP page. So what all we did initially was we went to YouTube, put it on the amp-youtube button, then took the iFrame amp-youtube code and then put it out over here on your website. All of that is gone. All you need to do is use amp-youtube. But again, if you use amp-youtube, you need to have the amp-youtube.js button. So yeah, that is something that we are still working on. We thought that Google would launch it within two months. Yeah, so another amazing thing that Google has come up with is something called as AMP Stories. So just like you have stories for Facebook, Instagram, Snapchat, it's all proprietary to the app that you're using. So now Google has brought it out in the open back. So now you can have your own stories on the back. So this is one story that people have come up with on Princess and their whole wedding, the A to Z then. So this is a video of how Google wants to use AMP. So there was this Stanley Cup that was going on. So if you search on Google, there is this story. And all the stories come with this kind of icon and you click this and these are the kind of stories that run here. So this is something really amazing that Google is coming up with. And this is going to be a new SEO thing that is going to protect the market soon. So do you know when that's going to happen? That was the exact question that I had for the AMP team and the AMP brochure. So here's the thing why it's not happening right now. It's because it's like, if you know there's this job experience circle that keeps on going, you don't have a job because you don't have an experience, you don't have an experience because you don't have a job. So that's why Google is stuck up right now. So they don't have enough content to crowd. So they cannot show the stories. And they cannot show the stories like that. So the more content people will create, the more pages or stories that Google will have to crowd. And the more they crowd, they come up with more reasons. And so they have already started doing that with a few news companies. I'll just open it up in my simulator. So if you search for Washington Post, you can see something called as visual stories from Washington Post. So there are the stories that are happening. So you click on this and the AMP story comes up. So it really is more for content providers and less for product. No, I don't agree with you on that. Because we have, so that's another thing that I want to talk about is that the moment we saw about AMP stories, our team started working on a product where you can build AMP stories just by drag and dropping. I don't want to do it here because it's kind of a commercial product and WordPress is more of an open source. So it's kind of unprotected. But if you want, I can show it to the person. But if you suggest an interesting restaurant, it changes its special menu every day. So what they can do is they can have this whole story created on their website. And they can have a very small link, a little link. And they can have it like today's menu. Just scan the QR code. And the special menu comes up straight away. They tap through the menu. So these are the, so another good usage of this is if you want a blue apron. So blue apron, it has, it deals with the whole kit to prepare the food. So you just have the QR code on your kit. You just scan it and it just gives you the steps. You can just tap, tap, tap. And you get the whole recipe on your phone. So there are some good, but it's more for affiliate marketing because now what Google has done is you can include ads within your app store. So I think Washington Post did that. It's on this story. It's not on this story, but Washington Post has a story where they, but what app store does have monetization capabilities inside it. So you can put your ads within app store. Yep. Are the AMP tags cross-browser compatible? This is a Google thing like Safari and, you know... So what, so if you know something about JS these days, there's something called a shadow node. So that sits above the dome. So with HTML5, you can create your own HTML tags. So what Google is actually doing is it's creating its own tag. So if you see, so this is a website that we've been, and it's super, super quick. So if you see this image, I have just an inspect element on this. So here is the AMP ING tag. So what Google is actually doing is inside the AMP HTML and AMP ING tag. I'll just zoom this for you. So it is putting an AMP ING tag inside. So this is how Google is doing. And you can see all the stupid classes names, Y, Z, P, J, M, S, A, S, B. So this is how we just... And all your CSS needs to go inside this, this tag tag. So in this instance, like, Google is telling us don't use it. Yeah, so it seems a lot like a logic. Whereas you're loading... I mean, because theoretically, right, you're just loading in the JS files that you need at page load. Yeah, but here's the thing. Google is smart. They know that people are learning to use their browser. So if you see that, each and every attention that Google is using, they already have cash on their browser. Yeah, so you don't have to do that crown trip all the way to Google Server to bring on that JS file. So this is how... This is the style AMP question. Here is all your CSS goes. So you can see this. So here we had another issue. We named a class called A, and there is an A tag. So there was an issue that we gave. So then while we were doing a reject replacement, we said that PHP 5 don't use this class name. So here is all the SOE that you can see. Yeah, on the base, like whose reference is that? So here it is, like, .o space u m s l i. And then you also need to minify this. So if you are using something like, like sass, where you can kind of monitor all this thing, so it can really become helpful in post times. So you can see .u s space s 3. So these are the small class names that we used. So when we built our style AMP, if I can, I will just walk you through the backend that we have. Yeah, so our original CSS is not the one that you are seeing here. It's completely different if I can. So this is a CSS over here, and it does not have anything like... So these are the class names that we actually have. It's like .amp.img over here, feature image selection. So what the PHP code does, is it takes this type of CSS, it does the rejects, and then it gives back to the style. So it gives back to this tag over here. So this type tag that you are seeing, this one, it's being converted on runtime. And then we cache this. So it's too much of a load. Yeah, yeah, just one second. So that's... I don't know what kind of... Yeah, that's what I wanted to know. Do you feel like it's worth it? That was a lot. Well, when Google decides it's a ranking factor. So here's the thing. If you're not motivated to do something, Google comes, Google tells you only one magical word, and thank you. Exactly. And people just run behind it, like anything. So I have a question though. I thought when I first heard about this, it was all about mobile. So what happened? Why was I hearing that? That's technically what it was originally for. That's what the name of it is. Even if you search on Google or something, I search for it. And you can see that you have all these things going on. You can see CNN is on there, and you see it's on there. Because initially it was not for the general public. Initially it was only for publishers. And Google was exclusively with publishers for like two years. And then it came to the general public. It is an open source project. You can contribute just like you can contribute to WordPress. You can contribute to MHDML. Yes? Hi, sorry, we're going to wrap it up here in the last session. If a project looks like one page, one page will be in MP, and another page on... So the reason will be just normal HTML of this. Will there be any conflict? No, it's such that the other page won't have this lightning bolt icon if someone searches it on Google. So if you see this, when you click on this URL, you see the speed that it's loading on? It's because Google basically caches your entire page. This thing is actually not being served from CNN website. It's actually being served from the Google's cache. And Google has got servers across the group. So what it does, it takes... So basically it takes away your pain of using the CDN. And it mounts it on Google's own CDN. So people from anywhere around the world they just find the person closer to its server and it serves from that server. So in fact it's a good thing. You just need to have that kind of obsession for speed. You need to be stupid enough to... It pushes you to work within restrictions. Because it's easy to get light. Yeah, it's actually good. If you see the speed of this website...