AMP là gì? Vì sao AMP thật sự quan trọng với hiệu suất web

AMP là gì? – Theo khảo sát của Google, khoảng 53% khách truy cập website sẽ rời đi nếu trang web này mất hơn 3s để load. Tốc độ tải trang là một trong những yếu tố quan trọng cần lưu tâm khi thiết kế websites. Vì vậy, khi Google phát hành bản update mobile-friendliness (thân thiện với mobile) và dần biến nó thành một trong những yếu tố đánh giá mobile search engine, các site owner dần tìm cách cải thiện mobile experience nhanh hơn.

Dù cho có tối ưu hóa trang cho người dùng mobile, nếu như trình duyệt mobile không tải nhanh hơn thì cũng khiến cho trải nghiệm người dùng bị gián đoạn. Vậy giải pháp nằm ở đâu? Cân nhắc qua AMP – hay còn được gọi Accelerated Mobile Pages. Hãy tìm hiểu AMP là gì và nó ảnh hưởng đến trải nghiệm người dùng mobile như thế nào.

Tốc độ site, lượt truy cập, mobile search engine rankings có một mối tương quan đáng kể. Khi một trang web cụ thể load nhanh, người dùng mobile sẽ xem nhiều mục trên trang đó hơn, từ đó giảm bounce rate.

Tất nhiên khi bounce rate giảm và mức độ trải nghiệm tăng, Google cũng sẽ tăng điểm trên page. Như vậy, các trang có AMP plugin thường sẽ có ranking cao hơn các trang không có AMP.

• Web có tốc độ tải nhanh đáng kể:

Content cũng quan trọng, tuy nhiên nếu user không thể truy cập trang thì đâu có ai đọc được bạn viết cái gì. Thậm chí chỉ delay 1 giây thôi có thể giảm conversion đến 3.5% và giảm lượt pageview đến 9.4% và tăng bounce rate đến 8.3%

Nếu trang tải chậm như rùa thì dĩ nhiên khả năng chuyển đổi mobile user sang khách hàng cũng khó mà xảy ra.

• Tăng khả năng hiển thị mobile browsers cho content marketers:

Google đã bắt đầu hiển thị kết quả AMP trên list organic. Và bạn có thể xem chúng với các biểu tượng AMP màu xanh .

Nhờ vào đặc điểm “khác biệt” này từ biểu tượng AMP này sẽ giúp làm tăng click-through-rate. Người dùng sẽ có xu hướng click vào những trang có “tick xanh” khi họ nhận ra những trang này load nhanh hơn hẳn.

• Cải thiện điểm ranking mobile search engine:

Tốc độ trang và tỷ lệ chuyển đổi có mối quan hệ khá chặt chẽ. Nếu người dùng thích trang tốc độ cao, khả năng họ theo dõi list hoặc mua hàng sẽ cao hơn. Tuy nhiên, AMP vẫn chưa là yếu tố đánh giá ranking của Google. AMP chỉ khả dụng trên bản mobile chứ không sử dụng trên phiên bản desktop.

Tuy nhiên với phiên bản mobile, các trang có ranking cao với organic mobile search result thì các trang được khai triển với AMP sẽ có rank cao hơn hẳn so với non-AMP.

• Hỗ trợ ad linh hoạt

Một số người sử dụng website hay blog với mục đích kiếm tiền và cũng có thể thay thế công việc hàng ngày. Tuy nhiên luôn luôn có yếu tố làm “kỳ đà cản mũi” làm giảm conversion rate: như là header image, navigation menu, thanh sidebar, nút share social media, … Với AMP thì sẽ loại bỏ những thứ gây xao lãng này. Khi mà code được giảm đến 6 lần.

• Tracking người dùng đơn giản hơn

Có nhiều lý do vì sao cần xác định người dùng đến từ đâu, họ xem những trang nào, … Và các công ty hỗ trợ giải pháp này bao gồm WordPress, Chartbeat, LinkedIn, Adobe Analytics, Pinterest và cả Twitter.

AMP Plugin hoạt động như thế nào?

AMP sẽ render các trang sử dụng optimized HTML. Những trang này sẽ load nhanh hơn vì một số HTML code tag manager sẽ làm chậm các trang sẽ được loại bỏ. Nếu JavaScript có trong các trang mobile thì các script này sẽ không được render trong AMP.

Một số lưu ý bạn cần biết:

• Với AMP, bạn phải dùng CSS phiên bản streamlined.
• Bạn chỉ được phép sử dụng thư viện JavaScript mà AMP cung cấp. Có thế sẽ có lazy loading và đó cũng là điểm trừ của AMP.
• Để các site AMP hoạt động, chúng cần được validate đúng cách.
• Forms không được cho phép trên các trang AMP plugin.
• Để có trải nghiệm tốt hơn thì một số fonts custom phải được load theo cách riêng.
• Tránh các hình biến dạng bằng cách chỉnh lại chiều cao và rộng.
• Sử dụng extension AMP-approved nếu muốn chiếu video trên trang.

Nếu bạn muốn tích hợp AMP plugin và dùng nó để cải thiện trang mobile, điều quan trọng chính là speed (tốc độ) và readability (có thể đọc được) chứ không phải share – ability (khả năng chia sẻ). Các button chia sẻ lên social media thậm chí cũng không hiển thị được vì đa số chúng dùng JavaScript.

Theo Paul Shappiro, cấu trúc của AMP có 3 loại:

1. AMP HTML

Là tập con của HTML, ngôn ngữ này có các tag tùy chỉnh và properties, cũng có khá nhiều restriction (hạn chế). Tuy nhiên nếu quen thuộc với HTML cơ bản, cũng không phức tạp mấy khi adapt các trang sẵn có với AMP HTML.

Sự khác biệt giữa HTML thường và AMP HTML là trang AMP HTML phải có markup sau:

Quy tắc	Mô tả
Bắt đầu với cụm <!doctype html>	Tiêu chuẩn của HTML
Chứa tag <html ⚡> ở đầu(<html amp> cũng được)	Xác định trang này là AMP content
Chứa tag <head> and <body>	HTML chính quy thì có hay không cũng được, nhưng AMP thì bắt buộc
Chứa tag <meta charset="utf-8"> như là tag con của tag <head> .	Xác định encode cho trang
Chứa tag <script async src="https://cdn.ampproject.org/v0.js"></script> bên trong thẻ <head>. Tốt nhất là để script này sớm nhất có thể trong thẻ head	Bao gồm và tải thư viện AMP JS
Chứa tag <link rel="canonical" href="$SOME_URL"> bên trong <head>	Hướng document AMP HTML đến phiên bản  HTML chính quy
Chứa tag <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> trong tag <head>. Nên có luôn initial-scale=1.	Xác định viewport responsive.
Chứa AMP boilerplate code trong thẻ <head>.	CSS boilerplate dùng để tạm ẩn content cho tới khi AMP JS được load

(nhớ copy và lưu dưới đuôi .html nhé):

Lời kết

AMP thực sự khá tiện lợi, là bản nâng cấp của các trang mobile-friendly, giúp đáp ứng mong đợi tối ưu tốc độ của trang. Tuy nhiên ngoài việc tập trung vào AMP cũng đừng bỏ qua thiết lập các chiến lược mobile marketing phù hợp để tạo ra khách hàng và phát triển doanh nghiệp.

Qúy khách có thể triển khai AMP cho wordpress cũng như các gói hosting wordpress tại đây

https://www.pavietnam.vn/vn/wordpress-hosting.html

Tham khảo các bài viết khác tại đây

Các khuyến mãi tại đây