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

kiếm tiền online tại nhà uy tín

2017-01-21 08:15:42

Thiết kế web 3t xin hướng dẫn các bạn những cách kiếm tiền online đơn giản nhất cho những bạn mới bắt đầu I. Giới thiệu MMO 1. MMO là gì? MMO là từ viết tắt của (Make Money Online), sở hữu tức là kiếm tiền trên mạng, kiếm tiền trực tuyến, hay kiếm tiền […]

Top 10 web bán hàng thời trang uy tín nhất Việt Nam

2017-01-21 03:24:00

Hôm nay thiết kế web 3t sẽ giới thiệu cho các bạn những website bán hàng thời trang uy tín nhất.Giả dụ bạn ko với rộng rãi thời kì và thích an toàn cũng như muốn được khuyến mại phổ quát hơn thì sắm tìm online là sự chọn thấp nhất cho bạn. có tương […]

Freelancer là gì? Full time hay freelancer ?

2017-01-12 12:21:35

Freelancer là gì ? Hãy cùng Thiết kế web 3t tìm hiểu các bạn nhá , và chúng tôi cũng sẽ hỗ trợ hết sức mình với những bạn muốn hợp tác với những ý tưởng tuyệt vời trong bạn . Hãy làm đi đừng ngại ! Làm freelancer kiếm tiền online là gì? Định hướng […]

MMO là gì , tâm sự của một người từng trải

2017-01-12 12:05:03

MMO là gì cùng với những khó khăn gặp phải – Có thể các bạn đến với MMO một cách tự nguyện. Nhưng với tôi thì KHÔNG. Tôi đến bằng MMO vì thế bị hoàn cảnh xô đẩy. Nó không tương tự như việc các bạn ham thích một môn thể thao cùng với luyện […]