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.
Related
We've been having an odd issue that I'm not sure how to tackle, and I think this may be related to a recent Google Chrome update, but I'd like some way of sanity checking myself before I open an issue on the bug tracker.
Problem
We have an internal web application that our users use Google Chrome to access. Starting sometime early last week, we've noticed that when users middle click links, one or more of our stylesheets gets unapplied to the page.
Weirdly enough, zooming in / out or opening Chrome's Devtools re-applies these stylesheets to the page. If you open the sources tab in the Devtools and watch the stylesheets that are loaded, when the layout is working, we're seeing the full list of stylesheets. When a user middle clicks on a link, the stylesheets area flashes and the CSS file is missing from the list. Zooming in / out re-adds the missing CSS file to that sources list and renders the page correctly.
Before Middle Click
After Middle Click
Troubleshooting
Thinking this was some JavaScript function doing this, I watched the elements to make sure there weren't any changes to the DOM (thinking we may be adding a class to our wrapper elements on accident). No DOM changes that I can see, and I'm not seeing inline styles applied to HTML elements.
Figuring that the previous step wasn't enough, I removed all the JavaScript on the page trying to narrow down what file is doing this. After removing all JS from the page, we're still seeing the same thing. Someone middle clicks a link, then the page's styles go crazy.
I double checked it in Incognito mode, figuring it was one of my extensions. It still happens in Incognito mode.
Thinking our Stylus compiler was going nuts, I double checked the stylesheets for any invalid CSS and couldn't find any. I removed the source maps from all our stylesheets thinking it may be related to that, but it didn't fix the issue either.
I've also checked for the stylesheet being affected having a disabled attribute set on it, but that doesn't seem to be happening.
Wrapup
All in all, I'm not sure what's causing this outside of a browser bug. This is something that had popped up late last week which coincides with the last upgrade of Google Chrome, which hints to me that this probably relates to that update.
That being said I've not seen this issue affect other websites, which also points to the website being the issue so I'm not sure.
Is there any other way I can narrow this down to being a Chrome issue? I've not had this happen on any other browsers I've tested. (Working on putting together a MVP of the issue that's happening now.)
Your problem sounds similar to this.
Chrome Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=647151
Should be fixed shortly.
Currently, I'm investigating several tips/recommendations for improving the performance of web sites. So, I've started with Steve Souders' excellent books (High performance web sites and even faster web sites), but I've got a couple of questions regarding some of the rules that are presented. FOr instance, chapter 5 of High performance web sites say that CSS stylesheets should be put at the top of the page because putting them at the bottom stops the progressive rendering that is performed by the browsers. According to Steve, some browsers (most notably IE) do get stuck with it and show a blank page instead of showing the items progressively. Here's the url for that test page:
http://stevesouders.com/hpws/css-bottom.php
Now, I do understand that we're talking about a book with a couple of years and that browsers (including IE) have been updated and improved. The reason I'm asking this is because I can't reproduce the behavior he mentions with any current version of FF, Chrome or IE.
Well, the thing is that Yahoo (http://developer.yahoo.com/performance/rules.html#css_top) and google (https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead) still say that.
So, what I'd like to know is if browsers have evolved in this area and this is only problematic for, say IE 8? If that is the case, why haven't yahoo and google updated their recommendations? (btw, I've tried simulating IE7 from within IE11 and still don't see the expected result that is described in the book...)
*UDPATE*One more final note: I've decided to reproduce Steve's cgi script in asp.net and I've created a simple generic handler that does the same thing as the sleep.cgi script. what I'm seeing here is that putting a stylesheet reference (which takes some time to load - I've went with 10 seconds) inside the head ends up producing the blank page problem that is reported in the book. If you put at the end, the browser ends up rendering everything and making a second pass for applying the styles after they have been loaded. In my opinion, this makes sense because when you put the style in the header element, the browser is holding up until it gets the styles before rendering (notice that the other referenced components are still being downloaded on the background, but they're not being shown in the screen). On the other hand, when they're at the bottom, the browser will simply apply the current styles until it gets stuck in the stylesheet. WHen that happens, it will only show the html it has loaded until the stylesheet (if there are any images below it, the browser will still download them but it will only render them after the styles have been loaded).
So, after these tests, I'm starting to think that 1.) I'm missing something here or 2.) yahoo and google recommendations are no longer valid today.
Thoughts?
Thanks guys!
Simply inserting a <link> tag in the footer is not the way to defer stylesheets. The currently accepted method is to attach it using javascript:
<script>
function loadStyleSheet(e){if(document.createStyleSheet)try{document.createStyleSheet(e)}catch(t){}else{var l;l=document.createElement("link"),l.rel="stylesheet",l.type="text/css",l.media="all",l.href=e,document.getElementsByTagName("head")[0].appendChild(l)}}loadStyleSheet("/your/stylesheet.css");
</script>
Optimizing your page for speed involves determining what CSS is above the fold, inlining that part in the header, and loading the main stylesheet later using the above method.
I recommend doing some searches for "above the fold css" and check out Google Pagespeed Insights.
https://developers.google.com/speed/pagespeed/insights/
So, I'm working on a new e-commerce site for my employer, and I've noticed that it displays / functions properly in every browser but IE8 (Which is rather inconveniencing, as about 80% of the office uses IE8.)
The site in question can be found here . When i load the page ( And more specifically, when I refresh a page ) I will sometimes have it saying "(2 items remaining) Waiting for..." and then it just hangs at a blank screen, until I type in a different URL or navigate to a different page.
Can somebody please offer me some insight as to why this might be happening, and what kind of things I can do to regulate it.
I used BrowserStack to test this and I didn't have a problem at all. This could very well be a JavaScript issue.
Try minimizing & concatenating your JS & CSS files. You can also create image sprites instead of loading lots of small images. After all that IE will have less files to download and they'll all be smaller so that should help.
Also, I see you're using WordPress which is a little harder to set up by try loading your JS at the bottom of the page. That way IE doesn't get hung up on a JS file at the top.
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.
This seems rather a common problem, however I can't find any reliable sources on this.
Once in a while Chrome will display a stylesheet-less version of page for like 2-3 seconds and soon after the page is displayed correctly. It can affect the very same page once in every 20-50 refresh and its not tied to a specific site. Happens all over the place. There are some threads about this here and there, but I have yet to find a full explanation.
Is this a bug? Feature? Is there a way to prevent Chrome from behaving like this on the client or perhaps server side?
In my experience, this happens when the network connection is poor and the page is (necessarily) loading slowly. The page's HTML will render first, and other assets called for within that HTML (like stylesheets or images) are rendered only after their calls are complete and their respective files load.
I have noticed this as well. It's definitely a bug. It seems to be this issue:
http://code.google.com/p/chromium/issues/detail?id=75761
You can "force" the stylesheet to load by opening the inspector (ctrl+shift+i).
shift + f5 should reload the page and the referenced stylesheets
With a normal reload it will only reload the page itself, and incorrectly assume that the stylesheets in the cache (the ones that never loaded in the first place) are correct.