Re: App development - Lobby functionality optimisation Programming Mobile Development by jonathannweyer … network calls, you might want to look into pagination or lazy loading to avoid loading all rooms at once. WebSockets can… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by scope_2 … videos, or components only when needed. Add loading="lazy" to <img> and <iframe…In frameworks like React, use React.lazy() and <Suspense>. Avoid lazy loading above-the-fold content. Combined… with caching and CDNs, lazy loading significantly improves … Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by gediminas.bukauskas.7 Here is a problem: Blazor WEB application working in SSR mode performs partial update of the page after posting. JS initialization does not work in this case. It is difficult to find correct event for performing JS operations. Re: How to speed up my (WordPress) website? Digital Media Digital Marketing by graceweb One thing I’ve noticed that helps maintain speed without breaking things is being careful with how many plugins you install. Sometimes even just one poorly optimized plugin can slow things down. Also, consider lazy loading videos and iframes if you haven’t already. Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon …have different distance from viewport thresholds for loading="lazy" images. For example, Chromium-based browsers … Here](https://web.dev/articles/browser-level-image-lazy-loading#:~:text=On%20fast%20connections%20(4G)%2C,… beginning. Also, using IntersectionObserver in JavaScript for lazy loading allows you to create your own policies … Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon …you control the browsers and their versions. Of course, lazy loading impacts SEO. Modern SEO has more to do with…slideshow is above the fold (ATF) and should NOT be lazy loaded. Cumulative Layout Shift (or CLS for friends) is… now: Your JavaScript should do only three things: 1. Lazy load everything that is not ATF, allowing some space to… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon …one tab selecting "Desktop". The version with lazy loading through JS IntersectionObserver is in: [Click Here](…https://ej-kon.github.io/tests/lazy-load/intersection-observer.html) And the version with loading…[Click Here](https://ej-kon.github.io/tests/lazy-load/loading-lazy.html) I have a theory of why this … How to Implement Lazy Loading for Faster Web Portals Programming Web Development by KamalDeepPareek How can lazy loading improve web portal performance by reducing initial load times and optimizing resource usage? What are the best techniques to implement lazy loading in images, components, and data fetching using JavaScript frameworks like React, Vue, and Angular? How does lazy loading impact SEO and user experience? Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon … previous post, I believe that the way loading="lazy" is being implemented in browsers makes it almost…experience is awful. My theory as to why loading="lazy" results are worse in Lighthouse metrics (which really…this test reported worse Lighthouse metrics for the loading="lazy" version. It's always fun to perform … Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani Hello, The easiest way to implement image lazy loading is by simply adding the `loading="lazy"` HTML attribute to `<img… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani > The loading="lazy" HTML attribute-value pair was introduced in 2019–2020, …'t do anything. > That means you shouldn't use lazy loading ATF (above the fold) in most cases. I would… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani … and evolve naturally, and what started as a topic about lazy loading evolved into a topic about everything that could be… SXG instead of buried on the 2nd page of a lazy loading thread. Oh well. :-/ Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Pelorus_1 By loading images and content only when necessary, lazy loading speeds up web portals. Implement JavaScript or frameworks like React with dynamic imports, and use loading="lazy" for images. Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon … because it was a rational decision.) Saying that loading="lazy" will be production-ready without any additional JavaScript by… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani … users. However, what is the harm in adding `loading="lazy"` to an existing web app? 96% of users will… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani I guess I don't understand why implementing `loading="lazy"` will hurt the CLS if you're only doing it for images below the fold, and always specifying image dimensions (which would ensure to never affect CLS at all)? Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon … "speed index" SEO impact of using loading="lazy" (that in my mind make it not usable) vs… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani … me an LCP of 0.2s and the `loading="lazy"` version is giving me an LCP of 1.1s… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani Actually, I take it back. I assume that, using Chrome on a fast Internet connection, and a super high screen resolution, none of the images are actually being lazy loaded. Re: How does Lazy Loading differ from traditional loading techniques? Programming Web Development by Salem How about engaging with the responders on your other thread with basically the same topic? https://www.daniweb.com/programming/web-development/threads/543080/how-to-implement-lazy-loading-for-faster-web-portals Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani The reason why I disagree with you is because I do not see a reason to not use a performance optimization that will benefit 96% of web users, and degrade gracefully and cause absolutely no side-effects for the remaining 4%. What is the harm in using it in production *now*? I especially disagree with you because this is a performance optimization… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani > On "Can I Use," IE was supposedly "dead" in 2013 I'm not sure what you mean by that? I see it saying that IE is still in use by 0.4% of web users. It is up to *you* to determine if that is an acceptable loss. I don't think they make that determination for you because, as pointed out in my previous post, a performance … Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon In reality, the usage of IE is lower than 0.4%. In some categories of web apps, it's around 0.1%, while in others, it's about 0.2%. That is why we decided to stop supporting IE from 01/01/2025. If it were above 0.5%, you shouldn’t even consider introducing something without first testing it in Internet Explorer. I can't understand how any app can … Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by gediminas.bukauskas.7 First, you need to reduce radically the usage of JS and CSS. I don't know about React, but Angular is clearly too big. Pack loadable items into bundles and don't use one huge bundle: create collection of bundles. Switch on JavaScript type=module and load software under the demand. Use W3C CSS instead of nice but large CSS frameworks. Avoid WASM: it… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani Even if using it above the fold, as long as you specify image dimensions, there should never be a CLS impact. CLS measures needing to reposition elements on the page as it loads or due to user interaction. As long as the spot for the image is carved out from the very beginning, even if the image loads much later, no other element on the page … Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani Speed index should also not be affected at all by using it. Speed index measure how long it takes to load the first screen of content of a webpage. That means that if you’re using it only for content below the fold, speed index should never be affected. Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani Sorry. I’ve just been really exhausted all day. It just clicked that LCP is only for ATF. Soooo, yeah, I don’t know what’s going on there. Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani > Lighthouse metrics (which really affects SEO) Please correct me if I'm wrong, but I'm fairly confident that Lighthouse metrics do not affect SEO. Lighthouse is just a tool that Google offers to SEOs to be able to offer actionable page improvements. In reality, it's real world performance data from Chrome users that factors into a site's SEO… Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by jkon Dani, I completely agree (of course) that Lighthouse, as a tool, doesn’t directly impact SEO rankings. However, Core Web Vitals , which Lighthouse helps measure , do influence Google’s ranking signals. If a webpage performs poorly in Lighthouse audits for metrics like LCP, Speed Index, CLS, e.t.c. those issues will also affect real Chrome users, … Re: How to Implement Lazy Loading for Faster Web Portals Programming Web Development by Dani > If a webpage performs poorly in Lighthouse audits for metrics like LCP, Speed Index, CLS, e.t.c. those issues will also affect real Chrome users, ultimately having a negative impact on its SEO. I have found that to not be the case. As an example, we use Google's signed exchanges, which allow Chrome to prefetch our URL on the Google SERPS …