CODEWITHSUNDEEP
javascript
godlovesjoe
godlovesjoe

Reputation: 43

Defer script for pagespeed

I'm trying to reduce pagespeed, so have tried 'defer attribution' in both external Javascripts. However, when I use defer attribution, my video clip, for my main web-site, disappears.

Please let me know how to solve this problem.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/earlyaccess/jejugothic.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
<script type="text/javascript"  src="include/rs-plugin/js/jquery.themepunch.tools.min.js" defer></script>
<script type="text/javascript"  src="include/rs-plugin/js/jquery.themepunch.revolution.min.js" defer></script>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="include/rs-plugin/css/settings.css" media="screen"/>

<!-- Document Title
============================================= -->
<title>title</title>

<style>

    .revo-slider-emphasis-text {
        font-size: 64px;
        font-weight: 700;
        letter-spacing: -1px;
        font-family: 'Raleway', sans-serif;
        padding: 15px 20px;
        border-top: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
    }

    .revo-slider-desc-text {
        font-size: 20px;
        font-family: 'Lato', sans-serif;
        width: 650px;
        text-align: center;
        line-height: 1.5;
    }

    .revo-slider-caps-text {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 3px;
        font-family: 'Raleway', sans-serif;
    }

 </style>

</head>

<body class="stretched">

<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">

    <!-- Header
    ============================================= -->
    <header id="header" class="transparent-header full-header" data-sticky-class="not-dark">


        <div id="header-wrap">

            <div class="container clearfix">

                <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                <!-- Logo
                ============================================= -->
                <div id="logo">
                    <a href="index.html" class="standard-logo" data-dark-logo="images/Logo.png"><img src="images/Logo.png" alt="Logo"></a>
                    <a href="index.html" class="retina-logo" data-dark-logo="images/Logo2.png"><img src="images/Logo2.png" alt="Logo"></a>
                </div><!-- #logo end -->

                <!-- Primary Navigation
                ============================================= -->
                <nav id="primary-menu">

                    <ul>
                        <li class="current"><a href="index.html"><div>HOME</div></a></li>    

                        <li><a href="home-greeting.html"><div>Welcome</div></a>
                            <ul>
                                <li><a href="home-greeting.html"><div>Greeting</div></a></li>                                         
                                <li><a href="home-about.html"><div>About us</div></a></li>                                     
                                <li><a href="home-staff.html"><div>Staff</div></a></li>
                                <li><a href="feature-contact.html"><div>Contact Us</div></a></li>
                                <li><a href="home-news.html"><div>News</div></a></li>                                     
                            </ul>
                        </li>

                        <li><a href="timeAndPlace.html"><div>Service</div></a>
                            <ul>
                                <li><a href="timeAndPlace.html"><div>Time</div></a></li>
                                <li><a href="galilee-calendar.html"><div>Calendar</div></a></li>
                            </ul>
                        </li>


                        <li><a href="media-video.html"><div>Media</div></a>
                            <ul>
                                <li><a href="media-video.html"><div><i class="icon-play"></i>Video</div></a></li>
                                <li><a href="media-galleries.html"><div><i class="icon-picture"></i>Gallery</div></a></li>
                            </ul>



                        </li>
                        <li><a href="ministries-prayer.html"><div>Ministries</div></a>
                            <ul>
                                <li><a href="ministries-prayer.html"><div>Pray</div></a></li>
                                <li><a href="ministries-local-missions.html"><div>Local Mission</div></a></li>
                                <li><a href="ministries-global-missions.html"><div>Global Mission</div></a></li>
                                <li><a href="ministries-outdoors.html"><div>Outdoors</div></a></li>
                            </ul>

                        </li>

                    </ul>


                </nav><!-- #primary-menu end -->

            </div>

        </div>

    </header><!-- #header end -->

    <section id="slider" class="slider-parallax revoslider-wrap clearfix">

        <!--
        #################################
            - THEMEPUNCH BANNER -
        #################################
        -->
        <div class="tp-banner-container">
            <div class="tp-banner" >
                <ul>    <!-- SLIDE  -->
                    <li class="dark" data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/slider/rev/main/s1-thumb.jpg"  data-saveperformance="off"  data-title="Welcome to Galilee">
                        <!-- MAIN IMAGE -->

                        <!-- LAYERS -->

                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption tp-fade fadeout fullscreenvideo"
                            data-x="0"
                            data-y="0"
                            data-speed="1000"
                            data-start="1100"
                            data-easing="Power4.easeOut"
                            data-elementdelay="0.01"
                            data-endelementdelay="0.1"
                            data-endspeed="1500"
                            data-endeasing="Power4.easeIn"
                            data-autoplay="true"
                            data-autoplayonlyfirsttime="false"
                            data-nextslideatend="true" 
                            data-volume="mute" data-forceCover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 2;"><video class="" preload="none" width="100%" height="100%">
                        <source src='images/videos/greeting.mp4' type='video/mp4' /></video>

                        </div>

                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption customin ltl tp-resizeme revo-slider-caps-text uppercase"
                        data-x="350"
                        data-y="280"
                        data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                        data-speed="800"
                        data-start="1000"
                        data-easing="easeOutQuad"
                        data-splitin="none"
                        data-splitout="none"
                        data-elementdelay="0.01"
                        data-endelementdelay="0.1"
                        data-endspeed="1000"
                        data-endeasing="Power4.easeIn" style="z-index: 3;">This is</div>

                        <div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
                        data-x="270"
                        data-y="300"
                        data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                        data-speed="800"
                        data-start="1200"
                        data-easing="easeOutQuad"
                        data-splitin="none"
                        data-splitout="none"
                        data-elementdelay="0.01"
                        data-endelementdelay="0.1"
                        data-endspeed="1000"
                        data-endeasing="Power4.easeIn" style="z-index: 3;">Welcome</div>                                                
                    </li>
                </ul>

            </div>

        </div>

        <script type="text/javascript">

            var tpj=jQuery;
            tpj.noConflict();

            tpj(document).ready(function() {

                var apiRevoSlider = tpj('.tp-banner').show().revolution(
                {
                    dottedOverlay:"none",
                    delay:9000,
                    startwidth:1140,
                    startheight:700,
                    hideThumbs:200,

                    thumbWidth:100,
                    thumbHeight:50,
                    thumbAmount:3,

                    navigationType:"none",
                    navigationArrows:"solo",
                    navigationStyle:"preview4",

                    touchenabled:"on",
                    onHoverStop:"on",

                    swipe_velocity: 0.7,
                    swipe_min_touches: 1,
                    swipe_max_touches: 1,
                    drag_block_vertical: false,


                    parallax:"mouse",
                    parallaxBgFreeze:"on",
                    parallaxLevels:[8,7,6,5,4,3,2,1],
                    parallaxDisableOnMobile:"on",


                    keyboardNavigation:"on",

                    navigationHAlign:"center",
                    navigationVAlign:"bottom",
                    navigationHOffset:0,
                    navigationVOffset:20,

                    soloArrowLeftHalign:"left",
                    soloArrowLeftValign:"center",
                    soloArrowLeftHOffset:20,
                    soloArrowLeftVOffset:0,

                    soloArrowRightHalign:"right",
                    soloArrowRightValign:"center",
                    soloArrowRightHOffset:20,
                    soloArrowRightVOffset:0,

                    shadow:0,
                    fullWidth:"off",
                    fullScreen:"on",

                    spinner:"spinner0",

                    stopLoop:"off",
                    stopAfterLoops:-1,
                    stopAtSlide:-1,

                    shuffle:"off",


                    forceFullWidth:"off",
                    fullScreenAlignForce:"off",
                    minFullScreenHeight:"400",

                    hideThumbsOnMobile:"off",
                    hideNavDelayOnMobile:1500,
                    hideBulletsOnMobile:"off",
                    hideArrowsOnMobile:"off",
                    hideThumbsUnderResolution:0,

                    hideSliderAtLimit:0,
                    hideCaptionAtLimit:0,
                    hideAllCaptionAtLilmit:0,
                    startWithSlide:0,
                    fullScreenOffsetContainer: ".header"
                });

                apiRevoSlider.bind("revolution.slide.onchange",function (e,data) {
                    if( $(window).width() > 992 ) {
                        if( $('#slider ul > li').eq(data.slideIndex-1).hasClass('dark') ){
                            $('#header.transparent-header:not(.sticky-header,.semi-transparent)').addClass('dark');
                            $('#header.transparent-header.sticky-header,#header.transparent-header.semi-transparent.sticky-header').removeClass('dark');
                            $('#header-wrap').removeClass('not-dark');
                        } else {
                            if( $('body').hasClass('dark') ) {
                                $('#header.transparent-header:not(.semi-transparent)').removeClass('dark');
                                $('#header.transparent-header:not(.sticky-header,.semi-transparent)').find('#header-wrap').addClass('not-dark');
                            } else {
                                $('#header.transparent-header:not(.semi-transparent)').removeClass('dark');
                                $('#header-wrap').removeClass('not-dark');
                            }
                        }
                        SEMICOLON.header.darkLogo();
                    }
                });

            }); //ready

        </script>


        <!-- END REVOLUTION SLIDER -->

    </section>

    <!-- Content
    ============================================= -->
    <section id="content">

        <div class="content-wrap">

            <div class="container clearfix">
                <div class="row clearfix">

                    <div class="col-lg-5">
                        <div class="heading-block topmargin">
                            <h1>Welcome</h1>
                        </div>
                        <p class="lead">Welcoming!!</p>
                    </div>

                    <div class="col-lg-7">

                        <div style="position: relative; margin-top: 60px;" class="ohidden" data-height-lg="426" data-height-md="567" data-height-sm="470" data-height-xs="287" data-height-xxs="183">
                            <img src="images/portfolio/welcome.jpg" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="100" alt="Chrome">

                        </div>

                    </div>

                </div>
            </div>

            <script type="text/javascript">

                jQuery(window).load(function(){

                    var $container = $('#portfolio');

                    $container.isotope({
                        transitionDuration: '0.65s',
                        masonry: {
                            columnWidth: $container.find('.portfolio-item:not(.wide)')[0]
                        }
                    });

                    $('#page-menu a').click(function(){
                        $('#page-menu li').removeClass('current');
                        $(this).parent('li').addClass('current');
                        var selector = $(this).attr('data-filter');
                        $container.isotope({ filter: selector });
                        return false;
                    });

                    $(window).resize(function() {
                        $container.isotope('layout');
                    });

                });

            </script>

        </div>

    </section><!-- #content end -->



        <!-- Copyrights
        ============================================= -->
        <div id="copyrights">

            <div class="container clearfix">

                <div class="col_half">
                    ⓒ 2014 godlovesjoe<br>

                </div>

                <div class="col_half col_last tright">
                    <div class="fright clearfix">
                        <a href="https://www.facebook.com" class="social-icon si-small si-borderless si-facebook">
                            <i class="icon-facebook"></i>
                            <i class="icon-facebook"></i>
                        </a>

                        <a href="http://www.webpage.com/" class="social-icon si-small si-borderless si-globe">
                            <i class="icon-globe"></i>
                            <i class="icon-globe"></i>
                        </a>
                    </div>

                    <div class="clear"></div>

                    <i class="icon-envelope2"></i> [email protected] <span class="middot">&middot;</span> <i class="icon-phone-sign"></i> (+1)604-657-3937<span class="middot">&middot;</span> 
                </div>

            </div>

        </div><!-- #copyrights end -->

    </footer><!-- #footer end -->

</div><!-- #wrapper end -->

<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>

<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js" defer></script>

</body>
</html>

Upvotes: 3

Views: 2883

Answers (1)

mayrop
mayrop

Reputation: 701

The way defer works is that it loads asynchronously. It should only be used for JS scripts that do not depend on each other.

i.e. for loading jquery.themepunch.tools.min.js, you need to have jquery loaded, so jquery cannot be deferred. For calling var apiRevoSlider = tpj('.tp-banner').show().revolution you need to have the include/rs-plugin/js/jquery.themepunch.revolution.min.js file loaded, so you cannot defer it.

In order to increase the page speed of your site I suggest you the following:

  1. You should compile all the CSS files into one file instead of having 10 different files. You can Grunt or Gulp and they'll do the work for you. Also, you can use a tool online like: https://csscompressor.net/.

  2. Google fonts. Do you really need all those family fonts / weights? http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic. Try removing all the ones you don’t really need.

  3. All the JS should be at the bottom of the page. Move the following scripts to the very bottom of the page (right before the body close tag).

Try this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" ></script>window.jQuery || document.write('<script src="/js/jquery.js"><\/script>')</script>

<script type="text/javascript" src="js/plugins.js"></script>

<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.tools.min.js"></script>

<script type="text/javascript" src="include/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

After that, you can have the inline scripts:

<script>
    var tpj=jQuery;
    tpj.noConflict();
    ...

    jQuery(window).load(function() {
</script>

<script type="text/javascript">

    jQuery(window).load(function() {
        var $container = $('#portfolio');

        $container.isotope({
            transitionDuration: '0.65s',
    ....
</script>

This should be the last script (this can keep the defer attribute) <script type="text/javascript" src="js/functions.js" defer></script>

With only that your page speed will increase a lot. The problem with having the JS at the head, is that it will block the rendering of the page until it finishes loading.

If you want to keep optimizing the page, it will get tricker. You will need to use a JS compiler with dependency control. I recommend RequireJS even though the setup is kind of complex. There are tools out there that can help with the setup (Grunt / Gulp).

Upvotes: 7

Related Questions