Hướng dẫn cho người mới bắt đầu về các trang di động được tăng tốc (AMP)

Trang di động được tăng tốc là sáng kiến của Google có ý định giải quyết vấn đề lớn nhất của web di động - tốc độ. Trải nghiệm người dùng tuyệt vời mà chúng tôi thiết kế rất cẩn thận, rất chậm trên thiết bị di động.

Sự chậm chạp không chỉ là vấn đề của UX, mà còn giảm tỷ lệ chuyển đổi, và gây hại cho khả năng tiếp cận bằng cách loại trừ người dùng có kết nối internet chậm hơn. AMP là một nỗ lực nhóm được đưa ra với mục tiêu cho phép các nhà xuất bản tạo nội dung được tối ưu hóa cho thiết bị di động một lần và tải nó ngay lập tức ở mọi nơi.

Kể từ khi ra mắt, nhiều nhà xuất bản như BBC, The economist, Guardian News và Financial Times đã thực hiện sáng kiến này, vì vậy, bây giờ chúng ta có thể cho rằng AMP là một sự đổi mới đáng để xem xét cho mọi người muốn duy trì sự cạnh tranh trên thiết bị di động web.

AMP đang hoạt động

Trước khi đi sâu vào chi tiết, đây là Bản demo AMP, để bạn có thể nhìn thấy nó trong hành động. Bản demo có thể được truy cập trên liên kết này.

Để thấy AMP hoạt động, bạn cần làm hai việc:

Xem bản demo trên thiết bị di động hoặc trên trình giả lập di động, ví dụ: Trình mô phỏng thiết bị di động của Chrome DevTools.
Chạy truy vấn tìm kiếm trên thanh tìm kiếm. Vì Google AMP hiện đang hoạt động chủ yếu với trang web tin tức, sự lựa chọn tốt nhất là một câu chuyện mới.

Trên ảnh chụp màn hình bên dưới, bạn có thể thấy những gì tôi nhận được khi sử dụng thuật ngữ tìm kiếm rio olympics.

Bản thử nghiệm trang di động được tăng tốc trên iPad

Như bạn có thể thấy, các trang AMP xuất hiện dưới dạng Thẻ Google Rich, một băng chuyền hình ảnh tối ưu hóa điện thoại di động, mà Google phát hành vào tháng 5 năm 2016.

Lưu ý cách Google phân biệt các trang AMP với các trang được tối ưu hóa cho thiết bị di động khác bằng cách sử dụng 2 nhãn khác nhau: AMP và Mobile thân thiện. Bạn cũng nên nhấp vào một số kết quả để xem trang web AMP trông như thế nào và tốc độ chạy trên thiết bị di động.

Bối cảnh kỹ thuật

AMP là một tiêu chuẩn web được xây dựng trên các công nghệ web hiện có và tập trung vào nội dung tĩnh. Nó có 3 phần khác nhau:

AMP HTML: sửa đổi HTML với (1) hạn chế của một số tính năng HTML / CSS thông thường và (2) giới thiệu các thẻ tùy chỉnh mới (Thành phần)
Mã AMP: thực thi các thực tiễn tốt nhất để giảm thời gian tải trang
AMP CDN: bộ đệm với hệ thống xác thực tích hợp, giúp tối ưu hóa hơn nữa trang web của bạn

Nếu bạn muốn biết thêm về nền tảng kỹ thuật của các trang AMP, hãy xem video dưới đây mà Paul Bakaus của Google cung cấp cho nói chuyện giới thiệu trên AMP.

Nếu bạn muốn lặn sâu hơn, cũng đáng để hiểu những kỹ thuật tối ưu hóa AMP sử dụng để tăng tốc hiệu suất trên thiết bị di động. Trong video dưới đây, Malte Ubl, trưởng nhóm AMP Engineering giải thích về giải phẫu của AMP chi tiết.

AMP HTML

Trang di động được tăng tốc là trang HTML thông thường cần phải tuân theo một bộ quy tắc để làm cho các trang tải nhanh hơn và kết xuất với hiệu suất đáng tin cậy.

Chúng ta hãy xem những điều quan trọng nhất bạn cần biết về nó. Bạn cũng có thể xem thông số kỹ thuật AMP HTML đầy đủ.

Quyết định nếu bạn muốn có một trang AMP riêng

Đối với cùng một trang nội dung tĩnh, bạn có thể có 2 phiên bản riêng biệt - một cho AMP và một cho phiên bản không AMP. Bạn cũng có thể chọn để có chỉ có một phiên bản - trang AMP và sử dụng nó ở mọi nơi Liên quan hỗ trợ trình duyệt, Trang Github của AMP tuyên bố:

Nếu bạn vẫn lo lắng về hỗ trợ trình duyệt, hãy xem bài đăng của Paul Irish của Google trên Stackoverflow.

Trong trường hợp bạn muốn có hai trang (AMP và không AMP), bạn cần phải liên kết với từng người trong số họ để mà thông báo cho các công cụ tìm kiếm về sự tồn tại của hai phiên bản.

Thêm mã sau vào phần của trang không AMP:

Đồng thời thêm dòng sau vào phần của trang AMP:

Nếu bạn chỉ có một trang AMP, bạn vẫn cần phải liên kết nó từ chính nó theo cách sau:

Bắt đầu nồi hơi

Dự án AMP cung cấp khác nhau bắt đầu nồi hơi bạn có thể sử dụng để bắt đầu. Hãy xem bản tóm tắt AMP HTML đơn giản nhất dưới đây:

          Chào thế giới!

Bạn có thể thấy rằng bản tóm tắt liên kết trang HTML thông thường bằng cách sử dụng nhãn. Các > thẻ thêm Thư viện AMP JS.

 Các   
Bạn chỉ có thể có một biểu định kiểu nhúng, và cũng có nhiều quy tắc phong cách không được phép, ví dụ bạn không thể sử dụng !quan trọng vòng loại, @ nhập khẩu quy tắc và giả lớp.
 Đừng quên kiểm tra các hạn chế của biểu định kiểu trước khi bắt đầu viết CSS cho các trang AMP của bạn.
 Có một điều quan trọng cần biết về quy tắc phong cách AMP: bạn không thể sử dụng bất kỳ bố cục nào bạn muốn - vì đây là một trong những nguyên tắc của AMP để cho phép trình duyệt tính toán không gian của từng phần tử trên trang trước.
 Hãy xem các bố cục được hỗ trợ và không được hỗ trợ.
 AMP JS
 Tài liệu AMP có thể bao gồm không có bất kỳ JavaScripts nào do tác giả viết, cũng không, tuy nhiên điều này không có nghĩa là Trang di động tăng tốc hoàn toàn không sử dụng JavaScript. Thư viện JavaScript của AMP (thời gian chạy AMP) chịu trách nhiệm tải và hiển thị các trang AMP nhanh bằng cách thực thi các hoạt động tốt nhất.
 Linh kiện AMP
 Các thành phần AMP là được xác định bởi thời gian chạy AMP. Họ đã nói ở trên Thẻ HTML dành riêng cho AMP bạn cần sử dụng thay vì đối tác thông thường của họ, chẳng hạn như  thay cho  nhãn.
 Mỗi thành phần AMP chứa một tài nguyên bên ngoài cụ thể (một hình ảnh, video, nhúng, v.v.). Tài nguyên bên ngoài có xu hướng làm chậm các trang web. Mục tiêu chính của giải pháp này là quản lý việc tải các tài nguyên bên ngoài một cách hợp lý bằng cách chạy chúng bên trong hộp cát.
 AMP cung cấp cho bạn 2 loại linh kiện:
 Các thành phần tích hợp: chúng luôn có sẵn trong mọi tài liệu AMP, chúng là được xây dựng ngay trong thời gian chạy AMP. Hiện tại có năm người trong số họ:  để hiển thị quảng cáo
  đối với hình ảnh, nó được sử dụng thay vì  nhãn
  để theo dõi pixel (được sử dụng để đếm lượt xem trang)
  để nhúng tệp video HTML5 trực tiếp, thay thế  nhãn
  cho các phần tử nhúng (có thể được sử dụng thay vì  trong trường hợp nhất định)
 
 Thành phần mở rộng: Thành phần bổ sung, bạn phải bao gồm rõ ràng vào tài liệu AMP của bạn. Có nhiều cái hữu ích, chẳng hạn như  và , xem danh sách đầy đủ Nhiều người trong số họ có thể được sử dụng để nội dung nhúng từ dịch vụ của bên thứ ba, chẳng hạn như từ Twitter hoặc Instagram.
 
Lưu ý rằng tất cả các tài nguyên được tải bên ngoài, chẳng hạn như  và  phải biết  và  thuộc tính để cho phép trình duyệt tính toán bố trí trước.
 AMP CDN
 Các AMP CDN về cơ bản là một bộ đệm, được gọi là Bộ nhớ cache Google AMP. Nó tìm nạp các tài liệu AMP hợp lệ, lưu trữ và tải chúng. AMP CDN cũng có một hệ thống xác nhận tích hợp.
 Nó có giá trị kiểm tra các trang AMP của bạn trước khi để họ lên mạng để an toàn vượt qua trình xác nhận. Bạn có thể làm điều đó theo nhiều cách khác nhau.
  HÌNH ẢNH: Dự án AMP
Thật tốt khi biết rằng AMP CDN sử dụng giao thức HTTP / 2 để đạt được hiệu suất tốt nhất có thể.
 Công cụ AMP
 Có một số công cụ tuyệt vời có thể giúp bạn triển khai Trang di động được tăng tốc, hãy cùng xem một số công cụ.
 Google cung cấp cho quản trị web một cách tiện dụng Công cụ báo cáo trạng thái AMP cho thấy số lượng các trang AMP được lập chỉ mục thành công và các lỗi liên quan đến AMP cũng vậy.
 Bài hát ru Thư viện PHP AMP cho phép bạn chuyển đổi các trang HTML của mình sang AMP HTML và cũng báo cáo sự tuân thủ của bất kỳ tài liệu HTML nào với các tiêu chuẩn AMP.
 Nếu bạn muốn sử dụng AMP trên trang web WordPress của mình, hãy đọc hướng dẫn của Yoast về cách thiết lập WordPress cho AMP và cách AMP hoạt động với plugin Yoast SEO.
 Bạn cũng có thể kiểm tra Automattic's Plugin AMP cho phép bạn kích hoạt Trang di động tăng tốc trên trang web WordPress của bạn.
  HÌNH ẢNH: WordPress.org
Cân nhắc thêm
 Nếu bạn vẫn không bị thuyết phục, hãy xem video về kiểm tra tốc độ nhanh phía dưới.
 
 Jonathan Abrams, người sáng lập Nuzzel thậm chí còn đưa ra những tuyên bố tốt hơn, khi ông khẳng định rằng ngay cả các trang web được tối ưu hóa cho thiết bị di động như New York Times cũng tải nhanh hơn đáng kể - thay vì mất ba giây để tải trang trung bình, một trang tải vào ít hơn nửa giây khi Trang di động tăng tốc của Google được bật.
 Bạn cũng có thể đọc một bài viết thú vị trên Verge về sự cạnh tranh của Google AMP và Bài viết tức thời của Facebook. Nếu bạn vẫn đang tìm kiếm câu trả lời cho "cái gì bắt được?", Hãy xem bài đăng của Yoast trong đó đề cập đến nỗi sợ rằng AMP về cơ bản đưa chúng ta trở lại thời gian internet trước năm 2000, và câu hỏi liệu nó có thực sự là một tiêu chuẩn mở.
 .