How to make iframe load faster


#1

Hello guys,

I have a few pages which have iframe. When I go to those pages on my app, It doesn’t load the website fast. It’s white blank for a couple of seconds before start loading a site.
I figured iframe is a little slow…

Is there any way to preload all these iframe website links on start so when a user navigates to the iframe page, they will see the site loaded without having to wait?

Let me know if there’s a way to make this happen.

Thanks,


#2

If your App is a PWA you can use a Service Worker to cache URLs, for example:

      "urls": [
        "https://fonts.googleapis.com/**"
      ]

See: https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/


#3

Unfortunately, my app is not PWA.
Is there any way to preload a website on app init?
That’s probably the only way to bypass the white loading screen of iframe…


#4

still haven’t found a good solution for this yet.

There’s a trick to completely hide iframe’s white flash screen but it doesn’t address loading time issue:


#5

Interesting.

I know there an issue (white screen) on IOS when loading PWAs.

See: https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210


#6

iframe ships with onload() function so it can be used along with Ionic’s loading controller.

http://www.dyn-web.com/tutorials/iframes/onload/

But I found sometimes it takes up to six seconds for an iframe page to load a site.
It depends on your internet connection but it’s definitely not that fast.

Here are a few other tricks: