Snippet

Enable Lazy Loading of Images in WordPress Without Plugins

How to enable lazy loading images in wordpressWordpress plugin for lazy loading imagesBest way to lazy load images in wordpressEnable lazy load images wordpress without pluginWordpress lazy load images not workingHow to turn on lazy loading for images wordpressWordpress lazy load images plugin freeWordpress lazy load images manuallyHow to set up lazy loading images wordpressWordpress lazy load images tutorial

Explanation

Lazy loading is a nifty way to make your WordPress site faster by loading images only when they're about to be seen. This means your visitors won't have to wait for all images to load at once, which can speed up your site significantly.

Here's how this code helps you achieve that:

  • Script Enqueueing: The code adds a special script called lazysizes to your site. This script is responsible for handling the lazy loading of images.
  • Content Images: It modifies the images within your posts or pages. It changes the image's src attribute to data-src and adds a lazyload class. This tells the browser to load the image only when it's needed.
  • Post Thumbnails: The same lazy loading technique is applied to featured images (post thumbnails) to ensure they also load only when necessary.

By using this code, you don't need a plugin to enable lazy loading, which can be a great way to keep your site lightweight. Just make sure your server supports the DOMDocument class, as it's crucial for this code to work.

Code

1add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_lazy_load_script'); 2 3function wp_dudecom_enqueue_lazy_load_script() { 4 // Enqueue the lazy load script 5 wp_enqueue_script('wp-dudecom-lazy-load', 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js', array(), null, true); 6} 7 8add_filter('the_content', 'wp_dudecom_add_lazy_loading_to_images'); 9 10function wp_dudecom_add_lazy_loading_to_images($content) { 11 // Use DOMDocument to parse the content and add lazy loading attributes 12 if (!class_exists('DOMDocument')) { 13 return $content; 14 } 15 16 libxml_use_internal_errors(true); 17 $dom = new DOMDocument(); 18 $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); 19 $images = $dom->getElementsByTagName('img'); 20 21 foreach ($images as $img) { 22 $img->setAttribute('class', trim($img->getAttribute('class') . ' lazyload')); 23 $img->setAttribute('data-src', $img->getAttribute('src')); 24 $img->removeAttribute('src'); 25 } 26 27 return $dom->saveHTML(); 28} 29 30add_filter('post_thumbnail_html', 'wp_dudecom_add_lazy_loading_to_post_thumbnails', 10, 5); 31 32function wp_dudecom_add_lazy_loading_to_post_thumbnails($html, $post_id, $post_thumbnail_id, $size, $attr) { 33 // Add lazy loading to post thumbnails 34 if (!class_exists('DOMDocument')) { 35 return $html; 36 } 37 38 libxml_use_internal_errors(true); 39 $dom = new DOMDocument(); 40 $dom->loadHTML('<?xml encoding="utf-8" ?>' . $html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); 41 $images = $dom->getElementsByTagName('img'); 42 43 foreach ($images as $img) { 44 $img->setAttribute('class', trim($img->getAttribute('class') . ' lazyload')); 45 $img->setAttribute('data-src', $img->getAttribute('src')); 46 $img->removeAttribute('src'); 47 } 48 49 return $dom->saveHTML(); 50}

Instructions

File Location: Add the code to your theme's functions.php file or a custom plugin file.

Prerequisites:

  • Ensure your server supports the DOMDocument class.

Implementation Steps:

  1. Access your WordPress admin dashboard.
  2. Navigate to Appearance > Theme Editor if you're adding the code to functions.php. Alternatively, go to Plugins > Editor if you're using a custom plugin file.
  3. Locate and open the functions.php file or your custom plugin file.
  4. Copy and paste the provided code into the file.
  5. Save the changes.
  6. Clear your site cache if you have a caching plugin active.
  7. Visit your site to ensure images are loading correctly with lazy loading enabled.

If you encounter any issues or need further assistance with this implementation or more advanced functionality, consider reaching out to wp-dude.com for expert help.