 Komen, saya bukan begitu banyak perempuan, tapi saya akan bercakap tentang perempuan-perempuan selera ini hari ini. Jadi, saya akan mulakan dengannya. Apa adalah A&P? A&P adalah teknologi baru yang dibuat oleh Google. Ia sekarang dalam projek open-source. Jadi, anda mungkin kata Google adalah perempuan yang besar. Tapi pada tahun lalu, projek A&P adalah lebih daripada 70% daripada orang di luar Google dan lebih daripada 20% daripada orang di luar Google. Jadi, ia menjadi lebih daripada projek open-source daripada mengawal organisasi besar. Dan juga, perempuan A&P akan keluar segera. Jadi, ia bukan hanya pada Google. Jadi, saya akan berikan contoh tentang bagaimana ia berfungsi. Yang terbaik adalah menunjukkan kepada anda. Biar saya lihat. Jadi, A&P, seperti nama saya, adalah perempuan selera. Dan itu bermaksud ia hanya berfungsi apabila anda berada di mobil. Jadi, kita akan mulakan dengan iPhone. Dan kemudian anda mencari, kita akan mencari, dan anda dapat keadaan keadaan keadaan keadaan keadaan keadaan keadaan keadaan keadaan keadaan keadaan keadaan keadaan. Ini men涉atkan bahawa esta adalah perempuan A&P, atau perempuan A&P. Apabila anda mencari, perempuan akan pulang dekat sebentar. Satu hal yang baik adalah anda dapat pulang dari perempuan ke perempuan, oleh mengeruskan seperti ini. Jadi, anda mencuci perempuan A&P dengan di sini, dan anda menuju dari perempuan dan perempuan dari perempuan terhadap anda. Sebenarnya, kita akan menuju ke perempuan. Dan kemudian, kita akan melihat perempuan yang lain, kemudian anda akan menerusi. Kami akan menerusi dan menerusi. You can just scroll as you would occur a cell like this. It's very cool. But it seems like BBC has quite a number of A&P BTS for this result. So it's showing up. But it's generally a bit more varied. Okay. Share. Or not share. I think it's present. Okay. So another feature why someone would be interested in A&P BTS is that it's lightning fast. It's instantaneous. The moment you see the result and then you click on it, it loads instantly and you just wait for the page to load. So there was a survey done where it says about more than 50% of the user will leave your website if it takes longer than 3 seconds to load. Later on the next page, I'll show you that for companies such as Amazon, Walmart, Google, load time does matter. And the faster you can make your site, the better business results you can get. So how are A&P BTS so fast? And this can be answered with caching here. So you can see when you enter your search results, you're here. So this is when the search results come up. Let's say you type one news. And then the search page is here. And while you're looking at the results, like thinking of what to click, it preloads, the browser preloads the A&P BTS and then it pre-renders it in the background. So once you've decided on which page to go, the content is ready and you can view it straight away. Then you might ask if I'm loading so many pages and won't it like hold my data and make my mobile data explode? And the answer is no. And the reason is because the cache only preloads the first viewport plus a little bit extra and it only loads necessary access and it doesn't run any custom JavaScript on the page itself. So that means we can preload maybe 5, 10 pages while you're looking at the result and you don't have to worry about your data exploding. So how do you get this technology implemented on your website? And this is done through three components. The first one is called the MHTML which is special syntax that you need to write to allow for the page to be validated and enter the cache. And second one is called AMP JavaScript which is sort of like web components where you can't really write your own JavaScript but you can use pre-written JavaScript modules that is written in the AMP project and apply them to your page. I'll give you an example later. And last one is the AMP cache which I have explained earlier. So how are these three? Why are these three necessary and how do you actually implement them on top of the current stack that you have? So let's start with the JavaScript option. So over here, you can see a very basic AMP page and it's very similar to a normal JavaScript HTML doktai except that now you have the lightning box sign here, the char set, the canonical, the viewport and then as well as the boilerplate code. So it's really very similar to how you normally write your HTML code. It's just that now you have to also comply to special AMP syntax to be valid for AMP. And next, you can add your CSS in this style text. So one limitation of AMP HTML is that you cannot... you have to write all your CSS inline and it must be below 50 kilobyte in size. So okay, there's a lot of things going on as if there's a lot of rules that are in place and these rules are in place so that the browser can cache it properly. So let's say if we have a website that has 200 kilobyte CSS file and then you have to preload that, so that would be a problem for the user who needs to spend more while they are to get the size loaded while the search is going on. Even if the user do not visit the site itself. And next is the JavaScript which is the AMP components. So one example I have here is the cursor. So what you have to do is add in the JavaScript in the hate and after that you can just use the component in the HTML. So it's really quite simple. It's like using bootstrap or using any web component itself. So it's like... you just have to reskin it to suit your need and then you're good to go. And after you have built your page in the AMB HTML or AMB JavaScript and you validate it to ensure that it's valid and after it's valid you can use these tools here to check if you have valid AMP. Basically I guess I don't want to go through each one of them. I can give you the slides later. So you just need to make sure that it's validated to ensure that you are compliant to the rules that has been put in place. And next after you've built the page, so how do you actually get it seen by the crawler and how do you get it published is through linking it up to your canonical pages. That means let's say you have a website and it's talking about... it's a full blog for example and you have an article that you write about maybe food in Singapore and then you want to make an AMB page out for that version. So how do you link it up is that you add the mHJML link like this in text to your existing code and then in the mPage itself you direct the canonical tag to it and that's all you kind of need to do. And so in summary of how you get AMP on your website is just to build the AMP compliant page link the page to your canonical and then get it cash. So once you do all this you can get the instantaneous speeds that I showed you previously. So actually it's quite simple, right? But maybe not so much also depending on your stack. So how do you actually build this AMP compliant page it's up to you because in the end what you need to do is once the crawler reaches your site it needs to see a valid mHJML code. So let's say you're using a view or angular or react or ruby or whatever you just need to make sure that when the URL is hit it is valid. So any way you want to do you want to write it page by page and hosted it on S3 and then expose that URL that's fine as well as long as the end result of whatever you've done result in a valid code then then it will benefit from AMP results AMP search results. So there are some pros and cons of using AMP we can talk about the pros first the faster page load I think you all know better SEO is another result of better page load and Google gives a bit of stronger SEO to AMP pages just because they can and also they have AMP New Carousel which is only for AMP pages so if you have a non AMP page and then you will not be on that carousel so you cannot miss out on a little bit on that aspect but for cons sometimes depending on how you have implemented it you can have a bit of fast-in, fast-out if you can enter a website very easily you can also exit very easily and also maybe depending it depends on your site itself if the pages that you implemented your AMP code on is something that maybe it's easy that doesn't have a good linkage to the rest of your website then maybe you might have higher bounce rates but in the end it really depends on on a case-by-case basis so you have to see you have to do your own experiments to kind of gauge how it will benefit your company and some of the challenges my face and my company face when we implemented this was that the first channel was static layouting because you don't have you cannot get your images to be dynamic in terms of aspect ratio what it means is that the position the size of the image and the aspect ratio must kind of be known beforehand or else you might risk having some empty space between your images and your content and this is to cater for the pre-loading that that that the cache the cache do for you and CSS is in line a size font so if you have the imported layouting components where you import the whole layout component for every single sub-component then maybe you cannot do that for m-pages and lastly is no custom JavaScript which which means you need to be little bit creative I saw a video where the developer was using the accordion component to create like a drop-down so even though this accordion component is only used for as accordion but you can reskin it to be more like a component that you want okay and then some of the useful links on the project that you can use to kind of validate a code and build and get some guides on how you can build proper m-pages and additionally no B2C page is complete without analytics so m itself has good support for Google analytics as well as external analytics if you have your own analytics engine running you can hook that up as well and as well as A-B testing if you are working with a lot of if you're working in B2C and you implement A-B testing there's M experiments that it comes in build and relatively easy to implement yeah and that's about it any questions on EMP okay thank you