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

Hiện nay, chúng ta nhận thấy rằng quá trình tối ưu website trên 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 (CTR tăng) và tăng trải nghiệm người dùng trên 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 ai cho bạn câu trả lời chính xác nhất. Hiểu được điều đó, trong nội dung chia sẻ này tôi đã trình bày những nội dung quan trọng, đi từ cơ bản đến nâng cao giúp bạn có thể 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 – là nghĩa của từ viết tắt AMP (tạm dịch: trang tăng tốc cho thiết bị di động). AMP là dự án “xây dựng web tương lai” được tạo ra thông qua ông lớn Google.

Mục đích của nó là tăng trải nghiệm cho người dùng điện thoại thông minh, giảm thời gian tải website xuống ngắn nhất thông qua việc lưu trữ thông tin trang web 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 lên internet đã vượt qua số lượng sử dụng máy tính bàn.

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 để nội dung của mình có thể đến tay người dùng. Nếu trang web không có được thời gian tải nhanh như vậy, tức là bạn đã đánh mất 40% khách hàng tiềm năng. Lúc này, điều bạn cần đến là AMP.

AMP được xây dựng với sự cộng tác của hàng nghì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ệ. Ngoài ra, bạn có thể tìm hiểu rõ hơn về AMP tại đây

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 để người dùng điện thoại thông minh có thể 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ế để tạo ra hiệu suất cao hơn. 

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

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 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ẽ giúp cho các thẻ thường được triển khai một cách hiệu quả hơn.

Các trang AMP thường được phát hiện bởi các công cụ tìm kiếm hoặc các nền tảng 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 trang web của mình 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 trang web AMP được hiển thị nhanh chóng. Thư viện này sẽ triển khai tất cả các phương phá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 này sẽ 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 hiển thị trang 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 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 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 để điều chuyển tất cả các tài liệu AMP hợp lệ. 

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

Để 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 và hình ảnh trong cùng một nguồn cần sử dụng HTTP/2.0

AMP Cache đ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 sẽ xác nhận khi một trang có thể hoạt động và không phụ thuộc vào các tác động bên ngoài (những tác động có thể làm chậm tốc độ tải trang).

Hệ thống xác thực này hoạt động dựa trên một loạt các xác nhận để xác định việc đánh dấu những trang đáp ứng các thông số kỹ thuật HTML AMP.

Ngoài ra còn có một phiên bản bổ sung 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ị. Từ đó cho phép bạn xem 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à trải nghiệm người dùng).

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

AMP đảm bảo cho các trang web được tải nhanh hơn bằng cách sử dụng HTML AM. Từ đó nâng cao trải nghiệm người dùng nhằm giữ họ ở lại 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 4 lần so với những trang HTML chuẩn bình thường.

Để các bạn có thể có cái nhìn chi tiết hơn về những gì mình 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 trang web dành cho di động được tải nhanh hơn, trải nghiệm người dùng và KPI cũng sẽ tự động cải thiện theo. 

Nhờ việc trang web load nhanh chóng, bạn có thể cung cấp trải nghiệm web nhanh và ổn định cho người dùng của mình trên tất cả các thiết bị và nền tảng 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

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ề HTML. Tuy nhiên, chúng ta hoàn toàn có thể sử dụng các công cụ bên ngoài để thực hiệ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 AMP Page trong phần lựa chọn Create New Page của Instapage 

Trong màn hình tiếp theo, bạn chỉ cần điền tên trang web là được nhé. Instapage cho phép bạn xây dựng trang AMP từ đầu nên chúng không yêu cầu bạn phải chọn Template như cách xây dựng 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à HTML, những công cụ này không xuất hiện trên thanh toolbar

Vì AMP không hỗ trợ 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:

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, 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:

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

Đố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.

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

Khi bạn xây 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.

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:

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

Bước 5: Publish

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

Bạn có thể chọn 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.

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

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

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ách AMP mang đến hiệu quả cho website doanh nghiệp

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 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ừ tìm kiếm của Google giờ đây chưa đến nửa giây.

Một số ví dụ về các doanh nghiệp thành công với sự trợ giúp của dự án AMP có thể kể đến 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 một nửa lưu lượng truy cập là từ các thiết bị di động, trang này luôn đảm bảo rằng trang web 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.

AMP đã giúp cho các trang Gizmodo trên thiết bị di động load nhanh hơn gấp 3 lần so với trang web thông thường. Có đến hơn 80% 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 từng gặp sự cố tải chậm trang trên thiết bị di động, điều này đã khiến tỷ lệ thoát trang cao hơn và tỷ lệ chuyển đổi trên thiết bị di động thấp hơn so với tỷ lệ chuyển đổi trên máy tính để bàn.

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

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 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 đã dành thêm 2,5 lần thời gian trên trang web so với lúc trước.

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

Khi thu hút khách truy cập trên thiết bị di động, việc tạo các trang AMP sẽ mang lại cho bạn xác suất tương tác và chuyển đổi cao nhất.

Trong phần tiếp theo, chúng ta sẽ tìm hiểu về tầm quan trọng của landing pages AMP sau nhấp chuột và cách kết nối chúng.

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

TransUnion là một ví dụ đ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 trải nghiệm người dùng di động không bị hạn chế ở các website, AMP Framework đã giới thiệu các trang quảng cáo landing pages AMP sau nhấp chuột đến người dùng. 

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

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

• Người dùng sẽ 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 tốn 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

Trang web di động của bạn có tỉ lệ thoát cao và mức độ tương tác thấp do tốc độ tải trang 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 để 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 đáng hài lòng.

Các trang sau khi ứng dụng AMP sẽ có khả năng load nhanh và mượt mà hơn rất nhiều. 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 cho website của mình!

Tham khảo bài viết:

• SEO Onpage: 22 Tiêu chuẩn Tối ưu Onpage “thần tốc” 2020
• Đánh giá Top 11 plugin SEO WordPress tốt nhất được xếp hạng 2020
• Thủ thuật SEO: 81 Tuyệt chiêu SEO cực hiệu quả 2019
• Hướng dẫn SEO web: Lộ trình học SEO chi tiết cho người mới bắt đầu!
• 9 Bước để thiết kế email marketing chuyên nghiệp bạn nên biết
• Chi tiết submit URL lên Google nhanh chóng (update 2020)
• Google Tag Manager là gì? Hướng dẫn cài đặt và cách sử dụng GTM
• Local SEO là gì? Thống trị thứ hạng từ khóa với Local SEO
• Quy trình SEO 2020: Các Bước SEO Website càn quét thứ hạng Google
• Google Webmaster Tool là gì? Cách sử dụng để nâng tầm kĩ năng SEO
• BOUNCE RATE LÀ GÌ? BOUNCE RATE GOOGLE ANALYTICS BAO NHIÊU LÀ TỐT?