AMP - Accelerated Mobile Page

Đứng dưới góc độ của 1 end user thì khi truy cập 1 trang web, điều gì làm bạn dễ nổi cáu nhất (?) Thiết kế trang web như shit, chức năng khó dùng vcđ, hay trang web gì toàn chữ là chữ nhìn chán (vl)... Ngoài những điều trên thì có một điểm mà các trang web dễ làm user nổi cáu chính là tốc độ load trang. Tất nhiên là trong phần lớn trường hợp thì user sẽ đổ tại mạng nhà mình lởm (yaoming) (chủ yếu do mạng Việt Nam hay bị cá mập xơi quá =)). Nhưng nếu mà mạng cả mấy chục đến trăm Mb mà tốc độ load trang web vẫn chậm thì user chắc chắn sẽ nổi cáu và chửi mấy thằng làm ra cái trang như shit =)).

Dưới góc độ của dev, để tăng tốc độ load trang thì chắc bạn có thể đưa ra một đống phương án. Ví dụ như:

• Tối ưu hóa code
• Tối ưu hóa câu query
• Nén ảnh trong trang web
• Minified mấy thằng file js lại
• ...

Trong bài viết này mình sẽ giới thiệu một công cụ của Google để tăng tốc độ load web trên điện thoại. Nhắc lại một lần nữa là trên điện thoai nhé =)) Không các bạn dùng nó rồi lại chửi sao tao load ở laptop vẫn chậm =)) Công cụ đó có tên là AMP.

AMP là gì?

AMP - Accelerated Mobile Page - là công cụ để build một web page, và render một cách nhanh nhất những nội dung cố định trên page đó. Việc sử dụng AMP sẽ tập trung vào 3 phần chính là:

• AMP HTML
• AMP JS
• Google web cache

1. AMP HTML

AMP HTML là basic HTML được mở rộng với thêm một vài thuộc tính của AMP. Ví dụ thẻ img sẽ thành amp-img, video sẽ là thẻ amp-video, thẻ để embbed sẽ là amp-embbed,... Tất cả đều được định nghĩa, việc của bạn chỉ là dùng như thẻ HTML bình thường. Một ví dụ về AMP HTML

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Thay vì khai báo thẻ style theo truyền thống thì sẽ viết thành thẻ <style amp-custom></style>

2. AMP JS

AMP JS là một thư viện các js của các custom components được AMP build sẵn. Các thư viện này sẽ được load không đồng bộ với page của bạn để tránh ảnh hưởng đến việc load page.

Ví dụ bạn cần hiển thị carousel. Thay vì phải include 1 file JS từ project cuả bạn, thì rất đơn giản, bạn chỉ cần cho thẻ sau vào phần head

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

sau đó sử dụng carousel như sau

<amp-carousel awidth=300 height=400>
  <amp-img src="my-img1.png" awidth=300 height=400></amp-img>
  <amp-img src="my-img2.png" awidth=300 height=400></amp-img>
  <amp-img src="my-img3.png" awidth=300 height=400></amp-img>
</amp-carousel>

3. Google AMP cache

Google AMP cache là proxy-based CDN giúp vận chuyển toàn bộ AMP documents (dể hiểu hơn về CDN bạn có thể tìm hiểu bài viết về CDN của bạn Đinh Hoàng Long).

Ngoài ra thì nó lưu lại trang AMP của bạn. Trong trường hợp user search trang của bạn từ google thì thay vì request đến server của bạn, page sẽ được lấy từ cache và hiển thị cho bạn.

AMP tăng tốc bằng cách nào?

Có rất nhiều lý do giải thích cho việc tại sao AMP lại giúp tốc độ load trang nhanh hơn, tuy nhiên ở bài này mình sẽ đưa ra các lý cho chính. Không chỉ đơn giản là giải thích mà nó còn giúp chúng ta hiểu được cách thức mà AMP hoạt động.

Chỉ cho phép load JS không đồng bộ

JS có thể rất mạnh, có thể thay đổi đến mọi mặt của một trang web nhưng nó cũng là nguyên nhân làm cho việc render page chậm hơn. Để ngăn chặn việc đó thì AMP chỉ cho phép load JS không đồng bộ.

AMP không cho phép sử dụng JS do người viết tạo nên mà chỉ được sử dụng custom components với js tương ứng với components từ AMP JS. Ví dụ như khi bạn muốn dùng carousel thì bạn dùng thẻ amp-carousel và add source js tương ứng. ```src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"````

AMP hỗ trợ custom components khá phong phú nên hoàn toàn có thể đáp ứng phần lớn yêu cầu ở trang web của bạn. Các custom components này được thiết kế sao cho việc load js tương ứng của nó không ảnh hưởng đến việc render trang. Do đó vẫn đảm bảo tốc độ load page. Link cụ thể về các extensions (cũng như custom component ở cuói bài)

Định sẵn kích cỡ của external resource

Tất cả external resource nhưng là images, ads, iframes... sẽ phải định sẵn kích thước trương file html để AMP có thể tính toán vị trí, kích cỡ của từng elements trước khi nó được tải xuống.

AMP sẽ load layout của page trước khi mà ảnh, iframe... được tải xuống. Qua đó giảm thiểu thời gian phải căn chỉnh lại style, layout của toàn bộ page, hoàn toàn không có việc re-layout page.

Không để extensions ảnh hưởng đến việc load trang

AMP cung cấp extensions của lightboxes, instagram embeds, tweets... Link cụ thể về các extensions (cũng như custom component ở cuói bài) Cái lý do này thì cũng giống như là dùng custom components vậy.

Third party JS

Tất cả các third party JS sẽ được khai báo trong iframe. Ví dụ như:

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

Trường hợp này vẫn không ảnh hưởng đến tốc độ load trang, đơn giản vì AMP sẽ tạo iframe box trước cả khi nó load source, tức là nó tạo iframe box mà không biết là nó sẽ load cái gì =))

Với việc giới hạn này thì third party js sẽ chỉ ảnh hưởng đến khung iframe mà không ảnh hưởng đến toàn bộ trang. Kể cả third party js này nằm trong khung iframe có size lớn, và nhiệm vụ của nó có thể re-layout lại nội dung, thì rõ ràng việc chỉ re-layout trong khung iframe vẫn là nhanh hơn rất nhiều so với re-layout cả page.

CSS Inline và Size-bound

Ngoài JS thì việc load những file CSS cũng là nguyên nhân làm render page chậm. Do đó ở AMP thì CSS hoàn toàn phải là inline. Như vậy là đã giảm đi rất nhiều request để lấy file CSS.

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

Trong bài viết này thì mình sẽ chỉ giải thích sơ qua về cách mà AMP hoạt động.

Đầu tiên là trang của bạn phải có thẻ như sau ở phần head

<link href="https://linuxhjkaru.hmup.jp/amp/lovehjkaru" rel="amphtml">

Thẻ trên sẽ định nghĩa link amp cho page của bạn - cái link này tùy bạn set. Khi Google crawl dữ liệu của bạn, nó sẽ sử dụng thông tin từ thẻ này để tạo và lưu AMP cho page của bạn. Việc này theo như lúc đầu mình test có thể tốn 1 - 2 tuần (sohai). Để check xem page của bạn đã được crawl và tạo AMP page chưa, bạn có thể check tại đây Ảnh màn hình sẽ như sau:

Lúc này có 2 trường hợp xảy ra:

• User gõ trực tiếp đường link đến page của bạn (ví dụ ở trên gõ https://linuxhjkaru.hmup.jp/lovehjkaru) hoặc là đi từ 1 page khác đến. Lúc này thì controller của bạn nếu như có thể bắt đc device là mobile thì redirect thẳng đến địa chỉ AMP như bên trên. Done
• Nếu như user gõ tìm kiếm trang của bạn từ google search engine. Thì đầu tiên google sẽ check xem page AMP của bạn có được lưu trong cache AMP không. Nếu có thì google sẽ hiển thị luôn cho bạn, mà không có thêm request đến server của bạn. Ví dụ như hình dưới đây cho 1 page đã có AMP

Kết luận

Đọc xong phần bên trên thì chắc bạn đã hiểu phần nào dự án AMP này chỉ cho trên di động rồi chứ =)) Để tăng tốc load page thì phải đánh đổi rất nhiêu về javascript, css... Vì thường hiển thị web trên di động bạn sẽ không phải chạy nhiều js, load nhiều ảnh, load third party...

Tương lai của AMP cũng có thể phát triển hơn nữa khi mà AMP bổ sung thêm nhiều custom component hơn nữa. Khi đó hoàn toàn có thể thay thế cho web đơn giản trên laptop. Ví dụ như các web đọc báo, xem tin tức... Ở các web kiểu này thì hầu như chỉ có hiển thị chữ, ảnh thì hiển thị theo kiểu gallerry hay carouse, embbed video thì có youtube... Hiện này AMP cũng đã hỗ trợ rất nhiều, đủ để bạn làm một web đọc báo hoàn chỉnh trên điện thoại với tốc độ load page cao.

Với cái trang web phức tap cần load nhiều JS thì có lẽ rất khó để phát triển AMP. Dù gì thì JS cũng là một công cụ rất rất rất mạnh, khó mà thay thế đươc (hihi)

Trong bài tiếp theo thì mình sẽ hướng dẫn các bạn tạo một AMP page và tối ưu hóa việc sử dụng nó.

Xin chào và hẹn gặp lại (chao)