Tối ưu AMP cho website

Hiện tại google đã đưa ra công nghệ AMP mới giúp cải thiện tốc độ website trên thiết bị di động, vậy chúng ta hãy cùng tìm hiểu sơ qua thông tin về công nghệ mới này và cách tối ưu AMP cho website hiệu quả nhé.

AMP là gì? Công nghệ mới hay rủi ro mà bạn phải chọn lựa để được làm đứa con cưng với bộ áo cái bang (khi đã từ bỏ javacript) hay làm tội đồ với thời gian load khủng long cùng với những hiệu ứng khủng bố.

Tối ưu AMP cho website

Accelerated Mobile Pages một bộ API mới của google nhằm cho các trang web tải nhanh và có giao diện đẹp trên thiết bị di động, thậm chí khi mạng internet kết nối chậm. Bạn sẽ trở thành con cưng của google nếu như bạn sử dụng AMP cho website , quá tuyệt phải không nào ?

Ưu điểm:

  • Bạn sẽ làm con cưng của google (Tuyệt phải không nào)
  • Tốc độ load sẽ nhanh hơn (Lại một chữ tuyệt nữa)

Khuyết điểm:

  • Thư viện còn non trẻ (nếu bạn là một coder thì sẽ khá khó chịu)
  • Từ giã javacript
  • từ giã http (khi bạn nhúng iframe)

1 . Bước đầu dễ dàng ?

<meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start ...</style></noscript>

Copy những dòng code bắt buộc để khai báo AMP

2 . Tối ưu hình ảnh ?

Thay tất cả các thẻ img thành img-amp (Lưu ý : buộc phải có chiều cao và chiều rộng)

Ví dụ:

<img src="welcome.jpg" alt="Welcome" height="400" width="800"></img>
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

2 . Tối ưu IFRAME ?

Bạn phải thêm thư viện iframe trước  :

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

Sau đó đơn giản là :

<iframe src="..." height="400" width="800"></img>
<amp-iframe src="..." height="400" width="800"></amp-iframe>

2 . Còn không ?

Còn nhiều thứ lắm nhưng để chúng tôi hướng dẫn bạn cách tối ưu AMP cho website đã chuẩn chưa !

Cách 1 : Truy cập link

Tối ưu AMP cho website 1

Cách 2 : Sử dụng plugin chorme AMP Validator

Tối ưu AMP cho website 2

Chúc bạn thành công !

Mọi thắc mắc xin liên hệ với chúng tôi

INCOMING SEARCH TERMS

Tối ưu amp

Toi uu amp

Tối ưu AMP cho website

Toi uu AMP cho website

Bài viết liên quan