AMP – một giải pháp cực hữu hiệu giúp tăng tốc độ Website trên thiết bị Mobile và thúc đẩy SEO. Từ đó trang Web tiếp cận nhiều khách hàng tiềm năng và nâng thứ hạng tìm kiếm. Vậy cụ thể AMP là gì và hoạt động như thế nào. Hãy cùng NATECH tìm câu trả lời trong bài viết dưới đây.
Phần I: AMP là gì?
Việc ưu tiên hiển thị trên thiết bị di động luôn đã được Google công bố đến tất cả người dùng.
Thực tế thì người dùng, hãy tham khảo điện thoại di động của họ trước khi mua hàng. Việc sử dụng internet trên thiết bị di động đã vượt qua mức sử dụng trên thiết bị di động trên máy tính để bàn trên toàn cầu. Thậm chí, các nước như Ấn Độ, Mexico, Indonesia có hơn 4 lần điện thoại thông minh cao hơn so với sử dụng máy tính để bàn.
Có 30 tỷ khoảnh khắc di động (thời điểm khách hàng tra cứu điện thoại của họ và mong đợi câu trả lời ngay lập tức) mỗi ngày chỉ riêng ở Hoa Kỳ. Điều này có nghĩa là mỗi ngày thương hiệu của bạn có 30 tỷ cơ hội di động để cung cấp thứ gì đó cho người dùng mà họ muốn.
Có lý do khiến người dùng dành nhiều thời gian hơn để duyệt trên thiết bị di động thay vì mua hàng – người dùng khao khát sự hài lòng ngay lập tức nhiều hơn khi trên thiết bị di động của họ.
Trả lời câu hỏi này – bạn đợi một trang web trên thiết bị di động tải trong bao lâu?
Theo dữ liệu được thu thập bởi Google và SOASTA 40% người tiêu dùng rời khỏi một trang mất hơn ba giây để tải.
Ba giây.
Đó là tất cả thời gian bạn phải thu hút sự chú ý của người dùng để họ nhấp vào quảng cáo của bạn. Và nếu trang web của bạn không tải được trong thời gian nói trên, thì bạn có thể đã mất đi rất nhiều khách hàng. Theo dữ liệu, hầu hết các trang web bán lẻ dành cho thiết bị di động mất khoảng 6,9 giây để tải, tức là gấp đôi lượng thời gian mà 40% người dùng chờ đợi trước khi rời khỏi trang.
Tốc độ trang web ảnh hưởng như thế nào đến tỷ lệ thoát
Tốc độ là một yếu tố vô cùng quan trọng khi đo tỷ lệ thoát cho các trang web. Trước khi chúng tôi đi sâu vào vấn đề này, điều quan trọng là phải giải thích rằng tốc độ chủ yếu được xem xét ở hai khía cạnh đối với tỷ lệ thoát của trang web dành cho thiết bị di động, tức là thời gian sẵn sàng của DOM và thời gian tải toàn trang:
- Thời gian sẵn sàng của DOM: Thời gian sẵn sàng của DOM là lượng thời gian cần thiết để trình duyệt nhận và phân tích cú pháp mã HTML của trang – đây là yếu tố dự đoán tốt nhất về tỷ lệ thoát. Mặc dù người dùng có thể không biết khi nào mã HTML được nhận và phân tích cú pháp, nhưng mã này phải được tải trước khi có thể tải bất kỳ thành phần trang nào, chẳng hạn như hình ảnh. Nếu mã HTML mất quá nhiều thời gian tải trang web chậm. Để tăng tốc thời gian sẵn sàng cho DOM của trang web di động của bạn, tốt nhất là tránh sử dụng JavaScript chặn và ngăn trình duyệt phân tích cú pháp mã HTML. Các thành phần trang sử dụng JavaScript bao gồm quảng cáo của bên thứ ba và các tiện ích xã hội phải được tìm nạp từ máy chủ bên ngoài trước khi có thể tải trang.
- Thời gian tải toàn trang: Thời gian tải toàn trang bao gồm thời gian tải hình ảnh, phông chữ, mã CSS, v.v. trên một trang web. Tải toàn trang nhanh hơn dẫn đến tỷ lệ thoát thấp hơn:
Để đảm bảo rằng trang web của bạn có thời gian tải toàn trang nhanh hơn, bạn nên tối ưu hóa hình ảnh, phông chữ và tránh các tệp của bên thứ ba có khả năng làm chậm thời gian tải.
Thời gian tải trang là một trong những lý do mạnh nhất khiến trang bị thoát, điều tồi tệ hơn là người dùng sẽ không chỉ từ bỏ trang mà nghiên cứu cho thấy 79% người dùng sẽ không quay lại sau khi họ có trải nghiệm chậm trên trang web.
Hãy xem xét những tiết lộ gây sửng sốt về tốc độ tải trang:
- Trang web dành cho thiết bị di động trung bình mất 19 giây để tải qua kết nối 3G và 77% trang web dành cho thiết bị di động mất hơn 10 giây để tải.
- Google nhận thấy rằng chuyển đổi thấp hơn 20% cho mỗi giây bổ sung mà một trang web cần để tải. Để so sánh, các trang web tải trong 5 giây có doanh thu trên thiết bị di động tăng gấp đôi so với các trang web tải trong 19 giây.
- 61% người dùng không có khả năng quay lại trang web dành cho thiết bị di động mà họ gặp sự cố khi truy cập.
Điều đó có nghĩa là gì?
Nếu tải trang trên thiết bị di động không tức thì, không đủ nhanh cho người dùng, họ sẽ bị trả lại và có thể sẽ không quay lại. Chính vì thế, AMP đã ra đời để khắc phục tình trạng trên. Vậy AMP là gì?
AMP là gì?
AMP là viết tắt của cụm từ Accelerated Mobile Pages, được Google đã tung ra AMP để đảm bảo rằng các trang web di động hoạt động ở tốc độ tối ưu.
Dự án AMP nhằm mục đích “cùng nhau xây dựng web trong tương lai” bằng cách cho phép bạn tạo các trang web luôn nhanh và có hiệu suất cao trên các thiết bị cũng như các nền tảng phân phối.
AMP được xây 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, trang web, công ty phân phối và công ty công nghệ. Cho đến nay, hơn 1,5 tỷ trang AMP đã được tạo và hơn 100 nhà cung cấp phân tích, công nghệ quảng cáo và CMS hàng đầu hỗ trợ định dạng AMP.
Khi bạn tạo các trang dành cho thiết bị di động ở định dạng AMP, bạn sẽ nhận được:
Hiệu suất và mức độ tương tác cao hơn: Các trang được tạo trong dự án nguồn mở AMP tải gần như ngay lập tức, mang lại cho người dùng trải nghiệm mượt mà, hấp dẫn hơn trên cả điện thoại di động và máy tính để bàn của họ.
Bạn có thể đã nhấp vào một trang AMP trước đây, chỉ là bạn không nhận ra điều đó. Điều duy nhất bạn có thể nhận thấy là tốc độ của trang sau khi bạn nhấp vào. Các trang web do AMP tạo có chỉ số hiệu suất khá cao trong kết quả tìm kiếm.
Đây là cách bạn có thể nhận ra AMP trong kết quả tìm kiếm:
Lý do tại sao Các trang AMP tải ngay lập tức là do AMP hạn chế HTML/CSS và JavaScript, cho phép hiển thị trang web trên thiết bị di động nhanh hơn. Không giống như các trang dành cho thiết bị di động thông thường, các trang AMP được Google AMP Cache tự động lưu vào bộ nhớ cache để có thời gian tải nhanh hơn trên tìm kiếm của Google.
Người dùng có những kỳ vọng nhất định khi họ sử dụng thiết bị di động, họ muốn trải nghiệm có ý nghĩa, phù hợp và nhanh hơn – để đảm bảo đáp ứng kỳ vọng của đối tượng mục tiêu, AMP là lựa chọn tốt nhất cho bạn.
PHẦN 2: AMP hoạt động như thế nào?
Google tung ra Các trang trên thiết bị di động được tăng tốc (AMP) khung nguồn mở vào tháng 2 năm 2016. AMP được xây dựng vì nhu cầu tạo trải nghiệm người dùng được tích hợp chặt chẽ, được tối ưu hóa, thay vì những trải nghiệm di động cồng kềnh và chậm chạp mà người dùng xử lý hàng ngày.
Kể từ khi ra mắt, đã 25 triệu miền và hơn 4 tỷ trang được thiết lập AMP. không chỉ số lượng trang AMP tăng lên mà tốc độ của chúng cũng tăng lên, thời gian trung bình để tải một trang AMP từ tìm kiếm của Google hiện chưa đến nửa giây.
AMP dẫn đến lưu lượng truy cập trang web tăng 10% với thời gian dành cho trang tăng gấp 2 lần. Các trang web thương mại điện tử sử dụng AMP có doanh số bán hàng và chuyển đổi tăng 20% so với các trang không phải AMP:
AMP giúp các doanh nghiệp tạo các phiên bản trang web hợp lý, sạch sẽ và có liên quan, mang đến cho người dùng trải nghiệm web di động nhanh hơn.
Phân tích biểu đồ dữ liệu từ 360 trang web sử dụng AMP từ tháng 6 năm 2016 – tháng 5 năm 2017, kết quả đã chỉ ra rằng một Website có sử dụng AMP nhận được 16% tổng lưu lượng truy cập trên thiết bị di động với nội dung AMP của họ.
Các trang AMP tải nhanh hơn khoảng bốn lần so với các trang web tiêu chuẩn, cộng với việc người dùng tương tác với các trang AMP nhiều hơn 35% so với các trang web dành cho thiết bị di động tiêu chuẩn.
3 thành phần cốt lõi của AMP là gì?
Các trang AMP được xây dựng dựa trên 3 thành phần cốt lõi. Vậy 3 thành phần cốt lõi của AMP là gì?
HTML AMP
HTML AMP về cơ bản là HTML chỉ với một số hạn chế về hiệu suất đáng tin cậy. Tệp HTML AMP đơn giản nhất trông như thế này:
Hầu hết các thẻ trong AMP HTML là các thẻ HTML thông thường, tuy nhiên, một số thẻ HTML được thay thế bằng các thẻ dành riêng cho AMP. Các thẻ tùy chỉnh này được gọi là các thành phần HTML AMP và chúng làm cho các mẫu thẻ phổ biến dễ triển khai theo cách hiệu quả. Các trang AMP được công cụ tìm kiếm và các nền tảng khác phát hiện bằng thẻ HTML.
Bạn có thể chọn có phiên bản không phải AMP và phiên bản AMP cho trang của mình hoặc chỉ một phiên bản AMP.
AMP JavaScript (JS)
Thư viện AMP JS đảm bảo hiển thị nhanh các trang HTML AMP. Thư viện JS triển khai tất cả các phương pháp thực hiện hiệu suất tốt nhất của AMP, chẳng hạn như kích hoạt phông chữ và CSS nội tuyến, điều này quản lý việc tải tài nguyên và cung cấp cho bạn các thẻ HTML tùy chỉnh để đảm bảo hiển thị trang nhanh.
AMP JS làm cho mọi thứ từ các tài nguyên bên ngoài trở nên không đồng bộ, do đó không có nội dung nào trên trang có thể chặn bất kỳ nội dung nào hiển thị. JS cũng sử dụng các kỹ thuật hiệu suất khác như hộp cát cho tất cả các khung nội tuyến, tính toán trước bố cục của mọi thành phần trang trước khi tài nguyên được tải và vô hiệu hóa các bộ chọn CSS chậm.
Bộ nhớ đệm AMP
Bộ nhớ đệm AMP của Google được sử dụng để phục vụ các trang HTML AMP được lưu trong bộ nhớ cache. Bộ nhớ đệm AMP là mạng phân phối nội dung dựa trên proxy được sử dụng để phân phối tất cả các tài liệu AMP hợp lệ. Bộ nhớ cache tìm nạp các trang HTML AMP, lưu chúng vào bộ nhớ đệm và tự động cải thiện hiệu suất của trang.
Để duy trì hiệu quả tối đa, Bộ đệm ẩn AMP tải tài liệu, tệp JS và tất cả hình ảnh từ cùng một nguồn đang sử dụng HTTP 2.0.
Bộ đệm AMP đi kèm với một hệ thống xác thực tích hợp điều đó để xác nhận rằng một trang được đảm bảo hoạt động và nó không phụ thuộc vào các tác nhân bên ngoài có thể làm chậm trang. Hệ thống xác thực hoạt động dựa trên một loạt các xác nhận nhằm xác nhận đánh dấu của trang đáp ứng các thông số kỹ thuật HTML AMP.
Phiên bản bổ sung của hệ thống xác thực có sẵn cùng với mọi trang AMP. Phiên bản này có thể ghi lại 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ị, cho phép bạn xem những thay đổi phức tạp trong mã của mình có thể ảnh hưởng đến hiệu suất và trải nghiệm người dùng.
Ba thành phần cốt lõi của AMP hoạt động đồng thời để giúp các trang có thể tải nhanh chóng.
Tất cả JavaScript AMP được thực thi không đồng bộ
JavaScript có thể sửa đổi mọi khía cạnh của trang, nó có khả năng chặn cấu trúc DOM và trì hoãn hiển thị trang – cả hai yếu tố đều dẫn đến tải trang chậm. Để đảm bảo JavaScript không làm chậm quá trình hiển thị trang, AMP chỉ cho phép JavaScript không đồng bộ.
Các trang AMP không bao gồm bất kỳ JavaScript nào do tác giả viết, thay vào đó, tất cả các tính năng của trang tương tác đều do các phần tử AMP tùy chỉnh xử lý. Các phần tử AMP tùy chỉnh này có thể bao gồm JavaScript, nhưng chúng được thiết kế cẩn thận để đảm bảo chúng không gây ra bất kỳ sự suy giảm hiệu suất nào.
AMP thực hiện JavaScript của bên thứ ba trong iframe nhưng không thể chặn hiển thị trang.
Tất cả các tài nguyên có kích thước tĩnh
Tất cả các tài nguyên bên ngoài như hình ảnh và iframe phải nêu rõ kích thước HTML của chúng để AMP có thể xác định kích thước và vị trí của từng thành phần trước khi tài nguyên trang được tải xuống. AMP tải bố cục của trang mà không cần đợi bất kỳ tài nguyên nào tải xuống.
AMP có khả năng tách bố cục tài liệu khỏi bố cục kích thước, chỉ cần một yêu cầu HTTP duy nhất để bố cục toàn bộ tài liệu. Bởi vì, AMP được tối ưu hóa để tránh mọi bố cục kiểu đắt tiền và tính toán lại trong trình duyệt, sẽ không có bất kỳ bố cục lại nào khi tải tài nguyên trang.
Cơ chế mở rộng không chặn hiển thị
AMP không cho phép các cơ chế tiện ích chặn hiển thị trang, nó hỗ trợ các tiện ích mở rộng cho các thành phần như hộp đèn và nhúng phương tiện truyền thông xã hội và mặc dù những tiện ích này yêu cầu các yêu cầu HTTP bổ sung nhưng chúng không chặn bố cục và hiển thị trang.
Nếu một trang sử dụng tập lệnh tùy chỉnh thì trang đó phải cho hệ thống AMP biết rằng trang đó cuối cùng sẽ có thẻ tùy chỉnh, sau đó AMP sẽ tạo thẻ bắt buộc để trang không bị chậm. Ví dụ: nếu thẻ amp-iframe cho AMP biết sẽ có thẻ amp-iframe, thì AMP sẽ tạo hộp iframe trước khi biết nó sẽ bao gồm những gì.
Tất cả JavaScript của bên thứ ba được giữ ngoài đường dẫn quan trọng
JavaScript của bên thứ ba sử dụng tải JS đồng bộ, điều này có xu hướng làm chậm thời gian tải của bạn. Các trang AMP cho phép JavaScript của bên thứ ba nhưng chỉ trong iframe có hộp cát, bằng cách thực hiện việc này, quá trình tải JavaScript không thể chặn việc thực thi trang chính. Ngay cả khi JavaScript iframe hộp cát kích hoạt tính toán lại nhiều kiểu, iframe nhỏ của chúng có rất ít DOM.
Việc tính toán lại khung nội tuyến được thực hiện rất nhanh so với việc tính toán lại các kiểu và bố cục cho trang.
CSS phải là nội tuyến và giới hạn kích thước
CSS chặn hiển thị, nó cũng chặn tất cả tải trang và nó có xu hướng gây đầy hơi. AMP HTML chỉ cho phép các kiểu nội tuyến, điều này sẽ loại bỏ 1 hoặc hầu hết nhiều yêu cầu HTTP khỏi đường dẫn hiển thị quan trọng tới hầu hết các trang web.
Biểu định kiểu nội tuyến phải có kích thước tối đa là 75kb, mặc dù kích thước này đủ lớn cho các trang rất phức tạp, nó vẫn yêu cầu tác giả trang thực hành vệ sinh CSS tốt.
Kích hoạt phông chữ hiệu quả
Tối ưu hóa phông chữ web là rất quan trọng để tải nhanh vì phông chữ web thường có kích thước lớn. Trên một trang điển hình bao gồm một vài tập lệnh đồng bộ hóa và một vài biểu định kiểu bên ngoài, trình duyệt sẽ đợi để tải xuống phông chữ cho đến khi tất cả các tập lệnh được tải.
Khung AMP tuyên bố không yêu cầu HTTP cho đến khi tất cả các phông chữ bắt đầu tải xuống. Điều này chỉ có thể thực hiện được vì tất cả JavaScript trong AMP có thuộc tính async và chỉ các trang nội tuyến được phép, không có yêu cầu HTTP nào chặn trình duyệt tải xuống phông chữ.
Tính toán lại phong cách được giảm thiểu
Trong các trang AMP, tất cả các lần đọc DOM xảy ra trước tất cả các lần ghi, điều này đảm bảo chỉ có một lần tính toán lại các kiểu trên mỗi khung – do đó, không có tác động tiêu cực đến hiệu suất hiển thị trang.
Chỉ chạy hoạt ảnh tăng tốc GPU
Để chạy tối ưu hóa nhanh, bạn phải chạy chúng trên GPU. GPU hoạt động theo lớp, nó biết cách thực hiện một số thứ trên các lớp này – các lớp có thể được di chuyển và làm mờ. Tuy nhiên, khi GPU không thể cập nhật bố cục trang, nó sẽ giao nhiệm vụ này cho trình duyệt và điều đó không tốt cho thời gian tải trang.
Các quy tắc dành cho CSS liên quan đến hoạt ảnh đảm bảo rằng hoạt ảnh có thể được tăng tốc GPU, điều này có nghĩa là AMP chỉ cho phép tạo hoạt ảnh và chuyển tiếp khi chuyển đổi và độ mờ để không cần bố cục trang.
Tải tài nguyên được ưu tiên
AMP kiểm soát tất cả quá trình tải tài nguyên, nó ưu tiên tải tài nguyên và chỉ tải những gì cần thiết, đồng thời tìm nạp trước tất cả các tài nguyên tải chậm.
Khi AMP tải xuống các tài nguyên, nó sẽ tối ưu hóa việc tải xuống để các tài nguyên quan trọng nhất được tải xuống trước. Tất cả hình ảnh và quảng cáo chỉ được tải xuống nếu người dùng có thể nhìn thấy chúng, nếu chúng nằm trong màn hình đầu tiên hoặc nếu khách truy cập có khả năng cuộn chúng.
AMP cũng có khả năng tìm nạp trước các tài nguyên được tải chậm, các tài nguyên này được tải càng muộn càng tốt nhưng được tìm nạp trước càng sớm càng tốt. Bằng cách này, mọi thứ tải rất nhanh, nhưng CPU chỉ được sử dụng khi tài nguyên được hiển thị cho người dùng.
Tải trang ngay lập tức
API kết nối trước AMP mới được sử dụng nhiều để đảm bảo rằng các yêu cầu HTTP nhanh nhất có thể ngay khi chúng được thực hiện. Do đó, trang được hiển thị trước khi người dùng tuyên bố rõ ràng rằng họ muốn điều hướng đến trang đó, trang có thể khả dụng vào thời điểm người dùng thực sự nhìn thấy nó, khiến trang tải ngay lập tức.
AMP được tối ưu hóa để không sử dụng nhiều băng thông và CPU khi kết xuất trước nội dung web. Khi các tài liệu AMP được kết xuất trước để tải tức thì, các tài nguyên trong màn hình đầu tiên thực sự được tải xuống và các tài nguyên có thể sử dụng nhiều CPU, chẳng hạn như iframe của bên thứ ba sẽ không được tải xuống.
So sánh AMP và Instant Articles của Facebook
Facebook đã ra mắt Instant Articles vào năm 2015 để giúp các nhà xuất bản mang lại trải nghiệm đọc cực kỳ nhanh và hấp dẫn cho mọi người trên Facebook.
- Nhanh hơn 10 lần so với các bài viết thông thường.
- Trung bình có thêm 20% Instant Articles được người dùng đọc.
- 70% độc giả ít có khả năng từ bỏ Instant Articles.
Instant Articles giúp nhà xuất bản tạo các bài viết nhanh và có tính tương tác trên Facebook. Họ cung cấp cho bạn những lợi thế sau:
Nhanh chóng và đáp ứng: Instant Articles tải ngay lập tức bất kể người dùng đang sử dụng kết nối hay thiết bị nào.
Tương tác và hấp dẫn: Trải nghiệm khách hàng khiến chúng có tính tương tác cao hơn, đó là lý do tại sao Instant Articles được chia sẻ thường xuyên hơn 30% so với bài viết trên web di động.
Cả trang AMP và Instant Articles đều cung cấp cho người dùng thời gian tải nhanh, giúp giảm tỷ lệ thoát trang và tăng mức độ tương tác. Trên thực tế, Instant Articles của Facebook thậm chí còn tải nhanh hơn các trang AMP:
Tuy nhiên, các tỷ lệ chấp nhận các trang AMP cao hơn nhiều so với Instant Articles và điều đó phần lớn là do Facebook ngày càng ưu tiên video hơn các bài viết văn bản trong News Feed của mình. Điều này đã dẫn đến việc một số nhà xuất bản ngừng sử dụng Instant Articles, bao gồm New York Times và The Guardian.
Theo một vài nghiên cứu, Google đã vượt qua Facebook để trở thành nguồn lưu lượng truy cập bên ngoài hàng đầu cho các nhà xuất bản. Với Google hiện chiếm 42% lưu lượng truy cập bên ngoài của nhà xuất bản:
Tuy nhiên, khi Facebook ra mắt Instant Articles, họ đã vượt qua Google để trở thành nguồn lưu lượng truy cập thống trị cho các trang web nội dung và phương tiện truyền thông. Nhưng với sự ra mắt và thành công của AMP, Google đã trở lại vị trí dẫn đầu.
Thành công của dự án AMP nằm ở chỗ nó là một sáng kiến nguồn mở, không phải là quan hệ đối tác kinh doanh. Thay vì giới hạn người dùng trong một ứng dụng cụ thể, giống như Facebook đã làm với Instant Articles, dự án AMP nhằm mục đích thay đổi cách các nhà xuất bản tạo các trang web đáp ứng cho phiên bản di động.
So sánh AMP và Thiết kế web đáp ứng (RWD)
Tạo các trang web thân thiện với thiết bị di động là ưu tiên hàng đầu của các nhà tiếp thị kể từ khi Google ra mắt Mobilegeddon vào đầu năm 2015. Thiết kế web đáp ứng nhằm giúp tạo các trang web tập trung vào tính linh hoạt. Trang web phản hồi hoạt động trên mọi thiết bị hoặc màn hình mang lại trải nghiệm web di động tốt hơn, hấp dẫn hơn.
Về cốt lõi, cả AMP và Thiết kế web đáp ứng (RWD) đều sử dụng hầu hết các khối xây dựng cơ bản giống nhau để tạo một trang dành cho thiết bị di động, tức là HTML và JavaScript. Tuy nhiên, chúng có những điểm khác biệt khiến chúng khác biệt, chẳng hạn như:
- RWD tập trung vào tính linh hoạt: RWD bổ sung tính linh hoạt cho trang web của bạn. Bạn có thể tạo một trang web tối ưu tương thích với kích thước màn hình của khách truy cập, điều này cho phép trang của bạn có phạm vi tiếp cận và khả năng cung cấp cho người dùng trải nghiệm tốt trên thiết bị di động cũng như trên nhiều kích thước màn hình khác nhau. RWD không hoàn toàn tập trung vào thiết bị di động, nhưng hoạt động cho tất cả các thiết bị và tất cả trải nghiệm người dùng.
- AMP tập trung vào tốc độ: Khung nguồn mở AMP tập trung vào tốc độ, cụ thể là tốc độ trang trên thiết bị di động. Bằng cách sử dụng biểu định kiểu nội tuyến, tải chậm, tìm nạp trước tài nguyên và các kỹ thuật tối ưu hóa khác, AMP giúp cho các website có thể tải các trang di động ngay lập tức.
- AMP hoạt động với một trang web, RWD thay thế một trang web: Mặc dù có thể sử dụng AMP độc quyền trên các trang của bạn, AMP cũng có thể được thêm vào một trang web mà không cần thiết kế lại trang web. Tuy nhiên, với RWD, bạn cần thiết kế lại trang.
- AMP mang lại trải nghiệm người dùng tốt hơn: Có hai yếu tố chính quyết định trải nghiệm người dùng trên thiết bị di động, đó là yếu tố trang thân thiện với thiết bị di động và tốc độ. Mặc dù RWD hoạt động tốt với việc chia tỷ lệ các thành phần trang để phù hợp với màn hình của người dùng, nhưng tốc độ của nó lại thất bại khủng khiếp khi so sánh với các trang AMP.
AMP hoạt động tốt cho các trang tĩnh – các trang không có nhiều nội dung động, trong khi RWD có thể được sử dụng cho bất kỳ loại trang nào. Tuy nhiên, các trang web phản hồi mất quá nhiều thời gian để tải khiến khách truy cập thoát ra, có thể không bao giờ quay lại nữa. Nếu bạn đang tìm cách cung cấp cho người dùng trải nghiệm phản hồi nhanh trên thiết bị di động, bạn nên cân nhắc sử dụng các trang AMP.
AMP so với Ứng dụng web lũy tiến (PWA)
Ứng dụng web lũy tiến PWA là một ứng dụng web dành cho thiết bị di động được phân phối qua web, ứng dụng này hoạt động giống như một ứng dụng gốc, điểm khác biệt chính giữa PWA và các ứng dụng gốc là PWA không cần tải xuống từ Google hoặc App store.
Các ứng dụng web lũy tiến hoạt động bên trong trình duyệt web, điều này làm cho nó tải ngay lập tức, ngay cả khi kết nối internet của bạn không mạnh lắm. PWA sử dụng bộ nhớ đệm trước để đảm bảo rằng ứng dụng luôn được cập nhật để người dùng chỉ thấy phiên bản mới nhất.
PWA được thiết kế để nhìn, cảm nhận và hoạt động theo cách mà các ứng dụng di động gốc thực hiện. Người dùng gặp chúng trong trình duyệt giống như bất kỳ trang web di động nào. Sau khi tương tác với trang web đó, người dùng được nhắc cài đặt ứng dụng web trên thiết bị của họ. Nếu họ chọn cài đặt, ứng dụng sẽ tải xuống thiết bị của họ theo cách mà một ứng dụng gốc sẽ thực hiện.
Khi một ứng dụng web dành cho thiết bị di động đáp ứng các yêu cầu cần thiết do Google đề xuất, ứng dụng web dành cho thiết bị di động có thể được cung cấp dưới dạng có thể tải xuống cho người dùng.
Đây là những sự khác biệt chính giữa AMP và PWA:
Bạn có thể chọn chỉ sử dụng AMP để tạo trải nghiệm nhanh nhưng đơn giản. Bạn có thể dựa vào PWA để tạo trải nghiệm người dùng động nhưng chậm hơn. Hoặc, bạn có thể bắt đầu nhanh và duy trì tốc độ nhanh bằng cách kết hợp cả hai vào thiết kế web của mình.
Ngày nay, việc sử dụng AMP cùng với PWA đang trở nên phổ biến hơn, và các nhà phát triển tận dụng cả hai hình thức theo ba cách:
1. AMP là một ứng dụng web tiến bộ
Nếu nội dung của bạn chủ yếu là tĩnh và bạn có thể chấp nhận chức năng hạn chế của AMP, tùy chọn này cho phép bạn tạo trải nghiệm nhanh như chớp dưới dạng một PWA. AMP theo ví dụ, được xây dựng như thế này — ứng dụng web lũy tiến hoàn toàn sử dụng AMP. Nó có một nhân viên dịch vụ, cho phép truy cập ngoại tuyến, cũng như một bảng kê khai nhắc biểu ngữ “Thêm vào màn hình chính”.
2. AMP cho một ứng dụng web tiến bộ
Một cách khác để sử dụng AMP và ứng dụng web tiến bộ cùng nhau là coi trang AMP của bạn như một điểm nối với trang web của bạn. Nó bắt người dùng với tải tức thời, sau đó cuốn họ vào PWA của bạn. Điều này cho phép bạn kết hợp các trang AMP tải nhanh với PWA động hơn so với tùy chọn đầu tiên.
3. AMP trong ứng dụng web lũy tiến
Như trường hợp của AMP so với PWA, không nhất thiết phải là tất cả, bạn có thể kết hợp sử dụng cả 2 hình thức. Bạn không cần tạo tất cả các trang của mình bằng AMP; bạn cũng không cần phải tách AMP và PWA dưới dạng móc và que. Giờ đây, bạn thực sự có thể AMP chỉ một tiểu mục nhỏ của một trang, do đó giảm kích thước và giảm thời gian tải mà không phải đánh đổi hoàn toàn chức năng động.
Điều này liên quan đến việc sử dụng một dạng AMP khác được gọi là “AMP bóng tối,” cho phép AMP lồng trong một khu vực của trang web. Kết quả là AMP trong lớp vỏ của một ứng dụng web tiến bộ.
Washington Post giới thiệu một ví dụ lý tưởng về việc PWA và AMP phối hợp với nhau để mang lại mức độ tương tác tốt hơn và thời gian tải nhanh hơn. Khi Washington Post ban đầu làm cho trang web của họ phản hồi nhanh, tốc độ của họ là 3500 mili giây. Khi họ áp dụng AMP, thời gian tải trang đã giảm xuống còn 1200 mili giây, sau đó tiếp tục giảm xuống 400 mili giây với sự trợ giúp của công nghệ AMP CDN.
Sau khi họ áp dụng PWA để giảm gánh nặng cho trang web, người dùng có thể tận hưởng tốc độ tải trang nhanh như chớp mà không bị gián đoạn và trải nghiệm người dùng tốt hơn.
AMP cho phép bạn tạo các trang dành cho thiết bị di động tải ngay lập tức, giúp khách truy cập tương tác tốt hơn với trang thay vì thoát trang. Các kỹ thuật tối ưu hóa liên quan đến việc tạo trang AMP không chỉ giúp thời gian tải trang nhanh mà còn mang lại cho khách truy cập trải nghiệm người dùng tốt PWA.
PHẦN 3: Các lợi ích và hạn chế của AMP là gì?
AMP đảm bảo các trang web tải nhanh hơn, giúp nâng cao trải nghiệm người dùng và giữ khách truy cập ở lại lâu hơn trên trang. AMP sử dụng HTML AMP để giúp các trang trên thiết bị di động tải nhanh hơn, Trên thực tế, theo Gary Ilayes của Google, thời gian tải trung bình cho AMP trang là 1 giây, nhanh hơn 4 lần so với trang HTML tiêu chuẩn trung bình.
Chúng ta đã thảo luận về mối liên hệ giữa tỷ lệ thoát trang và tốc độ trang, đồng thời chúng ta đã xem tài khoản chi tiết về cách thức hoạt động của AMP và cách thức so sánh giữa AMP với PWA, RWD và Instant Article của Facebook.
Phần hướng dẫn này sẽ tập trung vào các lợi ích và hạn chế của AMP, giúp bạn có được tài khoản chi tiết về những gì bạn chuẩn bị khi tạo các trang AMP.
Lợi ích của AMP
Khi sử dụng AMP, bạn có thể cung cấp trải nghiệm web nhanh nhất quán cho người dùng của mình trên tất cả các thiết bị và nền tảng như Google, LinkedIn và Bing.
AMP cung cấp những lợi ích cho các trang di động của bạn.
Thu hút khán giả
Thời gian tải trung bình cho các trang AMP là dưới một giây, điều này có nghĩa là khi người dùng truy cập trang AMP, họ sẽ nhận được những gì họ đang tìm kiếm ngay lập tức. Bởi vì trang tải ngay lập tức nên họ tương tác với trang lâu hơn và cởi mở hơn để tìm hiểu về ưu đãi của bạn, điều này khiến họ có nhiều khả năng thực hiện hành động mà bạn muốn họ thực hiện hơn.
Tối đa hóa doanh thu
Mỗi giây bổ sung mà trang của bạn cần để tải thì chuyển đổi của bạn giảm 12%. Điều này có nghĩa là nếu bạn muốn thu hút khán giả và tăng ROI, bạn cần đảm bảo trang dành cho thiết bị di động của mình đáp ứng kỳ vọng về tốc độ của khách truy cập.
AMP cho phép bạn cung cấp cho người dùng trải nghiệm nhanh hơn ở mọi nơi – bao gồm quảng cáo, trang đích và trang web.
Duy trì sự linh hoạt và kiểm soát
Khi sử dụng định dạng AMP, bạn có khả năng giữ lại thương hiệu của riêng mình trong khi tận dụng các thành phần web được tối ưu hóa của AMP. Bạn có thể sử dụng CSS để tùy chỉnh kiểu trang web của mình và sử dụng nội dung động để tìm nạp dữ liệu khi cần.
Bạn cũng có thể sử dụng thử nghiệm A/B để thử nghiệm và tạo trải nghiệm người dùng trên thiết bị di động tốt nhất có thể cho khách hàng của mình.
Giảm độ phức tạp trong hoạt động của bạn
Quá trình tạo các trang AMP khá đơn giản và dễ hiểu. Bạn có khả năng chuyển đổi toàn bộ kho lưu trữ của mình, đặc biệt nếu bạn sử dụng CMS, bao gồm Drupal và WordPress.
Bạn không cần phải có bất kỳ bộ kỹ năng đặc biệt nào để tối ưu hóa mã cho từng trang AMP, định dạng AMP hoàn toàn có thể di động và các trang AMP luôn nhanh bất kể người dùng truy cập chúng bằng cách nào.
Tối đa hóa ROI của bạn
Các trang AMP sau khi được tạo có thể được phân phối đồng thời trên nhiều nền tảng phân phối khác nhau. Điều này cho phép bạn phân phát quảng cáo của mình trên cả trang AMP và không phải AMP, nghĩa là bạn có thể tạo quảng cáo của mình một lần và mang lại trải nghiệm thương hiệu đáng nhớ ở mọi nơi.
Tạo ra một tương lai bền vững
Dự án AMP là một sáng kiến nguồn mở nhằm bảo vệ tương lai của web bằng cách giúp mọi người mang lại trải nghiệm người dùng di động tốt hơn, nhanh hơn. Bạn có thể tham gia dự án AMP và xây dựng một tương lai bền vững cho doanh nghiệp của mình trên một trang web mở, nhanh hơn bằng cách tham gia dự án AMP.
Cung cấp trải nghiệm người dùng tốt hơn
Tất nhiên, lợi thế rõ ràng nhất của việc sử dụng các trang đích di động được tăng tốc là chúng sẽ mang lại sự hài lòng cao hơn cho người dùng. Khi cứ hai người thì có một người không muốn đợi chỉ 10 giây để tải trang web, thì việc tăng tốc quá trình lên 15-85% có thể tác động rất lớn đến mức độ hài lòng của khách truy cập.
Tăng cường SEO
Thuật toán của Google tính đến tốc độ trang và khả năng phản hồi của thiết bị di động. Trang của bạn tải trên thiết bị di động càng nhanh thì càng được xếp hạng cao trên các trang kết quả của công cụ tìm kiếm.
Tất cả các trang hỗ trợ AMP sẽ xuất hiện ở định dạng băng chuyền ngay cả trên quảng cáo trả tiền trong kết quả tìm kiếm có tia chớp màu lục bên dưới tiêu đề.
Mặc dù sử dụng các trang AMP mang lại cho bạn rất nhiều lợi thế nhưng AMP cũng có một số nhược điểm.
Không có JavaScript của bên thứ ba
Bởi vì bạn không có khả năng sử dụng JavaScript của bên thứ ba, nên bạn phải chào tạm biệt khả năng phân tích và theo dõi cho phép bạn cung cấp trải nghiệm quảng cáo được nhắm mục tiêu cao.
Không chỉ vậy mà với phiên bản JavaScript nhẹ hơn của Google, các phần tử trang yêu cầu chuyển dữ liệu không thể được sử dụng trên các trang AMP.
Không theo dõi Google Analytics
Google sử dụng phiên bản đã lưu trong bộ nhớ cache của các trang AMP cho người dùng thay vì truy cập vào máy chủ của bạn, đây là một trong những lý do khiến các trang AMP tải quá nhanh. Mặc dù bộ nhớ cache cho phép các trang của bạn tải nhanh hơn nhưng Google Analytics không theo dõi lượt truy cập từ người dùng trừ khi bạn định cấu hình cho GA và áp dụng các mã theo dõi riêng cho các trang AMP của mình.
Đây là cách bạn có thể theo dõi các trang AMP trong Google Analytics với Trình quản lý thẻ của Google.
Tuy nhiên, các trang AMP đi kèm với một loạt ưu điểm và nhược điểm, nếu bạn đang muốn cung cấp cho khách truy cập của mình trải nghiệm di động nhanh và được tối ưu hóa thì ưu điểm của AMP chắc chắn vượt trội hơn nhược điểm.
Phần tiếp theo, chúng tôi sẽ nêu bật các nghiên cứu điển hình về các doanh nghiệp đã sử dụng AMP để hoàn thành KPI và tăng ROI.
PHẦN 4: Câu chuyện thành công của AMP
Khi chúng ta nói về các trang web di động, tốc độ tương đương với doanh thu. Nghiên cứu của SOASTA cho thấy rằng thậm chí độ trễ 100 mili giây trong thời gian tải trang có thể dẫn đến chuyển đổi thấp hơn:
Để làm nổi bật tác động mà AMP có thể có trên các trang web dành cho thiết bị di động, Google đã ủy quyền cho Forrester Consulting tiến hành một nghiên cứu tổng thể về Tác động Kinh tế™ trên các nhà xuất bản và trang web thương mại điện tử sử dụng AMP.
Nghiên cứu nêu bật 4 công ty web đã và đang sử dụng định dạng AMP. Khi xem xét kết quả của 4 công ty, Forrester đã tạo ra một mô hình để dự báo lợi nhuận kỳ vọng từ việc triển khai AMP trong khoảng thời gian ba năm.
Bằng cách sử dụng mô hình này, một trang web có số lượt truy cập trang web hàng tháng là 4 triệu và tỷ suất lợi nhuận 10% có thể mong đợi lấy lại chi phí cấy các trang AMP và bắt đầu thấy lợi nhuận tích cực trong khoảng thời gian dưới 6 tháng:
Đây là những kết quả chính thu được từ nghiên cứu:
- Tăng 20% tỷ lệ chuyển đổi doanh số bán hàng. Thử nghiệm A/B được thực hiện bởi hai trang web thương mại điện tử được phỏng vấn cho nghiên cứu này đã cho thấy tỷ lệ chuyển đổi trên các trang AMP của họ tăng 20%, điều này sẽ mang lại hơn 200.000 đô la lợi nhuận hàng năm, dựa trên mô hình Forrester.
- Lưu lượng truy cập trang AMP tăng 10% hàng năm. Lưu lượng truy cập trang web tăng dẫn đến doanh số bán hàng và lượt xem quảng cáo bổ sung, điều này sẽ mang lại hơn 75 nghìn đô la lợi nhuận hàng năm cho một trang web trong năm đầu tiên, dựa trên mô hình.
- Tăng 60% số trang trên mỗi lượt truy cập. Các trang AMP hoạt động tích cực đối với thương mại điện tử và các nhà xuất bản tin tức, cả hai đều cho biết số người đến trang web đã tăng 60% và những người đó đã dành thời gian trên trang web lâu gấp đôi với mức tăng nhỏ về số lượng khách truy cập quay lại là 0,3%.
AMP là một định dạng tương đối mới và rõ ràng là bạn phải chịu một số chi phí khi áp dụng nó. Tuy nhiên, lợi ích của việc triển khai định dạng AMP lớn hơn chi phí ban đầu.
Gizmodo sử dụng các trang AMP để trở nên nhanh hơn gấp 3 lần trên thiết bị di động
Gizmodo tập trung vào trải nghiệm người dùng, với một nửa lưu lượng truy cập đến từ trang web trên thiết bị di động của họ, đảm bảo rằng trang web hoạt động nhanh và rõ ràng là điều cần thiết nếu họ muốn người đọc tương tác với nội dung của họ trên thiết bị di động.
Blog đã triển khai 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 của họ, chẳng hạn như cải thiện thời gian tải trang, loại bỏ các tập lệnh trang không cần thiết, tải từng phần cho các thành phần trang bên dưới màn hình đầu tiên và đặt phông chữ dự phòng cho phông chữ web. Tuy nhiên, nhóm Gizmodo nghĩ rằng có thể làm được nhiều điều hơn nữa để cải thiện trải nghiệm người dùng cho người dùng di động.
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ọ:
Chúng tôi đã cung cấp cùng một tải trọng JavaScript và CSS (lớn) cho người dùng trên thiết bị di động và máy tính để bàn, khiến việc cải thiện một trải nghiệm mà không làm giảm chất lượng của trải nghiệm kia trở nên khó khăn.
Gizmodo đã tìm ra giải pháp cho vấn đề của họ bằng cách triển khai khung AMP vào tháng 5 năm 2016 và hiện đang xuất bản tất cả các bài đăng của họ trên các trang AMP, thậm chí họ đang tạo các phiên bản AMP cho các bài đăng trước đó của họ.
Gizmodo hiện đã xuất bản hơn 24.000 trang AMP và đang 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 của Gizmodo nhanh hơn gấp 3 lần so với trang web trên thiết bị di động thông thường và hơn 80% lưu lượng truy cập của Gizmodo từ các trang AMP là lưu lượng truy cập mới so với dưới 50% của tất cả các phiên trên thiết bị di động. Ngoài ra, blog đã tăng 50% số lần hiển thị trên mỗi lượt xem trang trên AMP.
TransUnion tăng chuyển đổi với AMP
TransUnion đã gặp sự cố tải trang trên thiết bị di động chậm dẫn đế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 máy tính để bàn. Cơ quan báo cáo tín dụng muốn tạo một trang web di động tốt nhất trong phân khúc trên CMS của họ, HP TeamSite để cải thiện trải nghiệm người dùng và nhận được lợi tức đầu tư 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 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 phải thiết kế lại nội dung – họ đã trực tuyến với các trang AMP trong một tuần.
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 trong 7,1 giây. Các trang AMP của TransUnion nhanh chóng bắt đầu mang lại thêm 3% chuyển đổi, tỷ lệ thoát giảm 26% và người dùng dành nhiều thời gian hơn 2,5 lần 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 di động nhanh hơn, dẫn đến giảm tỷ lệ thoát và tăng chuyển đổi.
Khi thu hút khách truy cập trên thiết bị di động, việc tạo các trang AMP mang lại cho bạn xác suất tương tác và chuyển đổi cao nhất.
Phần tiếp theo sẽ làm nổi bật tầm quan trọng của trang đích AMP và cách kết nối các trang đích quảng cáo AMP được tối ưu hóa dẫn đến kết quả tốt hơn trang đích.
Phần V: Hướng dẫn chi tiết cài đặt AMP cho WordPress
Đối với phần cài đặt AMP cho WordPress, bạn có thể dùng Plugin miễn phí. Dưới đây là cách thực hiện:
- Bước 1: Đầu tiên vào WordPress Dashboard và chọn Plugins, sau đó vào mục Add New.
- Bước 2: Bạn gõ tên Plugin “Amp for WordPress” vào thanh Search – Tìm kiếm.
- Bước 3: Nhấn nút Install để tiến hành quá trình cài đặt.
- Bước 4: Sau khi Setup xong, bạn chuyển đến Tab Appearance và cuối cùng đến Amp.
Trong phần này có nhiều Tab để bạn có thể điều chỉnh trang Amp theo ý mình. Ví dụ như Tab Design dùng chỉnh Text, link cho đến background,… Hoặc Tab General khi chọn sử dụng Amp cho trang, một post nào đó…
Trên đây là những thông tin chi tiết về AMP cũng như cách sử dụng chúng. Trường hợp Website trên Mobile có tỷ lệ thoát cao, tương tác thấp do tốc độ tải chậm. Bạn đừng ngần ngại cài đặt ngay AMP.
Đây chính là giải pháp tuyệt vời để tối ưu hóa vấn đề trên, nâng cao trải nghiệm người dùng. Hãy bắt tay vào thử nghiệm Amp ngay nhé! NATECH chúc bạn thành công.
