Skip to main content

How to Lazy Load Airtable?

  • March 20, 2020
  • 3 replies
  • 45 views
B

Hi everyone !
I am integrating an Airtable into my website, and since then, the loading time of my website went from 2 sec to nearly 10. I think it is because Airtable verify the data of each cell.

I think the solution is to lazy load the Airtable (meaning loading the Airtable after the website is loaded).

What is the best solution to lazy load the Airtable, or is there any other solution ?

My website is : https:// matchnsolve. com/

Thanks !

    3 replies

    B
    • Benjamin_M
    • Author
    • New Participant
    • March 23, 2020

    Anyone have a solution ?

    B
    Forum|alt.badge.img+19
    • Bill_French
    • Inspiring
    • March 23, 2020

    Well, this is an issue with your website design, not specifically Airtable.

    I suspect no one is anxious to comment on this issue because there are so few facts about your web site integration approach. For example, are you integrating through the API? Or, are you using an embed iFrame element?

    The concept of “lazy load” suggests that your page starts to work and the data is displayed after it is fully loaded. This gives users a brief period to see the pages and read options etc. By the time they are ready to look at your data, it is rendered. Is that what you mean?

    If so, you should use the DOM and javascript in the page to control what your visitors see and when they see it. One issue is that iFrame is a blocking architecture meaning that all other threads are unable to process until the iFrame is complete. As such, you need to get a little tricky to make it seamless and fast for website visitors.

    This approach will block the rest of the page from loading until it finishes.

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrO1mFYnVvCvtQ2V?backgroundColor=yellow&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

    Better to use javascript like this (example only) this will make it so the page looks like it loads instantly …

    <body onload="prepareFrame('https://airtable embed URL here')">

    function prepareFrame(URL) {
  var ifrm = document.createElement("iframe");
  ifrm.src = URL;
  ifrm.style.width = "100px";
  ifrm.style.height = "100px";
  ifrm.style.border = "None";
  ifrm.style.visibility = "visible";
  document.getElementsByTagName("body")[0].appendChild(ifrm);
}

    On another note - this looks crappy:


    You should change the links so they are prettier:

    B
    R
    B
    • Benjamin_M
    • Author
    • New Participant
    • March 30, 2020

    Well, this is an issue with your website design, not specifically Airtable.

    I suspect no one is anxious to comment on this issue because there are so few facts about your web site integration approach. For example, are you integrating through the API? Or, are you using an embed iFrame element?

    The concept of “lazy load” suggests that your page starts to work and the data is displayed after it is fully loaded. This gives users a brief period to see the pages and read options etc. By the time they are ready to look at your data, it is rendered. Is that what you mean?

    If so, you should use the DOM and javascript in the page to control what your visitors see and when they see it. One issue is that iFrame is a blocking architecture meaning that all other threads are unable to process until the iFrame is complete. As such, you need to get a little tricky to make it seamless and fast for website visitors.

    This approach will block the rest of the page from loading until it finishes.

    <iframe class="airtable-embed" src="https://airtable.com/embed/shrO1mFYnVvCvtQ2V?backgroundColor=yellow&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

    Better to use javascript like this (example only) this will make it so the page looks like it loads instantly …

    <body onload="prepareFrame('https://airtable embed URL here')">

    function prepareFrame(URL) {
  var ifrm = document.createElement("iframe");
  ifrm.src = URL;
  ifrm.style.width = "100px";
  ifrm.style.height = "100px";
  ifrm.style.border = "None";
  ifrm.style.visibility = "visible";
  document.getElementsByTagName("body")[0].appendChild(ifrm);
}

    On another note - this looks crappy:


    You should change the links so they are prettier:


    Thank you very much for your answer, it took me hours to understand, learn the basics of javascript and search for the hyperlink feature lol but now it’s fine.

    So for the lazy load I figured out that I had a loading animation that was blocking the view of the page until everything was fully loaded (including the airtable), by removing this feature, it solved the problem.

    And for the hyperlinks which is a feature that I was looking for since a long time, I have submitted my application for the beta :slightly_smiling_face:

    Thank You Again !

    B
    Terms & ConditionsAccessibility statement