AMP là gì

Lượt xem: 3201

1. AMP HTML

AMP HTML là HTML với một số hạn chế cho hiệu suất đáng tin cậy.

AMP HTML về cơ bản là HTML mở rộng với thuộc tính AMP tuỳ chỉnh. Tệp AMP HTML đơn giản nhất trông như sau:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Hầu hết các thẻ trong trang AMP HMTL là thẻ HTML thông thường, một số thẻ HTML được thay thế bằng các thẻ cụ thể của AMP. Xem thêm tại:HTML Tags in the AMP spec

Các phần tử tùy chỉnh này, được gọi là các thành phần AMP HTML, làm cho các mẫu phổ biến dễ triển khai theo một cách hiệu quả.

Ví dụ: thẻ amp-img cung cấp hỗ trợ srcset đầy đủ ngay cả trong các trình duyệt không hỗ trợ nó. Tìm hiểu làm thến nào để tạo trang AMP HTML đầu tiên của bạn.

2. AMP JS

Thư viện JS AMP đảm bảo việc hiển thị nhanh các trang HTML AMP.

Thư viện JS của AMP thực hiện tất cả các thực tiễn hiệu suất tốt nhất của AMP, quản lý tải tài nguyên và cung cấp cho bạn các thẻ tùy chỉnh được đề cập ở trên, tất cả để đảm bảo việc hiển thị nhanh trang của bạn.

Một trong những tối ưu hóa lớn nhất là thực tế nó làm cho mọi thứ từ nguồn bên ngoài không đồng bộ, do đó, không có gì trong trang có thể chặn bất cứ thứ gì từ hiển thị.

Các kỹ thuật thực hiện khác bao gồm hộp cát của tất cả các khung nội tuyến, tính toán trước của cách bố trí của mọi phần tử trên trang trước khi tài nguyên được tải và vô hiệu bộ chọn CSS chậm.

Để tìm hiểu thêm không chỉ về tối ưu hóa mà những hạn chế, hãy đọc đặc tả AMP HTML.

3. AMP Cache

Google AMP Cache có thể được sử dụng để phân phát các trang HTML AMP đã lưu trữ.

Google AMP Cache là mạng phân phối nội dung dựa trên ủy quyền (proxy) để phân phối tất cả tài liệu AMP hợp lệ. Nó tìm nạp các trang AMP HTML, lưu trữ chúng và cải thiện hiệu suất trang một cách tự động. Khi sử dụng Google AMP Cache, tài liệu, tất cả các tệp JS và tất cả các hình ảnh đều tải cùng nguồn gốc sử dụng HTTP 2.0 để có hiệu quả tối đa.

Bộ nhớ cache cũng đi kèm với một hệ thống xác nhận tích hợp xác nhận rằng trang được đảm bảo hoạt động, và nó không phụ thuộc vào các tài nguyên bên ngoài. Hệ thống xác nhận hợp lệ chạy một loạt các khẳng định xác nhận đánh dấu của trang đáp ứng các đặc tả AMP HTML.

Một phiên bản khác của trình xác nhận đi kèm với mỗi trang AMP. Phiên bản này có thể đăng nhập lỗi trực tiếp lên bảng điều khiển của trình duyệt khi trang được hiển thị, cho phép bạn xem những thay đổi phức tạp trong mã của bạn có thể ảnh hưởng đến hiệu suất và trải nghiệm người dùng như thế nào.

Tìm hiểu thêm về thử nghiệm các trang AMP HTML của bạn.

Nguồn: AMP