Knowledge Base | Kiến thức | Domain | Hosting | Tên Miền | VPS | Email | Máy Chủ | Thuê Máy Chủ | Hoá Đơn điện tử | Tổng đài Ảo | CloudStorage|Backup| Chat30s| Web30s

Bạn Tìm Gì Hôm Nay ...?

Tất cả đều có chỉ trong 1 nốt nhạc !

Nếu cần hỗ trợ chi tiết gọi 1900 9477

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

  • Monday 06/07/2020

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.

Kỹ thuật mà Google AMP áp dụng là gì?

  • Kỹ thuật lazy loading image: đây là kỹ thuật làm trì hoãn việc tải hình ảnh cho đến khi người dùng thật sự cần xem nó. Ví dụ: hình ảnh chỉ được load khi người dùng cuộn trang đến đúng vị trí có hình đó. Cách này sẽ giảm thiểu lượng tài nguyên thừa tải lên web. Từ đó làm tăng tốc độ tải trang.
  • Kỹ thuật tải javascript bất đồng bộ async: Website có thể chạy đoạn code, upload dữ liệu phía dưới. Dù phần dữ liệu phía trên chưa được xử lý đầy đủ. Bằng cách này, người dùng sẽ giảm được thời gian chờ đợi khi tải trang.
  • Kỹ thuật CDN để javascript nhanh chóng: CDN (Content Delivery Network) là hệ thống máy chủ được đặt ở nhiều vị trí địa lý khác nhau trên toàn cầu. Chúng có nhiệm vụ truyền tải nội dung từ một nguồn đến với người dùng nhanh chóng hơn nhờ cơ chế cache.

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.

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é):

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

2. AMP JS

Là framework JavaScript cho trang mobile. Với một số phần, nó sẽ quản lý resource handling và bất đồng bộ loading. Lưu ý rằng bên thứ ba như JavaScript sẽ không được cho phép với AMP.

3. AMP CDN

Content Delivery Network thì không bắt buộc, nó lấy trang đã được kích hoạt AMP, đánh dấu cache và tạo một số tối ưu hóa hiệu suất.

Kiểm tra tính hợp lệ trang AMP

Như đã hướng dẫn kiểm tra Google AMP ở trên, hãy truy cập vào Google Search Console để đảm bảo tính tương thích của trang AMP của mình. Đừng quên theo dõi các trang AMP của mình thường xuyên để đảm bảo chúng không mắc lỗi.

hoặc kiểm tra trực tiếp trên https://search.google.com/test/amp

Hướng dẫn cài đặt Google AMP cho WordPress

Đối với WordPress, bạn có thể cài đặt plugin AMP miễn phí. Và dưới đây là cách để cài đặt plugin này:

  • Bước 1: Vào WordPress Dashboard. Chọn Plugins sau đó vào Add New
  • Bước 2: Gõ tên plugin “AMP for WP – Accelerated Mobile Pages for WordPress”
  • Bước 3: Click “Install” để cài đặt
  • Bước 4: Sau khi cài đặt xong, chuyển đến tab Appearance sau đó đến AMP.

Ở đây có nhiều tab để bạn có thể điều chỉnh trang AMP theo ý mình, ví dụ như:

  • Tab Design: điều chỉnh text của site, link cho đến background,…
  • Tab General: Chọn sử dụng AMP cho trang nào, post nào,…

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.

 

Bài viết liên quan:

  1. Hướng dẫn cài đặt WordPress thủ công trên host PA Việt Nam (cPanel)
  2. Ngăn chặn auto bot spam comment trên Joomla, WordPress
  3. Hướng dẫn cài đặt Redis Object Cache cho WordPress trên Cpanel
  4. Giới thiệu về Elementor plugin cho wordpress

Tag phổ biến