AMP là gì? Hướng dẫn cài đặt AMP cho WordPress giúp tối ưu hiệu suất

Gần đây, có thể bạn đã nghe đến thuật ngữ “AMP”? Chính xác là Accelerated Mobile Pages – Trang tăng tốc dành cho thiết bị di động.

Tối ưu trải nghiệm trang của người dùng trên thiết bị di động là xu hướng mà các doanh nghiệp đang hướng đến. Với việc cài đặt Google AMP sẽ giúp liên kết của bạn nổi bật trên kết quả tìm kiếm, tối ưu được tốc độ tải trang đem lại lượt tương tác cao. 

Vậy AMP là gì có phải là điều mà doanh nghiệp bạn đang cần? Nếu như cần thiết thì việc cài đặt AMP các ảnh hưởng thì đến website? Mọi thắc mắc của bạn, sẽ được chúng tôi giải đáp chi tiết ngay tại nội dung này.

AMP là gì? 

Trước tiên, để đi sâu vào vấn đề tôi sẽ làm rõ khái niệm AMP là gì, nhằm giúp bạn có góc nhìn chính xác nhất về thuật ngữ này.

AMP là tên viết tắt của Accelerated Mobile Pages (trang tăng tốc dành cho thiết bị di động) là một dự án của Google và Twitter được thiết kế để tạo ra các trang di động với tốc độ nhanh. 

Về bản chất, nó là một dạng HTML rút gọn, được thiết kế siêu nhẹ và tải rất nhanh. Vì vậy, nó làm tăng lượt truy cập, click, tương tác của người dùng trên mobile.

Google AMP áp dụng kỹ thuật gì?

Đây cũng là nội dung giải thích cho câu hỏi “Điều gì làm cho AMP nhanh như vậy?”. Như mọi hình thức khác, Google AMP đã áp dụng tích hợp các kỹ thuật đặc biệt để đạt được mục tiêu tối ưu nhất:

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

Cách AMP hiển thị trong SERP (Trang kết quả tìm kiếm)

Nếu như bạn muốn biết website nào sử dụng AMP, hay đâu là kết quả hiển thị của AMP, cách đơn giản như sau:

Trong quá trình tìm kiếm trên Google bằng thiết bị di động, nếu bạn thấy những kết quả hiển thị nào có xuất hiện icon tia sét và dòng chữ AMP bên cạnh đường link, thì website đó đã cài đặt AMP.

Khi bạn click chuột vào những đường link này, nội dung sẽ hiển thị theo một trong hai hình thức sau:

• Trình xem AMP  Google: dạng mặc định để Google lưu trữ và phân phối nội dung, giúp tạo ra trải nghiệm truy cập tốt hơn.
• Signed exchange: Dạng hiển thị trên link URL URL là đường link gốc xuất bản nội dung.

Google AMP ảnh hưởng SEO như thế nào?

Mặc dù AMP không nằm trong tiêu chí xếp hạng website. Nhưng AMP giúp tăng tốc thời gian lập chỉ mục, nâng cao trải nghiệm người dùng và tăng độ tin cậy. Từ đó, vị trí thứ hạng website bạn sẽ được cải thiện.

Tuy nhiên, bạn cũng cần chú ý đến các tiêu chí Google mobile-friendly. Khi website bạn vừa có AMP, vừa đạt chuẩn mobile-friendly, website sẽ đạt hiệu quả tốt nhất và được Google ưu tiên xếp hạng (Google mobile-first index).

Cách thức hoạt động của AMP Plugin

AMP hiển thị các trang bằng cách sử dụng mã HTML được tối ưu hóa. Do đó, các trang tải nhanh hơn, vì nó loại bỏ các vấn đề của HTML Code Tag Manager (trình quản lý thẻ mã HTML) có thể làm chậm trang.

Vì vậy, với những trang có JavaScript sẽ không hiển thị trong AMP để sử dụng AMP Plugin bạn cần lưu ý một số điểm sau:

• Dùng AMP thì bạn phải sử dụng CSS phiên bản Streamlined (Sắp xếp hợp lý).
• Validate đúng cách thì Site AMP mới hoạt động.
• Sẽ có tình trạng Lazy Loading khi bạn chỉ dùng thư viện JavaScript mà AMP cung cấp.
• Forms không thể dùng vì không được cho phép trên các page AMP Plugin.
• Nên điều chỉnh lại kích thước (chiều rộng và chiều cao) để tránh hình bị biến dạng.

Cấu trúc của Google AMP có ba phần như sau:

• AMP HTML: tập hợp con của HTML, có Properties và các Tag tùy chỉnh. Nếu đã quen với HTML cơ bản thì khi bạn áp dụng các trang sẵn có với AMP HTML sẽ không quá phức tạp.
• AMP JS: là Framework JavaScript dành cho Mobile page, nó sẽ giúp quản lý Resource Handling (trình bày tài nguyên)  và việc không đồng bộ Loading. 
• AMP CDN (Content Delivery Network): giúp tạo một số tối ưu hóa hiệu suất và đánh dấu Cache các page được kích hoạt AMP.

Ưu và nhược điểm của Google AMP 

AMP lần đầu tiên xuất hiện trong kết quả tìm kiếm vào tháng 2 năm 2016 và được nhiều chuyên gia đánh giá là “tương lai của marketing”. 

Tuy nhiên, trong vài năm gần đây, AMP đã không còn được tận dụng nhiều, bởi ngoài ưu điểm nó còn các các nhược điểm khiến người dùng cần phải cân nhắc, cụ thể như sau:

Ưu điểm AMP

AMP cung cấp cho người dùng một phiên bản rút gọn của nội dung web, mang lại một số lợi ích. Bao gồm:

• Thời gian tải trang web tốt hơn: AMP giúp các trang web cung cấp nội dung nhanh hơn bằng cách loại bỏ các yếu tố không cần thiết. 
• Xếp hạng tìm kiếm cao hơn: Mặc dù AMP chưa bao giờ là một yếu tố xếp hạng, nhưng tốc độ thì có. 
• Dễ triển khai trên WordPress: Ngoài thời gian tải nhanh hơn và xếp hạng tìm kiếm cao hơn một chút, AMP không khó triển khai, ít nhất là đối với các trang web WordPress. 

Nhược điểm của AMP

• Khó để triển khai nếu không có WordPress: Để tạo một trang AMP, bạn sẽ cần kinh nghiệm viết code và hỗ trợ từ dev, khi không có WordPress.  
• Giảm doanh thu quảng cáo: khả năng hiển thị của AMP đôi khi bị hạn chế để tối ưu thời gian tải trang. Điều này sẽ gây khó khăn cho quá trình mang lại doanh thu từ quảng cáo. 
• Số phân tích hạn chế: Bạn không thể sử dụng các thẻ phân tích chuẩn trên các trang AMP, vì trang này thực sự nằm trên máy chủ của Google. 

Điều này khiến bạn khó kiểm tra những thay đổi ảnh hưởng đến traffic và làm giảm lưu lượng truy cập vào website như thế nào?

• Kiểm soát ít hơn đối với nội dung và thiết kế: AMP loại bỏ rất nhiều yếu tố “không cần thiết”, nhưng điều đó có thể bao gồm các tính năng để xây dựng thương hiệu và hướng lưu lượng truy cập đến các trang khác. 
• Giới hạn thu hút khách hàng tiềm năng : AMP cũng loại bỏ các biểu mẫu thu thập khách hàng tiềm năng và nội dung có thể tải xuống, điều này làm giảm khả năng thu thập khách hàng tiềm năng của website. 
• Giới hạn chia sẻ xã hội: Các nút chia sẻ xã hội có thể không hiển thị đúng cách vì phần lớn chúng được phát triển bằng JavaScript.

Hướng dẫn cách kiểm tra AMP

Kiểm tra AMP rất đơn giản, bạn chỉ cần thực hiện theo hướng dẫn sau:

Kiểm tra hợp lệ

Kiểm tra tính hợp lệ AMP khá đơn giản, bạn chỉ cần thực hiện theo hướng dẫn sau:

• Truy cập vào link: https://search.google.com/test/amp.
• Dán đường link bạn muốn kiểm tra vào khung.
• Click vào “Test URL” để bắt đầu quá trình kiểm tra.

Tiếp đó, hệ thống sẽ thông báo đến bạn kết quả ngay lập tức. 

• Nếu như bạn nhận kết quả “Valid AMP” và màu xanh lá có nghĩa là hợp lệ. 
• Còn với  trường hợp không hợp lệ, hệ thống sẽ báo lỗi để bạn tiến hành điều chỉnh.

Kiểm tra tốc độ tải trang

Để kiểm tra tốc độ tải trang, một số tool giúp bạn check tốc độ cực hiệu quả sau:

• Google PageSpeed ​​Insights: tool hỗ trợ đánh giá quá trình. 
• Think with Google: đây là tool chuyển check tốc độ tải trang trong các kết nối mạng khác nhau, bao gồm thời gian tải khi dùng 3G, 4G, 5G.
• Dotcom Monitor: tool được đánh giá là giúp hỗ trợ kiểm tra và phân tích toàn diện website, bao gồm: thời gian tải trang, tốc độ tải trên các trình duyệt, kiểm tra hosting và server web,…

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

Sau khi đã tìm hiểu được AMP là gì cũng như cách thức hoạt động của AMP thì ngay sau đây chúng tối sẽ hướng dẫn chi tiết các bước cài đặt AMP đơn giản cho website bạn như sau.

• <!doctype html> : tiêu chuẩn HTML 
• Chứa thẻ <html ⚡> hoặc <html amp> : Để xác định nội dung có định dạng AMP.
• Chứa các thẻ <head> và <body>
• Chứa thẻ <meta charset=”utf-8″> là thẻ con đầu tiên thuộc thẻ <head>
• Chứa thẻ <script async src=”https://cdn.ampproject.org/v0.js”></script>. Đây là thẻ con thứ 2 thuộc thẻ <head>
• Chứa thẻ <link rel=”canonical” href=”$SOME_URL” /> bên trong <head>
• Chứa thẻ <meta name=”viewport” content=”width=device-width,minimum-scale=1″> bên trong thẻ <head>: Quy định chế độ xem tương ứng trên thiết bị di động
• Chứa đoạn mã boilerplate AMP trong thẻ <head>
• Lưu trữ AMP trên URL

Lưu ý: để có thể cài AMP website bạn cần phải sử dụng giao thức HTTPS. Tốt nhất, bạn lưu trữ trang sử dụng Google AMP trên một URL phù hợp với người dùng.

Ví dụ: với trang tiêu chuẩn https://example.com/subfolder/this-is-an-example.html. Bạn sẽ lưu trữ trang AMP với URL là:

• amp.example.com/subfolder/this-is-an-example.html 
• hoặc example.com/subfolder/this-is-an-example-amp.html. 

Nhằm đảm bảo khi người dùng click vào URL chắc chắn sẽ hiển thị website chính của bạn.

Làm AMP thân thiện với người dùng. Nếu page bạn có cả phiên bản AMP và không AMP hãy thêm các thẻ html sau: 

• Đối với trang không phải AMP hãy tham chiếu phiên bản AMP của trang để trên Google hoặc các nền tảng khác biết đến nó.
• Trên trang AMP, thêm văn bản để tham chiếu phiên bản có phải tiêu chuẩn AMP không.
• Đối với AMP độc lập – những trang không phải phiên bản AMP, trang AMP chỉ định chính nó làm phiên bản tiêu chuẩn.

Đặc biệt, bạn hãy luôn lập chỉ mục cho các trang AMP độc lập (nếu có thể tìm thấy chúng). Và đảm bảo rằng các trang AMP độc lập được liên kết với các trang được liệt kê trong sơ đồ sitemap.xml hoặc được lập chỉ mục khác.

Cách cài AMP cho WordPress

Nếu bạn dùng WordPress có thể cài đặt plugin AMP hoàn toàn miễn phí. Cách cài đặt plugin gồm các bước:

• Bước 1: Truy cập WordPress Dashboard. Click chọn Plugins vào Add New
• Bước 2: Nhập vào thanh tìm kiếm tên plugin “AMP for WordPress” 
• Bước 3: Click chọn “Install” để cài đặt
• Bước 4: Cài đặt xong, bạn chuyển đến tab Appearance, tiếp theo đến AMP.

Ngay tại đây bạn sẽ thấy có rất nhiều tab để điều chỉnh page AMM, như

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

Cách Google AMP đem lại sự phát triển cho website

Gizmodo

Gizmodo sử dụng các trang AMP để nhanh hơn gấp 3 lần trên thiết bị di động. Sau một thời gian phân tích data Gizmodo đã nhận thấy hơn một nửa người dùng của họ truy cập từ mobile website. Chính vì vậy, một chiến dịch tối ưu trải nghiệm người dùng trên thiết bị di động đã được triển khai. 

Ban đầu, blog Gizmodo đã thực hiện một số kỹ thuật tối ưu hóa để tăng mức độ tương tác trên thiết bị di động, chẳng hạn như: cải thiện thời gian tải trang, xóa các tập lệnh trang không cần thiết, tải chậm cho các phần tử trang đầu tiên và đặt phông chữ dự phòng cho phông chữ web. 

Tuy nhiên, Gizmodo vẫn nghĩ rằng có thể họ làm được gì đó nhiều hơn nữa nhằm cải thiện trải nghiệm người dùng trên thiết bị di động.

Như Trưởng bộ phận Phân tích dữ liệu của Gizmodo, Josh Laurito cảm thấy đây là thách thức chính của họ: “We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.”

Câu nói trên có nghĩa là:

“Chúng tôi đã phân phối cùng một khối lượng JavaScript & CSS (lớn) cho cả người dùng trên thiết bị di động và desktop, dẫn đến gây khó khăn cho việc cải thiện một trải nghiệm trên thiết bị này mà không làm giảm trải nghiệm trên thiết bị kia.”

Không từ bỏ mục tiêu, cuối cùng đến tháng 5 năm 2016, Gizmodo đã tìm ra giải pháp cho vấn đề bằng cách triển AMP. Gizmodo hiện đã 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 làm cho các trang trên thiết bị di động Gizmodo nhanh hơn gấp 3 lần so với trang web di động thông thường. 

Gimzodo nhận được hơn 80% lưu lượng truy cập mới từ các trang AMP, tăng đáng kể lượng truy cập vào website khi so với tất cả các phiên trên di động chỉ đạt dưới 50%. 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

TransUnion gặp sự cố tải chậm các trang trên thiết bị di động khiến tỷ lệ thoát 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 desktop.

Chính vì vậy, Credit reporting agency muốn tạo một trang web di động tốt nhất trên CMS, HP TeamSite để cải thiện trải nghiệm người dùng và thu được ROI cao.

TransUnion bắt đầu sử dụng AMP với hy vọng tăng chuyển đổi trên thiết bị di động với mức chi phí hiệu quả cho mỗi đơn hàng. 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.

Các trang AMP tải trong 1,6 giây trên kết nối 3G so với các trang không phải AMP tải trọng 7,1 giây. Các trang AMP của TransUnion nhanh chóng bắt đầu mang lại nhiều chuyển đổi hơn 3%, tỷ lệ thoát giảm 26% và người dùng đã giành thêm 2,5 lần thời gian trên trang web.

Việc triển khai các trang AMP cung cấp cho người dùng trải nghiệm trên di động nhanh hơn, từ đó giảm tỷ lệ thoát và tăng chuyển đổi.

Kết luận

Nếu các trang trên thiết bị di động của bạn đang có tỷ lệ thoát cao và độ tương tác của khách truy cập thấp – nguyên nhân do tốc độ tải trang chậm, thì việc tạo các trang AMP là một giải pháp tốt tuyệt vời dành cho bạn.

Bắt đầu tạo các trang AMP ngay hôm nay, để nâng cao trải nghiệm duyệt web trên thiết bị di động tốt hơn, cải thiện điểm chất lượng và tạo ra nhiều chuyển đổi hơn.

Bài viết trên đây đã phần nào cung cấp cho các bạn nắm rõ được khái niệm AMP là gì? Và cách thức hoạt động của AMP như thế nào? Hi vọng những thông tin mà chúng tôi cung cấp sẽ giúp bạn chinh phục được Website của mình.