 |
AMP hay Accelerated Mobile Pages là một dự án mã nguồn mở được sử dụng để cung cấp các trang web tải nhanh hơn trên thiết bị di động, được phát hành vào tháng 10 năm 2015 với mục đích cải thiện trải nghiệm người dùng, đặc biệt là các nhà xuất bản, trong việc tối ưu hóa tốt hơn các trang trên thiết bị di động.
AMP HTML được xây dựng với các cấu trúc web hiện có nhưng giới hạn CSS, HTML và Javascript để các trang web có thể được truy cập nhanh hơn.
HTML AMP hoạt động như thế nào?
HTML AMP hoạt động bằng cách thêm thư viện JavaScript AMP và không thay đổi cấu trúc chính của web. Cấu trúc web như thường lệ, chỉ thêm thư viện AMP JS để nó đủ cho thông số HTML AMP. Mã đơn giản từ một trang web với HTML AMP như thế này:
<!doctype html>
<html amp='amp' dir='ltr' lang='id'>
<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>
body {
opacity: 0
}
</style>
<noscript>
<style>
body {
opacity: 1
}
</style>
</noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>
<body>Hello World!</body>
</html>Thêm Thư viện JS AMP sẽ bao gồm:
- Thư viện AMP JS, quản lý tải tài nguyên bên ngoài để đảm bảo các trang hiển thị nhanh hơn.
- Trình xác thực AMP cung cấp một cách để các nhà phát triển web dễ dàng xác thực rằng mã của họ đáp ứng thông số kỹ thuật HTML AMP.
- Một số phần tử tùy chỉnh, được gọi là thành phần HTML AMP, giúp các mẫu chung dễ triển khai.
Thư viện AMP JS
Thư viện AMP JS bao gồm các thành phần tích hợp sẵn ( amp-ad , amp-video , amp-img , amp-pixel ) nên không cần thêm tập lệnh để tăng tốc độ hiển thị.
Trình xác thực AMP
AMP Validator cho phép các nhà phát triển web dễ dàng xác định nếu một trang web không đáp ứng thông số kỹ thuật HTML AMP.
Thêm các từ #depelopment=1 "vào URL của trang HTML AMP sẽ giúp các nhà phát triển dễ dàng phát hiện ra bất kỳ lỗi cấu trúc HTML AMP nào.
Thành phần HTML AMP
Thành phần HTML AMP là một tập hợp các phần tử tùy chỉnh bổ sung hoặc thay thế chức năng của các phần tử HTML5.
- Ghi đè các phần tử HTML5 không được phép như amp-img và amp-video .
- áp dụng nội dung của bên thứ ba, chẳng hạn như amp-youtube , amp-ad và amp-twitter .
- Đã thêm các thiết kế khác, chẳng hạn như amp-lightbox và amp-carousel .
- Đơn giản hóa các kỹ thuật tạo web, chẳng hạn như amp-anim , cho phép các nhà phát triển web hiển thị hình ảnh động, hình ảnh (GIF) hoặc tệp video (WebM hoặc MP4) dựa trên khả năng tương thích của trình duyệt.
