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
.
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
> PHHSNEWS