Google AMP Helps You Make Stunning Web Experiences. Here’s How.

Today I learned something about a page type that is loaded “almost instantly”. Well, with a rap like that I had to test it myself. So I went to Delicious, a cooking website, on my desktop and on my phone to test loading times for everyone. Loading and viewing the homepage for both took a second. It was impressive.

source

When comparing the mobile homepage and the desktop homepage, I found that the images and layouts were optimized perfectly. This ticked off another item on my list.

source

And finally, when I clicked on a recipe, I was greeted with a video demo in perfect quality. This was unexpected and absolutely inviting. At that moment, I saw Google AMP as a great tool for demanding, compelling websites.

With Google AMP Pages, you can design ecommerce pages, compelling advertising, and exciting mobile experiences by hosting pages that load almost instantly. For example, Gizmodo found their pages charged three times faster and Mashable saw a 200% more average clickthrough rate.

source

As a user, my experience with Google AMP sites was spectacular. So let’s dive into AMPs: how they work, what they are, why they’re amazing for businesses, and how you can create your own.

In contrast to other AMPs, Google can be integrated into the numerous channels of the website, e.g. B. Search, AMP cache and analytics. Not only can you integrate into the Google channels, but you can also monetize the AMP HTML framework with the Google ad suite (Adsense, AdSense and AdManager).

AMP is a good choice to improve core business data such as: For example, the number of conversions on websites. AMP pages load almost instantly on all devices. With AMP you can also convert your entire website archive in a few days if you use a popular CMS like WordPress or WordPress HubSpot.

Another big benefit for companies using Google AMP is that the AMP framework is used by popular global websites like Bing and Twitter, and you can create a seamless, native experience. For example, if the content of your AMP website contains a link to Twitter, the tweet will be embedded in your website and users won’t have to go to see the tweet.

Now that we’ve covered the basic definition of AMP and the reasons for it, let’s take a closer look at how AMP works.

This is how Google AMP works

In this section I will talk about how to load AMP pages so quickly. There are a total of seven reasons, and an explanation can be found on this page uploaded by a Google AMP developer.

1. AMP pages load the entire content of the page at once.

AMP loads all components of a website at the same time. This differs from a non-AMP website function, in which assets are loaded individually. AMP pages do not allow custom JavaScript that could interrupt this simultaneous loading time.

AMP used iFramesThis does not block the rendering of the main page and only enables asynchronous JavaScript. AMP may have JavaScript in the background, but they have been carefully designed to ensure that performance is not affected.

2. The layout of the AMP pages is known to the browsers in advance.

On a non-AMP page, the web browser like Google or Firefox does not know all the components of a website until it is fully loaded. In AMP, all external images or site frames must specify their size in the HTML code. This way, the browser knows how much to load before the download starts.

In this way, AMP can load the entire content of the page without having to wait for other elements or resources to be downloaded. This is known as a “static layout” and is a critical element of AMP.

3. The CSS is inline and size-bound.

Only one style sheet is required on AMP pages: inline. This removes multiple HTTP requests from the rendering path. HTTP enables communication between web browsers and servers.

Removing multiple HTTP requests optimizes the communication browsers and servers that are required to fully load the page. In addition, inline stylesheets have a data maximum (50 kilobytes) that makes content sophisticated but simple enough to comply with CSS rules.

4. Web fonts are very large, so AMP sites download them first.

Optimizing the fonts used on websites is a critical element of page performance. On a non-AMP website with few scripts and style sheets, the browser has to wait until it is downloaded before downloading fonts.

The AMP does not need HTTP requests to start until the fonts are downloaded. This is possible for reasons one and two. So there is no HTTP communication at AMP, which prevents the browser from downloading fonts.

5. AMP pages minimize recalculations of style and layout.

Every time something is changed on a page, the browser has to recalculate the download of the page. A non-AMP page does not load all elements at the same time, so the browser does not know the layout of the page when it is downloaded.

This can be a problem because traditional scripts use multiple scripts and sheets to perform many dynamic functions at the same time. In this case, new layouts can appear that appear unattractive to users.

However, since AMP can download content and rendering at the same time, AMP can also seamlessly read, understand, and implement these changes.

6. The image loading power is shifted from the CPU to the GPU for acceleration.

Instead of using your computer’s processor or CPU to generate the images for your site, AMP uses the GPU or graphics processor, which is more efficient. This relieves the CPU of work and accelerates the loading and loading of the page.

When the CPU creates images, it creates layers and sends them to the GPU for further modification. For example, the GPU can then shrink, enlarge, rotate or crop images.

7. Downloading resources is a top priority for AMP sites.

When an AMP page is downloaded, its resources are optimized. This is done so that the most important components take precedence. Ads and images are only downloaded if the user is likely to see them below the fold.

It is important to note that the entire content has already been prepared for download by an AMP page due to the static layout. They will only be fully downloaded if the page determines that the user is likely to see them.

For these reasons, AMP pages are optimized so that they are downloaded almost immediately. Pretty cool, isn’t it? All of this behind-the-scenes work is done by AMP sites to speed up the loading process.

At this point, you may be wondering how to create one of these custom AMP pages. Fortunately, creating an AMP page is pretty intuitive – even trying it out. Let’s go through this process in the next section.

How to create Google AMP pages

At this point, we earned that the Google AMP pages were websites that improve the user experience by using engaging graphics, fluid layouts, and loading almost instantly. But is creating an AMP website as easy as it looks?

Short answer: It can be.

I am not a developer and my knowledge of coding is very limited. But when I started playing around with the “AMP Playground” I was able to create a very simple website.

When you develop an AMP page, Google offers a workflow process. First, create a page that Google calls “Hello World”. Then integrate your page, learn the basics of AMP pages, optimize the page and set up analytics tracking and design the page for the requirements and goals of your website.

Google AMP can be integrated into CMS platforms. You will find one full list of these platforms here.

If you want to create a website, Google will guide you through the process. The platform offers a code template that you can copy and save in an HTML extension. It gives you a list of The markup you need to include in your page to make it a working AMP HTML document.

The switchable sidebar on the creation page contains instructions for inserting images, changing the layout, optimizing for SEO, preview and final steps before publishing.

If you want to get an idea of ​​what working with an AMP page will look like, visit the homepage. amp.dev. There, like me, you can experiment a little with the AMP playground. Here I used my very limited coding skills to experiment as below when I added text to a blank ad:

I had a lot of fun with this tool. I could imagine the changes I made during the process. If you want to create a sample website with the playground, I did the following.

1. Implement and change the header text.

First I started with the specified boilerplate template. I followed the keywords in the code. “

I have the title of “AMP is easy” in “Welcome to my website!” changed by putting text in the h2 brackets.

2. Work on the text sections.

Then I went to the paragraph section. Paragraphs with red “

,” and “

. “The red is like a signal. It tells the website what the following content will contain. In this case, it was text that I changed to “Below is a responsive image. Responsive images are optimized for mobile devices and desktops.”

3. Adapt the buttons to the requirements of your website.

After learning how to change paragraphs, I flipped to the buttons. The green text “On” tells the website that the following sentence is the type of button. In this case, the button works by tapping, the type is welcomed and displayed on the website.

We know this under the code “tap: greeting.show”. I changed the white text to change what the button says before I made sure the end “, “has been added. This is to indicate that I was done with the first button.

4. If necessary, switch the class attributes.

The AMP playground code contains instructions for making changes in the text. In this step you will learn how to toggle a class attribute. If you follow the lines of code, you can find out how to make simple changes.

When I switched up the toggle attributes, I was playing with colors and text. Instead of the original red, I changed the switch to green and changed the welcome text from “Hello” to “Greetings!”

The class in HTML is used to define the attribute type if you have more than one. (If you were to list different drinks on your website, you would use “class” to set the design for wine, water juice, etc.) In this case, the class attribute was for a color.

Keep in mind that this is just an empty customization template so that you can familiarize yourself with creating a website. You don’t need a separate HTML file for this, you can work directly in Google. You can also test run stories, emails, and ads. I loved using this because it was fun, familiarized me with the use of the coding language, and the playground interface was easy to follow.

You can use AMP pages to make the customer experience enjoyable from start to finish, like my experience with the Tasty website. How will you integrate these pages into your strategy in the future?