AMP là gì?
AMP là viết tắt của Accelerated Mobile Pages (tạm dịch: trang tăng tốc cho thiết bị di động) là một thuật ngữ được sử dụng mô tả một cách mới để xây dựng các trang thân thiện với điện thoại di động tải nhanh hơn so với các trang di động truyền thống.
AMP hoạt động như thế nào
AMP có 3 thành phần chính, chúng hoạt động cùng lúc với nhau để người dùng điện thoại thông minh tận hưởng trải nghiệm tải trang nhanh chóng hơn:
1. AMP HTML
AMP HTML là một phiên bản HTML nhỏ gọn hơn bình thường.
AMP có những quy tắc riêng dành cho các thẻ HTML từ đó cho phép hiển thị tốt hơn, tốc độ tải trang nhanh hơn khi các trang được hiển thị trong trình duyệt của thiết bị di động.
Ví dụ: HTML đơn giản cho trang AMP
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
</body>
</html>Nhìn chung các thẻ HTML AMP cũng giống như thẻ HTML thông thường, chỉ có một số thẻ HTML sẽ hơi khác , dành riêng cho AMP.
2. AMP JavaScript
AMP JavaScript( AMP JS) đảm bảo tăng tốc hiển thị của một trang AMP. AMP JS sẽ sử dụng tất cả các phương pháp để cải thiện hiệu suất cho trang AMP như CSS inline, font chữ,... vì điều này chiếm rất nhiều tài nguyên khiến website trở nên chậm chạp trên thiết bị di động.
AMP JS còn đảm bảo các tài nguyên từ bên ngoài sẽ không đồng bộ, như vậy sẽ giúp hiển thị hiển thị nhanh chóng hơn.
Đồng thời AMP JS cingx sử dụng một số kỹ thuật cải thiện hiệu suất khác như "sandboxing of all iframes", sẽ tính toán trước bố cục trên website trước khi tải trang, và xóa đi các CSS chậm chạp.
3. AMP Cache
AMP Cache được sử dụng lưu giữ một phần website trong bộ nhớ cache, thông qua đó giúp cải thiện tốc độ trang.
AMP Cache dựa trên proxy để tạo nên mạng lưới phân phối tài nguyên AMP hợp lệ, điều này giúp khi truy cập website trên thiết bị di động sẽ được tìm và nạp nội dung AMP trong Cache đến người dùng nhanh hơn là đến trực tiếp Server.
Để đạt được hiểu quả tối đa, AMP Cache cần tải tài liệu, file ảnh, CSS và JS từ một nguồn thì phải sử dụng HTTP/2.0.
AMP Cache đi kèm với hệ thống xác thực tích hợp gọi là Built-in Validation System. Hệ thống này sẽ xác nhận khi một trang có thể hoạt động mà không phải phụ thuộc vào các tác động bên ngoài liên quan đến chậm tốc độ tải trang.
Hệ thống xác thực này dựa trên một loạt các tiêu chí xác nhận để xác định việc đánh dấu những trang đáp ứng các thông số kỹ thuật AMP HTML.
Ba thành phần cốt lõi của AMP ở trên, hoạt động đồng bộ để giúp các trang có thể tải nhanh chóng trên thiết bị di động.
Ưu và nhược điểm của AMP
1. Ưu điểm của AMP
1.1. Web có tốc độ tải nhanh
Theo đánh giá từ Gary Illyes (nhà phân tích xu hướng quản trị website của Google):
Thời gian tải trung bình của các trang AMP là 1 giây – nhanh hơn 4 lần so với những trang HTML chuẩn bình thường.
Nội dung của trang rất là quan trọng, tuy nhiên nếu user không thể truy cập trang thì đâu có ai đọc được bạn viết cái gì. Theo thống kê chỉ ra rằng: delay 1 giây có thể giảm conversion đến 3.5% và giảm lượt pageview đến 9.4% và tăng bounce rate đến 8.3%.
1.2. Tăng thứ hạng trên Mobile:
Tốc độ trang và tỷ lệ chuyển đổi có mối quan hệ khá chặt chẽ. Nếu người dùng thích trang tốc độ cao, khả năng họ theo dõi list hoặc mua hàng sẽ cao hơn.
Tuy nhiên, AMP vẫn chưa là yếu tố đánh giá ranking của Google. AMP chỉ khả dụng trên bản mobile chứ không sử dụng trên phiên bản desktop.
Với phiên bản mobile, các trang được khai triển với AMP sẽ có rank cao hơn hẳn so với non-AMP bởi Google hiện đã có sự ưu tiên cho phiên bản AMP hơn.
1.3. Giảm tải cho Server
Như đã nói ở trên, thành phần AMP Cache sẽ tự tải một phần tài nguyên từ Cache mà không cần đến trực tiếp Server. Chính bởi vậy, Server sẽ đỡ tốn nhiều "sức lực" từ đó nâng cao hiệu suất của hệ thống website hơn.
Lợi ích này sẽ thấy rõ rệt ở các website với lượng traffic lớn.
2. Nhược điểm của AMP
2.1. Doanh thu từ quảng cáo bị giảm
Cho dù AMP có hỗ trợ cho hiển thị quảng cáo, nhưng vì cấu trúc tối ưu AMP sẽ ưu tiên cho tốc độ tải trang lên trước nên không phải lúc nào cũng triển khai hiển thị quảng cáo dễ dàng trên AMP.
Do đó, AMP sẽ làm một phần doanh thu quảng cáo của bạn sẽ giảm đi.
2.2. Không hỗ trợ Google Analytics
Google Analytics là một công cụ thu thập và phân tích dữ liệu người dùng, bởi vì AMP sẽ sử dụng Cache, cũng như cấu trúc tối giản HTML để hiển thị nhanh hơn trên mobile nên phần nhiều sẽ không được Google tracking đầy đủ. Từ đó sẽ ảnh hưởng đến trình thu thập và phân tích người dùng.
Tuy rằng Google có hỗ trợ các tag để thay thế tracking của Google Analytics tuy nhiên công việc này thường phức tạp, tồn nhiều thời gian hơn rất nhiều so với bình thường.
2.3. Phụ thuộc vào Cache
Google không bao giờ cung cấp công nghệ làm tăng tốc độ website, Google AMP đơn giản chỉ là phiên bản website gọn nhẹ được lưu trong Cache nhằm giúp người dùng truy cập nhanh chóng khi dùng trên mobile.
AMP tuy rằng sẽ giúp tải trang nhanh hơn nhưng để được vậy bạn cũng sẽ cần làm website trở nên đơn giản, kém hấp dẫn hơn với người dùng. Vậy nên trước khi áp dụng AMP cần phải cân nhắc giữa lợi và hại của nó.
Cách kiểm tra Google AMP
Để kiểm tra website của mình đã được cài đặt AMP trước đó hay chưa. Bạn tiến hành kiểm tra AMP trên web theo từng bước dưới đây:
Bước 1: Đầu tiên bạn chỉ cần truy cập vào địa chỉ đường dẫn https://search.google.com/test/amp.
Bước 2: Sau đó, dán địa chỉ URL của website vào, rồi nhấn vào nút Kiểm Tra URL. Quá trình phân tích sẽ diễn ra trong vòng vài phút, bạn cố gắng kiên nhẫn chờ chút nhé.
Bước 3: Nếu kết quả trả về hiển thị màu xanh lá như hình bên dưới, tức trang của bạn đã được cài đặt Google AMP thành công.
Ngược lại nếu chưa cài đặt, hệ thống sẽ hiển thị đến bạn dòng thông báo “Không phải trang AMP”
Hướng dẫn cài đặt Website AMP
Làm thế nào Google sẽ tìm các trang AMP của bạn?
Google sẽ index trang AMP khi trang đó được gắn mã <html ⚡> hoặc <html amp>.
Sau đây các bước cài đặt AMP cho trang web:
Bước 1: Tạo cấu trúc AMP HTML đơn giản
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>Để có được trang AMP, bạn cần sử dụng giao thức HTTPS với những điều kiện cần thiết sau:
- <!doctype html> : tiêu chuẩn HTML
- Chứa thẻ <html ⚡> hoặc <html amp> : Để xác định nội dung có định dạng AMP.
- Chứa các thẻ <head> và <body>
- Chứa thẻ <meta charset=”utf-8″> là thẻ con đầu tiên thuộc thẻ <head>
- Chứa thẻ <script async src=”https://cdn.ampproject.org/v0.js”></script>. Đây là thẻ con thứ 2 thuộc thẻ <head>
- Chứa thẻ <link rel=”canonical” href=”$SOME_URL” /> bên trong <head>
- Chứa thẻ <meta name=”viewport” content=”width=device-width,minimum-scale=1″> bên trong thẻ <head>: Quy định chế độ xem tương ứng trên thiết bị di động
- Chứa đoạn mã boilerplate AMP trong thẻ <head>
Bước 2 - Lưu trữ AMP trên URL
Tốt nhất, bạn lưu trữ trang sử dụng Google AMP của mình trên một URL phù hợp với người dùng.
Ví dụ, với trang tiêu chuẩn là https://example.com/subfolder/this-is-an-example.html
Bạn nên lưu trữ trang AMP với URL là:
- amp.example.com/subfolder/this-is-an-example.html
- example.com/subfolder/this-is-an-example-amp.html
Để đảm bảo khi người dùng click vào, URL hiển thị sẽ liên quan đến trang web chính của bạn.
Bước 3 - Làm cho AMP của bạn dễ khám phá
Nếu trang của bạn có cả phiên bản AMP và không AMP, hãy thêm các thẻ html như sau:
Trên trang không phải AMP, tham chiếu đến phiên bản AMP của trang để cho Google và các nền tảng khác biết về nó:
<link rel="amphtml" href="https://example.com/this-is-an-example-amp.html" />Trên trang AMP, thêm văn bản sau để tham chiếu đến phiên bản chuẩn không phải AMP của nó:
<link rel=”canonical” href=”https://example.com/this-is-an-example.html” />Đối với các trang AMP độc lập (những trang không có phiên bản không phải AMP), trang AMP phải chỉ định chính nó làm phiên bản chuẩn:
<link rel=”canonical” href=”https://example.com/this-is-an-example-amp.html” />Các trang AMP độc lập cũng sẽ được lập chỉ mục nếu có thể tìm thấy chúng. Hãy đảm bảo rằng các trang AMP độc lập được liên kết với các trang được lập chỉ mục khác hoặc được liệt kê trong sơ đồ trang web (sitemap.xml) của bạn.
Bước 4 - Kiểm tra tính hợp lệ trang AMP
Như đã hướng dẫn kiểm tra Google AMP ở trên, hãy truy cập vào Google Search Console để đảm bảo tính tương thích của trang AMP của mình.
Đừng quên theo dõi các trang AMP của mình thường xuyên để đảm bảo chúng không mắc lỗi.
