One of the issues facing mobile web developers and users alike is the slow speed that many mobile web pages load at. Often, people are browsing the web on mobile because they’re in a hurry and can’t access a desktop, so the glacial speed that many sites load and operate at just isn’t cutting it. This is where AMP comes in.
What’s AMP All About?
AMP stands for Accelerated Mobile Pages, and it’s a project that Google started to make mobile web browsing quicker, with sites loading almost instantly. If you use the Internet on your phone, you’ve likely already encountered AMP pages, which look a little different from normal pages on your browser. AMP results pop up as Google Rich Cards, mobile-optimized clickable images, when you Google certain things, making them attractive options for mobile users in a hurry to find out the latest news. But what makes these pages load faster than normal ones?
The 3 Elements of AMP:
AMP’s accelerated browsing has three different components. AMP HTML is a modified version of the HTML markup language that restricts certain processor intensive features and introduces new tags. AMP JS implements tested performance practices for loading pages faster and manages resource loading. And AMD CDN is a cache system that makes your site even faster. Right now, AMP is widely used by news sites, which are easily able to fit its requirements, but it’s rapidly spreading to other parts of the web. And if you operate a website that you’d like mobile users to be able to access quickly, you could benefit from creating an AMP page. Here’s where to start.
Making Your AMP HTML Page:
This link includes a basic template for an AMP HTML page that you can copy and modify for your needs. This template includes the special requirements for AMP HTML. These include a tag for the type of document you’re creating, tags for the head and body of your page, and more. The template they provide also includes some optional metadata that you might want to make use of. The Schema.org definition included in the head isn’t required for the page to work as an AMP page, but this markup is required for your content to show up in many beneficial places around the web. Start with this template, saving it as an HTML file, and you’re on your way.
Tweaking the Presentation
You can alter the style and layout of your page using the basic properties of CSS; in this way, AMP isn’t that different from its predecessors. But it’s simplified to make sure your page will load near-instantly. Essentially, Google wants all AMP pages to look simple, so that they can load quickly. AMP pages can only have one embedded stylesheet affecting their appearance, while normal pages can have more than one. And the rules for layout are more severe. All elements must have a size set from the beginning, and this cannot be modified in CSS. This link gives you more information about the layout, but it’s really not that complicated. AMP pages are actually less complex than normal web pages because their content is restricted in this way. All you have to do is color within the lines, and your page will look great – and load quickly.
Adding Images and More
You can add responsive images to your AMP page by specifying the width and height and specifying the layout as responsive, making a typically difficult process a snap. AMP also supports media and element queries. And the layout attribute can also be set to “container,” “fixed,” “fill,” and other specifications for easy adjustment of your page’s look and feel. All of this makes designing your page easier than it is with CSS alone.
Previewing and Publishing
You can preview your page directly in your browser, but you’ve also got to check to make sure it conforms to AMP’s specifications. DO this by adding “#development=1” to your URL, then opening the developer tools console on Chrome to check if it’s a valid AMP page. You should also add a <link> in the head of your code to pair the page with its non-AMP version. After testing the page locally to be sure it fulfills all of AMP’s requirements, go ahead and publish it.
You’ve now got a page that’s optimized to load lightning fast on mobile. Wasn’t that easy?