Plugins, Wordpress

Tăng tốc ảnh hiển thị đầu tiên giúp giảm LCP

Posted on by Flatsomelite
tang toc anh hien thi dau tien giup giam lcp

Để tối ưu tốc độ tải trang, bạn có thể thêm thẻ <link rel="preload"> cho ảnh logo và ảnh sản phẩm đầu tiên để trình duyệt tải sớm các tài nguyên quan trọng. Dưới đây là cách thực hiện:

Thêm preload cho ảnh sản phẩm đầu tiên (trang sản phẩm)

Nếu bạn đang dùng WooCommerce và muốn preload ảnh sản phẩm chính đầu tiên, bạn có thể chèn trong funtions.php:

add_action('wp_head', 'preload_first_product_image');
function preload_first_product_image() {
    if (is_product()) {
        global $product;
        $image_id  = $product->get_image_id();
        if ($image_id) {
            $image_url = wp_get_attachment_url($image_id);
            echo '<link rel="preload" as="image" href="' . esc_url($image_url) . '">' . "\n";
        }
    }
}

Thêm preload cho ảnh logo

Giả sử logo được đặt trong header như sau:

<img src="/wp-content/themes/your-theme/images/logo.png" alt="Logo">

Bạn thêm preload trong phần <head> như sau:

<link rel="preload" as="image" href="/wp-content/themes/your-theme/images/logo.png">

Hoặc chèn vào funtions.php

add_action('wp_head', 'add_logo_preload_tag', 1);

function add_logo_preload_tag() {
    // URL logo — bạn có thể thay bằng get_theme_mod('custom_logo') nếu dùng Customizer
    $logo_id = get_theme_mod('custom_logo');
    if ($logo_id) {
        $logo_url = wp_get_attachment_image_url($logo_id, 'full');
        if ($logo_url) {
            echo '<link rel="preload" as="image" href="' . esc_url($logo_url) . '" fetchpriority="high">' . "\n";
        }
    }
}

Flatsomelite