Can anyone please help with the iframe in the following page:
http://searchbankproperties.com/bank-owned-properties-orlando/
2 questions:
I don't understand why the page is loading slow..
Is it possible to only display the main content of the page I'm trying to iframe without the header and navigation? See the link below.
http://farm5.static.flickr.com/4123/4941392626_3886396314_b.jpg
The websites is http://searchbankproperties.com
The page I'm trying to iframe is located in http://searchorlandoproperties.com
In order to pintpoint a problem like that I'd recommend that you use a tool like YSlow and look at what resource takes the most time to load. Then try to optimize.
I've tried to load the page on Chrome, not blazingly fast but acceptable (less than 1 second), then tried on Firefox, takes more time (between 2 and 3 seconds). Finally tried on IE... you can go and take a coffee in the meanwhile ;)
That time basically depends on two factors: iframe rendering (that's a browser business, you can't do much about it) and page downloading speed, which depends on how much data has to be downloaded. Try to work on that second factor if you can...
About the second question: it's "theoretically possible" via javascript but before doing this try to see if you can produce a lightweight version of the iframed page on searchorlandoproperties.com.
Related
I'm working on optimizing a site and I've been able to get all of the pages to load in around 2 seconds just by optimizing the images with photoshop but, I have one page that doesn't seem to react like the rest. When I open up the developer tools in Chrome and watch the waterfall timeline of the loading elements it shows that there is a lag of over 3 seconds just to load the document. The fastest time I've ever been able to get the page to load is around 7 seconds, which is way longer than it should be since the page is only 895 kB.
Is this a server issue or is there some faulty code in the specific page? It makes me wonder because other pages on the same website load much faster even though their size is greater. Any help from you would be awesome!
Link to webpage: http://egi.utah.edu/corporate-associate-program/corporate-associate-list/
A cache plugin probably will solve your problem since no query will be called to db unless something in the page changed.
I used 2 of them and both speed up sites. (But only use one, you cant use both at the same time.)
Wp-rocket http://wp-rocket.me/
Wordpress super cache https://wordpress.org/plugins/wp-super-cache/
I was able to solve the problem with your input. It turns out that it was a image slider plugin (FlexSlider) that was re-generating the images to fit the size of the element which was slowing it down so much. There were 7 large images that it re-generated on the server side as the page was requested. All I had to do was stop the plugin from resizing the images by leaving it to the default setting and I wrote some javascript to do the same thing but locally and it sped up the loading time drastically. It's now loading at under 3 seconds when it was loading at around 10.
Thanks #drew010
If I just add 20 images or so, the site takes too long to load.
How can I make my site load as quickly as Google images and look
more or less like it but with at most 20 images (similar size
as Google images are)? Is it possible?
Here is an example page that takes too long to load:
http://dougingramnursery.com/whats-new/
The images are definitely larger than google images, google images shows you thumbnails then when you click it it shows you the larger image.
To create a thumbnail you can scale it down with any image editor.
First of all you might want to show us some code if you have some, we could help optimize it a bit. Then make sure you place your scripts when possible at the bottom of the body. Also compress the images using an image compressor along with using .htaccess to leverage browser caching. Which will practically remember those pictures when the users visits the page again, which will speed things up. Try to combine multiple CSS and JS files together or compress them using a tool such as Smaller if you have a Mac. If you're using Amazon S3 for hosting your images it should usually be pretty fast. But if its on your site then it might be a bit slower. SSL also slows down the time a bit. Your best bet would be to take a speed test and figure out whats causing the lag. Here's a few websites that will help with that.
Pingdom Website Speed Test
PageSpeed Insights
GTMetrix
I suggest you use Yahoo's SmushIt service to optimize your photos > http://www.smushit.com/ysmush.it/. After optimizing your photos re-upload them to the site, this should improve load time. Let me know if this helps.
Jesse
By linked images, I mean having an image in a directory and giving the path to the image in order to set an objects display or background. I've noticed that since using this method, my page is taking a considerable amount of time to load. So if this is the issue, what would be the alternative?
Thanks
I suggest using the Firebug addon for Firefox.
It breaks the loading time down and explains how long each thing takes to load.
But from your question i would say no, it shouldn't add any extra loading time on.
(I assume you mean loading an image from /index/pictures compared to /index/)
EDIT: Looking at your comments you say "more detailed image"... does this mean a larger file size and if so how large?
You can answer your question yourself by using firebug, We can't without asking a lot more questions since you have left so much needed information out. :/
Regardless of the location of the file, your browser still has to obtain the file. The key word there, is browser.
The data (regardless of type) is downloaded to the client (browser).
Regarding image size, try reducing image size, there are plenty of programs out there (I've found VSO image resizer rather useful in the past)
Remember, slow loading webpages effect SEO!
I've been working on a website, and we've managed to reduce the total content for a page load from 13.7MiB's to 2.4, but the page still takes forever to load.
It's a joomla site (ick), and it has a lot of redundant DOM elements (2000+ for the home page), and make 60+ HttpRequest's per page load, counting all the css, js, and image requests. Unlike drupal, joomla won't merge them all on the fly, and they have to be kept separate or else the joomla components will go nuts.
What can I do to improve load time?
Things I've done:
Added colors to dom elements that have large images as their background so the color is loaded, then the image
Reduced excessively large images to much smaller file sizes
Reduced DOM elements to ~2000, from ~5000
Loading CSS at the start of the page, and javascript at the end
Not totally possible, joomla injects it's own javascript and css and it does it at the header, always.
Minified most javascript
Setup caching and gziping on server
Uncached size 2.4MB, cached is ~300KB, but even with so many dom elements, the page takes a good bit of time to render.
What more can I do to improve the load time?
Check out this article.
http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/
If the link gets removed or lost the tools mentioned are:
YSlow (by Yahoo)
Google's Page speed
AOLs web page test
Smush.it (Image compression tool)
It sounds like you've done a great job of working around the real problem: those giant graphics. You can probably squeeze some more efficiency out of caching, minifying, etc., but there has to be a way to reduce the size of the images. I worked with a team of some of the pickiest designers on Earth and they never required uncompressed JPEGs. Do you mean images cut out of Photoshop and saved on full quality (10)? If so, the real solution (and I appreciate that you may not be able to accomplish this) is to have a hard conversation where you explain to the design company, "You are not your users." If the purpose of the site is to only impress other visual designers with the fidelity of your imagery, maybe it's ok. If the purpose of the site is to be a portfolio that gains your company work, they need to re-asses who their audience is and what the audience wants. Which, I'm guessing, is not 2 minute load times.
Have you enabled HTTP Compression (gzip) on your web servers? That will reduce the transfer size of all text-based files by 60-90%. And your page will load 6-10x faster.
Search StackOverflow or Google for how to enable it. (It varies per server software: Apache, IIS, etc).
Are all the DOM elements necessary? If they are, is it possible to hide them as the page loads? Essentially, you would have your important need-to-be-there dom elements render with the page, and then when the document is loaded, you could unhide the rest of the elements as necessary
$('.hidden').removeClass('hidden')
Evidently, there are plugins for compressing and combining JS/CSS files:
http://extensions.joomla.org/extensions/site-management/site-performance
http://extensions.joomla.org/extensions/site-management/site-performance/7350
I would say you can't do anything. You're close to the absolute limit.
Once you get to a critical point, you'll have to compare the amount of effort you'd need to input into further compressing the site against the effort of throwing the most bandwidth expensive components out the window. For example, you might spend 20 hours further compressing your site by 1%. You might also spend 40 hours on throwing the Joomla theme away and starting again saving 50%. (though probably not).
I hope you find an easy answer. I feel your pain as I am struggling to finish a Drupal project than has been massacred by a designer who hasn't implemented his own code in years and has become institutionalized in a cubicle somewhere near a tuna salad sandwich.
I have a large, hi-def JavaScript-intensive image banner for a site I'm designing. What is everyone's opinion of using iframes so that you incur the load time only once? Is there a CSS alternative to the iframe?
Feel free to preview the site.
It is very much a work in progress.
I should also have mentioned that I would like the banner rotation to keep moving. When the visitor clicks on a link, the banner rotation starts over. It would be nice if the "animation" kept rotating, regardless of the page the user visits.Blockquote
Well, in that case I would strongly recommend not doing that. The only real way of achieving that is to have the actual website content in the iframe, which means that you suddenly have lots of negative sides to the site: not being able to bookmark urls easily due to the address bar not changing; accessibility concerns; etc
I think you'll find that most people won't care that it reloads again. Once a visitor lands on your website, they'll marvel at the wonderful banner immediately, and then will continue to ignore it while they browse your site - until an image they haven't seen appears and distracts them away from your content.
Keep the rotation random enough, and with enough images, and people will stop to look at it from whatever page they're on.
I find the main challenge with iFrame headers is resizing. Since the font in your header is of static size, I don't see a problem with using an iFrame. Although I'm not sure if it's really intensive enough to be worth it.
Well, the browser appears to cache all seven banner images upon the first load, and runs them out from the cache (for each subsequent page) thereafter. I don't think you have a problem :D
Try it out with Firebug's Net monitoring tool in Firefox.
This may work without CSS also, but if you use CSS to load the background and your server is configured correctly, the image should already only be downloaded once.
Usually the browser will request a resource by asking for it only if it has not been modified since the last time it was downloaded. In this case, the only things sent back and forth are the HTTP headers, no content.
If you want to ensure the image is only downloaded once, add an .htacces or an apache2.conf rule to make the image expire a few days into the future so that users will only request it again if their cache is cleared or the content expiration date passes. An .htaccess file is probably too excessive to use in your case, though results may vary.
You could have it load the main page once, then asynchronously load the other elements when needed (ajax). If you did that, an iFrame would not be necessary. Here is an example of loading only the new material.
While using IFrames as a sort of master page/template for your pages might be a good thing, IFrames have a known negative impact to searchability/SEO.
It might also be unnecessary in the first place because once your images are loaded the first time (and with the large high-def images you have on your site, that would be slow no matter what you do) the images are cached by browsers and will not be reloaded until the user clears their cache or does a Ctrl+F5.