Google AMP là gì ? Hiểu rõ về cách hoạt động của AMP

AMP là viết tắt của Accelerated Mobile Pages. Đây là một cách để xây dựng các trang web sẽ hiển thị nhanh chóng cho nội dung tĩnh. Khi đưa vào hoạt động, AMP bao gồm HTML AMP, thư viện AMP JS và Bộ nhớ cache AMP của Google. 

Khi một trang không được tối ưu hóa cho việc sử dụng thiết bị di động, bạn có nguy cơ bị tăng tỷ lệ thoát — 30% người dùng rời khỏi trang nếu nó không tải trong vòng 3 giây. Mục đích cuối cùng của AMP cải thiện đáng kể hiệu suất của các trang web trên thiết bị di động trên internet.

Nó dựa trên các công nghệ hiện có và các công trình phối hợp với tên tuổi lớn nhất của Internet. AMP không phải là một kỹ thuật hoàn toàn khác để tạo trang, nó thực sự bao gồm HTML bình thường với một vài hạn chế và thêm các thẻ chuyên biệt và không đòi hỏi nhiều công việc bổ sung. AMP JS hoạt động để đảm bảo rằng nội dung quan trọng nhất được tải nhanh chóng và rõ ràng, trong khi nội dung của bên thứ ba chẳng hạn như quảng cáo không đi đầu để người dùng sẽ thấy nội dung ưa thích của họ càng sớm càng tốt. AMP đã phát hiện ra rằng nội dung tải nhanh chóng dẫn đến việc đọc nhanh hơn và do đó dẫn đến tiêu thụ nhiều hơn.

google amp là gì

AMP JS

Thư viện JavaScript JavaScript (JS) sử dụng tất cả các thực hành hiệu suất tốt nhất, đang quản lý tài nguyên tải và cung cấp cho người dùng thẻ tùy chỉnh của họ — tất cả để đảm bảo rằng trang của bạn được hiển thị nhanh nhất có thể. Một trong những lợi thế lớn nhất là có mọi phần tử, ngay cả những yếu tố từ các nguồn bên ngoài, được đồng bộ hóa để không có gì trong trang có thể bị chặn hiển thị.

Các kỹ thuật khác được sử dụng để thực hiện bao gồm tính toán trước bố cục của tất cả các phần tử trên trang trước khi tài nguyên có thể được tải, tắt bộ chọn CSS chậm và tất cả iframe.

HTML AMP

Đây là HTML có một số hạn chế liên quan đến hiệu suất đáng tin cậy và một vài tiện ích mở rộng để kết hợp nội dung phong phú không chỉ là HTML cơ bản. Thư viện AMP JS hoạt động để giúp hiển thị các trang HTML AMP một cách nhanh chóng và AMP Cache của Google hoạt động để hỗ trợ bộ nhớ cache của các trang HTML AMP.

HTML AMP

Tóm lại, HTML AMP là HTML chuẩn kết hợp các thuộc tính AMP tùy chỉnh. Hầu hết các thẻ trong HTML AMP là các thẻ tiêu chuẩn nhưng một số thẻ được thay thế để phù hợp với các thành phần AMP. Các yếu tố tùy chỉnh này hoạt động để đảm bảo rằng các mẫu phổ biến rất dễ sử dụng.

Bộ nhớ AMP của Google

AMP Cache của Google là mạng phân phối dựa trên proxy, được sử dụng để phân phối tất cả tài liệu AMP hợp lệ. Nó truyền các trang HTML AMP, sau đó lưu trữ chúng, và sau đó tự động cải thiện hiệu suất trang của chúng. Khi sử dụng AMP Cache này, tài liệu có tất cả các tệp JS và hình ảnh của nó sẽ tải từ cùng một nguồn gốc đang sử dụng HTTP 2.0 để đạt hiệu quả cao nhất. Có một hệ thống xác nhận đi kèm với hệ thống bộ nhớ cache sẽ xác nhận nếu một trang sẽ hoạt động mà không phụ thuộc vào tài nguyên bên ngoài. Hệ thống xác thực sẽ xem qua danh sách kiểm tra các loại để xác nhận rằng đánh dấu trang đáp ứng các thông số HTML AMP.

Phiên bản khác của cơ chế xác thực đi kèm với mỗi trang AMP theo mặc định. Điều này có thể đăng nhập các lỗi xác nhận ngay trên giao diện điều khiển của trình duyệt khi trang được hiển thị. Điều này cho phép người dùng thấy những thay đổi phức tạp trong mã sẽ tác động như thế nào đến hiệu suất cũng như trải nghiệm người dùng.

AMP hoạt động như thế nào?

AMP làm việc nhằm cả thiện tốc độ và thời gian tải trang nhanh hơn bằng cách kết hợp một loạt thành phần được sử dụng để tối ưu hóa trang.

JavaScript có thể được sử dụng để sửa đổi hầu như bất kỳ phần nào của trang web, nhưng nó cũng có thể được sử dụng để chặn xây dựng DOM và trì hoãn hiển thị các trang. Để tránh sự chậm trễ hiển thị các trang vì JavaScript, AMP chỉ cho phép JavaScript không đồng bộ. Các trang AMP này cấm sử dụng bất kỳ JavaScript nào đã được viết bởi quản trị viên web và thay vì sử dụng JavaScript thông thường, một trang tương tác phải bao gồm chỉ các phần tử AMP tùy chỉnh. Các yếu tố tùy chỉnh này có thể được tạo thành từ JavaScript ở lõi, nhưng chúng phải được thiết kế đặc biệt để đảm bảo rằng chúng không gây ra bất kỳ sự ức chế nào trong hiệu suất của trang web. JavaScript của bên thứ ba được phép trong iframe, nhưng không thể chặn hiển thị.

Tài nguyên bên ngoài, như iframe, quảng cáo hoặc hình ảnh, phải nêu rõ kích thước của chúng trong HTML của trang để AMP có thể xác định kích thước của từng phần tử cũng như vị trí của nó trước khi tất cả tài nguyên được tải xuống. AMP sẽ tải bố cục của trang trước khi tài nguyên đã được tải xuống. AMP hoạt động để ngắt kết nối bố cục tài liệu khỏi bố cục tài nguyên và chỉ cần một yêu cầu HTTP duy nhất để bố cục toàn bộ tài liệu. Vì AMP được tối ưu hóa theo cách nó hoạt động xung quanh tính toán lại các bố cục đắt tiền trong trình duyệt, khi tải tài nguyên ở đó sẽ không có bất kỳ bố cục lại nào.

AMP không cho phép các cơ chế tiện ích mở rộng chặn hiển thị trang. AMP có lợi cho các tiện ích mở rộng cho những thứ như nhúng Instagram, hộp đèn, tweet và các nội dung tương tự. Những thứ này yêu cầu các yêu cầu HTTP bổ sung và các yêu cầu đó không thể chặn bố cục trang và hiển thị. Các trang sử dụng tập lệnh tùy chỉnh phải thông báo cho hệ thống AMP rằng cuối cùng, thẻ sẽ cần thẻ tùy chỉnh.

JavaScript của bên thứ ba thích sử dụng tải JS được đồng bộ hóa. Giả sử có 5 quảng cáo trên một trang và mỗi quảng cáo trong số đó gây ra 3 tải đồng bộ — mỗi một trong số đó có độ trễ 1 giây, sau đó bạn sẽ có 18 giây không có gì nhưng thời gian tải đơn giản là do tải JA. Các trang AMP cho phép bên thứ ba JS, nhưng chỉ trong các iframe được sandboxed. Khi JS của bên thứ ba bị giới hạn ở iframe, chúng không thể bị chặn khỏi việc thực thi trang chính. Ngay cả khi họ đã kích hoạt nhiều tính toán lại của phong cách, các iframe nhỏ chỉ có một chút DOM. Thời gian cần tính toán lại kiểu và bố cục bị hạn chế bởi kích thước DOM và tính toán lại khung nội tuyến khá nhanh so với việc tính toán lại các kiểu và bố cục cho trang.

CSS chặn tất cả hiển thị, tải trang và nó cũng có thể làm cho mã một chút mịn. Sử dụng HTML AMP, các kiểu duy nhất được phép lưu giữ là các kiểu nằm trong dòng. Nhiều lần, điều này sẽ xóa một hoặc nhiều yêu cầu HTTP khỏi đường dẫn hiển thị quan trọng, so với nhiều trang web. Ngoài ra, trang tính kiểu nội tuyến có ngưỡng 50 kilobyte. Kích thước này đủ lớn cho ngay cả những trang tinh vi nhất, nhưng quản trị viên web vẫn cần phải cẩn thận để nhập CSS theo cách phù hợp.

Phông chữ trên internet rất lớn và vì điều này, tối ưu hóa webfont rất quan trọng đối với hiệu suất trang web. Nói chung, một trang bình thường sẽ chỉ có một vài tập lệnh đồng bộ và một vài trang mẫu bên ngoài, trình duyệt sẽ chờ một lượng thời gian đáng kể để bắt đầu tải xuống các tệp phông chữ lớn này. Hệ thống AMP sẽ không gửi bất kỳ yêu cầu HTTP nào cho đến khi phông chữ bắt đầu tải xuống. Điều này là có thể bởi vì tất cả JavaScript trong AMP có thuộc tính không đồng bộ và chỉ cho phép các mẫu kiểu nội tuyến. Yêu cầu HTTP không chặn trình duyệt tải xuống bất kỳ phông chữ nào cần thiết. Typography là một công cụ quan trọng hỗ trợ xây dựng thương hiệu, khả năng đọc và thiết kế và tối ưu hóa phông chữ web sẽ có lợi cho chiến lược tổng thể của bạn về hiệu suất. Nó có thể làm giảm tổng kích thước trang, do đó góp phần cải thiện thời gian tải tổng thể.

Mỗi khi một cái gì đó được đo trên một trang, nó sẽ kích hoạt tính toán lại của phong cách. Điều này là tốn kém vì trình duyệt web phải điều chỉnh toàn bộ bố cục trang. Trong các trang AMP, tất cả các lần đọc DOM xảy ra trước khi mọi thứ được viết. Điều này được thực hiện để đảm bảo rằng tối đa một lần tính toán lại các kiểu cho mỗi khung hình. Khi một thuộc tính, chẳng hạn như bố cục, được thay đổi, nó sửa đổi hình dạng của trang web như chiều cao và chiều rộng của nó. Khi bố cục được chỉnh sửa, trình duyệt cần kiểm tra tất cả các phần tử khác và sắp xếp lại luồng nếu trang đó. Tất cả các khu vực bị ảnh hưởng bởi điều này sẽ cần phải được tính toán lại và sau đó các yếu tố này sẽ cần phải được kết hợp lại với nhau một lần nữa.

Chạy tối ưu hóa trên GPU là cách duy nhất để đảm bảo rằng chúng nhanh. GPU quen thuộc với các lớp và nó biết cách thực hiện các hành động với chúng. Nó cũng có thể di chuyển chúng, làm mờ chúng, nhưng nó không thể cập nhật bố trí trang. Khi điều này xảy ra, tùy thuộc vào trình duyệt để cập nhật bố cục trang và điều này hoàn toàn không được ưu tiên. CSS liên quan đến hoạt ảnh sử dụng các quy tắc đảm bảo rằng các hoạt ảnh có thể được tăng tốc GPU. AMP sẽ chỉ cho phép hoạt ảnh và chuyển đổi trên chuyển đổi và độ mờ để bố cục trang không bắt buộc. Khi các phần được vẽ của một trang web được đặt lại với nhau và hiển thị trên màn hình, điều này được gọi là tổng hợp. Số lượng lớp tổng hợp cần được quản lý và các thuộc tính được sử dụng cho hoạt ảnh là hai khu vực sẽ ảnh hưởng đến hiệu suất của trang web. Đối với hoạt ảnh, nó sẽ là khôn ngoan để ở lại với biến đổi và thay đổi độ mờ đục để đảm bảo rằng AMP sẽ hiển thị nhanh chóng. Khi sử dụng hai thuộc tính này, các phần tử phải nằm trên lớp tổng hợp của chúng.

AMP có toàn quyền kiểm soát các tài nguyên tải xuống — nó ưu tiên tải, nghĩa là nó sẽ chỉ tải những gì cần thiết và sẽ tìm nạp sớm các tài nguyên mất nhiều thời gian để tải. Khi AMP hoạt động để tải xuống bất kỳ tài nguyên nào, nó sẽ tối ưu hóa các tài nguyên tải xuống để các tài nguyên đầu tiên được tải xuống là những tài nguyên quan trọng nhất. Quảng cáo và hình ảnh chỉ được tải xuống nếu chúng có cơ hội được người dùng nhìn thấy hoặc nếu người dùng có thể nhanh chóng cuộn đến chúng. AMP cũng sẽ tìm nạp sớm mọi tài nguyên mất nhiều thời gian để tải. Chúng được lấy càng sớm càng tốt, trong khi chúng được tải càng muộn càng tốt. Bởi vì điều này, các mục sẽ tải nhanh nhưng CPU chỉ được sử dụng khi người dùng thực sự nhìn thấy các tài nguyên.

AMP giúp các trang tải cực nhanh. API kết nối trước là một hệ thống mới được sử dụng để đảm bảo rằng các yêu cầu HTTP thành công càng sớm càng tốt. Bằng cách sử dụng điều này, một trang web có thể được hiển thị trước khi người dùng nói rõ rằng họ muốn điều hướng đến trang đó. Trang này có thể sẽ sẵn sàng vào thời điểm người dùng lựa chọn trên đó, cho phép tải trang tức thì. Kiểu hiển thị trước này có thể được áp dụng cho nội dung trên web, nhưng nó cũng có thể chiếm rất nhiều CPU và băng thông. Có thể giảm cả hai thứ này bằng cách sử dụng AMP. Tài nguyên trong màn hình đầu tiên chỉ được tải xuống với hiển thị trước và những thứ có thể tốn kém cho CPU không được hiển thị. Tài liệu AMP có thể được hiển thị trước để hỗ trợ tải ngay lập tức, tài nguyên duy nhất trong màn hình đầu tiên sẽ được tải xuống.

Accelerated Mobile Pages (AMP) là một nỗ lực phần mềm nguồn mở. Là một cách để tạo trang cho nội dung tĩnh, AMP giúp đảm bảo rằng nội dung được hiển thị nhanh nhất có thể. Không cần nhiều nỗ lực để đảm bảo HTML thực sự là HTML AMP. Chỉ cần thêm một vài tiện ích bổ sung cho nội dung đa phương tiện cũng như một số hạn chế đảm bảo hiệu suất đáng tin cậy, nhưng nếu trang web khá đơn giản để bắt đầu, nó có thể đã tuân thủ HTML AMP. Ngày càng có nhiều người truy cập thông tin khi di chuyển từ thiết bị di động của họ, AMP là một bước đi đúng hướng.

Trên đây là những vấn đề rất quan trọng của Google AMP mà bạn nên hiểu rõ nếu bạn đang muốn sử dụng nó cho website của mình. Hi vọng bài viết của tôi sẽ giải đáp được một số vướng mắc của bạn về AMP.

Về tác giả: Duc Nguyen

Bắt đầu với SEO & PPC từ năm 2014, hiện tại mình đang làm việc tại VietNet Group. Mình lập Blog này để chia sẻ lại những kinh nghiệm trong quá trình làm việc cũng như viết lại những kiến thức về Digital Marketing mình tự tìm hiểu được để nhớ kỹ hơn. Mọi người có thể kết nối với mình qua Facebook

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *