admin管理员组文章数量:1025457
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=".css" rel="stylesheet" type="text/css" />
<link href=":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=".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>Wele</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="Wele 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;">Wele</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>Wele</h1>
</div>
<p class="lead">Weling!!</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/wele.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="" class="social-icon si-small si-borderless si-facebook">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="/" 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">·</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>
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./earlyaccess/jejugothic.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis./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./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>Wele</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="Wele 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;">Wele</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>Wele</h1>
</div>
<p class="lead">Weling!!</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/wele.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." 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./" 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">·</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>
Share
Improve this question
edited Apr 22, 2015 at 7:29
Roamer-1888
19.3k5 gold badges35 silver badges45 bronze badges
asked Apr 21, 2015 at 4:53
godlovesjoegodlovesjoe
431 silver badge3 bronze badges
6
- <script type="text/javascript" src="js/jquery.js" defer></script> <script type="text/javascript" src="js/plugins.js" defer></script> // i tried this code – godlovesjoe Commented Apr 21, 2015 at 4:54
- Not all scripts should and can be deferred. – adeneo Commented Apr 21, 2015 at 4:54
- so there is no way to reduce my page by editing my external scripts? – godlovesjoe Commented Apr 21, 2015 at 4:55
- Reduce the page by editing external scripts, sure, edit away. For scripts needed during initial parsing of the page, they shouldn't be defered. – adeneo Commented Apr 21, 2015 at 5:00
- You can hide the video initially and then once js loads and is ready, show it. – colecmc Commented Apr 21, 2015 at 5:04
1 Answer
Reset to default 7The 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:
You should pile 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://csspressor/.
Google fonts. Do you really need all those family fonts / weights?
http://fonts.googleapis./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.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./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 piler with dependency control. I remend RequireJS even though the setup is kind of plex. There are tools out there that can help with the setup (Grunt / Gulp).
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=".css" rel="stylesheet" type="text/css" />
<link href=":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=".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>Wele</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="Wele 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;">Wele</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>Wele</h1>
</div>
<p class="lead">Weling!!</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/wele.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="" class="social-icon si-small si-borderless si-facebook">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="/" 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">·</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>
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./earlyaccess/jejugothic.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis./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./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>Wele</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="Wele 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;">Wele</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>Wele</h1>
</div>
<p class="lead">Weling!!</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/wele.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." 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./" 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">·</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>
Share
Improve this question
edited Apr 22, 2015 at 7:29
Roamer-1888
19.3k5 gold badges35 silver badges45 bronze badges
asked Apr 21, 2015 at 4:53
godlovesjoegodlovesjoe
431 silver badge3 bronze badges
6
- <script type="text/javascript" src="js/jquery.js" defer></script> <script type="text/javascript" src="js/plugins.js" defer></script> // i tried this code – godlovesjoe Commented Apr 21, 2015 at 4:54
- Not all scripts should and can be deferred. – adeneo Commented Apr 21, 2015 at 4:54
- so there is no way to reduce my page by editing my external scripts? – godlovesjoe Commented Apr 21, 2015 at 4:55
- Reduce the page by editing external scripts, sure, edit away. For scripts needed during initial parsing of the page, they shouldn't be defered. – adeneo Commented Apr 21, 2015 at 5:00
- You can hide the video initially and then once js loads and is ready, show it. – colecmc Commented Apr 21, 2015 at 5:04
1 Answer
Reset to default 7The 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:
You should pile 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://csspressor/.
Google fonts. Do you really need all those family fonts / weights?
http://fonts.googleapis./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.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./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 piler with dependency control. I remend RequireJS even though the setup is kind of plex. There are tools out there that can help with the setup (Grunt / Gulp).
本文标签: javascriptDefer script for pagespeedStack Overflow
版权声明:本文标题:javascript - Defer script for pagespeed - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745631230a2160176.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论