Enable Lazy Loading of Images in WordPress Without Plugins
How to enable lazy loading images in wordpress;
Wordpress plugin for lazy loading images;
Best way to lazy load images in wordpress;
Enable lazy load images wordpress without plugin;
Wordpress lazy load images not working;
How to turn on lazy loading for images wordpress;
Wordpress lazy load images plugin free;
Wordpress lazy load images manually;
How to set up lazy loading images wordpress;
Wordpress 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
srcattribute todata-srcand adds alazyloadclass. 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
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_lazy_load_script');
function wp_dudecom_enqueue_lazy_load_script() {
// Enqueue the lazy load script
wp_enqueue_script('wp-dudecom-lazy-load', 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js', array(), null, true);
}
add_filter('the_content', 'wp_dudecom_add_lazy_loading_to_images');
function wp_dudecom_add_lazy_loading_to_images($content) {
// Use DOMDocument to parse the content and add lazy loading attributes
if (!class_exists('DOMDocument')) {
return $content;
}
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadHTML('<?xml encoding="utf-8" ?>' . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
foreach ($images as $img) {
$img->setAttribute('class', trim($img->getAttribute('class') . ' lazyload'));
$img->setAttribute('data-src', $img->getAttribute('src'));
$img->removeAttribute('src');
}
return $dom->saveHTML();
}
add_filter('post_thumbnail_html', 'wp_dudecom_add_lazy_loading_to_post_thumbnails', 10, 5);
function wp_dudecom_add_lazy_loading_to_post_thumbnails($html, $post_id, $post_thumbnail_id, $size, $attr) {
// Add lazy loading to post thumbnails
if (!class_exists('DOMDocument')) {
return $html;
}
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadHTML('<?xml encoding="utf-8" ?>' . $html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
foreach ($images as $img) {
$img->setAttribute('class', trim($img->getAttribute('class') . ' lazyload'));
$img->setAttribute('data-src', $img->getAttribute('src'));
$img->removeAttribute('src');
}
return $dom->saveHTML();
}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:
- Access your WordPress admin dashboard.
- 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. - Locate and open the
functions.phpfile or your custom plugin file. - Copy and paste the provided code into the file.
- Save the changes.
- Clear your site cache if you have a caching plugin active.
- 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.