Like the headline says: What effect does iframe have on page load time? Thanks.
iFrames are somewhat costly, even when left blank when compared with other HTML elements. The biggest drawback is that they block the window onload event until complete, which can make the users perceive that the page they requested is slow.
The do have their uses though in allowing you to compartmentalize external web pages or sandboxing another DOM structure outside of the main page.
Here is a good article on them
Related
I'm having a tough nut to crack here.
I have the following situation:
- in an iFrame (no way around it) I'm loading an external website/application.
- This iFrame is on one page and one page only.
- Whenever you visit the iFrame page the first time a certain load time is needed for the applicaton (about 5seconds on average).
- In the application you can change the view and parameters etc.
- When you leave that page and go to another, and return later on to the iFrame page the requirement is that there is no load, and the content of the iFrame is as you have left it earlier.
I know this can be done by using frames (which are so 90's) but I really don't want to do that. There has to be a more modern way of doing it.
Just to note, the website around the iFrame is using Sitecore, so this might be a limiting factor in some solutions.
The things I have thought of:
- use 2 frames, one for the header with navigation, and another for the content. In that way the iframe never has to reload and we have moved back in time... :(
- ever click is an Ajax call, the iFrame is in a div that is hidden until the right button is clicked.
And then I found something called BigPipe. I haven't found an ASP.NET implementation yet, but I was hoping someone already had some experience with this.
Anyone any better ideas?
Thx
If your iFrame is a control on a Sitecore sublayout or rendering (or can be moved to a rendering/sublyaout), you can check off the Cacheable option on the sublayout and set it to vary by content or device or whatever depending on what it is. Then you will have the content of that frame in Sitecore's cache, which is managed by Sitecore and it'll always render the cached version whenever possible and should basically solve your dilemma.
I used a <iframe> in my web page and its loading takes a long time, even more than loading main web page, Any body could say what are advantages of using <iframe> in a webpage?
And can use another tag instead <iframe>
Iframes are the only cross-browser way to provide html components that are truly separated. So this is their advantage.
But iframes are heavy and do not easily integrate. You may look at the emerging Shadow Dom for an alternative.
There could be more options in your case, but you would have to elaborate.
As you said your iframe content is loading slower than your page, it is the main advantage I have came across for iframe. if you render the things on your page instead of iframe it will take the same time to load the whole page as that of iframe. Your page will be slower.
Second one is , some of the social media buttons are coming in the form of iframe like facebook like and share buttons.
I have written a longer text on this subject posted earlier today. Perhaps the text was too long, so I rephrase it very briefly here:
I want to design a very standard site where the user gets the opportunity to navigate to different aspx pages with the aid of navigation menus (left, top). I do not want the entire page to be reloaded when changing the content page for three reasons: state handling, flickering and bandwidth conservation. I just want to load a new aspx page into a "main content area" with the rest of the site untouched.
What is the best way to achieve this? I must not rely on master pages or not master pages or AJAX or not AJAX. It must not rely on anything specific. I just wonder what the standard method would be to achieve this. It must be a pretty common wish.
Thanks
/DT
You can use iframe for this.
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
<iframe src="http://www.w3schools.com"></iframe>
I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.
The question of how to make your iframe fit 100% of your content (using JavaScript) has been answered on the forum already... for iframes displaying content from the same domain only.
My questions: Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame? The browser security features surrounding cross-site scripting prevent me from accessing the document object for the iframe.
I'm looking for any creative solution. One of my thoughts was to somehow detect that scrollbars were visible on the iframe, and to incrementally increase the height until they weren't. Unfortunately I can't find any way to detect visible scrollbars either. Ideas?
Please note that I am looking for a client-side solution.
Responses:
Dave
The problem still exists - I don't know the height of the remote document ahead of time, so I can't set it from a database or querystring value.
dusoft
100% on the iframe in CSS will not set it to 100% of the content inside the iframe, but relative to the the page or containing element (i.e., a div or something).
(My answer to a similar question)
It is not possible to do this without some control over the page being iframed because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed.
Although letting the embedding site know the height of a third party webpage when embedded in the page seems harmless, this can leak information to the embedding site that the browser's user wants to keep private. For example, http://www.facebook.com/ renders differently depending on whether or not you are logged in, so if my website can work out the height of <iframe src="http://www.facebook.com/"> then I can work out whether or not you are a facebook user, something you probably don't want me to know.
The information leakage would be similar to the infamous CSS History Leak which browser vendors had to plug.
Is it possible to resize an iframe to fit the content when the iframe src attribute is for a page outside of the domain of the page containing the frame?
It is possible to get around the cross-site limitation and have an iframe set to the height of it's content, but it can be a bit awkward to get it to work.
The solution involves working around the security model by having the iframed content itself iframe a page on the the same server as the parent page, with which it can communicate. I've answered a similar question to this before here, which goes in to a fair bit of detail on the ins and outs of setting it all up.
The caveat on the described approach is that you must have means of getting your iframed content to itself iframe a page on the parent server. This is usually achieveable when the iframed content is there as part of an agreed partnership between sites, but YMMV.
It sounds like you are trying to work around a security feature that was put in place for a good reason...
Does the resizing have to be through script? You could redirect to a page where the size of the iframe is taken from a querystring, or a database, or config file, etc.
This is theoretical as I have not tested it:
1) PHP save the remote page into a
local html file using
file_get_content() or using CURL. 2) Javascript load local file into
iframe
- it's now local and security issues don't apply.
If there are javascript vars or Session vars (which cannot be pulled from remote content) you can at least use this technique to query the document height of your local file, set the iframe accordingly, then load the remote URL into the resized iframe.
Cavat: you have no way of knowing URLs for page changes within the remote page, therefore you can only use this technique on the first page. If the remote pages are all same height this is no problem.
not the best solutions but you can try:
javascript to write iframe, in iframe app set the current height in url #h700 for 700px etc; then use a loop to listen for that change on host site "in the javascript" to read the src="url#h700" and set the height of the iframe by that.