Wordpress

Tăng tốc admin WordPress bằng cách lazy load hình ảnh

Posted on by Flatsomelite
lazy load admin page1

Lợi ích Tăng tốc admin WordPress bằng cách lazy load hình ảnh

Tăng tốc trang admin bằng cách trì hoãn tải hình ảnh không cần thiết.
Tiết kiệm băng thông vì hình ảnh chỉ tải khi cần thiết.
Tăng hiệu suất TinyMCE bằng cách áp dụng lazy load cho ảnh trong trình soạn thảo.

lazy load admin page1 lazy load admin page

Hàm này thêm thuộc tính loading="lazy" cho tất cả hình ảnh (<img>) trong trang quản trị WordPress (Admin Dashboard), bao gồm cả hình ảnh bên trong TinyMCE Editor (trình soạn thảo nội dung).

function add_lazy_load_to_admin_images() {
    if (is_admin()) {
        echo '';
    }
}
add_action('admin_footer', 'add_lazy_load_to_admin_images');

Cách hoạt động

  1. Chạy trong Admin WordPress

    • Điều kiện if (is_admin()) đảm bảo chỉ thực thi trong trang Admin.

  2. Thêm đoạn <script> vào admin_footer

    • Hook admin_footer giúp nhúng JavaScript vào cuối trang admin.

  3. Khi trang admin tải xong (DOMContentLoaded)

    • Chờ 1 giây (setTimeout(function() { ... }, 1000)) để đảm bảo tất cả hình ảnh đã xuất hiện.

  4. Thêm loading="lazy" cho tất cả <img>

    • Duyệt qua tất cả hình ảnh trên trang admin.
    • Nếu chưa có thuộc tính loading, thì thêm loading="lazy".

  5. Thêm loading="lazy" cho hình ảnh trong TinyMCE

    • TinyMCE là trình soạn thảo văn bản trong WordPress, nội dung của nó nằm trong <iframe>.
    • Lặp qua tất cả <iframe> để tìm hình ảnh bên trong.
    • Nếu hình ảnh bên trong TinyMCE Editor chưa có loading="lazy", thì thêm vào.

Có thể xóa đi không?

Có thể xóa đi nếu:

  • Bạn không muốn lazy load hình ảnh trong admin.
  • Admin của bạn đã chạy nhanh và không cần tối ưu thêm.
  • Một số plugin hoặc theme xung đột với việc thêm loading="lazy" trong admin.

Nếu muốn xóa, chỉ cần gỡ bỏ dòng này:

add_action(‘admin_footer’, ‘add_lazy_load_to_admin_images’);

Flatsomelite