# How to get started with WordPress lazy loading You should choose lazy loading to improve the performance of your [WordPress](https://www.ionos.ca/digitalguide/hosting/cms/wordpress-examining-the-well-known-cms/) website. The function is now part of the WordPress core but can still be extended by plugins. ## What is lazy loading? [Lazy Loading](https://www.ionos.ca/digitalguide/websites/website-creation/lazy-loading/) is a technique for improving performance when a website is called up. Instead of loading all content at the same time, the images and videos in the first viewport are loaded. Everything outside of the viewport is loaded later. Thanks to lazy loading, visitors can work with the website much faster. After they finish reading **the visible area**, the area “below the fold” is also loaded. ## What does lazy loading add to WordPress? Lazy loading can [make your WordPress faster](https://www.ionos.ca/digitalguide/hosting/blogs/make-your-wordpress-faster/ "Make your WordPress faster"). This does not speed up the actual loading, but it does **improve the user experience**. The users of a website get the content that is initially most important delivered quickly. Everything else can then be loaded unnoticed in the background. Google like this too. The [Core Web Vitals](https://www.ionos.ca/digitalguide/online-marketing/search-engine-marketing/google-core-web-vitals/ "Google Core Web Vitals") serve as **ranking factors** that target the speedy delivery of website elements. The faster a website can be interacted with, the more positively its ranking in search results is influenced. That means Lazy loading is counted as [search engine optimization (SEO)](https://www.ionos.ca/digitalguide/online-marketing/search-engine-marketing/the-basics-of-search-engine-optimization/ "The basics of search engine optimization"). Along with other [WordPress SEO](https://www.ionos.ca/digitalguide/online-marketing/search-engine-marketing/wordpress-seo-tips/ "WordPress SEO tips") elements, it helps bring your website to the top. You can also improve the performance of your page by [compressing images](https://www.ionos.ca/digitalguide/websites/web-design/compress-images-with-the-help-of-free-tools/ "Compress images with the help of free tools"). This loads graphic content considerably faster. It is also useful if you know the [WordPress image sizes](https://www.ionos.ca/digitalguide/hosting/blogs/wordpress-image-sizes/) to choose the perfect image crops. --- ### Tip You can also make WordPress faster by relying on the right hosting. With [Hosting for WordPress](https://www.ionos.ca/hosting/wordpress-hosting "Hosting for WordPress from IONOS") from IONOS, performance is actively supported by SSD storage, caching and a Content Delivery Network (CDN). --- ## How to use lazy load images in WordPress Lazy loading for images and graphic content has been enabled by default since version 5.5 of WordPress. Whenever you place an image in your pages and posts, WordPress automatically adds an attribute to the files. This can be recognized in the source code like this: ```html ``` The attribute is now supported by Chrome, Firefox and Safari. However, this also means that other browsers do not respond to the attribute. It is also possible for video content to benefit from lazy loading. However, the attribute is **only attached to images**. So, if you want to use the technique more extensively on your website, you have to rely on other options. For example, with the help of plugins you can extend lazy loading to [embed videos in WordPress](https://www.ionos.ca/digitalguide/hosting/blogs/embed-a-video-in-wordpress/). ## Lazy load plugins for WordPress To better control lazy loading in WordPress, it is recommended to use plugins. Here is an overview of some good extensions:
Plugin Images Videos Additional functions
LazyLoad
a3 Lazy Load
Optimole Image optimization
Smush Image optimization
Lazy Loader
### LazyLoad [![Image: Choices (images, videos, iFrames) in the LazyLoad plugin](https://www.ionos.ca/digitalguide/fileadmin/_processed_/4/8/csm_Choices-images-videos-iframes-in-the-lazyload-plugin_14757e1be7.webp "Choices (images, videos, iFrames) in the LazyLoad plugin")](https://www.ionos.ca/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/Choices-images-videos-iframes-in-the-lazyload-plugin.png) LazyLoad options are kept minimalistic. The [LazyLoad](https://www.wordpress.org/plugins/rocket-lazy-load/ "LazyLoad Plugin at WordPress.org") plugin by WP Rocket enables lazy loading for images, videos and iFrame, going beyond the possibilities of the default setting. It also remains very small at just 10 KB. Even avatars and smileys are covered by the plugin. It is also interesting that you can replace embedded YouTube videos with thumbnails first, before they are loaded properly. This reduces the loading time when the page is loaded. The plugin is ready to use right away and does not need to be configured. But this is also one of the disadvantages, LazyLoad offers hardly any setting options. Although you can enable or disable lazy loading for different media types independently. Anyone looking for more features can upgrade to the paid [WordPress caching plugin](https://www.ionos.ca/digitalguide/hosting/blogs/wordpress-caching-plug-ins/ "WordPress: Caching plug-ins") WP Rocket. Lazy Loading is included in this along with other optimization options.
Pros Cons
Lightweight Lack of customizable settings
Media types can be addressed independently of each other
Thumbnails for YouTube-Videos
### a3 Lazy Load [![Image: Different options in the a3 Lazy Load plugin](https://www.ionos.ca/digitalguide/fileadmin/_processed_/4/8/csm_different-options-in-the-a3-lazy-load-plugin_b3b9ff0cce.webp "Different options in the a3 Lazy Load plugin")](https://www.ionos.ca/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/different-options-in-the-a3-lazy-load-plugin.png) a3 Lazy Load comes with various settings options. You get many more options with [a3 Lazy Load](https://www.wordpress.org/plugins/a3-lazy-load/ "a3 Lazy Load at WordPress.org"). For example, the plugin gives you the option to enable lazy loading independently for images or videos and iFrames. But the choice does not end there. You can even specify what kind of images should be covered by lazy loading. For example, you can exclude gravatars or thumbnails. You can also disable the feature on different types of pages (such as the home page). You can go into even more detail by using the [URI](https://www.ionos.ca/digitalguide/websites/web-development/uniform-resource-identifier-uri/ "Uniform Resource Identifier (URI)") to exclude individual objects from lazy loading. In addition, a3 Lazy Load offers the possibility to determine the appearance of the reload. Should the images fade in slowly or should the plugin display a loading icon? Technically more important, however, is that you can expand the viewport. This way you can set it up so that parts of the actually not yet visible area are loaded directly. Another special feature of the plugin is that via a3 Lazy Load, you can disable the default lazy loading, which is already included in the core of WordPress. This way you make sure that the functions of the plugin and the CMS don’t get in each other’s way.
Pros Cons
Very detailed choices available No additional functions
Exceptions made via URI or page type
Loading design is adaptable
Extendable viewport
Can run without the core lazy load function
### Optimole [![Image: Login page for Optimole](https://www.ionos.ca/digitalguide/fileadmin/_processed_/1/d/csm_login-page-for-optimole_bebd842f2e.webp "Login page for Optimole")](https://www.ionos.ca/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/login-page-for-optimole.png) Optimole requires you to register to get the required API key. The [Optimole](https://www.wordpress.org/plugins/optimole-wp/ "Optimole at WordPress.org") plugin goes beyond lazy loading and generally tries to **improve the delivery of images** on your WordPress website. In addition to smart loading, your images are compressed using the plugin. Furthermore, the image size is adapted to the end device of the respective user. A separate [content delivery network (CDN)](https://www.ionos.ca/digitalguide/hosting/technical-matters/what-is-a-cdn-content-delivery-network/ "What is a CDN (Content Delivery Network)?") is also used to play out the images. This can shorten the loading time even more. However, there are hardly any options for lazy loading. Besides deciding whether you want to use the feature, you can only **exclude background graphics from lazy loading**. On top of that, you have to register with Optimole before you can use the features.
Pros Cons
CDN Requires registration
Image optimization Lazy loading for images only
Easy to use Few configuration options
### Smush [![Image: Lazy loading options on the Smush plugin](https://www.ionos.ca/digitalguide/fileadmin/_processed_/3/c/csm_lazy-loading-options-on-the-smush-plugin_b89732f3d0.webp "Lazy loading options on the Smush plugin")](https://www.ionos.ca/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/lazy-loading-options-on-the-smush-plugin.png) Smush enables lazy loading for different media types. [Smush](https://www.wordpress.org/plugins/wp-smushit/ "Smush at WordPress.org") is another **comprehensive suite** to make your WordPress site faster. This plugin can automatically compress images and also deletes [EXIF data](https://www.ionos.ca/digitalguide/websites/web-design/what-is-exif-data/ "What is EXIF data?") to further reduce the file size. Just like Optimole, Smush also offers a CDN to speed up image delivery even more. However, unlike Optimole, Smush has a few more options for lazy loading on board. You can **specify the graphic formats you want the function to work on** and can also add or deselect iFrames. In addition, you determine the locations or purposes. For example, should thumbnails or images in widgets also be covered by lazy loading? Individual page types can also be excluded. You can define lazy loading even more precisely by excluding specific URLs or URIs. As with a3 Lazy Load, Smush also lets you **customize the load design**. A fade-in is possible as well as a rotating load icon or a placeholder graphic.
Pros Cons
CDN Too broad for pure lazy loading
Image compression
Very detailed choices available
Adaptable loading design
Exceptions via URI, URL or page type
### Lazy Loader [![Image: Lazy Loader options in the WordPress media settings](https://www.ionos.ca/digitalguide/fileadmin/_processed_/4/d/csm_lazy-loader-options-in-the-wordpress-media-settings_26f5d3d693.webp "Lazy Loader options in the WordPress media settings")](https://www.ionos.ca/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/lazy-loader-options-in-the-wordpress-media-settings.png) With Lazy Loader you can set CSS classes, to be ruled out of Lazy loading. The [Lazy Loader](https://www.wordpress.org/plugins/lazy-loading-responsive-images/ "Lazy Loader at WordPress.org") by Florian Brinkmann does not work with the loading attribute but uses a script. This can be used to set the reloading of images, iFrames, videos and audio files. For refinement, you can specify CSS classes that should be excluded from lazy loading. By enabling a certain option, you determine whether each page or post should be covered by lazy loading. To make loading a bit more graphical, you can activate an animated circle and set its color.
Pros Cons
Lightweight No additional functions
Detailed choices available
Adaptable loading design
Exceptions via CSS classes
## A Step-by-step guide to lazy loading on WordPress If you don’t want to rely on the default function of WordPress, you should choose a plugin. Since a3 Lazy Load comes with many features, we choose this extension for the tutorial. --- ### Tip If you are still planning your WordPress website, you also need a suitable address. At IONOS you can [register a domain](https://www.ionos.ca/domains/domain-names "Buy domain & register cheap with IONOS") with a few clicks and quickly get your own web presence. --- ### Step 1: Carry out preparation Before you make major changes to your site, you should always [create a backup in WordPress](https://www.ionos.ca/digitalguide/hosting/blogs/create-wordpress-backup/). This will ensure that you can quickly **revert to a working version in case of complications**. You should also think about a [WordPress child theme](https://www.ionos.ca/digitalguide/hosting/blogs/how-to-create-a-wordpress-child-theme/). This duplicate of the actual theme ensures that all your settings still work after an update by the theme provider. ### Step 2: Install & activate Call the plugin area in the WordPress backend and switch to the “Install” item there. If you now enter “a3 Lazy Load” in the search field, the corresponding plugin will be displayed. With one click you can now install it and then activate it with another click. ### Step 3: Create settings The **plugin options can be found in the “Settings” menu item of the WordPress dashboard**. a3 Lazy Load now has its own entry there. Alternatively, you can access the settings of the extension via the plugin overview. Directly in the second menu item (“Lazy Load Activation”), you can also turn off the function again without deactivating the plugin. You can also specify whether you want to disable the default lazy loading feature of WordPress, which is a good idea to avoid complications. ### Step 4: Choose options [![Image: Lazy loading object assigning options a3 Lazy Load plugin](https://www.ionos.ca/digitalguide/fileadmin/_processed_/8/7/csm_lazy-loading-object-assigning-options-a3-lazy-load-plugin_732602c955.webp "Lazy loading object assigning options a3 Lazy Load plugin")](https://www.ionos.ca/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/lazy-loading-object-assigning-options-a3-lazy-load-plugin.png) a3 Lazy Load enables you to choose precisely which object you want the function to work on. Now you define which objects should be affected by lazy loading. There are various options available for this: - **Lazy load images**: Here you specify where images lazy load on WordPress. For example, you can specify that only images in the content area and not within widgets are included. - **Lazy load videos and iFrames**: Determine whether videos and iFrames in content and/or widgets should benefit from lazy loading. - **Exclude by URIs and page type**: Use the slider to specify which page types you want to include in lazy loading. For example, you can exclude the home page or a category page. You also have the option to exclude certain objects by URI. ### Step 5: Choose a design [![Image: Options in a3 Lazy Load for the loading effect](https://www.ionos.ca/digitalguide/fileadmin/_processed_/c/f/csm_options-in-a3-lazy-load-for-the-loading-effect_8c721e2a77.webp "Options in a3 Lazy Load for the loading effect")](https://www.ionos.ca/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/options-in-a3-lazy-load-for-the-loading-effect.png) Adapt the loading effect for your media files. The plugin also gives you the option to visually enhance the **loading of images and videos**. Under the item “Effect & Style” you make the appropriate settings. You have the choice between a fade-in or a rotating circle. In addition, you set the background color, which you can adapt to the background of your website, for example. --- ### Note The most important settings are done here to benefit from lazy loading in WordPress. However, the plugin can do a few more things. If you are a bit more familiar with the technology behind lazy loading, you can, for example, extend the viewport (via “Image Load Threshold”). --- ## Turn off lazy loading through WordPress core The lazy loading default feature is part of the WordPress core. It is actually not intended that you disable this feature. That’s why WordPress doesn’t have a corresponding function for it in its own settings. Nevertheless, it can be useful to disable the feature, for example if you use a plugin with lazy loading option. This way you prevent conflicts between the two functions. For deactivation you can use a plugin like a3 Lazy Load. With [Disable Lazy Load](https://www.wordpress.org/plugins/disable-lazy-loading/ "Plugin at WordPress.org"), you can even find a specially programmed plugin. You only have to activate it, and the lazy load function of the core doesn’t work anymore. However, you do not necessarily need a plugin. The deactivation of the function can also be achieved via an entry in the source code. Before doing so, you should create a child theme to ensure that your changes are not simply lost after a theme update. Then go to the “Theme file editor” via the “Design” menu item and call up the functions.php file. There you add a new line: ```php add_filter( 'wp_lazy_loading_enabled', '__return_false' ); ``` If you now click on “Update file”, the changes are applied, and lazy loading is deactivated. --- ### Summary In WordPress, lazy loading is now part of the standard features. The core function is very practical, but also very limited. With the help of a plugin, the performance optimization can sometimes be improved and extended, for example of videos. To make sure that a plugin and the core function do not get in each other’s way, you should deactivate the latter. --- This is a markdown version of: [https://www.ionos.ca/digitalguide/hosting/blogs/wordpress-lazy-loading/](https://www.ionos.ca/digitalguide/hosting/blogs/wordpress-lazy-loading/) for AI/LLM consumption.