Dự án AMP và quy chuẩn tối ưu hóa trang web cho người dùng di động

Thảo luận trong 'Các kĩ năng quản lý website' bắt đầu bởi babyinternet, 26/2/16.

  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,653
    Đã được thích:
    1,567
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Đầu tiên, hãy xem AMP là gì ?

    AMP là chữ viết tắt của Accelerated Mobile Page – một dự án mã nguồn mở được khởi động và quản lý bởi Google và được áp dụng trên nền tảng web di động. Một trang web được xây dựng theo chuẩn AMP sẽ có tốc độ tải trang nhanh hơn gấp 4 lần và sử dụng dữ liệu ít hơn 10 lần so với một trang web không sử dụng chuẩn này.

    Hãy xem mô tả về AMP được Google gói gọn trong một đoạn video:



    AMP cho một nội dung tĩnh được xây dựng dựa trên 3 phần:
    1. AMP HTML
    2. AMP JS
    3. Google AMP Cache



    AMP HTML

    AMP HTML cơ bản được xây dựng dựa trên một vài thuộc tính được bổ sung thêm vào mã HTML như thế này:

    Mã:
    <!doctype html>
    <html <img draggable="false" class="emoji" alt="⚡" src="https://s.w.org/images/core/emoji/72x72/26a1.png">>
    <head>
       <meta charset="utf-8">
       <link rel="canonical" href="hello-world.html">
       <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
       <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible  }}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible  }}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible  }}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible  }}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible  }}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
       <script async src="https://cdn.ampproject.org/v0.js"></script>
    </head>
    <body>Hello World!</body>
    </html>
    Hầu hết đều là thẻ HTML thông thường và thường được bạn sử dụng, một vài thẻ được thay thế bằng thẻ AMP đặc biệt (xem thêm các thẻ AMP). Các thành phần ấy – được gọi là các thành phần AMP HTML thực hiện việc tùy biến dễ dàng nhằm mục đích tối ưu hóa.

    Ví dụ, một thẻ amp-image cung cấp một srcset cho dù trình duyệt hiện tại không hỗ trợ nó. Bạn có thể xem thêm cách tạo một trang AMP đầu tiên để hiểu rõ hơn.

    AMP JS

    Thư viện AMP JS chứa rất nhiều các thao tác tối ưu cho phép tiến hành tối ưu hóa hiệu xuất làm việc của web ở mức độ cao, quản lý tài nguyên tải và cung cấp cho bạn các thẻ tùy chỉnh đã được đề cập ở trên, tất cả đều nhằm mục đích giúp trang của bạn render nhanh chóng.

    Trong việc tối ưu hóa, vấn đề lớn nhất đến từ các resource không đồng bộ được đưa vào trang web từ bên ngoài làm chậm tiến trình tải trang. Vì vậy, nguyên tắc quan trọng là không gì được ngăn cản quá trình tải trang.

    Một kĩ thuật khác được sử dụng đó là sử dụng các sandbox cho tất cả các iframe, tính toán lại cách bố trí layout của mỗi phần tử trên trang trước khi tài nguyên được nạp và vô hiệu hóa các CSS chậm.

    Để tìm hiểu thêm về những điểm mạnh, điểm hạn chế, hãy đọc thêm đặc điểm của AMP HTML.

    Google AMP Cache

    Google AMP Cache là một mạng lưới phân phối nội dung(proxy-based content delivery network) để cung cấp các tài liệu AMP hợp lệ. Nó sẽ lấy các trang AMP, lưu trữ chúng và cải thiện hiệu xuất trang tự động. Khi sử dụng AMP Cache của Google, các tài liệu, tất cả các file JS, tất cả các hình ảnh từ cùng một nguồn gốc được sử dụng HTTP 2.0 cho hiệu quả tối đa.

    Các trang cache cũng bao gồm một hệ thống xác nhận có trách nhiệm đảm bảo trang web làm việc và không phụ thuộc vào các nguồn lực bên ngoài. Các hệ thống xác nhận sẽ chạy một loạt các khẳng định để xác nhận các trang đáp ứng các đặc điểm của AMP.

    Một phiên bản của trình xác nhận sẽ đi kèm với mỗi trang AMP. Phiên bản này có thể truy cập vào nhật ký lỗi xác nhận(log validation errors) của trình duyệt khi trang web được render cho phép bạn xem chúng ảnh hưởng thế nào và làm thế nào để nâng cao trải nghiệm người dùng, nâng cao hiệu suất.

    AMP và WordPress

    Nhanh chóng thấy được những ưu điểm của dự án AMP, WordPress đã tìm cách đưa tiêu chuẩn này vào bộ mã nguồn của mình. Và cũng nhanh chóng không kém khi ngày hôm qua (25/02/2016) các website đang lưu trữ trên WordPress.COM đều được áp dụng hệ thống AMP một cách tự động.

    Đối với các website sử dụng WordPress.ORG, WordPress cũng nhanh nhạy không kém khi cho ra mắt plugin AMP giúp bạn ứng dụng kỹ thuật AMP ngay trên chính hệ thống sử dụng mã nguồn WordPress của mình. Đúng là một tin vui cho các tín đồ WordPress phải không.

    [​IMG]
    Nguồn: NhanWeb.COM
     
    Chỉnh sửa cuối: 4/8/16
    onlove_ol thích bài này.
  2. gamehayst

    gamehayst Đang làm quen

    Tham gia ngày:
    19/3/13
    Bài viết:
    701
    Đã được thích:
    2
    Điểm thành tích:
    18
    Nơi ở:
    Hà Nội
    Vậy là chỉ cần cài plugin mới của WP là nó tự động chuyển đổi, tối ưu hóa cho di động hay sao hả admin? Hay mình cần làm gì nữa? Chơi trên sân của Gôgle thì yêu cầu của nó là thước đo của mình hướng tới thôi
     
  3. phuongxoan

    phuongxoan Đang làm quen

    Tham gia ngày:
    7/4/15
    Bài viết:
    236
    Đã được thích:
    1
    Điểm thành tích:
    18
    Thấy có plugin cho website Wordpress vậy còn với các web khác thì đã có hướng dẫn nào ngoài việc chỉnh sửa lại code không ạ? Vì code e không rành :dangmo:
     
  4. pingmaxno1

    pingmaxno1 Đang làm quen

    Tham gia ngày:
    6/1/16
    Bài viết:
    87
    Đã được thích:
    0
    Điểm thành tích:
    6
    Càng ngày thì điện thoại di động và máy tính bảng ngày càng phát triển và nhằm đáp ứng nhu cầu thực tế này thì AMP ra đời và phát triển là lẽ tất yếu
     
  5. shopnhikhuc

    shopnhikhuc Lính mới

    Tham gia ngày:
    13/1/16
    Bài viết:
    14
    Đã được thích:
    0
    Điểm thành tích:
    1
    Dẫu thế nào đi nữa thì tương lai, thiết bị động ngày cà phát triển, và sự ra đời của amp cũng là điều đương nhiên mà. "D
     
  6. vtoanstar

    vtoanstar Đang làm quen

    Tham gia ngày:
    16/1/13
    Bài viết:
    68
    Đã được thích:
    0
    Điểm thành tích:
    6
    Mình đã cài plugin amp cho wordpress của mình từ tuần trước.
    Cái gì của Google dù xấu hay đẹp, dù béo hay gầy, dù già hay trẻ, dù ác hay hiền, dù điên điên hay bác học... em cũng rước nó về hết :))
     
  7. ShopHanhPhuc

    ShopHanhPhuc Đang làm quen

    Tham gia ngày:
    17/10/14
    Bài viết:
    299
    Đã được thích:
    0
    Điểm thành tích:
    16
    Như vậy là AMP chỉ giành cho WP thôi hả ad, mình đang dùng Onpencart vào google wmt thấy có AMP mà chẳng biết vào đâu chỉnh sửa
     
  8. nọimuatocroi.net

    nọimuatocroi.net Lính mới

    Tham gia ngày:
    3/4/13
    Bài viết:
    5
    Đã được thích:
    0
    Điểm thành tích:
    1
    nó không phải dành riêng cho wp mà các loại code khác, quan trọng là bạn phải biết code thì sẽ tích hợp dc thôi
     
  9. rockerlangdu

    rockerlangdu Lính mới

    Tham gia ngày:
    20/8/16
    Bài viết:
    26
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Nơi ở:
    Ha Noi
    bác @babyinternet ơi, web em là ASP thì có dùng được không ạ, hay nó chỉ hỗ trợ WP thôi bác
     
  10. tonynguyen

    tonynguyen Đang làm quen

    Tham gia ngày:
    22/6/14
    Bài viết:
    35
    Đã được thích:
    0
    Điểm thành tích:
    6
    Tiếc là wordpress AMP không hoạt động với page mà chỉ hoạt động với posts.
    Mình cũng đang nghiên cứu cài này.
     
  11. Riviera

    Riviera Đang làm quen

    Tham gia ngày:
    14/5/15
    Bài viết:
    65
    Đã được thích:
    4
    Điểm thành tích:
    8
    Luôn phải cập nhật công nghệ mới để không bị hết đát. Google đã ra cái chuẩn gì là lại sắp có xu hướng, sản phẩm mới gì đây.
    Xài được hết nha bạn ơi, ASP, PHP làm tới hết á, vì đây là chuẩn chung của Google mà. Bạn đọc đoạn AMP HTML bên trên ấy.
     
  12. hoilamchi1

    hoilamchi1 Lính mới

    Tham gia ngày:
    22/1/16
    Bài viết:
    11
    Đã được thích:
    0
    Điểm thành tích:
    1
    mình mới cài AMP cho joomla xong. thấy chỉ phù hợp với web tin tức thôi. Còn lại website bán hàng.. thì không hợp.
     
  13. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,653
    Đã được thích:
    1,567
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Mục đích của AMP đó là đáp ứng chính xác những gì người dùng cần một cách nhanh nhất và kịp thời nhất bằng cách loại bớt các thành phần không cần thiết để tải trang nhanh hơn. Trên quan điểm đó thì AMP cực kì thích hợp cho bán hàng nếu bác biết tối ưu tập trung vào sản phẩm.

    Suy nghĩ lại và tìm phương án phù hợp thử xem. Nhận xét vậy quá sớm :p
     
  14. hoilamchi1

    hoilamchi1 Lính mới

    Tham gia ngày:
    22/1/16
    Bài viết:
    11
    Đã được thích:
    0
    Điểm thành tích:
    1
    Với những website bán hàng. Thì khả năng tối ưu giỏ hàng, hình ảnh, slide rất khó và kém.
     
Đang tải...

Chia sẻ trang này