Quick Wins with Node and Google AMP

Mike MacCana speaking at London Node User Group in November, 2016
353Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Google's Accelerated Mobile Pages (AMP) is a subset of HTML designed to load as quickly as possible. AMP pages keep your users happy, get you higher in search engine results pages, and related features like structured data can get you right to the top. In this talk, Mike MacCana shows how to implement AMP into your websites with Node.js.


Transcript


[00:00] [music] [00:05] If you want someone to verify the actual legal entity that controls your website like a whole bunch of these people have, then we do it 40 to 500 times faster than anyone else. We do very, very fast verification of legal entities. We have a blog. We post on Hacker News a lot. That's basically how we get customers. [00:26] This is really a kind of technical story about some stuff we did that helped out with that. Basically, we write a lot about DevOps, InfoSec, and just general Web dev type stuff. The blog is a way we get customers. [00:40] Google has this thing called AMP, accelerated mobile pages. The interface is only for mobile devices, but it affects other aspects of Google search. I'll talk about that in a sec. AMP, right now, looks like this. You search for a thing, you see a carousel of stories from different websites. You have a bunch of content. [01:01] If you scroll up, all this content is actually on google.com. It's being delivered by HTTP/2. I don't think I said HTTP/2 correctly then, I'll say it again. It's quite hard to do at that speed. It's Google's own CDN. It's a cut-down version of all these pages. I'll explain, technically, what's actually involved. [01:21] Requirements for AMP. There's a few more than this, but this is the guts. A single HTTP request to load the entire page. That includes all the CSS. There's two ways of having your CSS in a single request with your HTML. You can either in-line the CSS, or there's, in HTTP/2, you have a header which actually specifies the CSS at the page. [01:42] Google don't support the HTTP/2 header yet. You must in-line the CSS as an in-line style sheet. It consolidates DOM changes. If you're a front-end person, you've heard about this thing called FastDOM, which is rather than make the change, do the calculations, make the next change, recalculate, make the next change. [02:00] FastDOM consolidates all your DOM manipulations on the front end into a single operation. Then does all the recalculation at the end. [02:10] It's a really, really quick way of having stuff move around the page. It has the concept of viewpoint-based pre-rendering, which means like stuff you are actually looking at that's in the window when you load the page is actually prioritized. There are extensions that load things like analytics and add support, etc. [02:34] If you run a startup, you're probably using mixpanel. Mixpanel doesn't work, sorry. Everyone else does. I no longer use mixpanel because I wanted AMP, and what the value mixpanel was providing wasn't worth it. [02:47] A lot of people who talk about AMP, a lot of talks you read online say third-party JavaScript isn't allowed. It actually is allowed. It's only allowed inside iframes. The idea is that you can't have some random script injected doing a document.right injecting a script tag into the page that blocks rendering of the rest of the page. [03:08] As you said before, all this stuff is in cached on Google CDN. Google actually ends up with the hits. Also has an amazing content delivery network. I'm old. This used to be called Geo caching when Akamai did it. If you're in London, the content comes from a London server. [03:26] Since then, a whole bunch of nerds who like hiking use the term Geocaching to mean going out into the woods and finding presents. If you're a millennial not Geocaching, but basically finding local servers. [03:37] [laughter] [03:38] Does AMP actually work? This is basically a content ripped off from Malte Ubl's talk at Google I/O. Mean load time for an AMP page is 700 milliseconds, which is awesome. [03:47] The worst case scenario, pretty much nearly every site loads within eight seconds. That's covering 99 percent of websites versus non-AMP pages, 22 seconds. An eight-second web page is slow and awful, but 99 percent of pages fall under this. This is the worst case scenario. [04:07] AMP was live on 460,000 domains. It's growing logarithmically. You'll probably see in that Google I/O was a few months ago now. It's probably more than that now. [04:19] What do you lose? Ability to do third-party JavaScript outside iframes. There's a reason iframes are a big deal here is that -- and why they use iframes for third-party JavaScript is you have a smaller DOM to manipulate. There's also security in sandboxing concerns. Also, iframes can go off and become another thread in the browser. [04:39] You get support for some analytics, better tweets, Facebook, and various UI components in AMP extensions. You load the one AMP JavaScript file. There's extra AMP little bits you can have which say, "Oh yeah, I support a particular analytics provider, maybe five or six different analytics provider." [04:56] The event will be recorded once by AMP. Then be sent off to all the different analytics providers you were using, i.e. rather than five things recording events, there's one thing recording events. [05:08] Things like forms just don't work right now on AMP. They're coming soon at the...It's actually moving really quickly. I'll upload this presentation to GitHub. Six months in the future, someone will see the presentation and complain about this, because this will be out of date. [05:21] It's moving very, very quickly. It's a very, very cut-down version of the page, minimal styling, no third-party JavaScript. The analytics are done by the AMP JavaScript, not by the normal kind of mixpanel type JavaScript. [05:40] AMP and SEO. AMP is not a ranking factor right now. That's confirmed by Google people. It's not used to calculate the page rank that Google uses to indicate your position on the search engine results page. [05:55] However, page speed is a ranking factor. AMP can get you, the way the Google say it is, if you manually tune a web page, you will be right at the front of that race. However, everyone using AMP will be right behind you. Most websites are way, way behind that. [06:13] It's not as good as manually tuning a site, because you're obviously more aware of your own site's performance. However, AMP is really kind of an embodiment of a lot of best practices, can get you to fast really quickly, and fast is a ranking factor for Google. [06:32] Of course, AMP content is at the top of the search engine results page. The only way you can be in that carousel is if you have an AMP page. There's some stuff here. Fast content is better for users. Somebody manually tuning a website, that's awesome. You get that fast content is great. [06:52] Google care more about fast AMP content right now on a technical level. If I have a website that loads in 06 milliseconds, manually tuning in one that loads in 07 seconds, manually tuning the AMP. The AMP one will appear in the search engine results page in the carousel. The manually tuned one will not. [07:12] Whether that's good or bad is a conversation for another time. This is simply how it is. If you depend on people viewing your content to pay your rent, as I do, then AMP is money. By having your content available in this format, you will get more viewers. If your rent is dependent on that, then you will get more money. [07:34] If you're using Ghost to do your blog, just keep Ghost up to date. I think Ghost even keeps itself up to date. Don't do anything if you're using Ghost. Ghost, already, is kind of here. You see you have Ghost is from London. [07:45] Ghost has AMP pages built into it. I don't know. For me, writing a blog is a job interview type thing that anyone should be able to do. I just generally like my own blog, because it's easy to make one. It's probably more hassle to modify my own code than to modify someone else's. [08:07] It's simple. It was using a custom-built Express blog. Express lives on node. Express is pretty awesome. Express allows us to have multiple different parent templates. The thing that says the .type HTML and HTML all the rest of it, we can actually substitute that out with HTML, space, emoji thunderbolt, which is what AMP uses to actually indicate that it's an AMP page. [08:34] We can also substitute out our really extensive collection of analytics and tracking things with something that doesn't have any of that really easy. It's just layout equals in Express. [08:45] Also, Express has injectable middleware and happy has plugins, which are the same thing. Rather than just doing res.render, what if we could just do res.render AMP? That didn't exist a couple months back. [09:01] It would be really easy because, of course, node has the best service-side DOM implementation. To take that tree structure of elements that we're about to send to the client and modify it, turn it into AMP. [09:16] This is the 15-minute talk, and we're going to make it real short. We did that. There's a thing called ants in the trunk. If you're somebody who remember House of Pain, awesome. Also, node AMP was already taken anyway. It's a node module. [09:33] It's of Express middleware. It does a bunch of stuff. This is actually real code. This is actually the front page of setsimple.com/blog. All it does is a res.render AMP. [09:47] Here's what it actually does. It takes the existing CMS, uses an AMP.type with embedded minimal styling. It's that HTML, space, emoji thunderbolt, none of the trackers, none of anything else. [10:04] We convert image tags into the Google-specific AMP image tags. AMP images which mandatorily have to have height and width. The browser can work out the aspect ratio of the image. [10:19] If for example, one of you load theverge.com on a mobile device, if you look at the non-AMP page, if you have like an iPhone or something, you will see the title of the article. Then that will suddenly move down, because there's an ad that's been inserted. Then you'll see some other stuff. [10:39] AMP doesn't remove ads. It just basically makes sure that every -- not basically. It makes sure that every image and every video on the page has a defined aspect ratio, so text never moves around the page. [10:51] Part of that is mandatorily requiring height and width. You can obviously resize images as you want, but it needs to know what the resolution those images are. We'll set the media sizes automatically. [11:02] SVGs actually have a size. I didn't even realize this. I thought SVGs were like measured in some kind of arbitrary unit. Apparently, SVGs have like a pixel size, which is weird because they're vector. They do. [11:12] We actually have manual overrides for SVGs. You will be able to see into the code in the previous page that was an image overrides variable. That just specify height and width for things that match particular names. [11:25] Obviously, we'll cache the hell out of this. We're no longer going to look at every image in video for every request. We'll just sit there and happily cache it the first time. Then obviously just sits in memory nice and fast the next time. [11:38] We'll clean out any in-line styles as well. Weirdly enough, we'll load like the markdown converters that you find on NPM. The things like tables, they start injecting like style tags, which is weird. We want to get rid of those. [11:55] We don't change anything on our backend. Res.render just becomes res.render AMP. We're still using our express preferred templating language for Express, which can be whatever we want. We're still using our same logging engine. We didn't have to modify anything. We use this introduction as of about two months ago. [12:14] That's awesome. People can go and search for content. They'll be right. We will be there in that carousel against a bunch of stagnant 20-year-old companies that haven't changed their tech in 20 years, like Symantec and GoDaddy. Doing interesting relevant stuff on telling people how to configure their TLS setups, talking about cipher suites, and cool new safe ECC curves. [12:37] Thanks. Hopefully, that's useful for you. I will tweet links to all this stuff now. It was super quick but I hope you will find it useful. I hope you will turn on AMP, and get yourself on the front page of Google. [12:48] [applause] [12:48] [music]