Categories AMP

AMP là gì, tại sao nó giúp website tải nhanh hơn

AMP là công nghệ kết hợp nhiều biện pháp tối ưu hóa giúp website AMP tải nhanh gần như ngay lập tức (load instantly). Bạn sẽ thấy lý do vì sao ngay sau đây.

1. Tất cả các mã JavaScritp trên AMP được thực thi không đồng bộ (asynchronously)

JavaScript là công cụ đầy sức mạnh, nó có thể sửa đổi mọi khía cạnh của trang, nhưng nó cũng là nguyên nhân gây ra hiện tượng chặn xây dựng DOM và trì hoãn render (hiển thị) trang. Để ngăn JavaScript làm trì hoãn render trang (delaying page rendering), AMP chỉ cho phép JavaScript không đồng bộ (async).

Trang AMP không thể lồng các bất kỳ đoạn mã JavaScript nào do chủ trang viết (author-written). Thay vì sử dụng JavaScript, các tính năng tương tác trang được xử lý bên trong các thành phần AMP tùy chỉnh (custom AMP elements). Các thành phần AMP tùy chỉnh có thể có JavaScript “under the hood”, nhưng chúng được thiết kế một cách cẩn thận để đảm bảo không làm suy giảm chỉ số hiệu suất, tốc độ trang.

Trong khi JS của bên thứ ba được cho phép đưa vào trong iframe, nó không làm chặn hiển thị (block rendering). Ví dụ, nếu JS của bên thứ ba sử dụng API document.write (cái thông thường rất tệ với hiệu suất trang), nó không chặn hiển thị trang chính.

2. Nắm rõ từ trước kích cỡ các tài nguyên tĩnh

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ỡ trong HTML vì thế AMP có thể xác định được kích cỡ và vị trí của mỗi phần từ này trước khi tài nguyên được tải xuống. AMP tải layout (bố cục) của trang mà không cần phải đợi bất kỳ tài nguyên nào tải về.

AMP tách layout tài liệu từ layout tài nguyên. Chỉ một yêu cầu HTTP là đủ để lên layout toàn bộ tài liệu (+font). Vì AMP được tối ưu hóa để tránh gánh nặng tính toán lại style và layout trong trình duyệt, nó không cần dựng lại layout khi tài nguyên được tải về.

3. Không để các cơ chế bên ngoài chặn hiển thị

AMP ngăn không cho các cơ chế bên ngoài chặn hiển thị trang. AMP hỗ trợ các tiện ích mở rộng cho các thứ như lightboxes, nhúng instagram, tweet, vân vân. Trong khi những thứ này vẫn yêu cầu các kết nối HTTP bổ sung, chúng không làm chặn render và layout trang.

Bất cứ trang nào sử dụng mã tùy chỉnh phải nói cho hệ thống AMP rằng nó cuối cùng sẽ có một thẻ tùy chỉnh. Ví dụ, script amp-iframe nói cho hệ thống rằng sẽ có một thẻ amp-iframe. AMP tạo ra hộp iframe thậm chí trước cả khi nó biết cái gì được chứa ở bên trong:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

4. Ngăn tất cả các đoạn mã JavaScript của bên thứ ba và bắt chúng nằm ngoài tuyến hiển thị quan trọng (critical path)

JS của bên thứ ba thường thích tải JS theo cách đồng bộ. Họ cũng thích dùng document.write có nhiều script đồng bộ. Ví dụ, nếu bạn có năm quảng cáo trên trang, và mỗi cái trong số chúng tạo ra thêm ba lượt tải đồng bộ (synchronous loads), mỗi lượt tải có độ trễ kết nối là 1 giây, giờ bạn sẽ mất đến 15s chỉ để chờ đợi tải JS về.

Trang AMP cho phép JavaScript của bên thứ ba nhưng chỉ được phép trong iframe sandbox. Bằng cách hạn chế chúng vào iframe, chúng không thể chặn thực thi của trang chính. Thậm chí nếu chúng được kích hoạt tính toán lại style nhiều lần, ảnh hưởng sẽ là rất nhỏ vì iframe của chúng có rất ít DOM.

Thời gian cần thiết để tính toán lại style và layout bị giới hạn (quyết định) bởi kích cỡ DOM, vì thế việc tính toán lại iframe là rất nhanh so với việc tính toán lại style và layout cho trang.

5. Tất cả CSS phải được nội tuyến và có kích cỡ giới hạn

CSS chặn tất cả hiển thị, nó chặn tải trang, và nó có xu hướng ngày càng cồng kềnh. Trong trang HTML AMP, chỉ style nội tuyến là được phép. Điều này loại bỏ 1 hoặc thường là nhiều yêu cầu HTTP từ tuyến hiển thị quan trọng (critical rendering path) so với hầu hết các trang web.

Ngoài ra, style nội tuyến (inline) chỉ được phép có kích cỡ tối đa là 50 kilobytes. Trong khi kích cỡ này là đủ lớn cho mọi trang có kết cấu, phong cách tinh vi, phức tạp, nó vẫn yêu cầu người lập trình phải có kỹ năng thục hành tối ưu CSS thật tốt.

6. Kích hoạt font chữ phải hiệu quả

Font chữ hay có kích cỡ lớn, vì thế tối ưu hóa font là điều quan trọng trong tăng tốc website. Trên một trang web điển hình thường có vài mã đồng bộ và vài style ngoài, trình duyệt phải đợi để tải những font lớn vì nó phải chờ mã và style tải xong trước.

Hệ thống của AMP không yêu cầu HTTP cho đến khi các font bắt đầu tải. Điều này chỉ có thể làm được như thế là nhờ tất cả JS trong AMP đều có thuộc tính không đồng bộ và chỉ style nội tuyến là được phép; không có các yêu cầu HTTP chặn trình duyệt tải font.

7. Tối thiểu hóa tính toán lại style

Mỗi khi bạn “đo” (thêm, bớt, điều chỉnh kích cỡ phần tử trong HTML) một thứ gì đó, nó sẽ kích hoạt việc tính toán lại style – cái sẽ là gánh nặng vì trình duyệt sẽ phải lên layout lại toàn trang. Trong trang AMP, tất cả các lần đọc DOM xảy ra trước tất cả các lần ghi. Điều này đảm bảo có tối đa một lần tính toán lại style chỗ mỗi frame.

Bạn có thể đào sâu hơn về ảnh hưởng của tính toán lại style và layout thông qua các bài viết về hiệu suất hiển thị (renderring performance).

8. Chỉ chạy tăng tốc GPU với animation

Cách duy nhất để tối ưu hóa nhanh là chạy chúng trên GPU. GPU biết về các lớp, nó biết cách thực thi một số thứ trên các lớp này, nó có thể di chuyển chúng, nó có thể fade chúng, nhưng nó không thể cập nhật layout của trang; nó sẽ giao nhiệm vụ đó cho trình duyệt, và điều đó không tốt.

Các quy tắc cho CSS liên quan đến animation đảm bảo rằng animation có thể được tăng tốc GPU. Cụ thể, AMP chỉ cho phép animation và transition trên transform và opacity, vì thế layout của trang không cần yêu cầu.

9. Có các mức độ ưu tiên khác nhau trong khi tải tài nguyên

AMP điều khiển tất cả các nhiệm vụ tải tài nguyên: nó có mức ưu tiên trong tải tài nguyên, tải chỉ khi cần thiết, và tìm nạp trước các tài nguyên được lazy-load.

Khi AMP tải các tài nguyên, nó tối ưu hóa việc tải vì thế các tài nguyên quan trọng nhất ở thời điểm đó sẽ được tải xuống trước. Ảnh và quảng cáo chỉ được tải nếu chúng có khả năng nằm trong tầm mắt của người dùng, nằm trên màn hình đầu tiên (above-the-fold), hoặc nếu người dùng có khả năng cuộn chuột nhanh đến chúng.

AMP cũng tìm nạp trước các tài nguyên lazy-load. Các tài nguyên được tải muộn nhất có thể, nhưng lại được tìm nạp sớm nhất có thể. Bằng cách đó mọi thứ được tải rất nhanh nhưng CPU chỉ sử dụng khi tài nguyên thực sự hiển thị cho người dùng.

10. Tải các trang ngay lập tức

API preconnect mới được sử dụng nhiều để đảm bảo rằng các yêu cầu HTTP là nhanh nhất có thể khi chúng được thực hiện. Với cái này, trang có thể được render trước khi người dùng thực sự điều hướng đến nó; trang có thể đã có sẵn vào thời điểm người dùng chọn nó, làm cho nó tải nhanh ngay lập tức. Bạn có thể tham khảo bài viết tìm hiểu preload, prefetch và preconnect để hiểu rõ hơn về các cơ chế gợi ý tài nguyên.

Trong khi prerendering (render trước) có thể áp dụng lên tất cả các nội dung web, nó có thể làm gia tăng sử dụng băng thông và CPU. AMP được tối ưu hóa để làm giảm cả hai yếu tố này. Prerendering chỉ tải các tài nguyên trong màn hình đầu tiên và prerendering không render những phần tử gây gánh nặng cho CPU.

Khi trang AMP thực hiện prerender cho nhiệm vụ instant loading, chỉ các tài nguyên trong màn hình đầu tiên thực sự được tải. Khi trang AMP thực hiện prerender cho nhiệm vụ instant loading, các tài nguyên có khả năng sử dụng nhiều CPU (chẳng hạn như iframe của bên thứ ba) sẽ không được tải.

(Dịch từ bài viết How AMP works của trang amp[.]dev)

Back to Top