Is there a way to lazy load AEM component? | Community
Skip to main content
S
sofim62605772
New Member
August 9, 2021
Solved

Is there a way to lazy load AEM component?

  • August 9, 2021
  • 3 replies
  • 2735 views

Hi,

I have a reviews and rating component that needs to be added at the bottom of the page. It gets its data from MySQL DB. I want to know is there a way to lazy load this whole component so that it doesnt impact page load speed? 

I am using sightly to query db for fetching all the desired details about existing reviews and calculating average page rating

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

@sofim62605772,

Any AEM components can have the lazy load behavior, but it must work in parallel with Javascript. 

This seems like a custom ratings-component that is not related to the AEM WCM Core components.

My approach:
Assuming that SEO is not required, I will create Javascript business logic that detects the user scrolling is at the bottom of the page; once at the bottom of the page, I will make my api call, api.ratings/customerbox/1 (you should be able to see the first 10 ratings & the HTML will be rendered). Within the same ratings component, you should be seeing a "see more comments" button, where when you click on "see more comments", then the next api.ratings/customerbox/2 will be called. 

Assuming that this is some kind of product review page, the component will be baked into the page template (component inside the structure for editable templates) itself . 

I hope this helps,
Brian.

3 replies

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
August 9, 2021

@sofim62605772,

Any AEM components can have the lazy load behavior, but it must work in parallel with Javascript. 

This seems like a custom ratings-component that is not related to the AEM WCM Core components.

My approach:
Assuming that SEO is not required, I will create Javascript business logic that detects the user scrolling is at the bottom of the page; once at the bottom of the page, I will make my api call, api.ratings/customerbox/1 (you should be able to see the first 10 ratings & the HTML will be rendered). Within the same ratings component, you should be seeing a "see more comments" button, where when you click on "see more comments", then the next api.ratings/customerbox/2 will be called. 

Assuming that this is some kind of product review page, the component will be baked into the page template (component inside the structure for editable templates) itself . 

I hope this helps,
Brian.

    Umesh_Thakur
    Community Advisor
    Umesh_ThakurCommunity Advisor
    Community Advisor
    August 10, 2021

    One more approach will be, on component load itself load the entire data from the database and then load first 30 or 50 data in first load then one page scroll load next 30 or 50 data and so on.

    This way you will be saving some extra api call to the back-end.

    You can take advantage of pagination as well to load subsequent data on the page.

    Hope this will help.

    Umesh Thakur

      B
      Adobe Employee
      BimmiSoAdobe Employee
      Adobe Employee
      August 10, 2021

      Hi @sofim62605772 ,

       

      You can make use of pagination to display the results. When we use pagination then only that set of data gets loaded on the page load and it decreases the page load time. 

       

      This way you can lazy load this component.

       

      You can check below url

      https://aem4beginner.blogspot.com/sightly-pagination-component-using

       

       

      Hope this helps!!!

      Thanks

        Terms & ConditionsAccessibility statement

        Loading footer...