Defer script for pages
I am trying to reduce the number of pages, so I tried deferring attribution in both external Javascripts. However, when I use deferral attribution, my video clip on my main website disappears.
Please let me know how to fix 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-address@hotmail.com <span class="middot">·</span> <i class="icon-phone-sign"></i> (+1)604-657-3937<span class="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>
+3
source to share
1 answer
The way defer works is that it loads asynchronously. It should only be used for JS scripts that are independent of each other.
i.e. to download jquery.themepunch.tools.min.js
you need to load jquery, therefore, jquery
can not be postponed. You var apiRevoSlider = tpj('.tp-banner').show().revolution
need to download the file to call include/rs-plugin/js/jquery.themepunch.revolution.min.js
, so you cannot postpone it.
To increase the page speed on your site, I suggest you the following:
-
You should compile all CSS files into one file instead of 10 different files. You can use Grunt or Gulp and they'll do the job for you. Alternatively, you can use the tool online, for example: https://csscompressor.net/ .
-
Google fonts. Do you really need all these 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 to remove all the ones you really don't need. -
All 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 the following:
<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 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 might keep the defer attribute)
<script type="text/javascript" src="js/functions.js" defer></script>
Only that your page speed will be very fast. The problem with having JS at the top is that it blocks the page from rendering until it finishes loading.
If you want to continue optimizing the page, it gets tricky. You will need to use a JS compiler with dependency control. I recommend RequireJS , although the setup is quite complex. There are tools that can help with customization ( Grunt / Gulp ).
+3
source to share