AMP là chữ viết tắt của Accelerated Mobile Page – một dự án mã nguồn mở được khởi động và quản lý bởi Google và được áp dụng trên nền tảng web di động. Một trang web được xây dựng theo chuẩn AMP sẽ có tốc độ tải trang nhanh hơn gấp 4 lần và sử dụng dữ liệu ít hơn 10 lần so với một trang web không sử dụng chuẩn này.
Hãy xem mô tả về AMP được Google gói gọn trong một đoạn video:
AMP cho một nội dung tĩnh được xây dựng dựa trên 3 phần:
- AMP HTML
- AMP JS
- Google AMP Cache
Phụ mục
AMP HTML
AMP HTML cơ bản được xây dựng dựa trên một vài thuộc tính được bổ sung thêm vào mã HTML như thế này:
[code language=”html”] <!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>
[/code]
Hầu hết đều là thẻ HTML thông thường và thường được bạn sử dụng, một vài thẻ được thay thế bằng thẻ AMP đặc biệt (xem thêm các thẻ AMP). Các thành phần ấy – được gọi là các thành phần AMP HTML thực hiện việc tùy biến dễ dàng nhằm mục đích tối ưu hóa.
Ví dụ, một thẻ amp-image cung cấp một srcset cho dù trình duyệt hiện tại không hỗ trợ nó. Bạn có thể xem thêm cách tạo một trang AMP đầu tiên để hiểu rõ hơn.
AMP JS
Thư viện AMP JS chứa rất nhiều các thao tác tối ưu cho phép tiến hành tối ưu hóa hiệu xuất làm việc của web ở mức độ cao, quản lý tài nguyên tải và cung cấp cho bạn các thẻ tùy chỉnh đã được đề cập ở trên, tất cả đều nhằm mục đích giúp trang của bạn render nhanh chóng.
Trong việc tối ưu hóa, vấn đề lớn nhất đến từ các resource không đồng bộ được đưa vào trang web từ bên ngoài làm chậm tiến trình tải trang. Vì vậy, nguyên tắc quan trọng là không gì được ngăn cản quá trình tải trang.
Một kĩ thuật khác được sử dụng đó là sử dụng các sandbox cho tất cả các iframe, tính toán lại cách bố trí layout của mỗi phần tử trên trang trước khi tài nguyên được nạp và vô hiệu hóa các CSS chậm.
Để tìm hiểu thêm về những điểm mạnh, điểm hạn chế, hãy đọc thêm đặc điểm của AMP HTML.
Google AMP Cache
Google AMP Cache là một mạng lưới phân phối nội dung(proxy-based content delivery network) để cung cấp các tài liệu AMP hợp lệ. Nó sẽ lấy các trang AMP, lưu trữ chúng và cải thiện hiệu xuất trang tự động. Khi sử dụng AMP Cache của Google, các tài liệu, tất cả các file JS, tất cả các hình ảnh từ cùng một nguồn gốc được sử dụng HTTP 2.0 cho hiệu quả tối đa.
Các trang cache cũng bao gồm một hệ thống xác nhận có trách nhiệm đảm bảo trang web làm việc và không phụ thuộc vào các nguồn lực bên ngoài. Các hệ thống xác nhận sẽ chạy một loạt các khẳng định để xác nhận các trang đáp ứng các đặc điểm của AMP.
Một phiên bản của trình xác nhận sẽ đi kèm với mỗi trang AMP. Phiên bản này có thể truy cập vào nhật ký lỗi xác nhận(log validation errors) của trình duyệt khi trang web được render cho phép bạn xem chúng ảnh hưởng thế nào và làm thế nào để nâng cao trải nghiệm người dùng, nâng cao hiệu suất.
AMP và WordPress
Nhanh chóng thấy được những ưu điểm của dự án AMP, WordPress đã tìm cách đưa tiêu chuẩn này vào bộ mã nguồn của mình. Và cũng nhanh chóng không kém khi ngày hôm qua (25/02/2016) các website đang lưu trữ trên WordPress.COM đều được áp dụng hệ thống AMP một cách tự động.
Đối với các website sử dụng WordPress.ORG, WordPress cũng nhanh nhạy không kém khi cho ra mắt plugin AMP giúp bạn ứng dụng kỹ thuật AMP ngay trên chính hệ thống sử dụng mã nguồn WordPress của mình. Đúng là một tin vui cho các tín đồ WordPress phải không.
Accelerated Mobile Pages (AMP)