I was wondering if anyone can help me out. I've got a page that shows about 260 images so it obviously takes a long time to load. I've noticed a lot of the time in Chrome it takes too long to load, and by too long I mean it appears to be unresponsive.
Safari on the other hand seems to load the page up pretty quickly.
So I am left here wondering is there something that exists in the lifecycle of a chrome http request that would be trying to pre-load the images or something to that effect which is causing the delay.
Both browsers are working from an empty cache.
Can anyone enlighten me!
The network tab on the chrome developer tools will let you see the order the images are loading in, and the average time fetching each from the server. I've seen issues where a certain higher res image can cause a browser to stutter a bit when rendering the page (usually IE :s), so this might help you pinpoint if its a particular image causing the issue.
http://code.google.com/chrome/devtools/docs/overview.html
Related
I have a website that recently started to have an issue with a bunch of divs containing links and images are flashing at the top of the website momentarily while the page loads.
See: pelicancases.com
It's strange because I see those images already rendered even before the images flash. Also, this is a new occurrence.
Could this possibly be due to CSS animation or CloudFlare caching/optimization?
Any recommendations on how to fix this issue would be greatly appreciated.
If I use WebPageTest to inspect your page I see some browser related issues.
When testing with Chrome there are three 404s
https://www.webpagetest.org/result/160921_2N_1GQS/
http://www.pelicancases.com/android-chrome-192x192.png
http://www.pelicancases.com/favicon-96x96.png
http://www.pelicancases.com/favicon-194x194.png
If I test with IE 11 I don't see any 404s
https://www.webpagetest.org/result/160921_TE_1H77/
To troubleshoot I would start by disabling CloudFlare caching
(Domain > Overview > Development Mode > Enabled)
Then fix the 404s, they may not be the cause of the problem but worth eliminating first.
If you still have the flashing, try and figure out if it's browser related.
Good luck!
Please see this link. Notice that the search bar first renders near the top of screen. Then aligns itself to be opposite to the logo. I think some css rules are causing this but I am unable to figure out. Can you please help me in pinpointing the reason. What one should avoid in the code to avoid/minimize this behaviour.
This almost aways happens when you have a css rule for blocking that is overwriting the previous. The best thing to do is to have the first thing in the css file to be blocking and normalizing. Every time you need something to be in a place or have a specific size, you should go to the blocking section of your code.
But the most preocupying part of the site you shown is the time it takes to load a fancybox css file.
This issue could just be how each browser loads and renders the content, and also on how fast your network can download content. Since there is many multiple Javascript and CSS files it can just be parsing them slowly and configuring the site as it goes while your network and browser is still downloading and loading everything.
I viewed it in Chrome and Firefox and it seemed to load fine for me.
We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.
I am working on this website. I used firebug along with DreamWeaver to create it. The website does not load fine when the page is opened(the layout is not as I wanted and I created it.) but when I refresh the page, it becomes exactly as I wanted it to be. Now I am stuck with it. I have never been into such a situation before. Please help me out how can I make the website load properly at the first instant. Thanks
It could be that the connection was slow the first time you loaded it. So the layout took longer. Next time you loaded it, everything was in the cache and the layout was quick!
So your low bandwidth (HTML) version of the site loads a 7.46 MB animated gif? Wow... I would get rid of that animated gif! Makes your site look choppy and unprofessional! That is surely a big part of your problem.
It looks exactly the same to me both before and after refresh. Hard-reset your cache, make sure you're not on a destructive proxy, and try using your browser in private mode.
Recently I had some issues with Flash in IE, involving a SWF which is something like a gallery.
In Firefox its loads perfectly, but in IE it doesn't work properly sometimes. The first time it is loaded its works fine but when I refresh all the images are blank. The image data came from XML.
I wish to get some tips regarding the browsers and Flash / SWF behavior in each.
Thanks in advance.
I once faced a similar problem. IE first displays image properly. Upon refresh it didn't display the image. The problem was with the IE security settings on scripting languages. If the script fails to load properly on first time, IE blacklists the script and hence blocks it from running again. When u reset the security settings it will work. But you should still get into the bottomline of the issue and fix it.
Thanks,
Nirmal