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).

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.

im 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 yes 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

First version of animation is here. I'll write a separate post on it, but in short:1. 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:

- 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.

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.

hey 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

First, 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.

Second, 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.

what happends if i remove it?im 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

Graddit 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.

Ok, I checked the logs. You tried to verify token using various URLs, here's what I found:1. 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 work3. 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.

The 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

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.

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

I 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).

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

Still 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.

It 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.