Accelerating into the Mobile Future with Ben Morss

Transcript

Ben, it’s great to have you on the show.

Thanks. It’s good to be here.

I heard you speak at the Pubcon Conference and you keynoted there talking about AMP, Accelerated Mobile Pages. I thought it was such a great talk and I wanted to share your message and the message of accelerated mobile pages, AMP, to a larger audience here. If we could start off by explaining what is AMP?

Thanks for the kind words. I’ll be speaking again at Pubcon in Florida because it was so much fun doing it once in Las Vegas. It was a good crowd. That was a nice environment and people were friendly and all those good things. I’m going to go back. To your question, what is this AMP thing? AMP is often misunderstood because people think it’s one thing, actually it is often something else. We can start with the beginning. AMP is a way of making webpages. Any AMP page is a web page. AMP stands for Accelerated Mobile Pages that in fact work on all devices.

Let me go back a little bit. It was created in collaborations between Google and a bunch of publishers who wanted to get their webpages with their content to look better on mobile devices. That was the initial idea, but then people realized it was useful for all kinds of different applications, from eCommerce to travel to recipes to various kinds of content and basic interactivity. AMP is just web pages and they work on all devices. You can think about it as three different things. One is that you know HTML is the stuff that makes up web pages. AMP adds new things to HTML. That’s the first thing that it does. HTML was created as a language to describe documents many years ago. HTML tags say things like, “This is the container, this is the paragraph, make this boldface, this is a quote,” things that apply to documents.

The modern web pages have more than just content of this sort. They have things like menus, they have Twitter embeds, they have interactive mortgage calculators and all kinds of things that HTML doesn’t contain. The first thing AMP aims to do is add some of those features to HTML as new tags. This is a thing called web components. There are various things like this out there like Polymer that already exists. AMP is mostly just a version of web components. For example, to make a menu in AMP, you can use a tag called AMP Sidebar that generates the menu automatically. That’s the first thing about AMP. It’s webpages with extra tags added. The second thing is those tags work because AMP adds extra JavaScript to your pages.

JavaScript is the code that runs things on the web. JavaScript makes these web components do their magic. The JavaScript will make the menu slide in and out of the menu. If you’re making a carousel of sliding images, it causes the images to slide around and so on and so forth. However, AMP also wants to enforce best practices on the web for performance, which means speed. It wants to make sure things are fast. One of the things that make the internet slow these days are extra JavaScript that isn’t being used for anything or can be replaced with something else. AMP restricts how JavaScript is used. This has been loosened, but you still can’t just write JavaScript or use any JavaScript off of the web on your site. This makes your site faster because most of the JavaScript comes from AMP, but it also restricts what you can do as a programmer, which makes it in some circles unpopular.

It also restricts how much CSS you can put on your site, how much styling your site can have. AMP has a couple of restrictions that are put in place to ensure good speed. Then finally, if your web page follows the rules of AMP, it sets out. We say it passes AMP validation and there are web spiders out there. They’re looking around the web from Google, from Microsoft, other companies, they’re looking for valid AMP pages. When one of these crawlers finds a valid AMP page, it will then stick the HTML into an AMP cache, which is the special CDN or a special server and data center that will serve your web page faster. It will also optimize it more. They will do various things like the image is smaller and more compact and use modern imaging and coding technologies, things like that.

What happens then is you find your AMP page let’s say on Google.com on a search, for example. Then you’ll probably get it from Google’s CDN, which means it can get loaded much more quickly. In fact, if it’s the first search results, your webpage will get preloaded in an iFrame invisibly. Then when the user clicks on that search results, your page appears almost immediately. Even if it isn’t the first search result, it’s still loading from Google’s servers, so it loads more quickly. That was a long answer to a short question.

That was good but maybe a little technical for some of our audience. Let’s unpack it so that we can understand what is the most important aspect of AMP from a marketer’s perspective. For one thing, it’s going to make your web pages screaming fast, assuming you implement it properly. What you were saying about Google caching those AMP pages is going to make it even more screaming fast than if it’s being pulled directly from your website. One concern I’ve heard time and time again is, “I don’t want these URLs to say Google.com. I want them being served up from my own website, from my own domain.” What’s your response to that?

People here don’t like that either. That’s a common concern. I’m thinking about what you said over there. That is exactly correct. That can summarize what I said in fewer words that are less technical. AMP makes pages faster. It forces you to be faster also. Then it also will serve pages when they come from search from Google servers making them even faster. That’s exactly right. Sometimes you will see Google.com up there in your URL bar. You usually don’t see this because let’s say you’re on a mobile phone and you are using Google search, you’re still within the search app anyway whatever you do. You wouldn’t see anything special for the AMP. Some contexts though in certain ways, sometimes once in a while, you see Google.com instead of your domain, which is weird and not very nice.

This is a problem when you use a cache or some other servers to serve your content, it must come from there. It has to come from a different company. This may look strange to some people, so they’re working on fixing this very hard. Chrome now has an experimental version, which is called Canary. It has a feature called signed exchanges or web packaging, which fundamentally is an idea that as long as it’s your content, you verified that it’s your content. If it’s served from somewhere else for speed purposes, a browser, if it knows it’s your content, can still display your domain. In Chrome, pretty soon AMP pages and other pages that follow this pattern will soon start showing your domain instead of Google.com. That fixes a lot of other problems with AMP caching as well. We’re hoping that other browsers will follow soon with this idea.

With the new Canary version of Chrome, you’ll be able to see in the location bar the origin and not necessarily the CDN or the caching server that it’s being served from.

That will appear out of Chrome soon. There are various technical things that have to get solved for various sites to use this, but it’s a high priority for everyone involved in AMP because they don’t like the fact that it shows Google.com. In fact, people that work on AMP try very much not to be involved with Google at all. Even if it may work at Google, we try to avoid using Google branding or relying on Google stuff. Google very much wants AMP to belong to everybody to be an open source project. As you may also know, AMP moved to an open governance model. Now, the people that control AMP control its destiny and where the product goes are from a variety of companies, not just from Google.

Let’s talk about open source. I spoke with the person who coined the term open source on my other podcast, Get Yourself Optimized. That’s Christine Peterson. She’s the originator of that term, open source. She’s a cool lady. Just for the layman or lay person’s point of view, open source isn’t about it being free as in you don’t pay for it. It’s free as in like freedom. It’s not locked down. It’s not a closed box, hidden from view. It’s something that you can confirm is not doing anything illegitimate behind the scenes.

The meaning of open source is more or less than anybody can contribute to the project, not just by any certain company, but people can all contribute. In many cases, that also would be people that will decide what your contribution here can be put into this project. They may say, “It doesn’t match what we’re doing with this project. You can’t contribute this.” It’s a fascinating change in how software is made. It’s not that prevalent in all countries, although it’s prevalent now in most countries. When I was a kid, software is made only for profit.

Then there was this guy called Richard Stallman who was working on making a version of Unix that would be free. This seems like a crazy idea to me. He wants the free version of Unix as opposed to cost money. AT&T owns this thing. It actually caught on and when he finished this and called it Linux, it became the backbone of a lot of computers that exist now. Open source is everywhere. It’s a quite amazing idea that companies pay people to work on open source projects. People that are programmers can work on these things to make their name in the community and contribute to these various projects.

For clarity here, you said Linux and you said Richard Stallman. I thought it was Linus Torvalds?

He’s the creator of Linux, but Stallman had this project called GNU, which stands for GNU’s Not Unix. His goal was to bring about Unix all over again all by himself and then to make a new code for it and make it entirely free. Then someone else finished the project and then it became quite popular. This is a little bit of obscure computing history.

Open governance is when an open source project is not being steered by one company. It is a collaborative project that isn’t like Google’s or anybody else’s. Anyone can participate in driving that project, not just participating as a contributor of source code.

I’m looking back now on Google, which is Stallman’s personal site. I remember he made a thing called the Free Software Foundation. That was the idea, free software.

Free as in freedom. Not like free as in, “I don’t have to pay.”

I think both actually.

There’s this distinction that they make. These open source zealots, they make sure that you know that it’s about freedom. That you oftentimes don’t have to pay for software that is open source. Maybe you end up paying for some additional customer support or something like that on top of the free software but free as in freedom, like the free world. I think it gets lost. A lot of people think, “I don’t have to pay,” but there’s another aspect to it that’s important.

Your knowledge probably exceeds my own, but that’s the idea. There are various freedoms that have been defined. AMP is a strange case because Google didn’t start the project, but Google wants to give the project to the community and have people all help out with this. At first, the guy who wrote AMP by himself mostly control the direction of AMP. That has mounted up various product managers plus various people from around various companies who also care about AMP and want to help guide its future.

There’s this concept called native AMP. Then there’s another concept which is used as a WordPress plugin for AMP and have a version of your site that is AMP but not for regular desktop users. It’s two versions of the same site scenario. I’m probably oversimplifying it, but do you want to comment on what these two different pads look like and why you might want to do one or the other?

I think of those things one at a time because they are two big topics. One is the idea of AMP being either paired or not paired. Two is making AMP through CMS plugins like WordPress plugin. I get inspired to speak here. Feel free to interrupt me and told me to clarify things. The first idea is that when AMP was first created, the idea was that you’d make a desktop version of your site, which was normally HTML. They created a different version for mobile devices that was written with AMP. You had one version of the site that had HTML as it usually has been done. The second version has AMP page HTML instead and then if you went to search on a mobile phone, you would then get the AMP version. Publishers that had sites that were slow or hard to look at in various ways would get the nice AMP version on mobile phones and they get the full desktop experience.

This worked out okay. It had some problems as well because you’re maintaining two different versions of your site all the time, which can be irritating. Native AMP, the idea is that you can use AMP for a given web page all the time because AMP pages are responsive by default. The components are responsive. You control the design but you control the CSS, so you can just make your page in AMP. It works on desktop, it works on mobile and it’s simpler for you. As long as you’re not using stuff AMP doesn’t support or don’t require features that AMP would not support because they’re not a user-friendly or not performance, then there’s no reason not to go native AMP for certain webpages.

If you're a user trying to learn how to trust the site and things are just moving around randomly, it feels icky and decreases user trust. Share on X

Do you have any examples of a great native AMP website?

There are some. It’s a thing which has been talked about. It hasn’t been done that much. One site, for example, is that BuzzFeed here in the US has a site called Tasty.co, a recipe site. A single developer, her name is Jessie, made this site by herself in a few weeks and it’s all she has all the time and it works pretty well. There are more out there. I don’t remember these things off-hand because I see these emails fly by at Google here about, “Someone send a native AMP, this is nice,” but I don’t recall them off-hand. In many cases, they’re from other countries where people regard AMP as more crucial because people have either less powerful phones or server connections. There are also some in the US. One of the big growths there for native AMP now comes from various plugins.

There are eCommerce companies that are working on native AMP for eCommerce pages and there’s a new WordPress plugin that has the option to produce native AMP. This is the area I’m very excited about because when I was working on web performance with various companies, you’d see pages that were made by a CMS or an eCommerce platform, whether it was WordPress or Wix or Magento or something else. It looked nice but were very slow because people created these pages by making them in these CMS and adding on various plugins and modules. Each plugin or module added its own code and its own CSS to the site until it became slow and people didn’t even know about it. Many of these sites are pretty simple to look at. It didn’t require a lot of code to run. The AMP plugin makes the pages simpler. They run AMP which means I have much less JavaScript and much less CSS. They tend to look the same but they’re a lot faster. This is a case where a native AMP is a nice option.

What’s the name of that WordPress plugin?

The site is AMP-WP.org. That’s the main site for the plugin. If you’re looking for it, there are a few of these with similar names. I think it’s called the official AMP plugin for WordPress.

Was that the one that automatic work is done?

That is the same one. There are two more out there that are not quite as reliable for making AMP. This one is quite nice. If you’re a WordPress user, you will find that certain plugins won’t work anymore because they use a lot of JavaScript or had too much CSS. It might require a bit of work on your part to remove those plugins and replace them with something else. It does work in many cases. I’ve done this a couple of times. I’ve taken WordPress sites and converted them to AMP. One of the fun things is taking out all the plugins you don’t use and moving all of these things that aren’t useful. Finding that one plugin that may be had a tag on it or an interactive menu that required some JavaScript and then converting that one plugin to work with AMP and then you’re just done.

Then you have a screaming fast website.

It’s nice. To make it this way, it might require a little bit of coding experience because some of these plugins have code involved, but not that much. It’s not a very long process in most cases.

My team is working on updating my StephanSpencer.com website to be native AMP as part of a whole redesign. I’m in this world, I’m in SEO. At the India Affiliate Summit, I was talking about https and how we need to cut the cord and do it, move from http to https. Somebody in the audience called me out and saying, “You’re telling us to do this, that this is good practice but your StephanSpencer.com site is still on http.” That was an ouch.

I see that it’s been changed. I see SSL is on there now. Http/2 is on there too.

It’s going to be so good with the new native AMP version and the design is so slick. I’m proud of my site. The one that’s going to launch here is awesome. I’m so excited about it. I want to be able to talk about this on stages and say, “You need to go AMP because you need a screaming fast website, not just for SEO but for conversion. You will tank your conversion if your site is slow loading.”

It tends to be. It doesn’t always improve these things but often we see results that are pretty shockingly impressive for bounce rates and conversion. It depends on who you are, but the numbers often are pretty good. We all have been there. We’ve been on the stage and said something and realize, “I didn’t do this myself and my own site doesn’t have this.” I’m working on making an eCommerce site and AMP with some collaborators over here. We kept saying you could make an eCommerce site in AMP to now actually we’re doing it ourselves and figuring out the parts that are challenging and then trying to write guides, all those things.

Are you using WooCommerce?

It's the little things behind the scenes that make sites look good and give a smooth user experience. Share on X

There’s no platform. We’re just doing our own code. We’re following the model that AliExpress used back in December of 2018 where they made their mobile site AMP. We do it all ourselves and show that it can look beautiful and it can look nice. You might be missing certain things that some eCommerce sites have that are a little fancier, but arguably it will look nice and work just as well in most cases.

Are you familiar with the new WooCommerce theme that’s native AMP?

I’ve heard they’re doing this. I have not seen it yet. I’ve seen a bunch of things from different CMS and there are a number of eCommerce platforms working on AMP now including FastCommerce. It’s an acronym. It’s not VHX. It’s something like that. They’re in Latin America and they’re almost done with it. A lot of eCommerce platforms have these AMP plugins that unfortunately produce not nice sites. What they do is they take out your entire design and remove it. You get basic texts. This is true also with other CMS out there that produce a basic text. Sometimes you have no menu anymore. I would say in those cases, don’t do it. Don’t use the AMP plugin and create the worst version of your site because it’s faster but it’s going to have no menu, it’s got no custom fonts, it’s got no design. It wouldn’t be fun to look at that site.

That’s a bad first impression for your brand. This theme, it doesn’t come from WooCommerce. It’s a separate company. I actually know the founder. They’ve been working for months on this WordPress WooCommerce theme that is native AMP and it’s super elegant. You could look at a demo site, Accelerate.AMPPublisher.com. All the details around the theme are at AMPWPTools.com/Accelerate-User-Manual. The package is called Accelerate and it’s part of AMPWPTools.com.

I see this is all AMP. I hadn’t seen this before. I’ve got to ask people around here who are working with WooCommerce and see if they know about these things because WooCommerce is one of the biggest eCommerce platforms out there. I’m looking at your site and I see you’ve got a lot of JavaScript on your site. This is a classic case where this is what happens. You’ve got to think of CKEditor. It’s an editor people use to edit rich texts on various CMS. It’s loading up 150k of JavaScript on your public site.

It’s totally unnecessary. It’s terrible. All of this is going to be replaced in a few weeks. We have 30 WordPress plugins running.

That’s how you build a WordPress site that uses plugins. They add all their own stuff and you lose control of it.

It’s so much bloat and each one of those plugins is a potential security hole. I’m going to get that down to under ten, probably somewhere around seven or eight.

WordPress is a wonderful tool but you have to have to use it carefully, otherwise you create these sites that are slow.

Slow and insecure or a target for hackers. It drives me nuts how you look in the HTML source and you see all this HTML comment code saying, “This is the version of the plugin and this is the version of WordPress that we’re running,” and so forth. Why would you broadcast that to the world that you haven’t kept up to date with all your plugins and the WordPress core? That’s silly to me.

WordPress also is very hackable. That’s certainly also a problem. I did mention before some of the more things AMP tries to do to make things better along with just speed. I should probably mention those things too. I’m looking at your site here thinking about these things. One thing AMP does that helps user experience pretty substantially before AMP existed. If you went to a publisher site a few years ago, you would see it loading up on your phone slowly. You will see some text appear and think, “I’m going to read this text, this is great. There were some texts,” and then it would vanish or move around somewhere else in the screen because an ad would load in or an image would load in or a video would load in. When it loads it in, suddenly it got big because it didn’t exist before it was loaded and then your text would move around accordingly. Things are jumping around the screen as they loaded and this made it hard to get a sense of the screen. Also, if you’re a user trying to learn how to trust the site and things are just moving around in a random way, it feels icky and it decreases user trust.

I’ve gotten to sites before where things shift around a lot and you can’t quite tell where things are going to be. You might tap in the wrong place because your target just moved. AMP also when you load up a page, everything declares its size before things load. If there’s an image and add a video embed, whatever it is, the size is declared in advance, so little spaces left for everything. It solves the problem of things shifting around randomly. It also aims to make sure that JavaScript can’t stop animations from being smooth. Animations should be 60 frames per second at all times, which is a very technical thing. To make things look better, it’s various little things behind the scenes to try to make sites look good and a smooth user experience beyond just making things look quickly.

What percentage of websites would you say have AMP implemented?

I don’t know. We usually talk about the numbers. Somewhere in 2018, we’re talking about six billion AMP pages out there and 55 million domains. That number must have increased since then. The percentage, I don’t know. It might be hard to tell because a lot of sites are very small, not much traffic, some have lots of traffic. I think that in general though that for most sites in the web, mostly it’s abusing AMP to a certain extent for certain pages. If the page is just texts, images, whatever, some embeds and then some use the basic features, that can be done with AMP pretty easily and make things a lot faster.

Sites that have basic interactivity that you add products to a cart, you change the colors of things, you submit a form and do various things. That’s also pretty easy with AMP. We’re still doing it with AMP. At a certain point, their page shouldn’t be AMP. Their pages were using more complex analytics or more complex A/B testing or have more complex interactivity. In this case, AMP might be not the thing for you. It also makes it possible to make pages as fast without using AMP. You can go back there with your programmers and fine tune everything. Remove extra code, do a lot of things for performance. The problem is that sites that are honed down this way and made faster usually get slow after a while. People usually don’t have the discipline to do this. It’s very hard to go back and make sure everyone doesn’t add extra code and keep the images small. It’s very rare to see sites that are kept consistently fast without using AMP. There are various ways to do it. AMP is the most straightforward way to do it.

It keeps people strict in their implementation in terms of performance. There’s a threshold for the amount of CSS that you can use, for example. It’s like 55k or something.

It allows 50k only. You can add more for animations, but 50k for the styles on your page.

You have to be disciplined to maintain a small CSS footprint like that. It’s still a small-ish percentage of the web that’s running on AMP but that’s going to grow over time. The way I look at it is it’s like a secret weapon. You could be running old platform, maybe it’s just hard coded HTML website that’s hard to maintain or an http, not https. You’re not on http/2, you’re on http/1.1. You’re doing the old school approach, which will get you fewer results over time or poor results over time. You could be pulling from the available toolset of all the coolest stuff available: http/2, for example, AMP, PWA, Progressive Web Apps and just create an amazing experience for the user. I love this phrase I heard many years ago and that is, “A website is something that people do, not something they view.” I love that because a website that people view is very passive. It doesn’t engage in the same way. It doesn’t draw you in. A website that you do is an activity. It’s a destination where you want to stay and engage. I think AMP helps to take you that step further towards a website that people do instead of view.

I think it’s important to care about these things. I’ve certainly been there before. I’ve worked at companies where I knew our site was slow, but we couldn’t make it any faster. There are people in marketing that wanted certain things done in certain ways. My own personal site, my Ben site is slow. It’s not AMP, it’s just a site I made a while ago. I know it’s slow but I ignore it for now. I cannot look at it. I did not load it on my phone ever and just not think about what it could be doing better. If I actually cared more about this, I’ve actually got off of my butt there I thought. I should make this a better experience and I could get more out of this, then it would be better for me to do that.

It means caring enough and also seeing your website as your portals of the world. It’s like having a store. If you own the store and the shelves were all dirty and things were falling off of the shelves. They were disorganized and you had to walk in the door by opening it with a crowbar to get in there. If you had various barriers to buy things in your store, it didn’t look good, you fix that right away. The website you can ignore, you cannot think about it too much. It’s possible to do that but it’s not the best thing to do.

Burying your head in the sand is not a very good option. It’s easy to do when you’re in a high-speed connection. You keep visiting your same website over and over again on a desktop and it’s caching the pages in your browser and everything loads fast, but that’s not an experience for a user on a 3G connection. In a mobile device in a foreign country who’s trying to use your site, they’re going to hate your site. They’re not going to stay.

They don’t want to use it. I know that if I’m on the train here in New Jersey, I can’t load certain sites up because they don’t work. I want to go to a site that’s AMP or a site like Wikipedia, I’m relieved. I know it loads up quickly that’s going to work. Other countries have slower connections in various places out of major cities certainly. People often have these low powered phones. A lot of the phones that are being made now are these cheap Android phones. It is widely known that these Android phones that are cheaper, they have pretty fast clock speeds and microprocessors, but they’d run silly because if they run at full speed, you’d melt the phone. There’s no fan in there.

These things run pretty slowly as some cases they execute JavaScript at one-tenth, one-twentieth to speed if it’s a fast, brand new iPhone, Samsung Galaxy Pixel and so on and so forth. You don’t always have the experience. I actually try out these things on the worst phone or try a different connection. You can do this with Chrome DevTools. You can go to Chrome DevTools, open it up and simulate a slower connection, let’s say a 3G connection or a different device and then see how it works.

There’s a great little device emulator. It looks like two rectangles on top of each other. One is supposed to be the mobile phone and the other is like a tablet. You click that button and then it switches to the mobile device emulator or tablet emulator. Then you can choose which device it’s emulating and screen size and all that.

It requires no programming skills. You just have to go to Chrome. You go to View menu and look for Developer Tools. On the Mac, it’s also command-option-I. I think in PC, it’s control-shift-I. This thing pops up. It was confusing if you’re not a programmer, but it’s easy to find on the left side, the icon of the two different size devices, the little two rectangles. Click on that. At the top, you see a little drop-down menu. You can choose your phone’s simulator scenario. This has online on the right. Online, you can do the drop down and choose different kinds of connections. You can hunt down some more and find other things here. It’s worth knowing how this thing works, that you go to the network panel over here and you load up your page. You’ll see all the JavaScript and CSS that’s being loaded or the images that are being loaded. You can see which images are causing problems for speed. Anybody can do this stuff. It doesn’t require any knowledge of programming to do this.

One of the things I wanted to point out about AMP that we didn’t discuss yet is the little lightning bolt icon that shows up in the search results. Are you aware of any studies showing greater click-through rates or any proof points for the value of that lightning bolt being next to your search results, your search listing?

I know there’s an internal study that has been done on Google but unfortunately, I’m not allowed to discuss those things. There are probably external studies as well, but internal studies are top secrets.

Can you at least share that there actually is a benefit?

If you could make your site faster, it makes for a better experience and you could get more out of it. Share on X

It’s possible. I don’t know. You certainly will see AMP pages on mobile phones, these little lightning bolts on them. You also get the benefit if you’re a publisher of a news article or other areas like recipes, a little special AMP carousel where you can scroll through different articles and see images of each one and click on those things. There are all those things that are nice.

You cannot be in one of those carousels if you’re not serving up an AMP page?

Those carousels were dedicated to AMP. This was supposed to also change, and this is still being discussed and worked on, but it was announced in 2018 that they want to give the same benefits the AMP pages get to non-AMP pages as well. That followed the same kinds of rules of AMP. If a page out there is fast the way the AMP is, it has the stable layout the way that AMP does and does various best practices like this, it will soon get the same badging that AMP does. It is still being discussed and it’s still being worked on. The general plan is to let people know that AMP isn’t the end of the world. There are various ways to do this, but you have to be disciplined if you’re not using AMP.

Let’s talk about progressive web apps. I don’t know that a lot of our audience are going to want progressive web apps, but they should at least know what they are and how they differ from AMP. You might want to have both AMP and a progressive web app or PWA.

When you meet people that own sites, are you seeing demand for progressive web apps out there? People are not sure what that even is or are they doing it already? What do you see out there in the world?

When people talk about apps for mobile, they recognize that this is a fad that they’re probably best not to follow at this point. If somebody has 50 apps on their phone installed, they’re probably only using about three of them. Study after study shows that people use a few of the apps installed on their phone. It’s a huge barrier just to get your app installed on somebody’s phone. To have it sit there unused is a waste of time and money and focus. Apps are not jumping the shark, but they’re past the initial enthusiasm stage like cryptocurrency. It’s still very valuable to have an app potentially. If you’re Yelp or some major destination website, that could be very valuable. It’s a nice middle of the road solution to go with the progressive web app where it’s not as extensive of a development cycle to create this thing. It still has a lot of the features of an app in terms of things being more customized and fast loading and that sort of thing. Let’s talk about what the differences are between a regular app and a progressive web app.

Apps have passed through the honeymoon phase where you have apps like you were a serious person in the world of technology. When the web first came out and became popular and people have to have a website, it has no purpose to you. They had to just have a site because they were major brand and of what other sites. You can look at pictures of the product and that was all you could do. Apps had that thing too. You’d have to go to a conference as I have an app for the conference, they can show they’re serious about being technical, but they’re not often that useful. Sometimes they’re useful. People will use their top three apps, but they will often download and install other apps.

Web apps are supposed to fix this problem. The idea is that your website these days can be more or less as good as an app, in some ways better than an app. The site web has gotten very capable and most things at phones do. The web is aware of these things where it can be aware of like cameras, fingerprint readers, the geolocation, various things like that. It requires knowing how to code those things. The notion of progressive web app is simply trying to make a webpage which has applique experience where it loads quickly. As you go through different web pages, you see that the content will change. The basic shell around the page will not change. Your company’s logo, the basic colors, the menu are always there.

Things load more smoothly. You don’t have page transitions where the whole page vanishes and a new page appears. The thing just loads smoothly like an app would do. Also, websites can be full screen on phones so you don’t have to do the URL bar anymore. They’re also installable as an icon on your phone so you can have a little button people press on their phone to make your website start up. There are various benefits. Also, you can use a thing called service worker to do push notifications as apps can do. You can also start offline content, which is key and not always done by apps either. People can view your content or look at your products even when they’re offline. You can load these things when they’re online and then cache the data and then just use it afterwards.

My favorite use case for this is Google maps and storing the entire offline map for a city I’m going to go visit outside of the country. I have to figure out where to get a sim card in that local region and everything. Until I’ve done that, I still have access to the streets and the directions and everything. It’s cool.

That feature is valuable, especially if you go somewhere like China where Google is blocked. I’m sorry, you can’t load offline maps in China. It’s not allowed. Other places, if you go somewhere else and you have a bad connection, I find maps are pretty key. Even in general, if you’re driving around somewhere, it’s pretty good storing the location around you and all the things around you. Anyway, progressive web apps, Microsoft is now investing in this in a big way and now Bing goes out there and looks for these and it will auto include these in the app store that Microsoft has. Chrome is also starting to allow these to be full screen on desktop devices. You’re going to see more and more progressive web apps out there being apps like on different devices from desktops to mobile phones.

What is the development cycle look like for a progressive web app versus a regular app? Regular app might take many months to create. It might cost hundreds of thousands of dollars in the budget to have that produced and progressive web app can be a fraction of that.

It can be quicker. I think the key is to regard it as a progressive project. Instead of starting over from scratch on your website, you can just add features as you want to. Add in the service worker to get offline content. You can adjust your pages so that they keep the app shell there all the time and just load in content in the middle. It’s easy to do things like add home screen. It’s better to add these features one by one. It can be a long process to make a true PWA with all of the features that exist. Adding in these features make your website a richer experience as you go can be easier. It’s often longer than an app though because you’re making a more elaborate thing and you have to write the code yourself.

There are some things out there that help you write the code. There are certain libraries you can use that are free that are open source. All being enough, even though with AMP usually we see simpler webpages and PWAs as complicated web pages, they work together, which is not widely known but starting to become more and more widely done. One nice pattern that I see done more and more often, especially in developing countries is what I call some time start fast, stay fast. It’s the idea of getting to the first page on your site as fast as possible because they want to have a good experience. They want to get there quickly.

Once they’re there, things shouldn’t be slow afterwards but it’s good if they are fast in the very first load, the first landing page, the first homepage results from a search, whatever it may be. One common pattern is to make your first-page people get to an AMP page. An AMP has a component that allows you to download the PWA in the background, so you can go from the AMP, the PWA quickly. The first page is AMP and they tap somewhere else. Think about PWA immediately and people can look at something like the AMP page and they can next click, next tap, they brought right into the progressive web app immediately.

Do you have an example of that in the real world?

There’s a bunch of them that are out there. What comes to mind right away is one called Superbalist. They’re a big company in South Africa. There’s a lot more of these things. There are a lot of examples of AMPProject.org, which is our website. It’s going to be AMP.dev, but AMPProject.org will still work. AMPProject.org, if you go about on the menu of the case studies area, there’s a bunch of examples of people using this pattern. There are more ways to combine these patterns together. It’s also possible to re-use AMP pages within because of web apps, but then it gets a little bit more complicated to explain.

I would love to get your feedback on AMPifying the site that I’m in the midst of revamping. I want to send you at a staging site and get your feedback because this is the real world. This is very much a work in progress. The mobile version has not been made yet and the CSS and JavaScript haven’t been made ready for AMP yet.

As I get on mobile, I can see the design isn’t done there. On the desktop, there is the design. It looks pretty good. Things get loaded as I scroll down. Is that possible, lazy loading?

Yes.

Very good. There’s a bunch of JavaScript still here.

We’re going to clean that up.

I’ve got to go up again because you’ve got a YouTube embed over here and seeing about lazy loads or not, it’s not lazy loading the YouTube.

One thing about YouTube embed, that is something that you can pull off with AMP and Vimeo as well, and now even Wistia, I believe.

A lot of video players have versions in AMP. I don’t know if Wistia does or not. They probably do but most of the major vendors you’ll see they have AMP components.

I looked into Wistia because they were one of the ones that were late to the game and they do have one now.

One thing that AMP does, which is nice is lazy loading things automatically. If the YouTube embed or images blow where these have gotten to, it will not load up until these get closer to it and the site doesn’t do that yet. YouTube is a lot of JavaScript, unfortunately. This is not an AMP yet though.

It is not yet. If you come back here again soon, it will be.

Some images here can be shrunk a little bit. There’s an image of firework that’s loading up, but I don’t see anywhere on the screen. It looks pretty large images, these fireworks, it’s 200k something called GrowYourBusiness.jpeg. There is a person looking at the sunset or sunrise. It also is big. Check out large images and I would still remove JavaScripts whenever you can, including our friend, CKEditor. I like the design though. It looks nice.

It’s cleaner, it’s more elegant and more contemporary. It’s more mobile-friendly too. If you notice on the current site for StephanSpencer.com, there are a lot of nav items and it’s not done in the traditional hamburger menu approach. It’s not a great experience I think.

I see what you mean. There were more things to click on here that I have. It’s pretty long. It’s not bad. Your current site, I think also is nice. I also wonder about the text being over your face in the current site versus the old site. The text is over your face, which I like seeing your face. That’s nice.

That’s going to get fixed.

Your call button is real call button. It’s got a real tel link. That’s nice. Have a good redesign and maybe send me a message when you’ve got some more stuff. I’d love to look at it. I will do appraise it on the wonders of Twitter.

The point here is that when you care about page speed and performance, there are so many tools, resources and opportunities available to you to make your site screaming fast. AMP is a very important one, but one of the many tools available to you. You mentioned http/2, commented on how I’m running on that. Using Cloudflare, you can have a http/2 running with the snap of a finger.

You can use Cloudflare also. It will compress the images automatically sometimes. Big images are still the biggest problem with the size of things on the web, large images that no one thought to compress. Look for those things or use like Cloudflare that does auto compression.

Share one next action for our audience to take in terms of taking the next step with AMP, maybe trying it out somehow. Let’s assume that they have a WordPress site. Not everybody will, but what would be a good next action for our audience?

It would be good to go to AMPProject.org or as it will be soon AMP.dev and check out what AMP is like. Explore AMP a little bit. See who’s used it, see what it consists of and think about whether it’s good for you. Look out there at sites that are AMP and see if they matched with what you’re looking for. I would try it out on a simple page that’s easy to convert. You can often convert a page to AMP in a day. If it’s a pretty straight forward page, sometimes it’s less than a day. See if you like it and see if it works well for you. If you like it, then keep on going with it.

Thank you, Ben. What’s a good way to reach you on Twitter or follow you or see what you’re up to?

You can find me on Twitter, @BenMorss.

Thank you, Ben. Thank you to our audience. Take some action and get AMP running even just in a test environment and see what it’s like.

Go do something. Try it out.

I’ll catch you on the next episode of Marketing Speak.

Important Links:

Your Checklist of Actions to Take

☑ Give my customers what they want quickly by making sure my website loads fast because no one wants to wait around for a website to load.
☑ Learn more about Google’s AMP or Accelerated Mobile Pages and how it can help me get the most out of my website.
☑ Go to AMPProject.org or AMP.dev to check out what AMP is like and explore it – see who’s used it and what it consists of and determine whether it’s applicable for me.
☑ Try Chrome’s experimental version called Canary which has a feature called signed exchanges or web packaging, a feature that enables publishers to safely make their content portable while still maintaining the content’s integrity and attribution.
☑ Utilize the AMP plugin for WordPress that has the option to produce native AMP which makes the makes the pages run faster. Access it by going to AMP-WP.org.
☑ Check out the WordPress WooCommerce theme that is native AMP by visiting the demo site, Accelerate.AMPPublisher.com.
☑ Download the device emulator for mobile devices or tablets from the Developer Tools menu on Chrome. Choose my phone’s simulator scenario from the drop-down menu.
☑ Use service worker to do push notifications on my website as apps can do. Also start offline content so people can view my content or look at my products even when they’re offline.
☑ Check out other companies using progressive web apps such as Superbalist so I can learn how they work or operate. Also look at other sites that are AMP and see if they match with what I’m looking by trying it out on a simple page that’s easy to convert.
☑ Connect with Ben Morss, Developer Advocate at Google, on Twitter @BenMorss, to know more about AMP or to see what he’s currently up to.

About Ben Morss

Ben is a Developer Advocate at Google, where he’s working to help the Web be faster and more beautiful. Prior to Google, he worked at the New York Times and AOL, and before that he was a full-time musician. He earned a BA in Computer Science at Harvard and a Ph.D. in Music at the University of California. Rumor is that he still runs a band called Ancient Babies.