Accelerated Mobile Page (AMP) Tối Ưu Hóa Trên Mobile

Việc lướt web và truy cập internet cần được nhanh chóng và dễ dàng. Các nhà quản trị web không ngừng cố gắng để tối ưu hóa hiệu suất trang web và cải thiện tốc độ bằng mọi cách.

Website được thiết kế chủ yếu cho màn hình lớn. Nhưng số người truy cập qua màn hình nhỏ đang gia tăng với tốc độ vượt trội. Số lượt truy cập qua các màn hình nhỏ (thiết bị di động) hiện nay thậm chí đã vượt qua số lượt truy cập trên các máy tính xách tay và máy tính cá nhân.

Lượt truy cập bằng Điện thoại di động hiện chiếm 65% tổng thời gian truy cập trên các website (total time on site). Với số lượng truy cập từ điện thoại lớn như vậy, việc tối ưu hóa tốc độ truy cập là hết sức cần thiết. Để đáp ứng nhu cầu này, các ứng dụng được thiết kế cho các nền tảng di động cụ thể có sẵn trên Apple (News), Facebook Instant Articles và Snapchat (Discover). Đầu năm nay. Google giới thiệu Accelerated Mobile Page (AMP) để tăng tốc độ truyền tải nội dung di động và giúp người dùng có những trải nghiệm tốt hơn.
amp-project

Dự án Accelerated Mobile Page đã được Google công bố vào tháng 10 năm 2015, và tung ra vào tháng 2 năm nay. Đây là một sáng kiến có mã nguồn mở (open source) cung cấp cho các nhà xuất bản phương tiện để tạo ra nội dung được tối ưu hóa trên điện thoại di động giúp người dùng có thể truy cập nội dung trên website ngay lập tức từ bất cứ đâu.

Ngày 24 tháng 2, Google đã bắt đầu cho hiển thị biểu tượng AMP cho các trang web được tối ưu. Người dùng có thể lướt qua các bài viết họ muốn đọc trên điện thoại và bài viết sẽ được tải xong ngay khi họ ấn vào. Pinterest báo cáo các trang nhanh hơn 4 lần, sử dụng dữ liệu ít hơn 8 lần so với các trang được tối ưu hóa điện thoại di động bình thường. Kết quả này một phần đạt được do cấu trúc của Pinterest rất phù hợp với công nghệ AMP.

Tính đến tháng 8 năm 2016, kết quả tìm kiếm Google có hơn 150 triệu tài liệu AMP và tăng trưởng ở mức 4 triệu một tuần của mình. Đầu tháng 8, Google cho phép preview (xem trước) nội dung đã được Amped ( được tối ưu hóa bằng AMP). Và họ hy vọng sẽ áp dụng tính năng preview này một cách rộng rãi hơn vào cuối năm nay.

search-preview-min

Bạn có thể lướt qua các trang tải nhanh trong việc kích hoạt tìm kiếm AMP. Kiểm tra nó bằng cách sử dụng liên kết trên điện thoại di động của bạn (Sẽ không làm việc trên máy tính để bàn).

Ai cần sử dụng AMP

Trong tháng hai, dự án này được khởi xướng cho các nhà xuất bản tin tức. Tuy nhiên sự tiện dụng của AMP đang biến nó thành lựa chọn số một của các website về mảng giải trí, du lịch, thương mại điện tử và nhiều hơn nữa.

Với sự cải thiện 88% trong thời gian tải tài liệu AMP, Washington Post báo cáo sự gia tăng số lượng người truy cập trở lại từ điện thoại di động bằng 23%. eBay là một trong những công ty thương mại điện tử lớn chuyển sang AMP với gần 15 triệu trang duyệt sản phẩm AMP-based. Trong một thời gian ngắn, các trang này dự kiến sẽ được đẩy mạnh để dễ dàng tìm kiếm.

Có gì khác trong AMP

Hệ thống phân phối nội dung này được dựa trên khuôn khổ AMP HTML và nhanh hơn so với HTML thông thường bởi vì:

  • Đây là một phiên bản của khung HTML bình thường, trừ đi tất cả các nội dung JavaScript. Đối với JavaScript, khuôn khổ dựa trên phổ biến Thư viện JS AMP.
  • Các nội dung được lưu trữ trên bộ lưu trữ đám mây (Cloud), vì vậy thời gian cần thiết để truy vấn và lấy thông tin từ máy chủ được loại bỏ.

Có rất nhiều sự khác biệt, nhưng ở đây chúng tôi chỉ đề cập 2 sự khác biệt lớn nhất.

Tại sao nhà xuất bản và bloger nên kích hoạt AMP

Việc đọc các trang tải chậm trên điện thoại di động  là một việc làm cho người dùng cảm thấy chán nản, các nhà xuất bản đang bị mất doanh thu từ quảng cáo trên điện thoại di động. Accelerated Mobile Page sẽ giúp đem lại lượng truy cập và giữ lại họ trên website qua đó tăng khả năng quảng cáo tiếp cận được với người dùng và tăng khả năng người dùng ấn vào quản cáo.

Các trang AMP xuất hiện cùng với biểu tượng tia chớp để đánh dấu rằng chúng khác với các trang web bình thường. Người xem nhấp vào tùy chọn này, sẽ được đưa trực tiếp đến các trang AMP bên trong AMP viewer. Không chỉ vậy, ngay lập tức nội dung sẽ có sẵn bản xem trước (preview) trên kết quả tìm kiếm từ Google và các mạng xã hội như Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel và Pinterest.

Hơn nữa, các nhà xuất bản sẽ có quyền truy cập vào Google Analytics để quan sát các thông số trên trang của họ. Họ có thể chọn ra nội dung tốt nhất của mình và sử dụng nó để tối ưu hóa hiệu suất trang web và trải nghiệm của người dùng.

Accelerated Mobile Page cung cấp một lợi thế ở chỗ nó sẽ cải thiện hiệu suất và nâng cao trải nghiệm người dùng, vì vậy nguồn lực nhà xuất bản có thể  tập trung hơn vào việc cung cấp nội dung chất lượng thay vì luôn phải lo nghĩ về việc tối ưu trang web của mình.

Có những tối ưu hóa gì yêu cầu AMP

Accelerated Mobile Page thực sự có rất nhiều sự tối ưu hóa cho các trang web được thực hiện một cách thống nhất theo yêu cầu của Google. Việc tối ưu hóa khác nhau mà bạn cần phải thực hiện để làm cho một trang AMP phù hợp:

  •  Chỉ cho phép Scripts không đồng bộ – để giữ cho nó khỏi trì hoãn trang. Điều này có nghĩa là bạn không thể sử dụng bất kỳ JavaScript nào mà bạn tạo ra, và phải dựa trên các yếu tố AMP để xử lý các nội dung tương tác của các trang của bạn. JS trong iframe được cho phép, nhưng chỉ khi nó không cản trở sự hoàn trả.
  •  Định dạng tất cả tài nguyên tĩnh – AMP tải trang mà không cần chờ đợi cho nguồn tài nguyên như hình ảnh và iframe để tải về. Kích thước của các nguồn này phải được ghi trong HTTP, vì vậy kích thước và vị trí của các nguồn này được biết đến trước khi bắt đầu tải về.
  • Đừng để các extension cản trở page rendering – nếu có extension được tích hợp trong trang, đoạn văn bản tùy chỉnh phải thông báo cho hệ thống biết về nó. Vì vậy, một không gian được tạo ra cho các phần mở rộng, ngay cả trước khi AMP biết những gì nó có. Extensions cho Lightboxes, nhúng Instagram (Instagram embedded và tweets cũng tốt bởi vì họ không chặn page rendering, mặc dù nó đòi hỏi các yêu cầu HTTP bổ sung.
  • Không sử dụng JavaScripts của bên thứ 3 cho các phần quan trọng – JavaScripts của bên thứ 3 thường sử dụng đồng bộ hóa, như đã nói ở trên những JS như vậy sẽ cản trở hoạt động của AMP. Tùy chỉnh JavaScript chỉ được phép có trong iframe sandbox. Bằng cách này nó không chặn hoạt động của  trang chính. Những JS bị hạn chế trong iframe sẽ có rất ít tác động lên thời gian tải trang.
  • Tất cả CSS phải bởi nội tuyến và size-bound – điều này sẽ giúp giảm số lượng yêu cầu HTTP trong đường dẫn quan trọng.
  • Font trigger phải có hiệu suất– hệ thống AMP không cho phép các yêu cầu HTTP đến các phông chữ bắt đầu tải về.
  • Giảm thiểu kích thước sự tính toán lại – sự tính toán lại trì hoãn trự hoàn trả, vì vậy nó phải được giữ ở mức tối thiểu.
  • Chỉ chạy những animations được GPU-accelerated – tất cả các hình ảnh động phải có khả năng chạy trên GPU (Graphical Processing Unit).
  • Ưu tiên tải tài nguyên – Chỉ ưu tiên tải những nội dung  cần thiết, những tài nguyên này được AMP  load đầu tiên, với các quảng cáo và hình ảnh. Bằng cách đó các nhu cầu về CPU được giữ ở mức tối thiểu.
  • Tải trang ngay lập tức -Các yêu cầu HTTPS được xử lí nhanh nhất có thể, qua đó websites sẽ được tải trước khi user đưa ra yêu cầu truy cập dẫn tới việc khi ấn vào đường dẫn nội dung đã được tải xong.

Một loạt tiêu chuẩn định dạng quảng cáo, mạng lưới quảng cáo và công nghệ là có sẵn. Đồng thời các nhà xuất bản cũng có thể chọn định dạng riêng của họ, miễn sao nó không phải là một drag on speed.

Làm thế nào để tạo AMP với WordPress

Google có một hướng dẫn mà bạn có thể tham khảo để tạo các trang HTML AMP cơ bản, dàn dựng cho họ, xác nhận chúng như là AMP compliant, xuất bản và phân phối chúng. Trang AMP kiểm duyệt quan trọng vì các bên thứ ba cách như Twitter và Instagram tự tin rằng các trang sẽ hiển thị tốt trên các nền tảng của họ.

Theo như trang web được lưu trữ trên WordPress.com có liên quan, chúng sẽ tự động hỗ trợ cho WordPress mà không cần phải làm gì thêm. trang web tự lưu trữ WordPress có thể kích hoạt AMP bằng cách cài đặt plugin.

Accelerated Mobile Page Plugin

Khi bạn tải về, cài đặt và kích hoạt các plugin AMP trên trang web WordPress, bài viết của bạn sẽ tự động có một phiên bản AMP động. Bạn có thể truy cập vào các trang này bằng cách thêm amp vào cuối URL của bạn. Nếu permalinks không được kích hoạt, thêm? Amp = 1. Bạn sẽ không nhận thấy bất kỳ cài đặt hoặc tùy chọn nào cả.

amp-plugin-1

Plugin này là plugin chính thức từ Automattic stable, và hiện nay nó không hỗ trợ các trang và tài liệu lưu trữ, bạn cũng không thể tùy chỉnh các trang. Bạn có thể chuyển sang tài liệu trên Github để tùy biến.

Plugins khác có thể giúp bạn với AMP trên các trang web WordPress,

  •  WP AMP – để tạo ra các tùy chỉnh thiết kế AMP không có mã hóa và nâng khả năng SEO. Bạn có thể đọc thêm về nó ở đây.
  •  Accelerated Mobile Page (AMP) cho WordPress – để tạo ra một chủ đề AMP cho trang web của bạn.
  •  Custom AMP – để giúp tùy chỉnh nội dung AMP của bạn.
  •  AMP Toolbox – Cũng tùy chỉnh nội dung AMP của bạn.
  •  Facebook Instant Articles & Google AMP Pages – xuất bản và quản lý nội dung của bạn trực tiếp từ WordPress đến trang AMP Google với sự hỗ trợ của quảng cáo và phân tích.
  •  Glue for Yoast SEO & AMP – để đảm bảo rằng, WordPress AMP plugin mặc định sử dụng các siêu dữ liệu thích hợp Yoast SEO và cho phép sửa đổi của thiết kế trang AMP.

Bạn nên sử dụng AMP?

Mặc dù AMP là không bắt buộc đối với các trang web được phát hiện bởi Google, nhưng rõ ràng rằng Google sẽ nhằm thực hiện các dự án AMP \ nhiều hơn trên diện rộng. Hiện nay, AMP compliant không phải là một yếu tố riêng biệt cho thứ hạng tìm kiếm của Google.

Nếu bạn cứ nghĩ rằng tốc độ tải trang là một yếu tố trong bảng xếp hạng công cụ tìm kiếm, bạn thực sự không có nhiều sự lựa chọn nếu bạn muốn trở thành một phần của Internet di động. Nếu bảng xếp hạng công cụ tìm kiếm quan trọng với bạn, không cần phải nghĩ lại khi quyết định sử dụng AMP.

Nhưng là một phần của dự án cần tuân thủ nghiêm ngặt các định dạng theo yêu cầu của Google. Nó hạn chế những gì bạn có thể đặt trên trang web của bạn, và có thể làm cho tất cả các blog xuất hiện khá đồng đều và thiếu cá tính. Một số hình ảnh động không đăng được, và các hình thức không được hỗ trợ. Và như landing page, AMP có thể không phải là một ý tưởng tốt. Hơn nữa, có thể có các trang web mà nhấn mạnh tính thẩm mỹ và xây dựng thương hiệu trên tốc độ, AMP có thể không phải là lựa chọn số một.

Về tác giả

Duy Anh

Chào các bạn,

Mình là coder, đang sống và làm việc ở Mỹ. Mình thích viết lách nên muốn dành khoảng thời gian trống để chia sẻ các thủ thuật giúp các bạn xây dựng được trang web riêng của mình. Bạn nào cần xây dựng blog, web thì cứ ới, rảnh là mình giúp, tất cả FREE nhé!

2 Bình luận

Ý kiến cá nhân của bạn

bộ công cụ Wordpress hữu ích dành cho mọi website

Bộ công cụ hữu ích dành cho mọi website Wordpress

Bao gồm theme & plugin tốt nhất và được sử dụng nhiều nhất!

Xin vui lòng kiểm tra email để xác thực tài khoản!