AMP là gì? Hướng dẫn chi tiết cách tạo AMP WordPress (A-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 hình dung và triển khai tốt nhất.

Bài viết cùng chủ đề:

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

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).

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 trang web của bạn 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 tạo 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, kiểm tra 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 video dướ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 tận hưởng 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:

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ẽ hỗ trợ 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 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 trang web 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 trang web AMP được ưu tiên 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 liên quan 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 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.

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ể chạy và không phụ thuộc vào các tác động bên ngoài (những tác động có khả năng liên quan đến chậm tốc độ tải trang).

Hệ thống xác thực này 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 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ác lợi ích và hạn chế của AMP

AMP đảm bảo cho các trang web của bạn được cải thiện tải nhanh hơn bằng cách sử dụng HTML AM. Từ đó nâng cao UX 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 cải thiện 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 tính năng load web nhanh chóng, bạn có thể cung cấp quá trình tải 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 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

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 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 tính năng 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 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 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à cấu trúc 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 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:

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

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ể á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.

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ừ 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 doanh nghiệp 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 tính năng 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 đã hỗ trợ 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 yếu tố nội dung – họ đã trực tuyến với các trang có 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 đã ưu tiên 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 có AMP đã cung cấp cho users trải nghiệm di động nhanh hơn. Nhờ đó giảm vấn đề 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 áp dụng 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ấ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 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 hỗ trợ bằng cấu trúc 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 áp 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 sự 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 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 của bạn trên di động 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 tốt hơn cho website của mình!

Đọc tiếp: