I have a strange problem.
When I enter my site http://www.dinomuhic.com I sometimes see a left angle bracket in the top left corner on white background for a short time (1-2 sec) before my page is displayed.
I don't know why this is happening. I thought its because I send an AJAX request at document.ready state but I removed it and placed the stuff, which the AJAX would load at first entering, directly into the DOM so it doesnt have to be loaded and go through all the AJAX code but it still pops up.
It looks really unprofessional and if it has to do something with laoding speed of the page I would rather use a preloader instead of this happening. Perhaps some of you know why its happening.
Thank you
PS: and PLEASE for the love of god, don't tell me to get rid of jQuery/UI or the like buttons. There are millions of other pages which use these and they don't have such problems. Thank you
Cuz it's in your code before your meta redirect. Here's your culprit:
<html><head><meta http-equiv="Refresh" content="0; URL=http://www.dinomuhic.com/2010/index.php"><
<title>DINOMUHIC.COM - The official Homepage of Dino Muhic</title>
</head><body></body></html>
Notice the index.php"><
Related
Okay I do not know how to explain this to you, It may be just my internet, or maybe my site is slower, or they really have a technique for doing this.
If you visit Facebook, Reddit, Youtube, Twitter, and if you click on links or any actions on those websites, the url changes but the browser tab doesn't show any loading circle.
How do they do that?
I am pretty sure my website is fast enought and at times it loads even faster than the bigger sites, but mine shows the loading circle on the browser tab.
Okay so I found the answer. Here is the technique for changing the url without reloading the page.
Updating address bar with new URL without hash or reloading the page
How do I modify the URL without reloading the page?
I am still trying to figure out though how to redirect the actual page without reloading the entire page. I am guessing they are loading it via ajax or something similar upon url change. I'll update this once I figure it out.
Edit: I am currently working on this feature for my site. The technique is to use ajax to load the content based on the url. I'll update this thread more as I update my site with this feature.
Edit 2: Damn, you will probably face the same problem I had trying to detect the url change without using onhashchange. If so, here you go:
How to detect URL change in JavaScript
This literally took me 4 hours just to figure that one out.....
Edit 3: I have now integrated this feature on my site. You can check it at
Grandweb
It is quite simple, but lots of work in appending the content once retrieved via ajax. So here is the process:
I am using pushState(); to change the url without reloading the page.
var url = $(this).attr('href');
var split_url = url.split('/');
var new_url = url.replace('https://grandweb.net/','');
window.history.pushState("object or string", "Title", "/write");
Using 'mouseup' was a bad idea, I changed my mind.
I then have to trigger the first function using 'mouseup' to retreieve the content via ajax, and then listen to succeeding onpopstate() for the next ones, because some mouse actions such as Mouse 4 or Mouse 5 are bound to the browser's Back and Forward button, and does not trigger via 'mouseup'.
$(window).on('mouseup', function(evt) {
get_content();
}
window.onpopstate = function(event) {
get_content();
}
The first one is responsible for triggering the function on first try because onpopstate only listens only when the browser's history API is populated.
Using mouseup was a bad idea, basically, don't use it unless you really want to detect mouse action from anywhere on the document.
I instead use the anchor tags/links to trigger the first function for retrieveng content.
example:
<a class="dynamic_btn" href="website.com/post">Home</a>
then
$(document).on('click','.dynamic_btn',function(e){
e.preventDefault();
get_content();
});
Using onhashchange is possible IF you have hashes on your url. I do not use hashes on my url so basically onhashchange is useless in my use case, unless I do not know something.
After retrieving the contents, I append them via creating DOM elements to existing containers from the page.
This is much easier to do if you are planning to change few elements or containers in your pages. If you plan on doing this to change a full page layout, goodluck. It's doable, but it's a really pain in tha *ss.
Upon observing Facebook, I learned that they do not implement this technique in all of their links/features. It makes sense because this is harder to maintain most especially because most of the work here is being done client side. It is very nice though because the page doesn't load.
I have implemented it on a few 'essential' functions of my website such as the viewing of posts and returning to the homepage. I can implement it on the whole site, but I am still deciding on that. That is all, thank you very much for reading internet stranger.
I'm using WebPageTest and am struggling to understand the meaning of the different colors and why it takes so long for my images to be shown (almost 2s). Using the WebPageTest waterfall view I can see a lot of "wait". I just dunno how to read the waterfall correctly and understand what all of my content is waiting on to be downloaded.
You can see my test results on WebPageTest: http://webpagetest.org/video/compare.php?tests=190928_QX_41979a80ef721f72c65dba5363475192-r%3A1-c%3A0-l%3Awww.kaybojesen.dk%2F,
I did some research and found I have to fix the issue using preload attribute:
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="img.jpeg" as="image">
I have tried playing around with this preload attribute by preloading some of the js and also some of the images (requests 93-100) but neither of it have helped so far.
Which elements should I take a closer look on in order to fix this long waiting time before my content is showing?
The color key is at the top. It just tells you what type of asset is being loaded except for the DNS + connect + ssl which combined together make up the process of establishing the initial connection to a domain.
The Atelier theme doesn't seem to have been centered around performance, but you should still be able to get things loading faster. One thing that you could fix is you can make sure you're only loading the necessary scripts/css for each page. https://www.kaybojesen.dk/wp-content/plugins/instagram-feed/css/sb-instagram.min.css doesn't need to be loaded on the homepage. Some items such as the cookie notice, could be loaded after everything else. Fixing that should give you a big improvement. You can also load the CSS/JS from a CDN. Make sure you're using a good caching plugin if you're not already doing so.
It's easy to spot some of these problems such as the cookie notice loading too early. The tricky part is finding plugins or code snippets that you can use to fix these performance issues.
If you look at the "browser main thread" at the bottom it will tell you what is happening during the "wait" time. According to this, There is a bunch of layout happening. Chrome just needs some time after receiving all of the CSS to process it before it continues loading the page. I think webpagetest's server's are slower than your typical computer, so they spend more time in the wait stage, but it's probably a good idea to optimize for the worst case scenario. Anyhow, that's what the wait is all about.
This problem is totally boggling my mind. I have a new website, with 5 main pages, all but one of those pages has an unexplained gap beneath the footer, but only in firefox. I say unexplained because I used firebug to determine that it's not an element or the padding/margin of any elements.
I validated all of the pages in HTML and CSS3, and they all checked out so I don't think it's a broken tag.
I'd be greatfull if someone could poke around with firebug and check it out...
a page with the unexplained space: http://www.smorecreative.com/about/
the page without the unexplained space: http://www.smorecreative.com/work/
I tracked your problem down to the following code - If you remove this block of code, the mysterious gap goes away... But I don't know why Firefox doesn't like this code, and the other browsers are happy with it.
<script type="text/javascript">
// Pretty Checkboxes
jQuery(document).ready(function(){
jQuery('input[type=checkbox]').prettyCheckboxes();
});
</script>
I'm fairly new to Share Point so forgive me if this is to easy for you guys, but I could not seem to find the answer anywhere and I am rather stumped.
I am currently trying to make a website to track if particular tasks go over their due date. I have a calculated column that leaves a DIV tag to the image of a red/yellow/green circle which is displayed by the javascript for a Content Editor Web Part (CEWP) made by Christophe on his site here:
http://blog.pathtosharepoint.com/2008/09/01/using-calculated-columns-to-write-html/
I was able to put his code into the CEWP and everything looks great when it is in a standard list.
But I want a web part version of this on the homepage for easy view. When I make the web part (of a view grouping by the image tag) and place on the main site all I see is the DIV tag! I made sure to put an identical CEWP on the homepage as well but i get as grouping:
+[columnName] : DIV>img title=blahblahblah>/DIV> (2)
Needles to say when I expand this it stays the same for all entries below
Any Ideas?
Thanks for your time :D
Nobody has responded, but I found the answer so hopefully this will save someone the hours of grief I had. This will seem ridiculous but just go with it.
In the calculated column instead of returning the type as text, return it as a currency. Sounds ridiculous BUT IT WORKS!!
My designer thought it was a good idea to create a transition between different pages. Essentially only the content part will reload (header and footer stay intact), and only the content div should have a transitional effect (fade or some sort). To create this sort of effect isn't really the problem, to make google (analytics) happy is...
Solutions I didn't like and why;
Load only the content div with ajax: google won't see any content, meaning the site will never be found, or only the parts which are retrieved by ajax, which arent't full pages at all
show the transitional effect, then after that 'redirect' the user to the designated page (capture the click event of a elements): effect is pretty much the same as just linking to another page, eg. user will still see a page being reloaded
I thought of one possible solution:
When a visitor clicks a link, capture the event, load the target with ajax, show the transitional effect in the meantime, then just rewrite the entire document with the content fetched with the ajax request.
At least this will work and has some advantages; the page reload will look seamless, no matter how slow your internet connection is, google won't really mind because the ajax content is a full html page itself, and can be crawled as is, even non-javascript browsers (mobile phones et al.) won't mind, they just reload the page.
My hesitation to implement this method is that i would reload an entire page using ajax. I'm wondering if this is what ajax is meant to do, if it would slow things down. Most of all, is there a better solution, eg. my first 'bad' solution but slightly different so google would like it (analytics too)?
Thanks for your thoughts on this!
Short answer: I would not recommend loading an entire page in this manner.
Long answer: Not recommended. whilst possible, this is not really the intent of XHR/Ajax. Essentially what you're doing is replicating the native behaviour of the browser. Some of the problems you'll encounter:
Support for the Back/Forward
button. You'll need a URI # scheme
to solve.
The Browser must parse
the entire page through AJAX.
This'll slow things down. E.g. if
you load a block of HTML into the
browser, then replace the DOM with
it, only then will any scripts, CSS
or images contained therein begin
downloading.
Memory - the
browser's not changing pages. Over
time (depending on the browser), I'd
expect the memory usage to increase.
Accessibility. Screen readers
will need to be notified whenever
the page content is updated. Might
not be a concern for you but worth
mentioning.
Caching. Browser
would not know which page to cache
(beyond the initial load).
Separation of concerns - your View
is essentially broken into
server-side pieces to render the
page's content along with the static
HTML for the page framework and
lastly the JS to combined the server
piece with the browser piece.
This'll make maintenance over time
problematic and complex.
Integration with other components -
you're already seeing problems with
Google Analytics. You may encounter
issues with other components related
to the timing of when the DOM is
constructed.
Whether it's worth it for the page transition effect is your call but I hope I've answered your question.
you can have AJAX and SEO: Google's proposal .
i think you can learn something from Gmail's design.
This may be a bit strange, but I have an idea for this.
Prepare your pages to load with an 'ifarme' GET parameter.
When there is 'iframe' load it with some javascript to trigger the parent show_iframe_content()
When there is no 'iframe' just load the page, with a hidden iframe element called 'preloader'
Your goal is to make sure every of your links are opened in the 'preloader' with an additional 'iframe' get parameter, and when the loading of the iframe finishes, and it calls the show_iframe_content() you copy the content to your parent page.
Like this: Link clicked -> transition to loading phase -> iframe loaded -> show_iframe_content() called -> iframe content copied back to parent -> transition back to normal phase
The whole thing is good since, if a crawler visit ary of your pages, it will do it without the 'iframe' get parameter, so it can go through all your pages like normal, but when you use it in a browser, you make your links do the magic above.
This is just a sketch of it, but I'm sure it can be made right.
EDIT: Actually you can do it with simple ajax, without iframe, the thing is you have to modify the page after it has been loaded in the browser, to load the linked content with ajax. Also crawlers should see the links.
Example script:
$.fn.initLinks = function() {
$("a",this).click(function() {
var url = $(this).attr("href");
// transition to loading phase ...
// Ajax post parameter tells the site lo load only the content without header/footer
$.post(href,"ajax=1",function(data) {
$("#content").html(data).initLinks();
// transition to normal phase ...
});
return false;
});
};
$(function() {
$("body").initLinks();
});
Google analytics can track javascript events as if they are pageviews- check here for implementation:
http://www.google.com/support/googleanalytics/bin/answer.py?hl=en-GB&answer=55521