AMP là gì? ⚡

Trước đây mình đã từng tìm hiểu qua về AMP khi làm việc với NextJS cũng như Wordpress và nhận thấy đây là một công nghệ rất thú vị. Do đó, trong bài blog ngày hôm nay, mình sẽ đem đến các bạn một vài điều hay ho về AMP mà có thể sẽ rất hữu ích kể cả khi bạn là một nhà phát triển front-end hay là một người sử dụng mạng thông thường.

AMP - a web component framework to easily create user-first web experiences

Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, stories, ads and emails.

AMP Project

Khi mà nhu cầu về sử dụng mạng của con người trong kỷ nguyên chấm com (. com era) đang không ngừng tăng. Theo thống kê của WebsiteSetup, có hơn 6 tỉ trang web đang tồn tại và cứ mỗi ngày lại có thêm 576,000 trang web mới được tạo ra. Do đó, nội dung tồn tại trên Internet là khổng lồ. Để trang web của bạn thu hút cũng như giữ chân được người dùng, có rất nhiều tiêu chí cần kể đến có thể kể đến là tốc độ (đặc biệt là trên nền tảng di động).

Theo The 15 Second Rule (Luật 15 giây), bạn chỉ có tối thiểu là 15 giây để thu hút được sự chú ý của người dùng mạng vào trang web của bạn. Và với thời gian tải trang, bạn chỉ có 3 giây để giữ chân người dùng ở lại trang web. Chỉ cần thời gian tải chậm trể một vài giây, bounce rate của trang web có thể tăng một cách đáng kể.

Định nghĩa về AMP (Accelerated Mobile Pages)

AMP là một khung HTML mã nguồn mở được phát triển bởi Dự án nguồn mở AMP. Ban đầu nó được tạo ra bởi Google như một đối thủ cạnh tranh với Facebook Instant Articles và Apple News. AMP được tối ưu hóa để duyệt web trên thiết bị di động và nhằm giúp các trang web tải nhanh hơn. - Wikipedia

AMP lần đầu được giởi thiệu đến cộng đồng phát triển vào tháng 10 năm 2015. Sau một khoảng thời gian thử nghiệm, AMP bắt đầu xuất hiện trong các kết quả tìm kiếm của Google Search trên nền tảng di động vào tháng 2 năm 2016. Từ tháng 9 năm 2016 đến nay, AMP đã và đang được áp dụng và sử dụng rộng rãi bởi đại đa số các công cụ tìm kiếm cũng như các công ty truyền thông, công nghệ. Có thể kể đến một số cột mốc nổi bật của công nghệ AMP như

• Tháng 9 năm 2016, Microsoft thông báo hỗ trợ AMP cho công cụ tìm kiếm Bing trên nền tảng iOS và Android
• Tháng 5 năm 2017, Google công bố có hơn 900,000 web domain đang đăng tải các trang AMP với hơn 2 tỉ trang AMP được đăng tải mỗi ngày trên toàn cầu
• Tháng 6 năm 2017, Twitter bắt đầu liên kết AMP với ứng dụng trên nền tảng iOS và Android.

Vậy AMP đem đến những gì?

Lịch sử phát triển là như vậy, nhưng AMP đem đến như cải tiến gì cho trải nghiệm của người dùng web?

Trong khuôn khổ bài viết này, mình sẽ giới thiệu qua về 2 dịch vụ nổi bật nhất của AMP là AMP Websites và AMP Stories. Ngoài ra còn có AMP Ads và AMP Email, tuy nhiên, vì mình hơi lười nên thông cảm khi mình "thiếu nghị lực" như vậy nhé 😁

AMP Websites

AMP Websites cung cấp cho nhà phát triển công cụ để tạo các trang web với tốc độ tải trang chóng mặt cùng với UI đơn giản nhưng vẫn phu hút và mượt mà. Và dịch vụ này cũng nhằm giải quyết vấn đề về tốc độ tải trang của các trang web nội dung, một phần thu hút người dùng thông qua các công cụ tìm kiếm. AMP Websites khá là giống với Facebook Instant Article.

Lấy một ví dụ cụ thể, khi bạn tìm kiếm blog của mình trên Google, bạn sẽ để ý thấy các bài viết thường có ký tự ⚡ kế bên địa chỉ trang web. Ký tự này đồng nghĩa với việc trang web ấy là một trang web AMP. Khi ấn vào trang web AMP, bạn sẽ ngay tức khắc được đưa tới trang nội dung với thời gian load trang là rất thấp.

Ngày nay, hầu hết các trang web nội dung như blog hay landing page đều áp dụng AMP websites để cải thiện trải nghiệm người dùng

AMP Stories

Bạn cứ tưởng tượng thay vì bình thường chúng ta sử dụng Story trên các mạng xã hội như Facebook hay Instagram ra sao, thì AMP Stories cũng có tính năng như vậy nhưng thay vào đó là...trên công cụ tìm kiếm.

Web Stories được xây dựng với đa dạng hình thức truyền thông, dù bạn có sử dụng hình ảnh, video hay GIF, tất cả đều phụ thuộc vào bạn. Hình ảnh và video sẽ tự nới rộng để phù hợp với màn hình của người đọc, cung cấp một trải nghiệm mượt và đầy tính tương tác.

Tới đây thì mình nghĩ các bạn cũng đã hiểu được AMP là gì rồi nhỉ. Về phần kỹ thuật và các thiết lập AMP cho trang web, các bạn có thể xem qua bài viết dưới đây để biết thêm thông tin chi tiết nhé

AMP là gì? AMP ảnh hưởng lên mobile browsers như thế nào? | TopDev

AMP là gì? Cách giúp trình duyệt mobile tải nhanh hơ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 thế nào.

TopDev - Tech BlogTopDev Blog

AMP là công nghệ mà mình nghĩ các lập trinh viên, đặc biệt là lập trình viên frontend nên để mắt tới. Như các tính năng và ưu thế mà trang web AMP mang lại, trải nghiệm của người dùng khi vào trang web của bạn sẽ được cải thiện đáng kể.