 Okay, so this doesn't work. Oh, you have HDMI. Okay, yeah, it'll only go P28, so yeah, okay. I need to double click, double click like that. I need to be blinking through here. Okay, no time to blink through here. Okay, do you remember the rule? Little grammar from the rule. B200. Okay, that microphone's working. Okay. So if you say B200, you have HDMI. Maybe I'll go borrow that. Sorry, we're just waiting for our adapter to come along. Hi there, how are you? Hey, how you doing? How are you? So what we're working with there? So we need to begin to USB 3? USB 6? Yeah, USB 6, yeah. Okay, no worries. It's the latest, thank you. It's too fast. There we are, try that for me. Can you bring it back to me? Okay, where are you looking? Just in this general weird area. If not, find out if the rule's not there. Okay. Do you have any sound to your presentation? Sorry? Do you have any sound to your presentation? Yeah, yeah. No, not any sound. I'm just using the microphone. Okay, yeah, no worries. Just wanted to make sure. It's working. It's working. What, immediately? I'll have you come. There we are. Thank you. Sorry for the wait. No, not a problem. Yeah, if you press A, it should turn this light up there. Okay. You're very welcome. If there's anything else, it's on the other side. Okay. Oops, sorry. A, B and A, B and A. So... Very good evening, everyone. I can see a couple of familiar faces here. So, I'll be... Am I audible? Yeah. So, I'll be talking about accelerating mobile pages for higher performance and higher engagement. And during my talk, I'll be using some of the screenshots. So, if at any point of time you feel like there is some readability problem, you can ask me for a while and we can connect on it. Who am I? My name is Surbhi Sribar and I'm working with Strigian Technologies. So, Strigian has its headquarters back in India, New Delhi. And we have colleagues working all over the world. I'm working with Strigian as a Drupal developer. And right now, I'm working as a backend developer for Drupal 7 and Drupal 8. On Twitter, I go by the handle, Surbhi Sribar. And if you want to locate my profile at Drupal.org, you can either search my complete name or use that link over there. So, before I begin, anybody from the crowd who has experience working with SEO? Great. And performance optimization? Great. And how many viewers we have today? I'm asking because the session is a combination of all of this stuff. So, I'll be talking about what exactly the problem statement is and how we can solve this by using AMP. So, AMP stands for Accelerated Mubile Pages. And I'll be talking about how AMP page is different from a regular HTML page, how the ranking of the site is improved, I'll be showing steps for local installation, configuration and validations, some matrices about performance improvements, then benefits and decisions about the AMP page, some concerns, possible solutions. And I would conclude this session with some of the recommendations as per my experience on working with this. So, if you see there, this is a user who is trying to access a page, a mobile page specifically, and that page is not loading. So, in such cases, when we visit a site, we wait for let's say 5 or 7 seconds and the page does not load, what do we do? We lose interest, right? And we may not ever think of visiting that site again. So, this is the actual problem. At times, we end up building websites that are really good to see, but they fail to engage with the user in a good manner. And as a result, we get away bad in terms of revenue generation. So, if we see some statistics, if a user is visiting a site 50% of the time, it's likely that he's encountered with unplayable videos. And it's likely that 13% of the time, he is redirected to home page and not to the page which he is looking for, actually. 46% of the time, the user is just sitting ideal and waiting for slow pages to load and others account for 26%. So, if you see a major portion, a major percentage is waiting for slow pages to load. Yeah? In 2015, Google launched the AMP project, also known as Google AMP. And in 2016, we were able to see some of the search AMP results in Google search. So, how is an AMP page being searched? What is happening behind the scenes? So, if you see on the screen, there is a page and a user has entered some keyword over there. So, if you see, there is an AMP card which is presented by this symbol, AMP. This one over here. This is the AMP symbol. So, what is happening, actually, is when a user search for an AMP page, when a user search for a keyword and its AMP page exists, then Google would quickly load this AMP card and present it to the user. The user would click to this link and he would be taken to an AMP page. It has a positive effect on the SEO of the site as well. So, this was achieved by a module called AMP, thanks to the committers and the contributors. There's a list of a lot many people who have provided this great stuff to us. And this module has token and C tools as dependencies. It's compatible with Drupal 7 and Drupal 8. And you must use this with PHP versions above 5.5. If you're using lower versions, then you might end up with security issues. So, what are the main components of AMP? It has got three main components. The AMP HTML, AMP CSS, and AMP JS. Let's take them up one by one. So, AMP HTML, a lot like a regular HTML which loads in every browser. To metadata of that regular HTML, we have this AMP metadata which is being attached. And supposedly node slash one. It's a regular HTML page. Then its AMP specific page would be distinguished by this query parameter which is being attached. And canonical, as you must be knowing, it's for webmasters to distinguish between the primary content. So, there are no content duplication issues. Since AMP HTML is different from regular HTML, we have some AMP specific tags. So, the image tag which is the regular HTML tag gets replaced by its AMP specific image tag. And ampproject.org has got a lot of documentation regarding this. So, if you want to dig deeper, you can check it out at this useful link. Video tag gets replaced by AMP video. Audio tag gets replaced by AMP audio. Iframe gets replaced by AMP iframe. And there are some other useful AMP tags like analytics, AMP ads, and pixels. So, AMP pixel is used for tracking the page visit. Now, coming to AMP CSS. So, AMP allows only for the inline CSS. And AMP does not allow a lot. You cannot go on writing long CSS. It has a limit to it because the bigger CSS does not get validated. Now, what is the reason of not allowing bigger CSS? Because the main idea of AMP is to keep the pages light. So, it's just restricting us to write only 15 kb of CSS and not more than that. So, AMP.js. AMP does not allow any author or third party.js. Because again, if there is any third party.js, then in making calls to that, it will take more time for the page to load. And the main idea behind AMP would be defeated. So, AMP, if you want to use any third party.js, then AMP provides HTML tags. You can use those tags. And at the runtime, the JS, it would get converted to interactive elements. You can also integrate Twitter widgets, Facebook widgets together, tags specific to it. And AMP cache. So, AMP cache facilitates the quick page load. So, a page which is validated from AMP standards would only be cached. And as a statistics, we have seen that an average of four times faster speed is detected with AMP cache. So, how AMP does all of this? So, AMP works with AMP library, module and theme to handle all of these things collectively. What AMP module does? So, AMP module provides with a view mode. And that's the AMP view mode that is provided for every content type, which is there on your Drupal site. And you do have the privilege to make it on for specific content types. Then it also provides the query parameter that gets attacked. That is question mark AMP. And it also provides the field for matters. So, what field for matters would do? The field for matters will take up the content and convert them into the AMP compliance, compliance standards. Then AMP theme. So, AMP theme has two parts to it. One is the base theme, which contains the must-have, the mandatory things. And over that, base theme is an example sub-theme. And if you want to theme the site specifically, then you can also design a custom sub-theme taking the help of the example sub-theme. That this example sub-theme ships with this AMP module. So, what the AMP library does? So, for example, we must have seen there's a body field in a Drupal content. And in that body field, all the fancy stuff can go in, like the share wedges, the embeds and everything. So, when the user saves this content and AMP module is being enabled, so it's the responsibility of the AMP library to check this content and convert the normal HTML tags to the AMP-specific tags in the body section. So, just quickly going through the installation steps. So, this module can be enabled using Drush. And you have to enable AMP module, AMP sub-theme and Composer Manager. So, Composer Manager is needed to manage all the dependencies which are needed by AMP. After you have enabled this module, you can go into this link and check. You can check if library is working or not. So, this is a picture of me enabling the AMP module. And you can see that the Composer Manager has installed all the dependencies. Then you can go to the slash Composer Manager link and check for all the greens to see if all the packages which ship with Composer Manager are good to go or not. Once you have installed it, then you can configure this module. So, here you can see that there is an AMP view mode which is being turned on for this content type. And these are the fields like header, image, body field. So, these view modes, they would provide this field for matters. As you can see, AMP image is a field for matters which is provided for the image field of this content type. And after configuring this, you can see, you can view source of the page and see that the image tag is being converted to AMP-image. So, this is an AMP-specific tag. Let me show you quickly. So, this is a Drupal 7 fresh installation. And I have configured, I have created an article AMP demo and enabled AMP-specific tabs on it. So, as you can see, this is a normal page and its AMP-specific page is this. So, you can see there is a difference in the theme. Why so? This is because the AMP theme that has only the theme which is default theme which is shipped with the AMP package that has only the basic standard regions and not all enabled, you can enable them. And if you view source of this page, then you can see the AMP image tag. So, while working with this on local machines, you might want to debug it a bit and validate if you have successfully created an AMP page or not. So, this is because validations have to be passed for an AMP page to be able to search on Google. So, for this, a Chrome extension comes and you can use that Chrome extension that's AMP validator. And in case all the validations pass, then we are presented with this green symbol. And in case we have errors, then the AMP validator would show a red warning sign. For example, this is a screenshot of a page which had errors. So, if you can see, there is an issue which has been listed, the line number at which the issue exists. And you can see there is debug and learn more information. These learn more information, take you to the documents and to more of debugging information that can help you to solve these problems. Then coming to some of the matrices. So, as you can see, this is a matrix of performance increase. There is a 98% increase in the performance. So, this was a matrix of just a very basic page which I created for demo. The complex page would still have some other matrices. So, this is just a basic matrix. And you can see like perpetual speed index which is targeted to be 1200 or below. That's nearly 2397. So, it's a really improved performance. Then input latency which is targeted to be 15ms. It's showing 16ms. So, it's a good result. The lower the numbers, the better we are. So, it's basically the target should be less than this. This 1, 2, 5, 0, it's a must to achieve this. If we are achieving less than this, then it's better. So, basically this is a very basic page. These inputs might vary when you get a complex page. Like a page may have carousels or a page may have more HTML. So, these inputs will vary with that. And there are other audits like Metatag is used properly or not. Then we have distinguished element names. Then elements contents are described well or not. All these are the audits which are being presented by the validator. You can inspect your validators and check. Then talking about what decision to make for an AMP page. So, while I was working with AMP, supposedly there is a site. I'm talking about a desktop page and it has got a menu. Then it has a login block. So, if you want to convert that page into the mobile specific page, then it's completely a business decision which we might take that would on a mobile user would still be using that login block and should be considered keeping it. Because the main purpose of an AMP page is to keep the pages light. So, we would want to limit, we would want to restrict the HTML of an AMP page. So, we should make these decisions and what are the absolute critical components that should go on for a mobile page. Apart from this, we should also take care about a page that it does not have any third-party libraries, JS or any third-party CSS because that would not work with AMP. So, AMP is mainly for a site which is like a newspaper site or a reading site. So, you may want to give the user a very good reading experience. So, AMP is not for a site which is mainly JS-driven or maybe e-commerce or maybe a site with a lot of checkout and cart functionalities at least. As of now, AMP is only for more content-driven sites. So, while I was working with this and I was checking the issue queue, some people have a concern that there is a query parameter that gets attached to the URL. So, we always want to work with clean URLs when we are working with Drupal because that might affect the site ranking in SEO. But that does not pose any problem because the query parameter is harmless and it can be used easily. Then, some people also report that we have successfully enabled AMP on the site but our site is not getting ranked up in Google. So, for that, you might want to have a look at the validations that if your page is validated or not because if your page is not validated, it won't be presented in Google. And what are the benefits and why is AMP worth trying? So, the benefit is if you are using AMP on your site so your clients would have an immediate benefit. They would be presented with a good reading experience. They would engage well with your site. They would share the content well. So, I think it's worth trying and it really increases the user engagement. Also, AMP comes with the ads and analytics stats so you can track that how much is the page visit and how much is the site getting popular among the users. So, recommendations, as I said, that AMP is for content-driven sites and we should abstain using it on sites which are more of JS-specific or have a lot of third-party elements in it. So, I would like to conclude this session by just listing out these main points that if we have a site which has a desktop page which has a carousel then we should reconsider making that same carousel on the mobile page and we should consider keeping the pages light. Then we should consider not using external JS and CSS and it's again a decision that has to be taken and that which component should go in for a mobile-specific page. I think that's it from me. Any questions? Great to you. You've done it for some content types, not for the whole site. So, there is an option wherein you can restrict the usage of the module to particular content types. You can do that. Well, you've heard enough. So, in Google, you can either have a simple CK editor or we can make some implementations with paragraphs and in this way have pages work that say, because the monies are easy to customize from an editorial point of view. So, in this case, how will AMB work? I mean, will we have specific tags on each paragraph because from what I remember from the module you can enable some content types and some features, but I don't remember anything from paragraphs. So, paragraphs, are you talking about the body field that has paragraphs or are you talking about the paragraphs field type? The module paragraphs. Okay. So, coming to module paragraphs, I have not tried it separately, but for body field, yeah, it would give a body field for matter and not specific paragraph tags. Other questions? Progressive app version. So, have you tried this? Google recommends to use either AMB or use the progressive stuff. Have you had the chance to compare them and see in terms of ranking and... So, would you like to tell how the progressive thing works? Maybe one line or another about it? So, basically, with AMB, you put those tags and Google will recognize how to generate the snippet that you showed us. And in progressive, so you take the size and you change it bit by bit and you make it more responsive and more optimized the same... So, I believe the progressive thing is not something which is specific to Drupal? You could use it for Drupal. I tried it so far with... So, yeah, that's what I'm saying. So, AMB comes for something which is specific to Drupal, yeah? And progressive is mainly of... What I am getting understanding is that it may be something, you know, when you just inspect... the SEO inspection on the site takes this, then all the warnings which are presented may be to improve the speed in the ranking. That's sort of the thing, yeah? It's mostly... I mean, it will cover the chess part and it's not to provide anything to this man. Sure. Progressive web apps, people do they... Yeah, yes, please. All right. Thank you for that. Let's try this now. It's about a week. So, when we shoot images, on the site, it doesn't have a big kind of height. So, obviously, you won't buy it. Quite often, if we use, like, the big model, the image styles is mainly for you or we insert them in my editor, it's also a height limit. So high. So high? So, we're having to use because it functions actually at the height of the image before it gets rendered, Steve, I need to do that as well. You have to work on the custom code as well as using the library. Sorry, I'm not clear with your question. Okay. Steve, I need to work on the custom code as well as using the library. You may need to do the dimensions when you go on the site. So, basically, the custom support for images you're asking? Yeah. So, for images, we can give heighten work and we can also define them in percentage. So, both work. If you want to miss them, I say, instead of my security, you don't want to give a heighten work on the image. It's about not custom transmission. We have that work to get rendered. Do you find that, as well, or do you have experience with it? No, I don't think. Any other questions? Okay. You can look into that. Okay. You can look into the session at this link and you can send me... Yeah. Good question. So, it's a Google product. And it's good for the Google search engine. Yeah. What about Bing? Okay. So, I'm not trying it on Bing. Yeah, that's a good question. Yeah, maybe. Because, like, Google search engines is mainly followed everywhere and more than what Bing is followed. So, it's about engaging the users. So, whatever user would follow more, we should go in with... So, you can send me your feedback at my Twitter account. And thank you. Coming to the camp. So, we encourage everyone to go to this locator in the blacksmith and Google. Which is around... So, we have to go because we are sponsored by Fonda. That's why we have a hundred pounds behind the bar. So, we do go and grab some free gear. Yeah. A thousand pounds. A thousand pounds, yeah. Yeah. See you there. That's the old one. That's the old one. Okay. I guess you'll take it back. Yeah. W? Hi, we are. Thank you. Right, you just slide. I didn't try it on the last session. Yeah, I should have. Yeah, so basically that was a demo of the many sessions. Yeah. So, in that case, I think if it's not working with the secret editor in the blog, I shouldn't have... You might want to look into the ALP library part. Because that portion is mainly handled by the ALP library. Yeah. So, you might want to look at some of the open issues or might want to... No, that's fine. I don't know if you had any experience with me as far as your customer care. Thank you for your thought. Thank you. Oh, there was some... No, it's not him. That's the one. I had him fall in love with it. Okay. Yeah, chances are they've clipped it to their top and they've walked out with it without noticing. So, it's just a hunt for the other person. What? It's just a hunt and we've got to hunt them down. What was the person who flew it, actually? Maybe a small Indian woman? Indian woman? Yeah, I think she was Indian. Now you want to check in ELG15. There's an Indian woman in there.