מדריך מלא להעברת תמונות וקוד JavaScript/CSS מייד לאחר טעינת העמוד בוורדפרס

העברת תמונות וקוד JavaScript/CSS לאחר טעינת העמוד, ניתן לשדרג את זמני הטעינה ולשפר את ביצועי האתר. במדריך הזה, נתאר שלושה דרכים שונות להעביר תמונות, JavaScript ו-CSS בוורדפרס באמצעות קוד PHP.

1. העברת תמונות עם טעינה עצמית (Lazy Loading)

השימוש בטעינת תמונות עם עיכוב (Lazy Loading) מאפשרת לדפדף לטעון תמונות רק כאשר הן באופן ממשי בתיק תצוגה של המשתמש. הקוד PHP הבא מציג איך להפעיל את טעינת התמונות בצורה עם עיכוב:

// הפעלת טעינת תמונות עם עיכוב (Lazy Loading)
function add_lazy_load() {
    echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
            lazyImages.forEach(function(lazyImage) {
                lazyImage.setAttribute("src", lazyImage.getAttribute("data-src"));
                lazyImage.onload = function() {
                    lazyImage.removeAttribute("data-src");
                    lazyImage.classList.remove("lazy");
                };
            });
        });
    </script>';
}
add_action('wp_footer', 'add_lazy_load');

2. העברת קוד JavaScript לסוף הדף

העברת קוד JavaScript לסוף הדף מאפשרת לדפדף לטעון את התוכן העיקרי קודם ורק לאחר מכן לטעון את הסקריפטים. הקוד PHP הבא מראה איך להעביר קוד JavaScript לסוף הדף:

// העברת קוד JavaScript לסוף הדף
function move_js_to_footer() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('wp_enqueue_scripts', 'move_js_to_footer');

3. העברת קוד CSS לסוף הדף

באופן דומה, העברת קוד CSS לסוף הדף יכולה לשדרג את זמן הטעינה. הקוד PHP הבא מציג איך להעביר קוד CSS לסוף הדף:

// העברת קוד CSS לסוף הדף
function move_css_to_footer() {
    remove_action('wp_head', 'wp_print_styles');
    remove_action('wp_head', 'wp_enqueue_styles', 1);
    add_action('wp_footer', 'wp_print_styles', 5);
    add_action('wp_footer', 'wp_enqueue_styles', 5);
}
add_action('wp_enqueue_scripts', 'move_css_to_footer');

סיכום

על ידי העברת תמונות לעיכוב, והעברת קוד JavaScript ו-CSS לסוף הדף, תוכלו לשדרג את זמני הטעינה של אתר הוורדפרס שלכם. יש לשים לב לתוכניות המסופקות בקוד PHP ולהתאים א