• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Lazyload hình ảnh với plugin chính thức từ Google

Lazyload hình ảnh với plugin chính thức từ Google

06/11/2019 02/02/2020 Trung Hiếu 62 Bình luận

Mục lục bài viết

  1. Lazyload hình ảnh với plugin Native Lazyload
  2. Tại sao bạn nên chọn Native Lazyload?

Lazyload hình ảnh trong WordPress với plugin Native Lazyload chính thức từ Google.

lazyload-hinh-anh-trong-website-wordpress-voi-plugin-native-lazyload

Kể từ phiên bản Chrome 76, bạn đã có thể sử dụng thuộc tính tải (loading) mới để tải tài nguyên “lười biếng” (lazy-loading) mà không cần phải viết các đoạn code lazy-loading tùy chỉnh hoặc sử dụng thư viện JavaScript riêng. Nếu bạn chưa biết thì lazy-loading là một tính năng cho phép trình duyệt web chỉ tải các nội dung như hình ảnh khi người dùng cuộn trang tới. Điều này cho phép giảm thời gian load web của bạn do trình duyệt web chỉ phải tải những phần nội dung đang được hiển thị trên màn hình thay vì tải tất cả cùng một lúc. Google đồng thời cũng đã phát hành plugin “chính chủ”, giúp các blogger/ webmaster có thể triển khai tính năng này một cách dễ dàng trên nền tảng WordPress.

Tham khảo thêm:

  • Top 3 công cụ kiểm tra tốc độ và hiệu suất website
  • Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin

Lazyload hình ảnh với plugin Native Lazyload

Tất cả những gì các bạn cần phải làm là cài đặt và kích hoạt plugin Native Lazyload được phát hành miễn phí trên kho plugin của WordPress.org (link download).

cai-dat-va-kich-hoat-plugin-native-lazyload

Trước đó, nhớ vô hiệu hóa chức năng lazyload hình ảnh của theme hoặc các plugin khác để tránh xung đột.

Tại sao bạn nên chọn Native Lazyload?

Plugin Native Lazyload không có phần thiết lập và nó hoạt động theo nguyên tắc rất đơn giản:

  • Nếu thuộc tính loading không được trình duyệt web hỗ trợ, plugin sẽ quay trở lại giải pháp JavaScript dựa trên IntersectionObserver.
  • Đối với trường hợp JavaScript bị vô hiệu hóa, nhưng thuộc tính loading được trình duyệt web hỗ trợ, một biến thể noscript của phần tử tương ứng sẽ được thêm vào, bao gồm cả thuộc tính loading mà không có bất kỳ thay đổi nào khác.

Native Lazyload không sử dụng JavaScript để lazyload hình ảnh mà sử dụng chính tính năng có sẵn của trình duyệt web Google Chrome (đang chiếm khoảng gần 70% thị phần). Do đó, nó nhẹ và nhanh hơn rất nhiều so với các plugin hay code lazyload khác. Bạn hầu như không thể nhận ra tính năng lazyload đang hoạt động nếu tốc độ mạng và máy tính đủ nhanh (không thấy độ trễ khi load web). Chúng tôi cũng đang sử dụng plugin này trên tất cả hệ thống website của mình.

Kiểm tra xem plugin đã hoạt động hay chưa bằng cách click chuột phải vào 1 hình ảnh trên website của bạn, sau đó chọn Inspect (đối với trình duyệt Google Chrome). Nếu bạn thấy thẻ loading="lazy" xuất hiện trong mã nguồn HTML thì có nghĩa là plugin đã hoạt động bình thường.

the-lazyload-hinh-anh-trong-html

Thật đơn giản phải không nào? Chúc các bạn thành công!

Ngoài Native Lazyload, các bạn còn có thể cài đặt và sử dụng Lazy Loading Feature Plugin với tính năng hoàn toàn tương tự. Plugin này được phát hành bởi chính nhóm lập trình viên của WordPress.org. Theo dự kiến, tính năng lazyload hình ảnh sẽ được tích hợp sẵn trong WordPress 5.4 phát hành vào tháng 3/2020.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

5 / 5 ( 9 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: Tăng tốc WordPress

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Hướng dẫn đổi tên miền không mất thứ hạng tìm kiếm
Bài viết sau Hạ cấp WordPress về phiên bản cũ một cách đơn giản »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Dzungmmo viết

    08/02/2020 lúc 15:36

    Admin cho em hỏi, ở trong plugin LiteSpeed Cache em thấy có mục lazy load image : Enable rồi. Tải thêm plugin google lazy này có tác dụng hay ko cần nữa ạ ?
    Thank anh !

    Trả lời
    • Trung Hiếu viết

      08/02/2020 lúc 15:52

      Không dùng đồng thời 2 tính năng lazyload đâu bạn nhé. Nếu dùng Native Lazyload thì tắt tính năng lazyload của plugin LiteSpeed Cache đi.

      Trả lời
  2. Luật sư Online viết

    09/02/2020 lúc 17:05

    Plugin này của GG chả hiểu sao mình thấy nó bị xung đột với plugin Rank Math!
    Mình tắt Rank Math đi sử dụng Yoast thì lại bình thường!

    Trả lời
    • Trung Hiếu viết

      09/02/2020 lúc 17:13

      Xung đột là chuyện bình thường mà bạn. Đâu ai đảm bảo được một plugin nào đó có khả năng tương thích 100%. Bạn thử plugin Lazy Loading Feature Plugin xem sao. Plugin này có tính năng tương tự và do team của WordPress.org phát triển, chuẩn bị tích hợp thẳng vào trong WordPress luôn.

      Trả lời
      • Luật sư Online viết

        09/02/2020 lúc 17:15

        Mình đã bật luôn chức năng Lazy Load tích hợp sẵn trong Rocket 1h!
        Thấy chạy rất oke!

        Trả lời
        • Trung Hiếu viết

          09/02/2020 lúc 17:25

          Lazyload của thằng WP Rocket hay LiteSpeed Cache mặc định không phải là native lazyload bạn ạ. Nếu bạn dùng WP Rocket thì thử cài thêm plugin này xem sao. Nó hỗ trợ kích hoạt native lazyload cho WP Rocket.

          Trả lời
          • Luật sư Online viết

            09/02/2020 lúc 17:36

            Cảm ơn bác!
            Cho e hỏi thêm: Sau khi cài đặt và kích hoạt có cần phải làm gì khác để kích hoạt chức năng Lazyload này cho WP Rocket không bác?
            Làm sao để kiểm tra việc 1 trang đã bật chức năng native lazy load!

          • Trung Hiếu viết

            09/02/2020 lúc 17:38

            Hình như không bạn ạ. Cách kiểm tra thì trong bài viết mình đã có hướng dẫn rồi mà. :P

          • Luật sư Online viết

            09/02/2020 lúc 17:40

            Bác hướng dẫn tìm trong mã nguồn mà e search rồi nó không có chữ lazy nào cả!

          • Trung Hiếu viết

            09/02/2020 lúc 17:42

            Bạn thử tắt tính năng lazyload của thằng WP Rocket đi xem.

          • Luật sư Online viết

            09/02/2020 lúc 17:54

            Mình đã tắt nhưng vẫn không có gì khác so với không tắt cả!

          • Trung Hiếu viết

            09/02/2020 lúc 17:59

            Bạn thử Lazy Loading Feature Plugin chưa? Tắt tất cả các tính năng lazyload khác.

          • Luật sư Online viết

            09/02/2020 lúc 18:05

            Sau khi cài đặt Plugin Lazy Loading Feature Plugin thì đã thành công! Cảm ơn bác Hiếu!
            P/s: Và con tim đã vui trở lại!

  3. Trong Nghia viết

    08/04/2020 lúc 09:10

    Cái plugin này nó có bị xung đọt với laziloading của theme flatsome không ạ. tại e cài vào và bật cả lazi loading của theme thấy vẫn chạy bình thường không vấn đề. Không biết có phải tắt hay chạy tốt thì cứ để ạ.

    Trả lời
    • Trung Hiếu viết

      08/04/2020 lúc 09:23

      Dùng 1 trong 2 thôi bạn nhé. Dùng cái này thì tắt cái kia và ngược lại.

      Trả lời
  4. Quoc viết

    27/04/2020 lúc 16:33

    Chào bác. E cài plugin này vô web xong thì lúc truy cập web nó ko hiện ảnh nữa. Mất hết hình ảnh trên web luôn. Cho e hỏi là nó bị gì và cách khắc phục ạ.

    Trả lời
    • Trung Hiếu viết

      27/04/2020 lúc 16:51

      1. Bạn kiểm tra thử xem trên website có cài plugin nào với tính năng tương tự không. Hoặc theme có tích hợp sẵn tính năng lazyload hình ảnh không? Nếu có thì tắt đi.
      2. Thử cài plugin Lazy Loading Feature Plugin mình để link ở cuối bài viết xem sao.

      Trả lời
  5. Hoàng Nhân viết

    04/10/2020 lúc 10:35

    Vậy mình không cài plugin đó, mà mình thêm thủ công như thế này

    Thì nó có hoạt động tốt trên các trình duệt không ad ?

    Trả lời
    • Trung Hiếu viết

      04/10/2020 lúc 11:37

      Nếu bạn sử dụng phiên bản WordPress từ 5.5 trở lên thì tính năng này đã được tích hợp sẵn rồi, không cần cài plugin hay chèn code gì cả.

      Trả lời
  6. Hoàng Nhân viết

    04/10/2020 lúc 10:38

    Vậy mình không cài plugin đó, mà mình thêm thủ công như thế này:
    https://www.upsieutoc. com/images/2020/10/04/Untitled.png
    Thì nó có hoạt động tốt trên các trình duệt không ad ?

    Trả lời
    • Trung Hiếu viết

      04/10/2020 lúc 11:43

      Bạn bắt buộc phải sử dụng plugin nhé. Không chèn thủ công thế này được. Vì nếu trình duyệt nào không hỗ trợ thì sẽ sử dụng javascript để load.

      Trả lời
« 1 2 3

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021
  • Hướng dẫn nâng cấp PHP 8 cho website WordPress 15/12/2020
  • Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo 11/11/2020
  • Hiển thị mô tả cho category và tag trong WordPress 05/11/2020
  • Cải tiến công cụ tìm kiếm mặc định của WordPress 31/10/2020

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Trung Hiếu trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Gỡ bỏ Gutenberg stylesheet khỏi website WordPress
  • Trung Hiếu trong Tích hợp widget Facebook Page vào website WordPress
  • Lê Thanh Hưởng trong Tích hợp widget Facebook Page vào website WordPress

Bình luận nhiều nhất (tháng)

  1. Doligo (7)
  2. Tuyen (7)
  3. Tien Coin (4)
  4. Nguyễn Văn Long (3)
  5. Thành (3)
  6. Gia Tuấn (2)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 978 Bài viết - 37203 Bình luận

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting