Mô-đun 4: Công nghệ web tiên tiến

4.1.1 AMP là gì

AMP là cách xây dựng trang web có nội dung tĩnh hiển thị nhanh. AMP trong thực tiễn ao gồm ba phần khác nhau:

  1. HTML AMP là HTML có một số hạn chế về hiệu năng đáng tin cậy và một số tiện ích để xây dựng nội dung phong phú vượt xa HTML cơ bản.
  2. Thư viện JS AMP đảm bảo việc hiển thị nhanh các trang HTML AMP.
  3. Google AMP Cache có thể được sử dụng để phục vụ các trang HTML AMP đã lưu vào bộ nhớ cache.

HTML AMP

HTML AMP về cơ bản là HTML mở rộng với thuộc tính AMP tùy chỉnh. Tệp HTML AMP đơ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>


Mặc dù hầu hết các thẻ trong trang HTML AMP đều là các thẻ HTML thông thường, một số thẻ HTML được thay thế bằng thẻ dành riêng cho AMP (xem thêm thẻ HTML trong thông số AMP). Các phần tử tùy chỉnh này, được gọi là các thành phần HTML AMP, làm cho các mẫu phổ biến dễ triển khai theo 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 chưa hỗ trợ. Tìm hiểu cách tạo trang HTML AMP đầu tiên của bạn.

JS AMP

Thư viện JS AMP thực hiện tất cả phương pháp hiệu năng hay 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à 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 hiển thị bất cứ nội dung gì.

Các kỹ thuật hiệu năng 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 bố cục của mọi phần tử trên trang trước khi tài nguyên được tải và vô hiệu công cụ chọn CSS chậm.

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

Google AMP Cache

Google AMP Cache là mạng phân phối nội dung dựa trê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 HTML AMP, lưu chúng vào bộ nhớ cache và cải thiện hiệu năng 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 để đạt được hiệu suất tối đa.

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

Một phiên bản khác của trình xác thực đi kèm với mỗi trang AMP. Phiên bản này có thể ghi lỗi xác thực 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 thử nghiệm các trang HTML AMP của bạn.

Thông tin này có hữu ích không?
Chúng tôi có thể cải thiện trang này bằng cách nào?