Sometimes ratings widget can take significant time to load, up to several seconds depending on connection speed and performance of the servers handling request. That leads to bad user experience, site looks stuck. And while battle over Graddit servers performce is not over you can still help your blog yourself. You can load widgets without blocking the whole page, in order to do that go to http://www.graddit.com/ratings-widget, tick "Non-blocking" checkbox and replace your old code with a new one. As stated in the hint there don't forget that it relies on jQuery, so this library should be included (preferably in <head> section of your template). Saturday, March 2, 2013
Non-blocking ratings widget load
Sometimes ratings widget can take significant time to load, up to several seconds depending on connection speed and performance of the servers handling request. That leads to bad user experience, site looks stuck. And while battle over Graddit servers performce is not over you can still help your blog yourself. You can load widgets without blocking the whole page, in order to do that go to http://www.graddit.com/ratings-widget, tick "Non-blocking" checkbox and replace your old code with a new one. As stated in the hint there don't forget that it relies on jQuery, so this library should be included (preferably in <head> section of your template).
hi fruits
ReplyDeletethese raiting widgets have been very slow on all of my 3 websites is there something wrong with the servers it slows my pages alot
Did you follow the instructions described in this post? Did you update widget code?
Deleteyes after instructions it improved but sadly the raiting appears late
DeleteShould speed up soon.
DeleteHow to install this widget?
ReplyDeletehttp://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html
DeleteHI FRUIT
ReplyDeletethe graddit raiting stars randomly slow my website
i dont like the non blocking rating because the stars comes up late i need to have them come up like it did before upton load
if i remove some code from the rating widget will it be fast like before
i dont want any stats or tops to save to graddit server i think this is the slow problem
i just want the raiting on evry post thats it
my code looks like this, tell me which lines to remove, thanks
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div><p style='text-align: center; margin: 0px; padding-top: 0px; padding-bottom: 0px; color: gray;'>Rate This Video:</p><div class='ffbs_rate' expr:id='data:post.id'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div>
<div class='ffbs_stats' expr:id='"ffbs_stats_" + data:post.id'/>
<script expr:src='"http://www.graddit.com/rate/eng/10/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"' type='text/javascript'/></b:if>
No, saving stats or tops is not a problem, it's just a significant number of requests or, possibly, slow connection from the area where you reside to servers location (Germany). Regarding non-blocking widget, it's usually a matter of seconds for them to appear (mine for me apper withing 2 seconds even when load is high). If that is much slower for your it's probably connection issues or many simultaneous requests from your pages to Graddit (some users have dozens of ratings on their pages - of course that may be slow, not sure what's your case). Anyhow, there's not much you can do about it right now except for setting up non-blocking widgets. In the nearest future I'm planning to come up with subscriptions that will allow me to have more servers and with a paid version of ratings that users will be able to set up on their own hostings, that may be a solution in long term.
Deleteim using the both the stars raiting and thumbs raiting i done a speed test and these widgets takes 1800ms to load thats almost 2 seconds thats minimum sometimes it freezes the page load
ReplyDeleteyes im looking forward to subscription service in the future, meantime i will be using the non blocking load widget, other than it shows up late after page load is wil have to do for know anyway is there any way of displaying a loading animation on the graddit raiting while using the non blocking script so while page loads there will be a cool raiting loading animation. if you can do this that willl be grate, chers
I will make animation.
Deletegreat! looking forward to it
DeleteFirst version of animation is here. I'll write a separate post on it, but in short:
Delete1. you need graddit.css styles file included;
2. you need http://static.graddit.com/js/graddit-extras.js JS file included;
3. you need a container element (default statistics works good for that purpose as it can show animation while rating is loading and after loading is done it will contain votes/views data). So, if you have stats DIV, just before delayed code script call you can put something like this:
gradditShowLoadingAnimation('loading rating...', 'ffbs_stats_', 5);
- and it will display 5 animated stars. Change parameter 5 to whatever you need, play with styles. Working example is here in this blog, currently supports Chrome and FF, didn't check in other browsers yet.
great but i cant see the working example animation i only see random transparent symbols and word
Deleteloading rating.....
Browser?
Deletetested firefox and chrome same result
ReplyDeleteMaybe it cached css and/or js files. Try Ctrl+R.
Deletetried that didnt work
Deleteheres a screenshot
http://s9.postimg.org/xbozhacwv/loading.png
I tried to open my blog on linux in chrome and firefox and on windows in chrome, ie and safari, not seeing this issue. What's your blog encoding, seems like encoding issue? Anyhow, you can host animation function from graddit-extras in your template and replace stars symbols with something that is displaying properly in your blog. I'll extend it with image animation instead of symbolic to avoid this kind of issues.
Deleteits working know i updated the xp unicode
Deleteok now that i got it working where exactly do i put the animation code
and wheres the graddit extras script?
please tell me where to put it
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<div expr:id='"src_" + data:post.id'><dummy expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'></dummy></div><script type='text/javascript'>$(document).ready(function(){var post_id='<data:post.id/>';var src=document.getElementById('src_'+post_id).innerHTML;var re=/src="(.+)"/;var match=re.exec(src);if(match!=null){src=match[1];$.getScript(src);}});</script></b:if>
and also can u make a tutorial page for this
chers
This should be placed instead of old graddit code.
Deletegraddit-extras script is here: http://static.graddit.com/js/graddit-extras.js - open this page source for reference.
Tutorial is waiting for its turn, currently I'm working on something else: rating snippets for SERP and real cross-linking.
this is the exact code im using includeing the new grddit code and non blocking script here it is
Delete<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType == "item"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div><p style='text-align: center; margin: 0px; padding-top: 0px; padding-bottom: 0px; color: gray;'>Rate This Video:</p><div class='ffbs_rate' expr:id='data:post.id'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div>
<div class='ffbs_stats' expr:id='"ffbs_stats_" + data:post.id'/>
<div expr:id='"src_" + data:post.id'><dummy expr:src='"http://www.graddit.com/rate/eng/10/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'/></div>
<script type='text/javascript'>$(document).ready(function(){var post_id='<data:post.id/>';var src=document.getElementById('src_'+post_id).innerHTML;var re=/src="(.+)"/;var match=re.exec(src);if(match!=null){src=match[1];$.getScript(src);}});</script>
</b:if>
</b:if>
you said before to place the animation code before the delayed code and here you say place instead of old graddit code lol im really confused?
where exactly do i place this code:
gradditShowLoadingAnimation('loading rating...', 'ffbs_stats_', 5);
please show me here
http://pastebin.com/
thanks
New non-blocking graddit code instead of old code.
DeleteAnimation - right below it.
<dummy expr:src='"http://www.graddit.com/rate/eng/10/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'/></div>
Delete<script type='text/javascript'>$(document).ready(function(){var post_id='<data:post.id/>';var src=document.getElementById('src_'+post_id).innerHTML;var re=/src="(.+)"/;var match=re.exec(src);if(match!=null){src=match[1];$.getScript(src);}});</script>
this is the new code right?
so i put this animation code right bellow it
gradditShowLoadingAnimation('loading rating...', 'ffbs_stats_', 5);
like this
<dummy expr:src='"http://www.graddit.com/rate/eng/10/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'/></div>gradditShowLoadingAnimation('loading rating...', 'ffbs_stats_', 5);
<script type='text/javascript'>$(document).ready(function(){var post_id='<data:post.id/>';var src=document.getElementById('src_'+post_id).innerHTML;var re=/src="(.+)"/;var match=re.exec(src);if(match!=null){src=match[1];$.getScript(src);}});</script>
it does not work
kindly show me here quickly?
http://pastebin.com/
Put this on a test blog, I need to see the error.
Deletehi fruits how long until the animation tutorial?
DeleteIt's right after "Ratings rich snippet on Google SERP" and "True cross-linking" tutorials on my list. Rich snippet is ready: http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html, so it's one more to go. Sorry, first things first. In the meantime you can create a test blog and do your things there - that will help me to understand what is not working and probably I will be able to advice something earlier.
Deletehey fruit i decided to use the non blocking widget code after all because it was slowing down my site and even after the non blocking code my site stil slow the stars raiting is relly lagging its stoping other scripts from loading very dissapointed, only thumbs raiting work ok without delay
ReplyDeleteFirst, disable tops on main page - they are not working anyway, because your feed for some reason can't find requested URLs. That will speed up the main page.
DeleteSecond, if you're talking about http://bengalipiffs.blogspot.com - I tried to open it several times and never had issues with loading speed. Besides, ratings are not slow, they can return errors, but when it happens you'll get an error immediately. With all that said I assume it's just slow or unstable connection from your area to the country where Graddit servers are (Germany). What tools are you using to measure loading speed? Also, non-blocking widgets should not slow other parts of your site as they start loading after page is completely loaded.
no its slowing my other site
ReplyDeletehttp://banglatunetest.blogspot.co.uk/
its working fine know but time to time it lags
how do u remove from main page?
Find in your template all calls to tops and delete them.
Deletewhat happends if i remove it?
Deleteim thinking of adding top rated? most viewed etc.. to my viddeo site in the future just like i did with bengalipiffs so if i remove this wil i be stil able to link tops to my site
Keep if you want them. When I opened that blog last time I saw tops didn't work because the feed didn't return any data. If it's working again don't touch.
Deletehelloo please reply me
DeleteNo need to duplicate comments. I check this blog few times a day, but not sitting here all the time.
Deletehy how to sign in to manage my account???
ReplyDeleteGo to https://manage.graddit.com/account, click "Generate secret key" link and follow instructions.
Deletei followed the all instructions but still not logged in. its gave error of "ERROR VERIFYING TOKEN."
DeleteWhat is the token page URL?
Deletethis is my page url: http://www.livedramas.com/p/graddittoken_30.html
ReplyDeleteGraddit Showing this Error:
Error verifying token. Please make sure the given URL is correct and string from paragraph #2 copied completely. Text in paragraph #2 refreshes every time you refresh current page! Also be sure the URL meets the rules written in paragraph #1.
Make sure token on your page matches token from paragraph #2. In other words, open Manage page again, take new token, put it into your page and try to verify it. If still not working put your email instead of token and leave a comment here, I will generate a key for you and will send it to that email.
DeleteThis comment has been removed by the author.
DeleteOk, I checked the logs. You tried to verify token using various URLs, here's what I found:
Delete1. when you tried http://www.livedramastv.blogspot.co.in/p/graddittoken_30.html - server couldn't resolve this and got error; I can't open this URL in my browser as well;
2. when you tried http://livedramas.com/p/graddittoken_30.html (without www) it got redirected to www and server didn't handle it properly (I will investigate);
3. when you tried http://www.livedramas.com/p/graddittoken_30.html you had wrong token on your page (not the token that was given on the Manage page, maybe the page got refreshed for some reason);
What you can do now:
1. open https://manage.graddit.com/account/eng, take new token and replace token on your page with the new one;
2. verify using http://www.livedramas.com/p/graddittoken_30.html only;
if doesn't work
3. put your email into token like this: graddit_token='livedramas@gmail.com' so that I could be sure you're the owner of the blog and wait - I'll check the page, generate the key for you manually and will send it to that email. Please don't give your emails here, I need them on the token page, not here.
hy this method also don't work for me......
DeleteI have Place Email on My page:
http://www.livedramas.com/p/graddittoken_30.html
kindly Generate me a Secret Key
Login and password sent to email. You now can delete token page.
DeleteHi is there no way of stopping graddit from fetching while on the home page as I only have graddit on my posts pages.
ReplyDeleteThe problem I am having is my template was designed by someone else and they have used a different type of code to implement the graddit code, So I cannot just paste the non blocking code instead of the other because it will change a lot of things. I only need graddit rating system on post pages. Thanks
Deletemy current code is
Delete{[['<img src="http://static.graddit.com/img/star.png"/>']]}
how can I change this to non blocking without losing the extra details by the template designer?
Thanks in advance
I couldn't put in the code :) but yeah I've got a lot of variations
DeleteYou can display it only on internal pages - just replace condition
Delete<b:if cond='data:blog.pageType != "static_page"'>
with
<b:if cond='data:blog.pageType == "item"'>
Regarding customization and non-blocking code, yes it's usually possible to keep customized code and still have non-blocking widget. It will be easier if you know javascript and html :). If you need to paste a piece of code here use pastebin.com and paste link.
thanks for the quick reply :)
ReplyDeleteI have done what you said http://pastebin.com/Qe7kWaDm
I don't know how I will do it.
Thanks:)
well the most important thing for me is to keep the ratings in the same position and not have it appear on the home page only in the posts, So if you can help me with the non-blocking code without any of these being changed it will be great help. Thanks
DeleteI don't see any changes in widget code, so you can just go to http://www.graddit.com/eng/ratings-widget, pick stars you like (or put your own link to image), select Blogger Platform, tick "Non-blocking" checkbox and take code. In order for widgets to appear on internal pages only change the code as I described before (replace != static_page with == item).
DeleteThanks tried it but still had a problem last time I did not paste most of the code sorry for that I have pasted it now
Deletehttp://pastebin.com/2g6iDXNR
Thanks for your quick responses.
updated http://pastebin.com/KA5pWkCS
ReplyDeleteI don't want to spam your site but would it more easier if I was to give you my blog url?
Your blog URL will not help me, because it does not show the template structure. Here is how you code should look like: http://pastebin.com/dfYHuEQJ (didn't test).
DeleteDon't forget that it relies on jQuery, make sure head section of your blog has something similar:
Delete<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"/>
THANK YOU SOOO MUCH, you're a living legend huge difference in speed even though its still a bit slow that's probably down to the media on my home page. But huge improvement. Thank you once again have a nice day :D
ReplyDeleteEverythings nice and fast but now the jquery stopped my carousel slider from working any work around that? plz
ReplyDeleteOk, now give link to the blog and I will check it later today.
Deletehttp://www.observemovies.com/ sorry for being a pain in the ass :)
DeleteHi mate how you doing? Any good news?
ReplyDeleteChecked. You have jQuery included twice in your template. Remove one and lets see if that fixes the problem.
DeleteNo luck mate, As you said there is two but it does not make a difference when I delete it.
ReplyDeleteStill seeing two calls. Remove one. Also, graddit is not called on main, so the carousel issue is not related to it (but you can double check it by removing graddit code or commenting it out). You have many JS errors, you can see them, for example, in Chrome's inspector (Ctrl + Shift + J). You mentioned that somebody gave you that template, I'd recommend you to contanct that person and ask for an advice or post a question on Blogger support forum.
DeleteYes I've tried removing the jquery code for non blocking graddit and somehow now it works. But without the code its slow so I guess I have to chose between graddit or carousel.
ReplyDeleteis there a way I can put a option for sort all posts by rating and/or most viewed.
DeleteYes, you can sort Blogger posts by rating: http://fruitfulbookmarks-en.blogspot.com/2012/11/how-to-sort-blogger-posts-by-popularity.html
DeleteYou'll need to create graddit account, create Tops and use Blogger static pages to process those tops so that they would look like posts sorted by rating. Follow the instructions.
You should know though, that it will not show all of your posts, but only 20 (max) most popular.
Deletethese raitings stopped working on all of my websites? do i need to pay now? i thought it was free?
ReplyDeleteIt was free for 3 years, now it has 14 days trial for any new rating, then it becomes read-only. For example, it you wrote a new post, widget will work fine for 2 weeks for this new post, after that no new votes will be accepted. If you're fine with that you don't need to pay, otherwise you can consider switching to one of the plans.
Delete