Chưa được phân loại

AMP là gì? Hướng dẫn cách tạo Google AMP từ A-Z

Hiện nay, chúng ta đã nhận thấy rằng quá trình tối ưu trang wed trên các thiết bị di động là điều rất quan trọng. Cài đặt AMP nhằm tăng tăng tỷ lệ click tới trang và làm tăng trải nghiệm của người dùng trên các di động đã là điều cần phải thực hiện.

Vì vậy, “AMP là gì” sẽ không phải là cụm từ quá xa lạ đối với bạn và tôi. 

Nhưng:

  • AMP là gì? Nó mang lại hiệu quả ra sao?
  • Cách tạo AMP như thế nào? 

Thì không phải ai cũng biết. Hiểu được điều đó, trong bài viết này tôi sẽ chia sẻ cho bạ những nội dung quan trọng, đi từ cơ bản đến nâng cao giúp bạn hình dung và triển khai tốt nhất.

Bắt đầu tìm hiểu ngay nào!

AMP là gì?

Accelerated Mobile Pages hay gọi tắt là AMP (tạm dịch: trang tăng tốc cho thiết bị di động). Mục đích chính của AMP là tăng UX trên phiên bản di động, giảm thời gian tải trang xuống ngắn nhất thông qua việc lưu trữ thông tin trên các trang wed phụ thuộc vào bộ nhớ đệm AMP Cache của Google.

Bạn có biết, những năm gần đây, số lượng người sử dụng điện thoại di động (Mobile) trên Internet đã vượt qua số lượng người sử dụng máy tính bàn (Desktop).

amp-toi-uu-di-dong

Tuy nhiên, theo dữ liệu của Google và SOASTA:

Có đến 40% người dùng sẽ rời khỏi trang nếu thời gian tải trang mất hơn 3 giây. 

Đó là thời gian mà bạn cần phải điều chỉnh, kiểm tra nội dung của mình có thể đến tay người dùng. Nếu website của bạn tải không đủ nhanh, tức là bạn đã tự đánh mất 40% khách hàng tiềm năng. Lúc này, điều ma bạn cần đến là AMP.

AMP được tạo dựng với sự cộng tác của hàng ngàn nhà phát triển, nhà xuất bản, kiểm tra website, công ty phân phối và công ty công nghệ

Thành phần cốt lõi của AMP 

AMP có 3 thành phần chính, chúng hoạt động cùng lúc với nhau để hỗ trợ người dùng điện thoại thông minh tận hưởng được trải nghiệm tải trang nhanh chóng hơn:

  • HTML AMP
  • JavaScript AMP (JS)
  • Bộ nhớ đệm AMP

HTML AMP

HTML AMP về cơ bản chính là HTML với một số hạn chế để hỗ trợ hiệu suất cao hơn. 

Dưới đây là ví dụ cho một tệp HTML AMP đơn giản:

vi-du-html

Hầu hết các thẻ tag trong HTML là loại tag HTML bình thường. Tuy nhiên, một số tag sẽ được thay thế bằng những loại tag dành riêng cho AMP. Những tag này được gọi là thành phần HTML AMP, chúng sẽ hỗ trợ cho những thẻ thường được triển khai một cách hiệu quả hơn.

Các trang AMP thường sẽ được phát hiện bởi các công cụ tìm kiếm hoặc các nền tảng liên quan khác thông qua tag HTML.

Bạn có thể chọn cả hai phiên bản bao gồm và không bao gồm AMP cho website của bạn hoặc chỉ chọn mỗi phiên bản AMP đều được.

JavaScript AMP (JS)

Thư viện JS AMP sẽ đảm bảo cho các website có chứa AMP được ưu tiên nhanh chóng. Thư viện này sẽ giúp bạn triển khai tất cả các phương pháp giúp gia tăng hiệu suất của AMP như CSS nội tuyến (Inline CSS) và kích hoạt phông chữ bổ sung.

Các phương pháp liên quan này sẽ giúp bạn quản lý việc tải tài nguyên và cung cấp đến bạn những tag HTML thành phần để đảm bảo cho việc hiển thị trang một cách nhanh chóng.

JS AMP khiến cho các tài nguyên đến từ bên ngoài trở nên không đồng bộ, nhờ đó không có gì trên trang có thể chặn việc hiển thị. 

JS cũng sử dụng các kỹ thuật hiệu suất khác như thuộc tính Sandbox của Iframes, tính toán kiểm tra trước bố cục của phần tử trang trước khi các tài nguyên được tải và vô hiệu hóa các bộ chọn CSS (CSS Selector) cồng kềnh, chậm chạp.

Bộ nhớ đệm AMP – AMP Cache

Google AMP Cache được sử dụng để phân phát cho các trang HTML AMP đã được lưu trong bộ nhớ cache. Bộ nhớ đệm này là mạng phân phối nội dung (dựa trên nền tảng proxy) – nó được sử dụng để tối ưu hóa tất cả các tài liệu AMP hợp lệ.

Cache sẽ tìm nạp các trang HTML AMP và lưu vào bộ nhớ để cải thiện hiệu suất tải trang một cách tự động. 

Để có thể tối ưu quá trình duyệt tài liệu của bộ nhớ đệm AMP, tất cả các tệp JS cũng như hình ảnh trong cùng một nguồn bạn cần phải sử dụng HTTP/2.0

AMP Cache sẽ đi kèm với hệ thống xác thực tích hợp (Built-in Validation System). Hệ thống này có trách nhiệm sẽ xác nhận khi một trang có thể chạy và không phụ thuộc vào các tác động bên ngoài.

Hệ thống xác thực này sẽ đánh dấu những trang đáp ứng các thông số kỹ thuật HTML AMP.

Ngoài ra vẫn còn có một phiên bản bổ sung khác của hệ thống xác thực, phiên bản này có thể ghi các lỗi xác thực trực tiếp vào bảng điều khiển của trình duyệt khi trang được hiển thị xong. Từ đó cho phép bạn xem và kiểm tra những thay đổi phức tạp trong code của mình (những thay đổi này có thể ảnh hưởng đến hiệu suất và UX).

Cách tạo các trang AMP với Instapage

Tạo trang AMP có thể khá khó khăn cho những người không am hiểu về cấu trúc của HTML. Tuy nhiên, chúng ta hoàn toàn có thể sử dụng những công cụ bên ngoài để thực hiện nó.

Sau đây là cách tạo trang AMP với Instapage.

Bước 1: Tạo trang mới

Bạn lựa chọn tính năng AMP Page trong phần lựa chọn Create New Page của Instapage

lua-chon-amp-page

Trong màn hình tiếp theo, bạn chỉ cần điền tên website của bạn là được nhé. Instapage cho phép bạn xây dựng trang AMP từ đầu nên chúng sẽ không yêu cầu bạn phải chọn Template như cách xây dựng một trang AMP tiêu chuẩn thông thường.

Bước 2: Thêm phần tử vào trang

Instapage không hiển thị Timer và cấu trúc HTML, những công cụ này không xuất hiện trên thanh toolbar

thanh-toolbar-khong-ho-tro-html

Vì AMP không hỗ trợ cho việc sử dụng HTML / CSS hay JavaScript, nên bạn sẽ không tìm thấy các cài đặt đó trong trình tạo AMP Instapage. 

Tuy nhiên, bạn sẽ vẫn thấy một số tùy chọn khác như sau:

tuy-chon-cai-dat-amp

AMP landing pages sau nhấp chuột có giới hạn là 75KB. Mỗi tiện ích trong trình tạo AMP của Instapage đều mang số KB nhất định. 

Khi bạn tạo trang AMP này, trình xác thực sẽ hoạt động nền để đảm bảo trang AMP của bạn không vượt quá con số 75KB này. 

Nếu bạn đạt đến 80% giới hạn, bản cảnh báo bên dưới sẽ hiện ra cuối màn hình:

size-amp

Bước 3: Tạo biến thể A/B test

Nhấp vào “Create an A/B Test” và thêm một biến thể mới hoặc nhập biến thể của riêng bạn

tao-amp-test
Nhấp vào “Create an A/B Test”
Thêm một biến thể mới (New Variation)

Đối với những biến thể này, bạn có thể sao chép, tạm dừng, đổi tên, chuyển hoặc xóa nó bất kỳ lúc nào.

cac-lua-chon-bien-the-amp

Bước 4: Xác thực

Khi bạn tạo dựng trang AMP và đạt đến giới hạn 75KB, một chỉ báo sẽ xuất hiện như hình bên dưới để bạn xác nhận xác thực trang.

xac-thuc-amp

Nếu trang vẫn nằm trong giới hạn có thể chấp nhận và vượt qua được xác thực, bạn sẽ thấy thông báo bên dưới hiện lên màn hình:

trang-amp-duoc-duyet

Sau khi hoàn thành, bạn nhấp vào Publish

publish-trang-amp

Bước 5: Publish

WordPress và các tên miền tùy chỉnh (custom domain) đều có thể Publish các trang AMP landing pages sau khi bạn nhấp chuột.

Bạn cũng có thể áp dụng một trong hai phương pháp sau khi nhấp vào nút Publish tùy thuộc vào việc bạn có sử dụng WordPress hay không.

cai-dat-amp-wordpress

Nếu bạn dùng WordPress, hãy cài đặt và đăng nhập vào Plugin của Instapage trên trang wed của mình. Sau đó publish trang AMP landing page vào WordPress.

publish-landing-page-amp

Nếu bạn dùng domain, hãy nhập tên miền và miền phụ của mình.

bieu-tuong-amp

Ngay sau khi trang vào hoạt động, bạn sẽ thấy biểu tượng AMP hình sấm sét bên cạnh trang trong Dashboard.

Các lợi ích và hạn chế của AMP

AMP sẽ đảm bảo cho website của bạn được cải thiện tải nhanh hơn bằng cách sử dụng các HTML AM. Từ đó giúp nâng cao UX người dùng nhằm giữ họ ở lại trong trang lâu hơn.

Thực tế, theo thông tin từ Gary Illyes (nhà phân tích xu hướng quản trị website của Google):

Thời gian tải trung bình của các trang AMP là 1 giây – nhanh hơn 5 lần so với những trang HTML truyền thống.

Để các bạn có thể có được cho mình cái nhìn chi tiết hơn về những gì mà bạn có thể nhận được khi cài đặt AMP, hãy cùng tìm hiểu những lợi ích và hạn chế của AMP.

Lợi ích của AMP

Khi website dành cho di động được cải thiện nhanh hơn, trải nghiệm người dùng và KPI cũng sẽ tự động được cải thiện theo. 

Nhờ vào việc tính năng load web nhanh chóng, bạn cũng có thể cung cấp quá trình tải website nhanh và ổn định cho người dùng trên tất cả các thiết bị cũng như nền tảng liên quan như Google, LinkedIn và Bing.

AMP mang lại những lợi ích sau cho các trang dành cho di động:

Hạn chế của AMP

han-che-amp

Cách AMP mang đến hiệu quả cho trang wed của doanh nghiệp

so-luong-amp-tang

Kể từ khi ra vào năm 2016, trong vòng 2 năm, 25 triệu tên miền đã xuất bản hơn 4 tỷ trang AMP.

Không chỉ số lượng trang AMP đang ngày càng tăng lên mà tốc độ tải trang cũng tăng lên, thời gian trung bình để một trang AMP tải từ kết quả tìm kiếm của Google giờ đây chưa đến nửa giây.

Một số ví dụ về các công ty thành công với sự hỗ trợ của dự án AMP có thể kể đến các yếu tố như sau:

Gizmodo tăng traffic, tốc độ tải trang và lượt hiển thị nhờ AMP

Gizmodo là một blog tập trung vào trải nghiệm người dùng. Với hơn một nửa lưu lượng truy cập là từ các thiết bị di động, trang này vẫn luôn cố gắng đảm bảo rằng website của họ nhanh và rõ ràng.

Vì thế, từ tháng 5, 2016 Gizmodo đã xuất bản hơn 24.000 trang AMP và nhận được 100 nghìn lượt truy cập vào các trang này hàng ngày.

gizmodo-amp

AMP đã hỗ trợ cho các trang Gizmodo trên thiết bị di động load nhanh hơn gấp 4 lần so với website thông thường. Có đến hơn 80% số lưu lượng truy cập của Gizmodo đến từ các trang AMP là lưu lượng truy cập mới. Thêm vào đó, blog đã tăng 50% số lần hiển thị trên mỗi lần xem trang trên AMP.

TransUnion tăng chuyển đổi với AMP

Thỉnh thoảng TransUnion cũng gặp phải sự cố tải chậm trang trên thiết bị di động, điều này đã khiến cho tỷ lệ thoát trang cao hơn và tỷ lệ chuyển đổi trên thiết bị di động cũng giảm thấp hơn so với tỷ lệ chuyển đổi trên máy tính.

TransUnion bắt đầu sử dụng AMP với hy vọng nó có thể thay đổi được những chỉ số chuyển đổi này. Vì website của họ đã thân thiện hơn với các thiết bị di động nên TransUnion không cần thiết kế lại yếu tố nội dung – họ đã trực tuyến với các trang có AMP chỉ sau một tuần.

loi-ich-cua-amp

Các trang AMP này tải chỉ trong 1.6 giây trên kết nối 3G (các trang không AMP tải mất đến 7.1 giây). Những trang AMP bắt đầu đem lại cho doanh nghiệp nhiều chuyển đổi hơn (hơn 3%) và tỉ lệ thoát đã giảm đến 26%. Số liệu cũng cho thấy người dùng đã ưu tiên thêm 2,5 lần thời gian trên website so với lúc trước.

Chính việc triển khai các trang có AMP đã cung cấp cho users trải nghiệm di động nhanh hơn. Nhờ đó làm giảm vấn đề tỷ lệ thoát và tăng chuyển đổi cho TransUnion.

Tại sao nên tạo AMP Landing Pages thay vì Landing Pages?

TransUnion là một vấn đề điển hình cho việc các trang tải nhanh sẽ có tỉ lệ thoát thấp hơn và chuyển đổi cao hơn. 

Cách tốt nhất để tạo ra các trang tải nhanh là ứng dụng AMP. 

Landing pages cũng không ngoại lệ, để đảm bảo user experience di động không bị hạn chế ở các trang wed, AMP Framework đã giới thiệu các trang quảng cáo landing pages AMP sau mỗi lần nhấp chuột đến người dùng. 

Các trang này được hỗ trợ bằng cấu trúc HTML AMP. Chúng tải cực kỳ nhanh, tải trang trong vòng chưa đầy một giây. Trong khi đó, người dùng có thể sẽ mất đến 7 giây chờ đợi tải nếu bạn áp dụng tải landing pages thông thường.

trang-amp-tai-nhanh

Việc được đưa đến landing pages nhanh chóng sẽ đem lại cho người truy cập cảm giác thoải mái cũng như đem đến cho doanh nghiệp nhiều lợi ích hơn vì:

  • Người dùng có thể dễ dàng chấp nhận việc nhấp vào quảng cáo hơn vì họ biết nó sẽ không phải tốn quá nhiều thời gian
  • Tăng tương tác của người dùng nhờ tỉ lệ thoát giảm và chuyển đổi tăng

Việc sử dụng AMP landing pages có rất nhiều lợi ích, sự thay đổi này chắc chắn sẽ đem lại thay đổi tích cực cho chỉ số ROI cho việc kinh doanh của bạn. Vậy còn chần chờ gì nữa nhỉ?

Kết luận

Website của bạn trên di động có tỉ lệ thoát cao và mức độ tương tác thấp do website của bạn có tốc độ tải trang quá chậm chạp, vậy thì đừng ngần ngại cài đặt ngay trang AMP

Chúng là giải pháp tuyệt vời giúp bạn tối ưu hóa, tăng tốc độ tải cho trang nhằm đem đến cho người dùng những trải nghiệm tuyệt với nhất.

Các trang sau khi đã sử dụng AMP sẽ có khả năng load nhanh và mượt mà hơn rất nhiều. Vì vậy bạn hãy bắt tay vào thử nghiệm đi nhé. Chúc các bạn thành công và tạo ra được nhiều chuyển đổi tốt hơn cho website của mình!

Cảm ơn bạn đã đọc hết bài viết trên của VIDCOMEDIA mọi ý kiến và thắc mắc vui lòng để lại dưới phần Comment.

Có thể bạn quan tâm:

  1. Schema là gì? Tăng thứ hạng cho wedsite với Schema Markup
  2. Marketing-Mix là gì? Cách ứng dụng mô hình 7P trong Marketing Mix
  3. SEO Onpage là gì? Hướng dẫn SEO Onpage từ cơ bản đến nâng cao.

Author

nguyendaihai