amp là gì

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.

AMP là gì?

Theo Google, AMP plugin có thể cắt giảm thời gian download từ 15 đến 85%. Tháng 12 năm 2015, Google phát biểu rằng Accelerated Mobile Pages có thể trở thành một yếu tố ranking (đánh giá trang). Các trang được tối ưu hóa AMP được thăng hạng tốt hơn, nhanh hơn và thậm chí còn chuyển đổi khách truy cập trang (visitor) sang khách mua hàng (customer).

AMP plugin ra đời giữa sự kết hợp giữa Google và Twitter – dự án open-source với mục đích tối ưu hóa tốc độ tải page trên điện thoại, biến một trang (vốn đã mobile friendly) có thể load nhanh hơn bằng cách tối giản hóa chỉ giữ những chức năng cơ bản.

amp là gì

Lợi ích của AMP

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.

AMP là gì, AMP giúp làm giảm bounce rate

Để kể ra những điểm cộng của AMP thì vô số, tuy nhiên 5 điểm đáng chú ý là:

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% (theo 1 nghiên cứu)

amp là gì

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 .

AMP là gì?

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ắcMô tả
Bắt đầu với cụm Tiêu chuẩn của HTML
Chứa tag ở đầu( cũng được)Xác định trang này là AMP content
Chứa tag and HTML chính quy thì có hay không cũng được, nhưng AMP thì bắt buộc
Chứa tag như là tag con của tag .Xác định encode cho trang
Chứa tag bên trong thẻ . Tốt nhất là để script này sớm nhất có thể trong thẻ headBao gồm và tải thư viện AMP JS
Chứa tag bên trongHướng document AMP HTML đến phiên bản  HTML chính quy
Chứa tag trong tag . Nên có luôn initial-scale=1.Xác định viewport responsive.
Chứa AMP boilerplate code trong thẻ .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é)