Cách thức hoạt động của AMP
Các tổ hợp tối ưu sau đây là lý do các trang AMP có thể được tải nhanh gần như tức thì. Có tổng cộng 7 lý do - nếu bạn thấy thế là quá nhiều, hãy xem video giải thích:
Thực thi tất cả JavaScript AMP một cách không đồng bộ
JavaScript rất mạnh, nó có thể sửa đổi mọi khía cạnh của một trang web, nhưng nó cũng có thể chặn cấu trúc DOM và làm trì hoãn việc render trang (xem thêm Tăng tính tương tác với JavaScript). Để giúp JavaScript không làm trễ tác vụ render trang, AMP chỉ cho phép JavaScript không đồng bộ.
Các thành phần AMP có thể chứa mã JavaScript chạy ngầm bên dưới, nhưng chúng đã được thiết kế kỹ lưỡng để không làm giảm hiệu năng.
Tuy mã JS tùy chỉnh vẫn được cho phép trong amp-script, và các mã JS của bên thứ ba cũng được cho phép trong iframe, chúng không thể chặn tác vụ render. Ví dụ, nếu mã JS của bên thứ ba sử dụng API document.write cực kì tổn hại cho hiệu năng, chúng sẽ không thể chặn việc render trang chính.
Phân bổ kích cỡ tĩnh cho tất cả tài nguyên
Các tài nguyên bên ngoài như ảnh, quảng cáo hoặc iframe phải thông báo kích cỡ của chúng trong HTML để AMP có thể xác định kích cỡ và vị trí của từng thành phần trước khi tải các tài nguyên. AMP sẽ tải bố cục của trang mà không chờ tài nguyên được tải về.
AMP tách riêng bố cục tài liệu với bố cục tài nguyên. Chỉ cần một yêu cầu HTTP để tạo bố cục cho toàn bộ tài liệu (+ phông chữ). Bởi AMP được tối ưu để tránh việc tính lại style và bố cục vốn tiêu tốn nhiều tài nguyên trong trình duyệt, sẽ không cần sắp xếp lại bố cục khi tài nguyên được tải.
Không thể cơ cấu mở rộng chặn render
AMP không để các cơ cấu mở rộng chặn việc render trang. AMP hỗ trợ phần mở rộng cho những thứ như lightbox, nhúng vào instagram, tweet, v.v... Tuy chúng cần nhiều yêu cầu HTTP hơn, các yêu cầu này sẽ không chặn bố cục trang và tác vụ render.
Mọi trang sử dụng một script tùy chỉnh đều phải cho hệ thống AMP biết rằng nó sẽ có một thẻ tùy chỉnh. Ví dụ, script amp-iframe cho hệ thống biết rằng sẽ có một thẻ amp-iframe. AMP sẽ tạo ra hộp iframe trước khi nó biết rằng trong đó sẽ có gì:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Giữ tất cả JavaScript của các bên thứ ba ở bên ngoài lộ trình thiết yếu
Các mã JS của bên thứ ba thường sử dụng tải JS đồng bộ. Họ cũng thường sử dụng document.write để ghi nhiều kịch bản đồng bộ hơn. Ví dụ, nếu bạn có 5 quảng cáo trên trang của mình, mỗi quảng cáo đòi hỏi 3 lượt tải đồng bộ, và mỗi lượt tải với độ trễ kết nối 1 giây, nghĩa là bạn sẽ cần 15 giây chỉ để tải mã JS.
Các trang AMP cho phép mã JavaScript của bên thứ ba nhưng chỉ trong các iframe có thuộc tính sandbox. Thông qua việc giới hạn các mã này trong iframe, bạn có thể đảm bảo chúng không chặn tác vụ thực thi cho trang chính. Kể cả khi chúng kích hoạt nhiều tác vụ tính lại style, các iframe này cũng chỉ có DOM rất nhỏ.
Thời gian cần thiết để tính lại style và bố cục tùy thuộc vào kích cỡ DOM, vậy nên tác vụ tính lại iframe này thường rất nhanh so với việc tính lại style và bố cục cho toàn bộ trang.
Tất cả CSS đều phải là inline và có ràng buộc về kích cỡ
CSS chặn tất cả tác vụ render, chặn tải trang, và thường khá là cồng kềnh. Các trang AMP HTML chỉ cho phép style inline. Điều này sẽ giảm bớt 1 hoặc thông thường là nhiều yêu cầu HTTP hơn khỏi đường dẫn render thiết yếu so với hầu hết các trang web khác.
Đồng thời, stylesheet inline có kích cỡ tối đa là 50 KB. Tuy kích cỡ này đủ lớn cho các trang web rất phức tạp, nó vẫn đòi hỏi người tạo trang phải thực hành sự ngăn nắp khi viết CSS.
Phải đảm bảo hiệu quả trong việc kích hoạt phông chữ
Phông chữ web thường có kích cỡ rất lớn, vậy nên việc tối ưu phông chữ web là thiết yếu đối với hiệu năng. Trên một trang web thông thường với một vài đoạn mã đồng bộ và một vài stylesheet bên ngoài, trình duyệt sẽ phải chờ rất lâu để mọi thứ hoàn thành, trước khi nó có thể bắt đầu tải về các phông chữ khổng lồ này.
Hệ thống AMP sẽ không đưa ra bất kỳ yêu cầu HTTP nào cho đến khi phông chữ bắt đầu được tải về. Điều này chỉ có thể được thực hiện bởi tất cả JS trong AMP đều có thuộc tính async và chỉ cho phép các stylesheet inline; sẽ không có yêu cầu HTTP nào chặn trình duyệt tải về các phông chữ.
Giảm thiểu việc tính lại style
Mỗi khi bạn đo một thứ gì đó, việc này sẽ kích hoạt tính lại style, vốn tốn nhiều tài nguyên bởi trình duyệt phải phân bố cục cho toàn bộ trang. Với các trang AMP, mọi tác vụ đọc DOM đều xảy ra trước mọi tác vụ ghi. Điều này đảm bảo chỉ có tối đa một lần tính lại style trong mỗi khung.
Tìm hiểu thêm về tác động của việc tính lại style và bố cục đối với hiệu quả render.
Chỉ chạy các hình hoạt họa được tăng tốc bởi GPU
Cách duy nhất để tối ưu nhanh là thực hiện chúng trên GPU. GPU biết về phân lớp, cũng như cách thực hiện một số tác vụ trên các phân lớp này, di chuyển chúng, làm phai chúng, nhưng GPU lại không biết cách cập nhật bố cục trang; nó sẽ giao việc này cho trình duyệt, và điều này là không tốt.
Các quy tắc đối với CSS liên quan đến hình hoạt họa đảm bảo rằng hình hoạt họa có thể được tăng tốc bởi GPU. Cụ thể, AMP chỉ cho phép hoạt họa và chuyển tiếp với transform và opacity để không cần xử lý bố cục trang. Tìm hiểu thêm về việc sử dụng transform và opacity khi thay đổi hình hoạt họa.
Ưu tiên tải tài nguyên
AMP kiểm soát mọi tác vụ tải tài nguyên: nó ưu tiên tải tài nguyên, chỉ tải những gì cần thiết và truy xuất sẵn các tài nguyên được tải lười.
Khi AMP tải về tài nguyên, nó sẽ tối ưu tác vụ tải để ưu tiên tải về những tài nguyên quan trọng nhất hiện tại. Ảnh và quảng cáo sẽ chỉ được tải về nếu chúng có cơ hội được xem bởi người dùng trên bề mặt, hoặc nếu người dùng sẽ sớm cuộn đến vị trí hiển thị chúng.
AMP cũng truy xuất sẵn các tài nguyên được tải lười. Các tài nguyên được tải muộn nhất có thể, nhưng được truy xuất sẵn sớm nhất có thể. Bằng cách này, mọi thứ sẽ được tải rất nhanh, nhưng CPU chỉ được sử dụng khi tài nguyên được hiển thị thực tế cho người dùng.
Tải trang tức thì
API preconnect mới được sử dụng phổ biến để đảm bảo các yêu cầu HTTP được xử lý nhanh nhất có thể khi chúng được đưa ra. Bằng cách này, một trang có thể được render trước khi người dùng nói rõ rằng họ muốn điều hướng đến nó; trang này có thể đã có sẵn khi người dùng chọn nó, và khiến nó được tải tức thì.
Tuy việc render sẵn có thể được áp dụng cho mọi nội dung web, nó cũng có thể sử dụng rất nhiều băng thông và CPU. AMP được tối ưu để giảm thiểu cả 2 yếu tố này. Tác vụ render sẵn sẽ chỉ tải về các tài nguyên trên bề mặt và không render những yếu tố có thể tốn nhiều tài nguyên CPU.
Khi các tài liệu AMP được render sẵn để tải tức thì, chỉ các tài nguyên trên bề mặt với thực sự được tải về. Khi các tài liệu AMP được render sẵn để tải tức thì, các tài nguyên có thể sử dụng nhiều CPU (như các iframe của bên thứ ba) sẽ không được tải về.
Tìm hiểu thêm về lý do AMP HTML không tận dụng toàn bộ trình quét tải sẵn.