Trang chủ Website&Landing page AMP là gì và hướng dẫn đầy đủ về AMP

AMP là gì và hướng dẫn đầy đủ về AMP

Bởi ManhKey
5982 Xem

Có nhiều bạn đã biết  hay có những bạn đã nghe nói đến AMP, AMP   rất được dân SEO ưa chuộng  vậy  AMP là gì và cách sử dụng hay cách chuyển từ web bình thường sang AMP như thế nào. Trong bài viết này mình xin chia sẻ về những gì mình tìm hiểu được về AMP, nếu các bạn nào đã biết về nó mà thấy mình thiếu điều gì hoặc chưa đúng, phiền bạn hãy  thêm đánh giá

Đầu tiên chúng ta cần phải năm rõ  AMP là gì.

Google đã khởi động dự án nguồn mở Trang di động tăng tốc để đảm bảo các trang web di động hoạt động ở tốc độ tối ưu.

Dự án AMP nhằm mục đích ‘cùng nhau xây dựng web tương lai’ bằng cách cho phép bạn tạo các trang web và quảng cáo luôn nhanh, đẹp và hiệu suất cao trên các thiết bị và nền tảng phân phối.

AMP được xây dựng với sự hợp tác của hàng ngàn nhà phát triển, nhà xuất bản, trang web, công ty phân phối và công ty công nghệ. Cho đến nay, hơn 1,5 tỷ trang AMP đã được tạo và hơn 100 nhà cung cấp phân tích, công nghệ quảng cáo và CMS hàng đầu hỗ trợ định dạng AMP.

Khi bạn tạo các trang di động ở định dạng AMP, bạn nhận được:

1. Hiệu suất và mức độ tương tác cao hơn: Các trang được tạo trong dự án nguồn mở AMP tải gần như ngay lập tức, mang đến cho người dùng trải nghiệm mượt mà, hấp dẫn hơn trên cả điện thoại di động và máy tính để bàn của họ.

2. Tính linh hoạt và kết quả: Các doanh nghiệp có cơ hội quyết định cách trình bày nội dung của họ và nhà cung cấp công nghệ nào sẽ sử dụng, trong khi duy trì và cải thiện KPI.

Bạn có thể đã nhấp vào một trang AMP trước đó, bạn chỉ không nhận ra nó. Điều duy nhất bạn có thể nhận thấy là làm thế nào ngay lập tức trang sau khi bạn nhấp. Các trang web được xây dựng AMP có chỉ báo tia sét trong kết quả tìm kiếm.

Lý do tại sao các trang AMP tải ngay lập tức là vì AMP hạn chế HTML / CSS và JavaScript, cho phép hiển thị nhanh hơn các trang web di động. Không giống như các trang di động thông thường, các trang AMP được Google AMP Cache lưu trữ tự động để có thời gian tải nhanh hơn trên tìm kiếm của Google.

Người dùng có những kỳ vọng nhất định khi họ sử dụng thiết bị di động, họ muốn có trải nghiệm có ý nghĩa, phù hợp và nhanh hơn – để đảm bảo đáp ứng mong đợi của đối tượng mục tiêu của bạn AMP là lựa chọn tốt nhất của bạn.

Hướng dẫn này sẽ đưa bạn qua mọi thứ bạn cần biết về dự án nguồn mở AMP. Chúng ta sẽ thực hiện quy trình chính xác về cách thức hoạt động của AMP và điều gì làm cho các trang tải quá nhanh.

Hướng dẫn cũng sẽ giới thiệu các nghiên cứu điển hình về cách sử dụng AMP giúp tăng chuyển đổi cho các doanh nghiệp trong các ngành khác nhau và lợi ích bạn sẽ nhận được khi bạn AMPlify trang của mình. Phần cuối cùng sẽ thảo luận về các trang đích sau khi nhấp vào Di động được tăng tốc là gì và tại sao bạn nên tạo các trang để cung cấp cho khách truy cập trải nghiệm sau khi nhấp nhanh hơn và phù hợp hơn

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.

Những tối ưu hóa được kết hợp sau đây là lý do các trang AMP rất nhanh, dường như chúng tải ngay lập tức.

Để tìm hiểu thêm về cách AMP hoạt động, bạn có thể xem video có Malte Ubl giám đốc kỹ thuật AMP hoặc đọc thông tin bên dưới video.

Chỉ cho phép các kịch bản không đồng bộ

JavaScript rất quyền năng. Nó có thể sửa đổi mọi khía cạnh của trang nhưng nó cũng có thể chặn xây dựng DOM và trì hoãn hiển thị trang (xem thêm Thêm tương tác với JavaScript). Để ngăn JavaScript không trì hoãn hiển thị trang, AMP chỉ cho phép JavaScript không đồng bộ.

Các trang AMP không thể bao gồm bất kỳ JavaScript do tác giả viết. Thay vì sử dụng JavaScript, các tính năng trang tương tác được xử lý trong các phần tử AMP tùy chỉnh. Các phần tử AMP tuỳ chỉnh có thể có JavaScript nâng cao nhưng chúng được thiết kế cẩn thận để đảm bảo chúng không làm giảm hiệu suất.

Mặc dù JS bên thứ ba được phép trong khung nội tuyến nhưng nó không thể chặn hiển thị. Ví dụ: nếu JS bên thứ ba sử dụng API document.write rất không tốt cho hiệu suất, nó sẽ không chặn hiển thị trang chính.

Chỉnh dung lượng tất cả các tài nguyên tĩnh

Tài nguyên bên ngoài như hình ảnh, quảng cáo hoặc khung nội tuyến phải nêu rõ dung lượng của chúng trong HTML để AMP có thể xác định dung lượng và vị trí của từng phần tử trước khi tài nguyên được tải xuống. AMP tải bố cục của trang mà không cần chờ đợi bất kỳ tài nguyên nào để tải xuống.

AMP giải phóng bố cục tài liệu khỏi bố cục tài nguyên. Chỉ cần một yêu cầu HTTP để bố cục toàn bộ tài liệu (+phông chữ). Vì AMP được tối ưu hóa để tránh tính toán lại định kiểu tốn kém và bố cục trong trình duyệt, sẽ không cần bố cục lại khi tải tài nguyên.

Không cho phép cơ chế tiện ích chặn hiển thị

AMP không cho phép cơ chế tiện ích chặn hiển thị trang. AMP hỗ trợ tiện ích cho những tính năng như hộp đèn, bài nhúng instagram, bài đăng trên Twitter, v.v.. Trong khi những tính năng này cần có các yêu cầu HTTP bổ sung, những yêu cầu này không chặn bố cục và hiển thị trang.

Bất kỳ trang nào sử dụng tập lệnh tùy chỉnh đều phải thông báo cho hệ thống AMP rằng cuối cùng nó sẽ có thẻ tùy chỉnh. Ví dụ: tập lệnh amp-iframe sẽ cho hệ thống biết sẽ có amp-iframetag. AMP tạo hộp khung nội tuyến trước khi nó thậm chí biết nó sẽ bao gồm:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Giữ tất cả JavaScript bên thứ ba ra khỏi đường dẫn quan trọng

JS bên thứ ba thích sử dụng tải JS đồng bộ. Chúng cũng thích các tập lệnh document.write đồng bộ hơn. Ví dụ: nếu bạn có năm quảng cáo trên trang của mình và mỗi quảng cáo trong số đó tạo ba lần tải đồng bộ, mỗi lần tải với kết nối độ trễ 1 giây, thì bạn mất 15 giây chỉ để tải JS.

Các trang AMP cho phép JavaScript bên thứ ba nhưng chỉ trong các khung nội tuyến hộp cát. Bằng cách giới hạn chúng vào khung nội tuyến, chúng không thể chặn thực thi trang chính. Ngay cả khi chúng kích hoạt nhiều tính toán lại định kiểu, các khung nội tuyến nhỏ của chúng có rất ít DOM.

Thời gian cần thiết để thực hiện tính toán lại định kiểu và bố cục bị hạn chế bởi dung lượng DOM, do đó tính toán lại khung nội tuyến rất nhanh so với việc tính lại kiểu và bố cục cho trang.

Tất cả CSS phải nội tuyến và giới hạn dung lượng

CSS chặn tất cả hiển thị, chặn tải trang và có xu hướng mở rộng. Trong trang HTML AMP, chỉ cho phép các kiểu nội tuyến. Điều này sẽ xóa 1 hoặc nhiều yêu cầu HTTP hơn từ đường dẫn hiển thị quan trọng so với hầu hết các trang web.

Ngoài ra, biểu định kiểu nội tuyến có dung lượng tối đa 50 kilobyte. Mặc dù dung lượng này đủ lớn cho các trang rất phức tạp, nhưng nó vẫn đòi hỏi tác giả trang nên thực hành vệ sinh CSS tốt.

Kích hoạt phông chữ phải hiệu quả

Phông chữ trên web rất lớn, vì vậy việc tối ưu hóa phông chữ trên web rất quan trọng đối với hiệu suất. Trên một trang điển hình có một vài tập lệnh đồng bộ và một vài biểu định kiểu bên ngoài, trình duyệt chờ đợi để bắt đầu tải xuống các phông chữ lớn này cho đến khi tất cả điều này xảy ra.

Hệ thống AMP không khai báo yêu cầu HTTP cho đến khi phông chữ bắt đầu tải xuống. Điều này chỉ có thể bởi vì tất cả JS trong AMP có thuộc tính không đồng bộ và chỉ cho phép các biểu định kiểu nội tuyến; không có yêu cầu HTTP chặn trình duyệt tải xuống phông chữ.

Giảm thiểu tính toán lại định kiểu

Mỗi lần bạn đo lường một cái gì đó, nó sẽ kích hoạt tính toán lại định kiểu tốn kém vì trình duyệt phải bố cục toàn bộ trang. Trong các trang AMP, tất cả các lần đọc DOM xảy ra trước khi tất cả các lần ghi. Điều này đảm bảo tối đa số lần tính toán lại định kiểu mỗi khung.

Tìm hiểu thêm về tác động của tính toán lại định kiểu và bố cục đối với hiệu suất hiển thị.

Chỉ chạy các hoạt ảnh được tăng tốc GPU

Cách duy nhất để tối ưu hóa nhanh là chạy chúng trên GPU. GPU biết về các lớp, nó biết cách thực hiện một số điều trên các lớp này, nó có thể di chuyển chúng, nó có thể làm mờ chúng nhưng không thể cập nhật bố cục trang; nó sẽ giao nhiệm vụ đó cho trình duyệt và điều đó không tốt.

Các quy tắc cho CSS liên quan đến hoạt ảnh đảm bảo rằng hoạt ảnh có thể được tăng tốc GPU. Cụ thể, AMP chỉ cho phép hoạt ảnh và chuyển tuyến biến đổi và độ mờ để không yêu cầu bố cục trang. Tìm hiểu thêm về sử dụng biến đổi và độ mờ để thay đổi hoạt ảnh.

Ưu tiên tải tài nguyên

AMP kiểm soát tất cả các lần tải tài nguyên: nó ưu tiên tải tài nguyên, chỉ tải những gì cần thiết và tìm nạp trước các tài nguyên lười tải.

Khi AMP tải xuống các tài nguyên, nó tối ưu hóa các lần tải xuống để các tài nguyên hiện tại quan trọng nhất được tải xuống đầu tiên. Hình ảnh và quảng cáo chỉ được tải xuống nếu người dùng có thể nhìn thấy chúng, trong màn hình đầu tiên hoặc nếu người dùng có thể nhanh chóng cuộn đến chúng.

AMP cũng tìm nạp trước các tài nguyên lười tải. Tài nguyên được tải càng muộn càng tốt nhưng được tìm nạp trước càng sớm càng tốt. Bằng cách đó mọi thứ tải rất nhanh nhưng CPU chỉ được sử dụng khi tài nguyên thực sự được hiển thị cho người dùng.

Tải trang tức thì

API kết nối trước mới được sử dụng rất nhiều để đảm bảo các yêu cầu HTTP càng nhanh càng tốt khi chúng được thực hiện. Với điều này, trang có thể được hiển thị trước khi người sử dụng cho biết rõ ràng rằng họ muốn điều hướng đến nó; trang có thể đã có sẵn vào thời điểm người dùng thực sự chọn trang, dẫn đến việc tải tức thì.

Mặc dù có thể áp dụng hiển thị trước cho tất cả nội dung web nhưng nó cũng có thể sử dụng nhiều băng thông và CPU. AMP được tối ưu hóa để giảm cả hai yếu tố này. Việc hiển thị trước chỉ tải các tài nguyên trong màn hình đầu tiên và việc hiển thị trước không hiển thị những thứ có thể tốn kém CPU.

Khi các tài liệu AMP được hiển thị trước để tải tức thì, chỉ các tài nguyên trong màn hình đầu tiên mới được thực sự tải xuống. Khi các tài liệu AMP được hiển thị trước để tải tức thì, các tài nguyên có thể sử dụng rất nhiều CPU (như khung nội tuyến bên thứ ba) sẽ không được tải xuống.

You may also like

Bình luận