Implemented Implement Lazy Loading...

rafass

Well-known member
Actually there is this addon available on the Resource Manager. Thanks @Xon. However, it doesn't work with important addons like Media Gallery.
it would be great have this feature in the core.
Lazy Loading
Definition:
Lazy loading is a technique for loading web content when it’s needed rather than all at once. Content that is usually downloaded when the web page first loads is instead downloaded as the user requests it, typically from scrolling through the page.
lazy.webp

More info:
Normally when a user opens a webpage, the entire page’s contents are downloaded and rendered in a single go. While this allows the browser to cache the web page, there’s no guarantee that the user will actually view all of the downloaded content.

For example, If an entire photo gallery is downloaded but the user leaves after only viewing the first image, then the result is wasted memory and bandwidth.

Instead of bulk loading all of the content when the page is accessed, content can be loaded when the user accesses a part of the page that requires it. With lazy loading, pages are created with placeholder content which is only replaced with actual content when the user needs it.
When someone adds a resource to a web page (image, video, etc.), the resource references a small placeholder. As a user browses the web page, the actual resource is cached by the browser and replaces the placeholder when the resource becomes visible on the user’s screen. For instance, if the user loads a webpage and immediately leaves it, then nothing beyond the top portion of the webpage is loaded.

Lazy Loading’s Impact on Search Engine Optimization

A common pitfall of lazy loading is its impact on a website’s ranking in search engines.

Because resources default to placeholder content, a search engine crawling through the website is likely to misinterpret or ignore the contents of the resource. Lazy loading an entire component of a webpage such as a blog post could result in a search engine bypassing that component, resulting in fewer search engine results due to the content not being indexed.

One trick to overcoming these pitfalls is to provide links to lazy loaded content. This essentially creates a webpage out of the content accessible to search engine crawlers. When a search engine indexes the website, it follows these links and indexes the content it finds. This method essentially structures a lazy loaded website as a traditional website, while still allowing users to load content dynamically.
WordPress, one of the top blogging platforms on the web, provides a lazy loading solution called Infinite Scroll.

As the name suggests, Infinite Scroll continuously loads content as the user scrolls down the page. The page’s footer – normally inaccessible in an infinitely loading web page – is displayed as an overlay beneath the scrolling content. WordPress claims that users read more posts when Infinite Scroll is enabled, as opposed to the traditional page-based approach.

Google takes a different approach for its image search results. As the user scrolls down the page, placeholder images are replaced with thumbnails. After a certain number of images are displayed, a button allows the user to load additional images. By providing this button, Google combines infinite scrolling and lazy loading to create a dynamic hybrid approach.
Lazy loading strikes a balance between optimizing content delivery and streamlining the end user’s experience.

Users connect to content faster, since only a portion of the website needs to be downloaded when a user first opens it.
Enterprises see higher customer retention as content is continuously fed to the user, reducing the chances the user will leave the website.
Enterprises see lower resource costs since content is only delivered when the user needs it, rather than all at once.
Streamlining web content is a vital part of shaping a user’s browsing experience. Dynamically loading resources allows the user to explore more content without having to jump across multiple pages or wait for their browser to refresh. When implemented well, lazy loading can provide additional content to a user without the user even realizing it.

Adding lazy loading can make a website load faster, save bandwidth, and provide a truly uninterrupted browsing session. Almost half of all users who visit a website view only a single page. By continuously adding new content as the user scrolls, lazy loading can make that single view really count.
Source: MaxCDN
Demo: http://afarkas.github.io/lazysizes/#examples - Lazysizes on Github

Suggestion awaiting your like, Thank you. ajax.gif ➘​
 
Last edited:
Upvote 77
This suggestion has been implemented. Votes are no longer accepted.
I run a hiking forum with close to a million images posted. Every image is thumbnailed, few exceptions. We don't have issues getting people to post images. I think it's more important to (1) make it easy to post images (2) display larger thumbnails, and (3) have a good lightbox. XF's thumbnails are too small by default and the lightbox is awful IMHO. It cuts off the bottom of the image by default. Also, there are semi-transparent bars covering up the top and bottom of the image. They go away after a few seconds but I personally find them distracting and annoying. Photo purists don't want that stuff covering up their photos. Also, the back button doesn't close the lightbox. Many other gripes but I won't wax poetic It's just not my cup of tea. The lightbox was the main reason I didn't switch to XF a couple years ago. In the process of converting to XF but will be ditching the XF lightbox and thumbnails. Here is a sample post on my site with 100+ images. That page would be bloated as heck with full size images and lazy loading.
 
Last edited:
@tomdav if you're planning on converting to XF with the same functionality, I'm sure you've already discovered this but, if not.... heads-up that XF by default creates squared & cropped attachment thumbnails, if you want to keep aspect ration thumbnails like that page you'll need to override the thumbnail creation function to keep the aspect and to also change the quality of them.
 
Right, I'm planning to just re-use the same code which automatically thumbnails internal and external images and justifies them.

But back to lazy loading, if you have a page of 100+ images, lazy loading won't solve the root problem for mobile users unless you also have an image proxy serve up appropriately sized images for them.
 
This should be native in chrome 75 and enabled by defauld in 76. Also works for embeds (iframe).



Code:
<img src="example.jpg" loading="lazy" alt="example" />
<iframe src="example.html" loading="lazy">

This could be added for full attachments, but google will also lazy load some images without and if you want to exclude this can be done with loading="eager"
  • lazy: is a good candidate for lazy loading.
  • eager: is not a good candidate for lazy loading. Load right away.
  • auto: browser will determine whether or not to lazily load.
 
I've been following the status of lazy loading in Chromium for a little while and so far I don't think it's ready for prime time. The first issue is I don't think that images are lazy loaded at all. Looking at the network tab, they are all loaded eagerly. That's on Chrome 76 with both the "lazy" flags enabled.

The second issue, the one that I personally find annoying, is that there's no setting to determine how close to the fold an iframe must be to be loaded. Lazy iframes end up loading while they are on display rather than just before they become visible, which means the user ends up watching them load. That makes it feel slow.
 
Chrome native lazy loading is quite different from lazy loading through JavaScript libraries like LazySizes:
Chrome does fire 2048 byte range GET requests for all images that do not have explicit dimensions set, you can see those requests if you inspect network tab closely.

It does this so the layout can be calculated before the images are fully loaded.

Furthermore, it does havbe a dynamic threshold of 3000-8000 pixels, which is quite a lot.
 
I tried this demo with Chrome 76.0.3806.1 with the lazy image internal flag on for good measure. The dimensions for all images are hardcoded in the img tag so the native dimensions aren't required for layout. All of the images are requested at once with a range header. However, the provider returns the full asset, which means that every image is downloaded in full whether they are visible or not.
 
Yeah, I think in the long term lazy-loading will be really good but that's going to take a little while to work seamlessly and efficiently. It's not a silver bullet and it's going to take years before it works just right.

That's why for the time being I think it's fine to do lazy loading in userland and limit it to images that don't interfere with the layout. For example, Avatars in XenForo use 100% of their container so they're easy to load just-in-time without affecting the layout. It's a baby step but it's the best bang-for-your-buck. Something that can be implemented with little code and be made available to all browsers at the same time.
 
I think this is actually very important. Lazy loading images can save seconds on the page load time, and that's a huge deal when it comes to the user experience (especially mobile when using mobile data) and advertising revenue.
And we have to include avatars in this. Google page insights says lazy loading images on our forum list would save 1.65 seconds.
 
Actually there is this addon available on the Resource Manager. Thanks @Xon. However, it doesn't work with important addons like Media Gallery.
it would be great have this feature in the core.
Lazy Loading
Definition:
Lazy loading is a technique for loading web content when it’s needed rather than all at once. Content that is usually downloaded when the web page first loads is instead downloaded as the user requests it, typically from scrolling through the page.
View attachment 132506

More info:
Normally when a user opens a webpage, the entire page’s contents are downloaded and rendered in a single go. While this allows the browser to cache the web page, there’s no guarantee that the user will actually view all of the downloaded content.

For example, If an entire photo gallery is downloaded but the user leaves after only viewing the first image, then the result is wasted memory and bandwidth.

Instead of bulk loading all of the content when the page is accessed, content can be loaded when the user accesses a part of the page that requires it. With lazy loading, pages are created with placeholder content which is only replaced with actual content when the user needs it.
When someone adds a resource to a web page (image, video, etc.), the resource references a small placeholder. As a user browses the web page, the actual resource is cached by the browser and replaces the placeholder when the resource becomes visible on the user’s screen. For instance, if the user loads a webpage and immediately leaves it, then nothing beyond the top portion of the webpage is loaded.

Lazy Loading’s Impact on Search Engine Optimization

A common pitfall of lazy loading is its impact on a website’s ranking in search engines.

Because resources default to placeholder content, a search engine crawling through the website is likely to misinterpret or ignore the contents of the resource. Lazy loading an entire component of a webpage such as a blog post could result in a search engine bypassing that component, resulting in fewer search engine results due to the content not being indexed.

One trick to overcoming these pitfalls is to provide links to lazy loaded content. This essentially creates a webpage out of the content accessible to search engine crawlers. When a search engine indexes the website, it follows these links and indexes the content it finds. This method essentially structures a lazy loaded website as a traditional website, while still allowing users to load content dynamically.
WordPress, one of the top blogging platforms on the web, provides a lazy loading solution called Infinite Scroll.

As the name suggests, Infinite Scroll continuously loads content as the user scrolls down the page. The page’s footer – normally inaccessible in an infinitely loading web page – is displayed as an overlay beneath the scrolling content. WordPress claims that users read more posts when Infinite Scroll is enabled, as opposed to the traditional page-based approach.

Google takes a different approach for its image search results. As the user scrolls down the page, placeholder images are replaced with thumbnails. After a certain number of images are displayed, a button allows the user to load additional images. By providing this button, Google combines infinite scrolling and lazy loading to create a dynamic hybrid approach.
Lazy loading strikes a balance between optimizing content delivery and streamlining the end user’s experience.

Users connect to content faster, since only a portion of the website needs to be downloaded when a user first opens it.
Enterprises see higher customer retention as content is continuously fed to the user, reducing the chances the user will leave the website.
Enterprises see lower resource costs since content is only delivered when the user needs it, rather than all at once.
Streamlining web content is a vital part of shaping a user’s browsing experience. Dynamically loading resources allows the user to explore more content without having to jump across multiple pages or wait for their browser to refresh. When implemented well, lazy loading can provide additional content to a user without the user even realizing it.

Adding lazy loading can make a website load faster, save bandwidth, and provide a truly uninterrupted browsing session. Almost half of all users who visit a website view only a single page. By continuously adding new content as the user scrolls, lazy loading can make that single view really count.
Source: MaxCDN
Demo: http://afarkas.github.io/lazysizes/#examples - Lazysizes on Github

Suggestion awaiting your like, Thank you. View attachment 132507 ➘​
Thanks for the share with us.
 
Reading through this thread brought back old memories of MM_preload() functions... ya know, doing the exact opposite bringing in images for rollover swap.

I tried editing my postbit bbcode templates manually without much success following this data class
 
Since XF 2.2 is installed here on xenforo.com I notice that images are Lazy Loading. Has this one been implemented?
 
Its unclear what is still to come. The xf team still has some things up their sleeve and still in the oven.
Lazy Loading could well be one of those unannounced features. It would explain why images now lazy load on xenforo.com
 
neat. I'm not really sure why this is even a html-level option. Why are browsers not just lazy loading all <img> tags. Seems more a browser rendering/behavior decision than a website design decision.
 
Top Bottom