Google AMP可帮助您进行令人惊叹的网络体验。就是这样。

今天早些时候，我了解了一种类型的页面，该页面“几乎是瞬间的”。好吧，有了这样的说唱，我不得不自己对此进行测试。所以，我去了Tasty, a cooking website, on my desktop and on my phone to test the loading times for each. The homepage for both took one second to load and display. That was impressive.

Source

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

Source

And finally, when clicking on a recipe, I was greeted with a video demo, in perfect quality. This was unexpected and entirely welcoming. That was the moment I regarded Google AMP as an awesome tool for sophisticated, compelling websites.

Google AMP pages can help you design ecommerce pages, compelling advertisements, and thrilling mobile experiences by hosting pages that load almost instantly. For instance, Gizmodo found their pages加载快三倍and Mashable saw a200% increase in average CTR。

Source

As a user, my experience with Google AMP pages 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 one of your own.

与其他放大器不同，Google与网站的许多渠道（例如搜索，AMP缓存和分析）集成在一起。除了能够与Google的频道集成外，您还可以使用Google的AD Suite（ADS，Adsense和Admanager）获利AMP HTML框架。

AMP is a great choice to improve core business metrics, such as the number of conversions on web pages. AMP pages load almost instantly across all devices. AMP also lets you convert your entire website archive in days if you use a popular CMS, such as Wordpress orHubSpot。

Another great benefit for businesses using Google AMP is that the AMP framework is used by popular global sites like Bing and Twitter and allows you to create a seamless, native experience. Essentially, if your AMP website content has a link to Twitter, for example, the tweet would embed in your web page and users wouldn't have to leave to see the tweet.

Now that we've covered the basic definition of AMP and why it's great for businesses, let's go more into depth about how AMP works.

How Google AMP Works

In this section, I'll talk about how AMP pages are able to load so quickly. There are seven reasons in total, and you can find an explanation on this page uploaded by aGoogle AMP Developer。

1. AMP页面一次加载所有页面的内容。

AMP makes all components of a web page load at the same time. This differs from a non-AMP web page feature of assets loading one by one. AMP pages don't allow any custom JavaScript that could interrupt that simultaneous loading time.

AMP使用iFrames，这不会阻止主页渲染，仅允许异步JavaScript。AMP可能在后台有一些JavaScript，但是它们的设计非常仔细，以确保它们不会放慢性能。

2.已知会事先浏览AMP页面的布局。

In a non-AMP page, the web browser, like Google or Firefox, doesn't know all the components of a web page until it's fully loaded. In AMP, all external images or site frames must state their size in the HTML. This is so the browser knows how much it will be loading before the download initiates.

This allows AMP to load all of the content of the page without having to wait for other elements or resources to download. This is called "static layouting" and is a crucial element of AMP.

3. The CSS is in-line and size bound.

In AMP pages, only one stylesheet is needed: inline. This removes multiple HTTP requests from the rendering path. HTTP is designed to enable communication between web browsers and servers.

The removal of multiple HTTP requests streamlines the communication browsers and servers needed to have in order to fully load the page. Additionally, inline stylesheets have a data max (50 kilobytes) that allows content to be sophisticated but easy enough to comply with CSS rules.

4. Web fonts are super large, so AMP pages download them first.

在网页上使用字体的优化是页面性能的关键要素。在具有很少脚本和样式表的非AMP网页上，浏览器必须等待下载字体之前下载它们。

在字体开始下载之前，AMP不需要HTTP请求启动。这是可能的，因为一个和两个原因。因此，使用AMP，没有HTTP通信阻止浏览器下载字体。

5. AMP pages minimize style and layout recalculations.

Each time something on a page is changed, the browser has to recalculate downloading the page. A non-AMP page doesn't load all elements simultaneously, so the browser doesn't know the layout of the page as it's downloading.

这可能是一个问题，因为在传统页面中，多个脚本和表被用来一次执行许多动态功能。当发生这种情况时，可能会发生重新分层，最终对用户看上去没有吸引力。

But because AMP has the power to simultaneously download content and rendering, it also has the ability to read, comprehend, and implement those changes seamlessly.

6. The power to load images is shifted from the CPU to the GPU for acceleration.

AMP没有使用计算机的处理器或CPU来生成页面的图像，而是使用GPU或Graphic处理器，这更有效。这可以释放CPU所做的工作，从而使页面运行和加载速度更快。

When the CPU makes images, it creates layers, then sends them over to the GPU for further changes. For instance, the GPU can then shrink, enlarge, rotate, or crop images.

7.资源下载是AMP页面的重中之重。

When an AMP page starts downloading, it begins to optimize its resources. This is done so the most important components have priority. Ads and images are only downloaded if the user is likely to see them below the fold.

It's important to note that all of the content has already been prepared to download by an AMP page because of the static layout. They only fully download if the page determines that the user is likely to see them.

这些原因就是为什么将AMP页面优化到它们几乎立即下载的地步的原因。很酷，对吧？AMP页面正在完成所有这些幕后工作，以加速加载过程。

At this point, you may be wondering how to create one of these AMP pages of your own. Luckily, making an AMP page — even trying it out — is pretty intuitive. Let's go over that process in the next section.

How to Make Google AMP Pages

At this point, we've earned the Google AMP pages are web pages that improve the user experience by using engaging graphics, smooth layouts, and load almost instantly. But is creating an AMP web page as simple as it looks?

简短答案：可以。

我不是一个开发人员,和我的知识coding sphere is very minimal. But when I started toying around with the "AMP Playground," I was able to make a very simple web page.

当您开发放大器页面时，Google提供了工作流程。首先，您构建一个页面，由Google称为“ Hello World”。然后，您整合页面，了解AMP页面的基础知识，优化页面并设置分析跟踪，并为网站的需求和目标设计页面。

Google AMP与CMS平台集成在一起。你可以找到一个这些平台的完整列表。

如果您想制作网页，请Google引导您完成整个过程。该平台提供了一个代码模板，您可以将其复制并保存到.html扩展名。它为您提供了一个清单required mark-up that you must include in your page使其成为可行的AMP HTML文档。

The toggle sidebar in the create page has instructions for including images, modifying layout, optimizing for SEO, previews, and final steps before publishing.

If you want a taste of what working with an AMP page will be like, visit the homepage,amp.dev。在那里，您可以像我一样在AMP操场上进行一些试验。在这里，我使用我非常有限的编码知识进行了实验，如下所示，当我将文本添加到空白广告中时：

这个工具我很开心。我可以想象着发生的变化。如果您想在操场上制作示例网页，这就是我所做的。

1. Implement and change header text.

首先，我从给定的样板模板开始。我遵循代码“ ”和“

”中的关键字，告诉我我将在页面体内的H2上工作。我将标题从“放大器很容易”更改为“欢迎来到我的网站！”通过将文本放入H2括号内。

2.在身体段落上工作。

Then, I moved to the paragraph section. In the code, paragraphs are notated with red "

," and "

3. Modify the buttons to fit your web page's needs.

在学习了如何更改段落之后，我滚动到按钮。绿色文本“ ON”告诉网页，以下短语将是按钮。在这种情况下，该按钮将通过敲击来工作，类型是问候，并且会显示在网页上。

We know this by the code, "tap:greeting.show". I modified the white text to change what the button said before making sure that ending, "," was added. This is to signal that I was finished with the first button.

4. Toggle class attributes if desired.

The AMP Playground's code gives you directions for making changes inside of its text. For this step, the text tells you how to toggle a class attribute. If you follow the lines of code, you can figure out how to make simple changes.

When I switched up toggle attributes, I played with colors and text. Instead of the original red, I changed the toggle to green and switched up the greeting text from "Hello," to "Howdy!".

Class in HTML is used to define the type of attribute if you have multiple. (If you were to list different beverages on your site, you would use "class" to specify the design for wine, water juice, etc). In this case, the class attribute was for a color.

Remember, this is just a blank customization template to get you comfortable with building a web page. You don't need a separate .html file for this, you can work directly in Google. You can also do a trial run for stories, emails, and ads. I loved using this because it was fun, it got me comfortable with using coding language, and the playground interface was easy to follow.

You can use AMP pages to make the customer experience delightful, from beginning to end, like my experience with Tasty's website. How are you going to fit in these pages to your strategy in the future?