0 Members and 1 Guest are viewing this topic.


Briggz5d

I'll just go right ahead and admit to the fact that I've been obsessing over easy ways to improve my Website page speed a little bit too much and spending time with the Google Developer Page Speed Insights tool

The Insight tool tests and displays a percentage result of your website speed with suggestions categorized by priority(High, Medium and Low) on how best to improve it.
Here are some High Priority suggestions made for Ngbuzz.com:
  • Leverage browsing Cache
  • Defer parsing of JavaScript
  • Combine images into CSS Sprite
  • Enable Compression

So far, I've only successfully carried out of one of the high priority suggestions. I deferred JavaScript load time using DOM event script (whatever that means). This increased Ngbuzz Page Speed to 89%

I've explained how to defer JavaScript for Blogger hosted users, but since i use SMF, thought I'd do it again because the Markup languages used for both CMS are different.

What Java Scripts to Defer In SMF:
Your page speed is determined by the total time it takes to load all content (Image,text,Styling, Scripts) - Deferring JavaScript simply means: Allowing Only Important items to load first, then the heavy scripts can load.
Example of Scrips that are not part or your website are the Various social Plugins and share buttons we add.

When you visit Ngbuzz.com pages.. Notice how the page completely loads - and is followed by the side bar Facebook, Twitter, Google plus button and share buttons at the bottom. (I only deferred Social Plugins)

Your Google Adsense adverts also has JavaScript but these should not be deferred.
If you have SMF share mods installed, this will not work for you because the mod add there own JS scripts to connect Fb, twitter etc.

Ok - Cut a Long story Short, I'll just share the codes and let you get on with it.

How to Defer Parsing of JavaScript in SMF to improve page speed.
NOTE: You need to have access to Cpanel for this to work
    Part 1Create a New File in Cpanel File manager (www/public directory) and Paste the following Social networks JS scripts in side.

    [/list]
    Code: [Select]
    //for facebook
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=[color=red]YOUR-APP-ID-HERE[/color]";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    //For Twitter
    var element = document.createElement("script");
    element.src = "//platform.twitter.com/widgets.js";
    document.body.appendChild(element);

    //for Google plus
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = '[url=https://apis.google.com/js/plusone.js';]https://apis.google.com/js/plusone.js';[/url]
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
     
      //for stumble
    (function() {
        var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
        li.src = ('https:' == document.location.protocol ? 'https:' : 'http:')   '//platform.stumbleupon.com/1/widgets.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
      })();

    //Linked in
    var element = document.createElement("script");
    element.src = "//platform.linkedin.com/in.js";
    document.body.appendChild(element);

    Explanation: Social Plugin codes usually comes in TWO parts..
    1. The Javascript that connects to the social site
    2. The Button / that renders on the page
    The code you see above is the java scripts parts of Facebook, twitter, stumble, Linked in etc they should be removed from the page template to avoid Duplicates.
    The second part of the code (the buttons) will remain on the template where ever you want it rendered.

    Please Enter your Facebook APP ID in Red above
    Save the file as defercode.js
    NOTE: You may also decide to Create this JS file on your desktop using Notepad    and later upload to your Cpanel www Folder via FTP


    Ngbuzz forum Page speed improvement

    Now for the second part:
    It's best to paste the second code below already existing Google ad codes (ad mod, Ad management), or using a Simple Portal HTML box. - If you don't have any of the mods mentioned above, then a manual Template edit would be required.

    Make a Backup of Your SMF template (very important)
    Then, Paste the code below in your SMF Template above </body> tag (SMF template is at >>Themes>>templatename>>index.template.php)

    Code: [Select]
    <script type="text/javascript">
     function downloadJSAtOnload() {
     var element = document.createElement("script");
     element.src = "[color=red]defercode.js[/color]";
     document.body.appendChild(element);
     }

     if (window.addEventListener)
     window.addEventListener("load", downloadJSAtOnload, false);
     else if (window.attachEvent)
     window.attachEvent("onload", downloadJSAtOnload);
     else window.onload = downloadJSAtOnload;

    </script>
      Take note of the code in Red: The file name of the JS script created in Step one.
      I would recommend using
    http://www.- yoursite -name .com/defercode.js in place of the default defercode.js

    Use the Insight tool to see improvements in site speed %.
    Got questions? Ask -
    If you've done the other site improvement recommendations, please share.. i wanna get to 100% speed :p[/list]

    « Last Edit: October 20, 2012, 02:26 PM by Briggz5d »

     

    Inspecting Page elements In 3D with Mozilla Firefox

    Started by Briggz5d

    Replies: 0
    Views: 2948
    Last post December 28, 2012, 12:36 PM
    by Briggz5d
    Which SMF Mode can i use to create a Custom Home page?

    Started by dada

    Replies: 2
    Views: 7985
    Last post August 31, 2016, 07:20 AM
    by Foskaay
    How to check Your page Rank on Google - Ngbuzz Page ranking Checker tool

    Started by Briggz5d

    Replies: 0
    Views: 2396
    Last post October 04, 2012, 09:24 AM
    by Briggz5d
    How to Defer Parsing of JavaScript to Increase Website speed.

    Started by Briggz5d

    Replies: 0
    Views: 4979
    Last post September 26, 2012, 05:15 AM
    by Briggz5d