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

70 comments:

  1. hi fruits
    these raiting widgets have been very slow on all of my 3 websites is there something wrong with the servers it slows my pages alot

    ReplyDelete
    Replies
    1. Did you follow the instructions described in this post? Did you update widget code?

      Delete
    2. yes after instructions it improved but sadly the raiting appears late

      Delete
  2. Replies
    1. http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html

      Delete
  3. HI FRUIT

    the 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 != &quot;static_page&quot;'>
    <div expr:id='&quot;labels_&quot; + 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'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
    <div class='ffbs_stats' expr:id='&quot;ffbs_stats_&quot; + data:post.id'/>
    <script expr:src='&quot;http://www.graddit.com/rate/eng/10/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;' type='text/javascript'/></b:if>

    ReplyDelete
    Replies
    1. 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.

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

    ReplyDelete
    Replies
    1. great! looking forward to it

      Delete
    2. 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:

      gradditShowLoadingAnimation(&#39;loading rating...&#39;, &#39;ffbs_stats_&#39;, 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.

      Delete
    3. great but i cant see the working example animation i only see random transparent symbols and word
      loading rating.....

      Delete
  5. tested firefox and chrome same result

    ReplyDelete
    Replies
    1. Maybe it cached css and/or js files. Try Ctrl+R.

      Delete
    2. tried that didnt work

      heres a screenshot

      http://s9.postimg.org/xbozhacwv/loading.png

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

      Delete
    4. its working know i updated the xp unicode

      ok 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 != &quot;static_page&quot;'>
      <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'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
      <div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
      <div expr:id='&quot;src_&quot; + data:post.id'><dummy expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></dummy></div><script type='text/javascript'>$(document).ready(function(){var post_id=&#39;<data:post.id/>&#39;;var src=document.getElementById(&#39;src_&#39;+post_id).innerHTML;var re=/src=&quot;(.+)&quot;/;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

      Delete
    5. This should be placed instead of old graddit code.

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

      Delete
    6. this is the exact code im using includeing the new grddit code and non blocking script here it is

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div expr:id='&quot;labels_&quot; + 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'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
      <div class='ffbs_stats' expr:id='&quot;ffbs_stats_&quot; + data:post.id'/>
      <div expr:id='&quot;src_&quot; + data:post.id'><dummy expr:src='&quot;http://www.graddit.com/rate/eng/10/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'/></div>
      <script type='text/javascript'>$(document).ready(function(){var post_id=&#39;<data:post.id/>&#39;;var src=document.getElementById(&#39;src_&#39;+post_id).innerHTML;var re=/src=&quot;(.+)&quot;/;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

      Delete
    7. New non-blocking graddit code instead of old code.
      Animation - right below it.

      Delete
    8. <dummy expr:src='&quot;http://www.graddit.com/rate/eng/10/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'/></div>
      <script type='text/javascript'>$(document).ready(function(){var post_id=&#39;<data:post.id/>&#39;;var src=document.getElementById(&#39;src_&#39;+post_id).innerHTML;var re=/src=&quot;(.+)&quot;/;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='&quot;http://www.graddit.com/rate/eng/10/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'/></div>gradditShowLoadingAnimation('loading rating...', 'ffbs_stats_', 5);
      <script type='text/javascript'>$(document).ready(function(){var post_id=&#39;<data:post.id/>&#39;;var src=document.getElementById(&#39;src_&#39;+post_id).innerHTML;var re=/src=&quot;(.+)&quot;/;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/

      Delete
    9. Put this on a test blog, I need to see the error.

      Delete
    10. hi fruits how long until the animation tutorial?

      Delete
    11. It'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.

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

    ReplyDelete
    Replies
    1. 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.

      Delete
  7. no its slowing my other site

    http://banglatunetest.blogspot.co.uk/

    its working fine know but time to time it lags

    how do u remove from main page?

    ReplyDelete
    Replies
    1. Find in your template all calls to tops and delete them.

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

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

      Delete
    4. No need to duplicate comments. I check this blog few times a day, but not sitting here all the time.

      Delete
  8. hy how to sign in to manage my account???

    ReplyDelete
    Replies
    1. Go to https://manage.graddit.com/account, click "Generate secret key" link and follow instructions.

      Delete
    2. i followed the all instructions but still not logged in. its gave error of "ERROR VERIFYING TOKEN."

      Delete
    3. What is the token page URL?

      Delete
  9. this is my page url: http://www.livedramas.com/p/graddittoken_30.html


    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.

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

      Delete
    2. This comment has been removed by the author.

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

      Delete
    4. hy this method also don't work for me......

      I have Place Email on My page:

      http://www.livedramas.com/p/graddittoken_30.html

      kindly Generate me a Secret Key

      Delete
    5. Login and password sent to email. You now can delete token page.

      Delete
  10. Hi is there no way of stopping graddit from fetching while on the home page as I only have graddit on my posts pages.

    ReplyDelete
    Replies
    1. 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

      Delete
    2. my current code is

      {[['<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

      Delete
    3. I couldn't put in the code :) but yeah I've got a lot of variations

      Delete
    4. You can display it only on internal pages - just replace condition

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

      with

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      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.

      Delete
  11. thanks for the quick reply :)
    I have done what you said http://pastebin.com/Qe7kWaDm
    I don't know how I will do it.
    Thanks:)

    ReplyDelete
    Replies
    1. 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

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

      Delete
    3. Thanks 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
      http://pastebin.com/2g6iDXNR
      Thanks for your quick responses.

      Delete
  12. updated http://pastebin.com/KA5pWkCS
    I don't want to spam your site but would it more easier if I was to give you my blog url?

    ReplyDelete
    Replies
    1. 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).

      Delete
    2. Don't forget that it relies on jQuery, make sure head section of your blog has something similar:

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"/>

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

    ReplyDelete
  14. Everythings nice and fast but now the jquery stopped my carousel slider from working any work around that? plz

    ReplyDelete
    Replies
    1. Ok, now give link to the blog and I will check it later today.

      Delete
    2. http://www.observemovies.com/ sorry for being a pain in the ass :)

      Delete
  15. Hi mate how you doing? Any good news?

    ReplyDelete
    Replies
    1. Checked. You have jQuery included twice in your template. Remove one and lets see if that fixes the problem.

      Delete
  16. No luck mate, As you said there is two but it does not make a difference when I delete it.

    ReplyDelete
    Replies
    1. 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.

      Delete
  17. Yes 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.

    ReplyDelete
    Replies
    1. is there a way I can put a option for sort all posts by rating and/or most viewed.

      Delete
    2. Yes, you can sort Blogger posts by rating: http://fruitfulbookmarks-en.blogspot.com/2012/11/how-to-sort-blogger-posts-by-popularity.html

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

      Delete
    3. You should know though, that it will not show all of your posts, but only 20 (max) most popular.

      Delete
  18. these raitings stopped working on all of my websites? do i need to pay now? i thought it was free?

    ReplyDelete
    Replies
    1. 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.

      Delete