Tối ưu AMP cho website

09
11-2016
thietkeweb3t

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ố.

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

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

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

  1. Tại sao phải thiết kế lại website? - thiết kế web 3t
    15 November, 2016 at 6:09 am

    […] Tối ưu AMP cho website […]

  • Ngày đăng : 12-01-2017 Người đăng : betraining.org
    12
    01-2017

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

    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 […]

  • Ngày đăng : 12-11-2016 Người đăng : betraining.org
    12
    11-2016

    Thiết kế web 3 triệu trọn gói

    Hiện tại, môi trường kinh doanh online tại Việt Nam đang diễn ra vô cùng sôi động với sự cạnh tranh rất gay gắt. Nhiều doanh nghiệp vừa và nhỏ ra đời với mong muốn sở hữu một website bán hàng để giới thiệu sản phẩm của mình với chi phí đầu tư không quá […]

  • Ngày đăng : 27-10-2016 Người đăng : betraining.org
    27
    10-2016

    Điều thú vị về Google Searchbox dành cho SEOer

    Theo những gì chúng ta biết thì Google SearchBox là cửa sổ tìm kiếm của Google. Thông thường chúng ta thường chỉ dùng công cụ này để tìm kiếm những gì mình cần. Nhưng nếu quan sát kỹ, Google SearchBox còn chính là một công cụ gợi ý Keyword rất hiệu quả mà ít ai […]

  • Ngày đăng : 10-01-2017 Người đăng : betraining.org
    10
    01-2017

    6 xu thế thiết kế web chất trong năm 2017

    Chúng ta đang trải qua các quá trình lớn mạnh mạnh mẽ nhất của lĩnh vực thiết kế web, lúc mà xu thế kiểu dáng ảnh động web của những năm 90 đang đã dần phát triển thành quá khứ và thay vào đấy là xu thế thiết kế phẳng ấn tượng. Ngày nay, sự vững […]

  • Ngày đăng : 16-10-2016 Người đăng : betraining.org
    16
    10-2016

    Thiết kế web giá rẻ

    Hiện tại cửa hàng của bạn đang muốn mở rộng kinh doanh với nhiều hình thức, trong đó có kinh doanh trực tuyến? Bạn đang muốn tìm kiếm một công ty thiết kế web bán hàng nhưng chưa biết lựa chọn công ty nào để “gửi trọn niềm tin”? Thời đại công nghệ phát triển […]

  • Ngày đăng : 15-11-2016 Người đăng : betraining.org
    15
    11-2016

    Tại sao phải thiết kế lại website?

    Trang web của bạn đã sử dung quá lâu chính vì thế nên nó đã bị lỗi thời, cần phải thiết kế website lại để nó trở nên cuốn hút và được khách hàng chú ý nhiều hơn. Thiết kế lại một trang web đồng nghĩa với việc thiết kế mới một website. Nếu trang […]