Showing posts with label Page loading. Show all posts
Showing posts with label Page loading. Show all posts

Remove plusone.js JavaScript To Load Blogger Website Faster [Quicktips]

So you are also stuck on this one of the major question "How to remove https://apis.google.com/js/plusone.js ?" PageSpeed check analysis shows that it slows down the page load time quite considerably even we don't have plusone feature installed on the website. This tutorial helps you to reduce the load time of your blogger blog. Remove plusone.js & Reduce Load time of your Blogger Blog - On Quora, I saw the questions about How to remove default widgets javaScript [Widgets.js] from Blogger or Wordpress or any site? Is it possible to remove the plusone javascript from HTML? How to remove or disable Plusone.js from blogger? Google plusone button is slowing down page load. And Google used to say "page speed is one of the factor to consider for search engine ranking', but unfortunately the code generated by Google with plusone.js is much slower than other .js files. Today we are going to learn how to disable widgets and google+ script files from blogger and how to get rid of these kinds of codes and how to remove plusone.js from HTML to make blogger blog template load faster.
Remove plusone JavaScript From HTML To Load Blog Faster
Remove plusone JavaScript From HTML To Load Blog Faster
If you look carefully & search for plusone.js in your template, you'll notice that the navbar's code loads some JavaScript files as the Google Plus One plusone.js file and you will see the code like this:
[...] .... ... <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> ... ... [...]
And when you try to remove it several times; it keeps reinserting automatically itself again in HTML. Even if you are going to disabling google plusone feature, that script again shown at the same place.

People used to ask - "Page speed of my blog is decreasing continuously, tell me something to make blogger blog template load faster without disturbing better user experience."

In previous article we have seen most effective tips to reduce load time of blogger blog and how to remove default widgets & JavaScript. In addition to that, we are going to learn to remove plusone.js from HTML to make blog load faster.

Remove plusone.js JavaScript From HTML To Load Blog Faster

It is the simplest way to load G+ button on the page, but inappropriately it won't work, instead it slow down your page loading time considerably, and hence we are going to remove it from our HTML.

Follow steps as it is:

1. First take a backup of your blog template for the case where something goes wrong. Then open HTML.

2. Find plusone.js, you will get like this :
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
..
..
bla bla
..
.. .. .. https://apis.google.com/js/plusone.js.. .. ..
..
bla bla
..
.. .. ..
</b:widget>
3. Its the navbar code in blogger that injecting plusone.js script auto into HTML. If you don't want and if you are not using it then you can remove it. And go to next step.

4. Final step, find  </body>  and replace it with following code:
&lt;!--</body>--&gt; &lt;/body&gt;
5. Save template.

Now onwards your web pages will load a bit faster and this is pretty nice thing for the user visiting your blog.

Speed up Google +1 button JavaScript

There is no need of coding knowledge to make it faster. This tip may help WordPress bloggers to boost there blog loading time. You just need to edit the https protocol attached with the link of plusone.js JavaScript as shown below:
https:// to http://

That�s it. Check your speed test.

If you know any interesting and effective trick to load blogger page faster than ever, then you can share with us via comment, we would like to feature it in our blog.

#Blogger #Blogging #SpeedOptimization #Howto #Tutorial

Setup CloudFlare Free CDN Service in WordPres/Blogger | Speed Up Site Loading

The Page loading is one of the major factors in case if you want to improve PageRank. Yeah, off-course, the content is also important for any page, but what if? when it is taking too much time to load to display, the reader will not wait and eventually will switch to another site. This affects your page-views and so the PageRank. There are lots of ways to improve page loading of a website, but one of the best is by using CDN [Content Delivery Network]. CDN improves your page load speed, bounce rate, and security [HTTPS]. That will cause your visitor to love your site and to convert from visitor to regular reader of your pages. You can use CloudFlare with any custom Wordpress or Blogger domain you just have the full control over managing it's DNS settings. So stop searching how do I set up CloudFlare�s free CDN for WordPress or BlogSpot sites? Learn more about CDN service & get to know how to use CDN for blogger blog or any website to improve the user experience. Moreover, you can speeding up your WordPress with PageSpeed Service by this Free CloudFlare CDN plugins.
How To Setup Free CloudFlare CDN | Speed up Blogger Site
How To Setup Free CloudFlare CDN | Speed up Blogger Site
Last time we have seen 5 Advanced Tips For Making Blogger Blog To Load Faster to make fast page load time, that will increase your overall page views, cause lower bounce rate. And today we are going to see something advanced of the best Blogging Tips but most productive way to improve and optimize the site performance with 24/7 network & website monitoring by CDN servers.

Also, read: 5 Tips To Make Your Blog Load 10x Faster

Effect of CloudFlare CDN On Page Loading

Below chart shows the output result by the site performance especially the page load time calculated over a week. Before applying CDN, the blog loading time was around 15sec. but later after applying CDN effectively, it goes around 3sec and now it is around 1.84sec. Data is measured by one of the best free website performance monitoring tool called - Pingdom Pagespeed tool.
CDN Effect mesured by Pingdom tools

About CDN - What Is CDN & How It Works?

Your visitors expect your site to load immediately. And moreover, Google already officially declare that "page speed is one of the factors to consider for search engine ranking". And CDN is highly recommended the technique to speed up to loading time. Instead of going into details about CDN, I would like to explain you in short. CDN - Content Delivery Network - which is located globally across the Internet that will help to serve your web page and content of your site based on the geo-location of the visitor. It makes your site to load fast as it caches your site content and stores it on global servers, so if any user wants to access your page from any location, then instead of going to the primary hosted server which is far away from user, the user request is then served by his nearest CDN server. This makes fast loading of your site and also improve page views and user engagement. CDN not only caches your content to serve your readers but also optimizes your site entities like JavaScript�s, CSS & HTML. The overall effect will decrease the load on your server and gradually improves the performance of the site.

Install CDN in Blogger Blog - CloudFlare

CloudFlare is one of the best CDN service providers which grants FREE bandwidth for CDN and work with any type of static as well as dynamic content websites, Control Management Services [CMS], blog including Blogger, WordPress, Drupal, Tumbler and much more. CloudFlare is really easy to setup and provides DNS, DDos protection including FREE global CDN. They have their own custom-built system that is specially designed to run every website fast on the Internet globally. There are pro features also available to highly customize your site contents and entities that include Session Optimization, Prioritized Requests, Business and Enterprise features like Railgun and Automatic IPv6.

Step by Step Guide to Install CDN - CloudFlare

You may have heard that there are too many professional bloggers are using CDN to make their site to load faster, but for your blogger site, you need to have your own domain like www.yoursite.com. As it uses DNS of your site, so then only you can use CDN service for your blogger blog. You can check your current DNS on http://www.hypestat.com/. If you don�t have, then you need to purchase URL domain name for your blog or in addition, if you want web hosting as per your requirement get it from top dedicated web hosting companies listed as HostGator, BlueHost, GoDaddy and so on. So here I am assuming that you have your own domain name and you are aware of DNS settings.

Read: Top 10 Websites To Check Page Load Time & Performance

Follow the steps as it written:

  1. Go to CloudFlare site and sign up on https://www.cloudflare.com/
    Add your website and click on 'Scan DNS Records'. This will take 60sec. to scan DNS records.


  2. Next window will show the DNS Records for yoursite.com. Here you need to check and verify all DNS settings & nameservers are same as per your domain provider, if not, then you can easily add here A, AAAA, and CNAME records. Then click on Continue.


  3. Select a CloudFlare Plan as a FREE WEBSITE. If you want you may go with Pro, Business or Enterprise Website plan to get more advanced features of CDN. Click on Continue.


  4. In next window, you need to change your nameservers on your domain name provider site. Copy nameservers from CloudFlare and paste as they suggested on your domain provider website. This process can take up to 24 hours to fully functional. Note that, your website will not experience any downtime when you change your nameservers. After that click on continue.


  5. Now you will get the status of your site getting added into CloudFlare. It requires 24hours to be processed. Your site will remain available throughout the switch.
    [I would like to suggest you to recheck nameservers after 20 to 30 min, it will get active if you did all above steps correctly].


  6. You are now activated CloudFlare.

Now CloudFlare CDN server started to cache all your site data and contents including JavaScript�s, CSS, & HTML for better serving to all of your visitors from all over the globe. From then, you will see improvements not only in website loading but also in page views, bounce rate along with security protection against traffic surges.

Bottom Line

On my point of view, to use a CDN is very useful to make a website much faster than ever, more secure and even SEO optimized. Personally, I'd definitely recommend CloudFlare CDN services for serious bloggers or websites owners. This CDN network is one of the leaders of the CDN industry and even more than 2 million sites including the big names like Cisco, BainCapital has chosen them. Though for a regular website they are also ready to offer their FREE services and the website surely will work as fast as possible. And also, your site will be secured and well-optimized like a brand.

Let me know what you thought on this? Which plan you have chosen and how CloudFlare worked with your site.

Making Blogger Responsive Mobile-friendly Template Design | Responsive Web Development

In future more people are going to use a mobile phone as compared to the computers to be online, rather they are getting started now and that's why you are here. Lots of people prefer their mobile phone to read their emails. By consideration of this, lots of bloggers who are willing to secure their position in future, they need have enabled mobile-friendly responsive template of their blog. By one survey carried out 2013-15, it is seen that; more than 52% of your traffic is coming from mobile devices especially in the US, Asia & Africa, so you can now imagine what going to happen in future. Now the question is how to make blogger template responsive and how we start to design responsive blogger templates. And it's one of the tough tasks in making blogger template responsive because it is a great job to manage HTML5 and CSS with @media queries. Learn Responsive Web Development from scratch to build & develop a mobile responsive layout using including flexible layouts, simple CSS3 media queries that produce flexible media to convert your current theme into mobile-friendly responsive look. This advanced tutorial provides you an introduction to building responsive website layouts for any site, but especially for the blogger. This is an ultimate guide you need to follow that explains all about responsive web design in HTML5 which allows you to make blogger template mobile friendly & extremely responsive.
Making Blogger Responsive Mobile-friendly Template | Responsive Web Development
Responsive Web Development
Last time we have seen responsive site checker. Learn more about a responsive website designing and the factors affecting in designing web sites. I knew, every visitor is like our customer and it is very important person for your blog, so then I made this tutorial after lots of troubleshooting with blogger template to help you for building a mobile web site design so that your mobile visitor will not go back and become a regular reader of your blog.

Also, read: 5 Tips To Make Your Blog Load 10x Faster | Blogging Tips

Responsive Web Development - Multiple Screens, ONE DESIGN

Your site design is good for desktop but some of your's, it gets failed when it comes to the small screen. Here is advanced tutorial described for making the responsive blogger HTML template compared to old fixed layout template in which you can not only able to configure the widgets to show an alternate content for the mobile view but also you will able to customize the full mobile friendly template, place AdSense ad units only for mobile template too.

Check: Improve Search Engine Ranking [PageRank] by Generating HTML Meta Tags

Responsive Web Design in HTML5

All new website are now built in HTML5. But by-default the blogger have provided only 7 templates which you can NOT edit as per your requirement or it may cause different look than the one you are on now. Also there are lots of sites can provide free mobile template for your blog, even though they built a nice template for your site, they have some drawbacks like you cannot place AdSense ad widget, they gonna place their banner in your template more over some sites places ads and earn money from your mobile visitors. The main disadvantage of this site according to me is that it makes your site links differently than original, so social sharing state varies.

Building Responsive Website

Flexible or responsive template means one design which is automatically redesign itself according to the screen size. Consider following advantages of this tutorial to build a responsive website;
  • Forget about maintaining separate website for mobile
  • It�s good in case of SEO.
  • Your site links are remained same so it doesn't cause any affect in social sharing statistics.
  • Browser�s user agent doesn't cause effect on the design.


Get started

  1. First go to Template >> Choose Mobile template >> Select Custom.
  2. Save
You can see preview of your site. It may look good for some bloggers. But we are here to make it nice and flexible.

Screen Detection

  1. Go to Template >> Edit HTML
  2. Add following code below <head> tag
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
This Meta viewport is used for detecting the screen size then fed it to CSS for redesign accordingly.

CSS - Designing Web Sites

We need to load CSS property for <body> according to screen-view:
Find <body> and replace it by following code:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Widget Customization

Now we can allow particular widgets to be shown on mobile view. How?
Normally in HTML widget it defined as:
<b:widget id='ID-type' locked='true' title='Widget-Title'/>
Here you just need to add mobile tag to it
<b:widget id='ID-type' locked='true' mobile='yes' title='Widget-Title'/>
This mobile property tag will cause that widget to be shown in mobile view.

Mobile Property Tags Meaning
mobile=�yes� show in mobile-view
mobile='no' don�t show in mobile-view
mobile='only' show in only mobile-view

CSS Customization

Now actual hard work is started now. If you know CSS editing well then you can you following class to design you mobile template.
.mobile #sidebar-wrapper {
Display: none;
}

This class will not allow sidebar to be shown in mobile view.
Likewise described above, you just need to put .mobile class to each part of your old CSS class and define as per your requirement.

Advanced conditional CSS Customization

Learn to make web design according to screen-size conditions.
@media screen and (max-width : 320px) {

#sidebar-wrapper {
Display: none;

}


This class will not allow sidebar to be shown in mobile view if screen-size is less than 320px like for smartphones.
Example: for tablets
@media screen and (max-width : 768px) {

/* CSS for big size screens like tablets */

}


This class will load the CSS you have defined in it when screen size is less than 768px like tablets.

You need to read for full detailed CSS tutorial: How to Build Responsive Blogger Template CSS : Advanced Tutorial

HTML Customization

Now we also make changes in HTML simultaneously. For this you just need to know following mobile condition
<b:if cond="data:blog.isMobile">
<!-- Show this for mobile-vew-->
<b:else/>
<!-- Show this if it�s not mobile screen or for desktop view -->
</b:if>

What you learn

A Responsive template is also important as your current template playing a role for visitors. It makes considerably change in your bounce rate. We really need to be aware and have to grab a good position in the market. For responsive website samples check this page on mobile and desktop, you will get what you are learning and what you need to do with mobile web site design.

What Next

In next tutorial we are actually going to edit complete CSS and HTML of blogger template and will see how to develop it according to the screen-view.
Stay addicted.

5 Tips To Make Your Blog Load 10x Faster | Blogging Tips

You only have a couple of seconds to make your first impression more awesome with your blog. I agreed that you may have great looking design, stunning imagery, and valuable content but if your blog taking too much time to load then people will surely click on 'back' button on their browser. Even probloggers are also asking How to speed up blogger blog, Why is my blog so slow ? These tips make you a fast page load time, that will increase your overall page views, cause lower bounce rate and if it has been linked to monetize then it will improve your sales numbers from affiliate sites. The statistics say people hates to wait for & leave your page if it�s taking more time to load in first few seconds. So it's most essential to load our blogger blog as fast as possible. Instead of asking How to reduce blog load time? or How to force BlogSpot/WordPress blog to maximum load speed; go ahead and learn how to edit blogger HTML & optimize your blogger template with some advanced tips and tricks that will help you not only to make blogger blog load faster but also with better user experience, ultimately that will help to improve PageRank.
Advanced Tips To Make Blogger Blog Load Faster
Advanced Tips To Make Blogger Blog Load Faster
While writing articles, you need to check speed test frequently as because visitors are the soul of any successful blog. In page speed point of view & in order to attract your visitors and call more repeated visits you should create a faster, more efficient and improved user experience on your blog template. Having a blog with efficient & responsive design theme is not only sufficient things to consider but page load time make your readers to stick long time on your site. Your readers will love you for it and so will Google. Google also loves pages that load in no time � not only on desktop, but on mobile, too. Page load time is one of Google�s ranking factors. They even provide developers guidelines to help optimize the performance of your blog.

Also read about pingdom tools; Top 10 Websites To Check Page Load Time & website Performance

How do I make this BLOGGER BLOG load faster than ever before?

Before starting to improve page speed, check your website performance & your current loading time on these following speed anlysis tools:

Make sure to check your speed at least 3 times on same site listed above and note it down on paper. [Suggest to use Varvy - as demonstrated all here with it]. Now go to followings steps and follow as it is written.

Before starting:

These tips are NOT for novice blog beginners nor mid-range blogger designer. It required somewhat HTML knowledge theoretically. This may cause your template fully damaged and can brick your design. So it is requested you to make your blog design backup before starting as in case you want to revert changes. I am repeating, you must backup your blogger template. Also this trick cause problem with default widgets provided by blogger. If you don�t want to use default widgets and highly depends on third party JavaScript or custom JavaScript, then you can use this method. Expert users always likes to tweaks their blog template to make more fast and functional.

Who can use this trick:

  • You should be using custom blogger template.
  • Not using default blogger or G+ comment system.
  • Not heavily depend up on default widgets provided by blogger.

What you will get in return:

  • Visitors will have converted in to reader.
  • Reader will love to read your article longer.
  • Cause lower bounce rate.
  • Higher page views.
  • Google will index your pages as it hates low loading template and so higher page rank for particular page.
  • IE will load your template smoothly as it crashes often in case of .js and external .css files.
  • Mobile page views also going to high as loading takes very few seconds.

Remove default Widgets, JavaScript from Blogger

As mentioned above, go to Varvy site, and check your PageSpeed score. Also check CSS Delivery and JavaScript Usage columns. It will show like this before applying tips.

CSS Delivery:
CSS Delivery

JavaScript Usage:
JavaScript Usage

Here you can see unwanted default .css & .js files that causing problem on page performance & causing load on your blogger template. We will see how to remove those files step by steps.

Remove the unwanted default CSS files

This trick will remove those unwanted blogger CSS files as show in above images. Note that, this trick will cause and change your template layout and all your widgets will show in listed view. Check below image.

Steps to remove default blogger CSS files:

1. Find the tags:
<b:skin><![CDATA[
All your CSS codes
]]></b:skin>
2. Now CUT All your CSS codes' and paste that code as shown below [in notepad file]:
<style type='text/css'>
All your CSS codes
</style>
3. And now place that code in your template as:
<b:skin><![CDATA[
]]></b:skin>

<style type='text/css'>
All your CSS codes
</style>
4. Replace following code
<b:skin><![CDATA[

]]></b:skin>
with:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>
5. Now your new code will looks like below. And make sure it should be there before </head> tag.
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>
All your CSS codes
</style>
Note: If your template already have:  &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*  then no need to do above step no.5.

Now go again and check PageSpeed score on same site. And also check your layout. It should look alike this:
Advanced Tips To Make Blogger Blog Load Faster

Its just for your use only.. We can scarifies this layout design for getting higher pagespeed score.

Remove Default Blogger widgets.js

If you had seen in above trick default CSS files has been removed but .js files are still present there in the template.

1. Find:  </body> 

And replace it with following code:
&lt;!--</body>--&gt; &lt;/body&gt;
2. That�s all.

Now check again with same site and check your default .js scripts has been gone with higher PageSpeed score.

Result After Applying Tips:
CSS Delivery:
Advanced Tips To Make Blogger Blog Load Faster2

JavaScript Usage:
Advanced Tips To Make Blogger Blog Load Faster


These are best ways to reduce blog load time and push blogger default template to load faster. Let us know what performance you getting on your template via comment section below.


#SpeedBlogging #PageSpeed #Loadtime #Blogger #BloggingTips #HowTo #HowtoBlog #Tips #Tricks

Top 10 Websites To Check Page Load Time & Performance

Slow and steady page load times will not make any sense in order to deliver the best website experience to your readers. In fact, according to the study, almost 55% of users expect a website to load in just 2 seconds or less so you have only a few seconds to make your first impressions more impressive with your website. And if your website taking too much time then your best-looking design or valuable content will not make sense to the readers and they will move to next website. So you need to keep an eye on website loading time, called as website performance monitoring. Those pingdom tools are much popular in the market but there are lots of sites and are used to monitor website performance. So no more need to ask to check my website performance and if you are searching for how to check website loading speed, free website loading time optimization, websites to check loading time online or page loading time calculator or website speed test then you are on right page. Learn how to check page loading time, how to do website performance testing and then blog optimization for better SEO. Learn how to monitor website performance.
Check Website Speed & Performance Optimization
Check Website Speed & Performance Optimization

Last time we have seen, How to Lazy Load Facebook Like Box To Speed up Page Loading [JavaScript], so that your mobile page views goes higher as page loading takes very few seconds. And continuing this PAGE LOADING category we really have to know the websites to check page speed and those will also provide some tips about website performance optimization. And I am sure this online website tester sites will helps you to archive your goals about lower bounce rate, higher page views and conversion of visitors to regular readers by improved user intraction.

Also read: Fully Optimized CSS3 Widget To Improve Page Loading

Top 10 Websites to Check Website Speed & Performance Optimization

For website performance monitoring, you need to keep in mind that, with better SEO and for improved user interface, like you site content it's much more essential to load your blog as fast as possible. In my previous work, I have had shared 5 Advanced Tips For Making Blogger Blog To Load Faster. Moreover, if you have read my new tutorial on How To Setup Free CloudFlare CDN For Your Blogger Blog To Boost Website Performance then you will get known how to speed up page loading time. Google love fast loading website and surely it will help you to improve PageRank.

I recommend you to read: Remove plusone.js JavaScript From HTML To Load Blog Faster

Check your website performance & your current loading time on these following speed analysis tools

Website speed improves ranking [PageRank] in search engines like Google and faster pages result in higher customer engagement, retention, and conversion.

1. Google�s PageSpeed Insights:
This is on top of website performance testing tools. This provides detailed reports and simple solutions.
Check website speed Google: https://developers.google.com/speed/pagespeed/insights

2. Varvy:
This is new but most effective website performance analysis tools. I always used to use it on the regular basis.
https://varvy.com/pagespeed/

3. GTMetrix:
This is one of the best websitetest tool to measure web page loading time. And it will help you to find any error who affect or block page to load.
http://gtmetrix.com/

4. Pingdom:
These pingdom tools are used to check loading speed of websites, search bottlenecks and its report will help to resolve any page loading errors.
http://tools.pingdom.com/fpt/

5. Webpagetest:
Like pingdom tools, this is also best website performance testing and monitoring tool. Check my website performance with this online website tester site.
http://www.webpagetest.org/

6. Uptrends Tools
This speedy, high-tech, website performance monitoring robots will check everything about your site and provide an advanced report.
https://www.uptrends.com/tools/website-speed-test

7. MonitisTest your website's loading speed and check website performance. It's Website Speed Test Results are very clear and detailed report will help to find bottlenecks in waterfall.
http://www.monitis.com/pageload/

8. Dotcom-tools
This is one of the interesting website performance analysis tools that will allow you to test your site with difrrent browsers.
https://www.dotcom-tools.com/website-speed-test.aspx

9. Websiteoptimization ServicesThis is new web page analyzer service.
http://www.websiteoptimization.com/services/analyze/

10. Pagescoring
Last but not least, it's an online website performance testing, monitoring & analysis tool that provide webmasters with valuable information about the loading speed of their blog or website.
http://www.pagescoring.com/website-speed-test/

[JavaScript] Lazy Load Facebook Like Box To Speed up Page Loading

How to load Facebook like button on the scroll after page load using Jquery? Make Facebook like box asynchronous to loaded automatically on the scroll. Learn how to lazy load script files to improve page speed. Here on this site, we also use this method to asynchronous lazy-load other types of scripts. Stop searching to defer lazy loading of Facebook widgets to speed up page loading. Facebook like box always downloads extra data when the user visits each time your site which causes page loading time slow. The Facebook developer button with like Box is a special version of the LIKE Button designed for Facebook Pages. Showing "Like us on Facebook page" is easier but it cost much in terms of page loading. This method uses to defer both JavaScript + HTML Facebook button and follows all the rules by Facebook page developer. Learn how to add Facebook to website and how to defer the loading of Facebook like box by lazy load FB JavaScript for making page speed much faster.
Lazy Load Facebook Like Box To Speed up Page Loading
Lazy Load Facebook Like Box To Speed up Page Loading
In the category of Facebook, last time we have seen how to see locked profile picture hack, and today we are going to focus on page loading. We are going to use the better technique by lazy load script to defer loading of any widget. You can ignore the data downloaded by this widget but you need to concentrate its loading-time because it directly affects to your site loading-time.

Also read; 5 Advanced Tips For Making Blogger Blog To Load Faster

Defer Facebook Developer Button

For better page performance this is an essential tip and as the page content is more important than widgets, it is much better to make a delay loading of these widgets so that it will load only when the whole page gets loaded.

Lazy Load Facebook Like Box JavaScript

Add following code in your HTML widget. You just need to replace blue colored text as per your content.

<!-- lazy loading of Facebook widget -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#fbHolder').append('<div id="fb-root"></div>');
    $('#fbHolder').append('<fb:like-box href="http://www.facebook.com/ID" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
    jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
        FB.init({status: true, cookie: true, xfbml: true});
    });
});
//]]>
</script>
<!-- lazy loading of Facebook widget -->
<div id="fbHolder">
<!-- put here your old Facebook widget box code -->
</div>
A demo is working here on this site, or you can check its performance on Page Speed and Yslow, significantly you will see the changes in the report.

Kategori

Kategori