Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    30
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Question YouTube video background is loading really slowly - how to speed it up?

    Hey there guys,
    I hope that this post finds you all in excellent spirits, and that you are having a wonderful start to October.

    We have an issue that we are hoping you can help us resolve: on one of our landing pages, we have a header with a background video. This video is hosted at YouTube to ensure fast loading.

    You can see the page here:

    https://highergradesfaster.com/

    Our problem is this: the background video is taking way too long to load. We ran some tests at Pingdom, and it is taking 3-5 seconds for the video to load – and in the absence of the video, there is a blank screen.

    We would like to accomplish one of the following:

    1. Have some kind of preloader image to replace the blank screen.

    2. Get the browser to load the first frame of the video immediately (the rest can wait).

    Option 2 would be the most preferable.

    Does anyone have any ideas as to how to accomplish this?

    FYI, the existing HTML header code is as follows:

    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    
    <style media="screen">
    html {
        box-sizing: border-box;
     }
    
    *, *::before, *::after {
        box-sizing: inherit;
     }
    
    body, html {
        height: 100%;
        margin: 0;
        font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #header {
        display: table;
        width:100%;
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
     }
    
    #header > div {
        display: table-cell;
        padding: 1em;
        vertical-align: middle;
        color: #fff;
        text-align: center;
     }
    
    h1 {
        font-family: HelveticaNeue-CondensedBold, Helvetica Neue Bold, TradeGothic LT, Arial, GuardianAgateSans1-Bold, sans-serif;
        color: white;
        margin-top: 120px;
        text-align: center;
    }
    
    h2 {
        font: 22px HelveticaNeue-CondensedBold, Franklin Gothic Demi, Helvetica Neue Bold, GuardianAgateSans1-Bold, TabletGothic, TradeGothic LT, ITCOfficinaSans LT Book, Helvetica, Arial, Franklin Gothic Medium, Tablet Gothic, Eurostile, sans-serif;
        color: white;
        text-align: center;
    }
    
    h3 {
        font: 16px Franklin Gothic Medium, Eurostile, ITCOfficinaSans LT Book, Helvetica, Arial, Tablet Gothic, sans-serif;
        color: white;
        text-align: center;
    }
    
    h4 {
        font: 18px HelveticaNeue-CondensedBold, Franklin Gothic Demi, TradeGothic LT, Arial, GuardianAgateSans1-Bold, Helvetica Neue, sans-serif;
        color: white;
        text-align: center;
    }
    
    #header button {
        background: rgba(255, 51, 102, 0.9);
      opacity: 50%;
      width: 75%;
      border: 1px solid;
      color: white;
      font-family: HelveticaNeue-CondensedBold, Roboto, Akkurat-Bold, Franklin Gothic Medium, GuardianAgateSans1-Bold, HelveticaNeue-Bold,TradeGothic LT, Arial, sans-serif;
      padding: 10px 0px;
      text-align: center;
      display: inline-block;
      border-radius: 10px;
      font-size: 26px;
     }
    .button:hover{
        background: rgba(10, 191, 83, 1);
        color:white;
    }
    #header button:hover,
    #header button:active {
        background-color: rgba(10, 191, 83, 1);
        color: #fff;
     }
    
    #content {
        padding: 1em;
     }
     
     html {
      scroll-behavior: smooth;
    }
    
    @bg: #2d2d37; // Dark blue
    @primary: #fd6b21; // Orange
    
    body { background: @bg;}
    a { color: #fff; text-decoration: none; }
    
    .arrow {
      text-align: center;
      margin: 4% 0;
      color: #ffffff
      scroll-behavior: smooth;
    }
    .bounce {
      -moz-animation: bounce 2s infinite;
      -webkit-animation: bounce 2s infinite;
      animation: bounce 2s infinite;
    }
    
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-3px);
      }
      60% {
        transform: translateY(-1px);
      }
    }
    /* mouse over link */
    a:hover {
      color: #e1e1e1;
    }
    
    /* selected link */
    a:active {
      color: #c8c8c8;
    }
    </style>
    </head>
    <body> 
     <div id="header">
      <div>
        <h1>HIGHER GRADES FASTER!™ <br>DRAMATICALLY IMPROVES ACADEMIC PERFORMANCE.</h1>
        		<br><br><br><br><br><br><br><br><br><br>
        		<div class="arrow bounce">
        <a href="https://mediolana.myshopify.com/products/higher-grades-faster-%E2%84%A2"><button>Order Higher Grades Faster!™* today!</button></a>
      </div>
    <h2><span style="background-color: rgba(75,146,219,0.9)">*Higher Grades Faster!™ is the world's only video-based grade augmentation course.
    <br> Get your teenager to the top of the class and into the college of their dreams!
    		</span></h2>
    	<br>
    	<h4><span style="background-color: rgba(255,66,151,0.5)">
    	  <a href="https://highergradesfaster.com/pages/top-of-the-class#testimonials">•TESTIMONIALS </a></span> 
    	  <span style="background-color: rgba(102,204,102,0.5)">
    	  <a href="https://highergradesfaster.com/pages/top-of-the-class#TVSpot">•TV SPOT </a></span>
    	  <span style="background-color: rgba(245,83,71,0.5)">
    	  <a href="https://highergradesfaster.com/pages/top-of-the-class#executivesummary">•EXECUTIVE SUMMARY </a></span>
    	  <span style="background-color: rgba(51,153,255,0.5)">
    	  <a href="https://highergradesfaster.com/pages/top-of-the-class#longread">•9 (OR 2,344,000) REASONS WHY YOUR CHILD NEEDS HIGHER GRADES FASTER!™ </a></span>
    	  <span style="background-color: rgba(240,115,31,0.5)">
    	  <a href="https://highergradesfaster.com/pages/top-of-the-class#brandwall">•BRAND WALL&nbsp;</a></span>
    	  </h4>
    	
    	
      <br><h3><span style="background-color: rgba(102,102,102,0.3)">➠Free global shipping with DHL Express during the Secret Launch™  period. 
      <a href="https://highergradesfaster.com/pages/mediolana-internet-store-payment-shipping-returns-policy#Shipping">Terms and conditions </a>apply. 
      
    		</span></h3>
    </div> 
     </div>
    </body>
    </html>
    Any guidance, tips and/or pointers are, as ever, sincerely appreciated.

    With very best wishes,

    Alex Maxim

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,188
    Thanks
    38
    Thanked 1,091 Times in 1,087 Posts
    Some things to follow for faster loading. Only meta tags and CSS in the header. Load your javascript after the page(HTML) loads. That means calls to external JS files and your internal JS should go after the page code has exicuted but before the </baody> tag.

    Do not put <style> sections in the body and only ONE <body> tag:
    Code:
    <body id="higher-grades-faster-™-can-make-your-child-age-group-14-21-smarter" class="template-index" >
      <script>
        window.__shgProducts = window.__shgProducts || {};
      </script>
    <div class="shg-clearfix"></div>
    <body>
    <!-- Created with Shogun. -->
    <div class="shogun-root" data-shogun-id="5d90b1c4b819c40050187644" data-shogun-site-id="991f95bc-5f2d-4f39-b512-e1d141d1d721" data-shogun-page-id="5d90b1c4b819c40050187644" data-shogun-page-version-id="5d95e9c751dad2005196af88" data-shogun-platform-type="shopify" data-shogun-variant-id="5d95e9c751dad2005196afc6" data-region="main">
      <link rel="stylesheet" type="text/css" href="https://cdn.getshogun.com/5d95e9c751dad2005196afc6.css">
    <script type="text/javascript" src="https://lib.getshogun.com/lazysizes/2.0.0/shogun-lazysizes.js" async></script>
    <div class="shg-fw"><div class="shg-box-vertical-align-wrapper">
        <div class="shg-box shg-c    " id="s-fa277926-a999-420b-a865-8b4f8f094ebf">
          <div class="shg-box-overlay"></div>
    <div class="shg-box-video-wrapper"></div>
    <div class="shg-box-content">
            <div id="s-901393a2-f4e6-4e21-96d2-9c7ea8dcb1a8" class="shg-c  ">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>untitled document</title>
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    <style media="screen">
    html {
        box-sizing: border-box;
     }
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    Alex Maxim (Oct 5th, 2019)

  4. #3
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    30
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Some things to follow for faster loading. Only meta tags and CSS in the header. Load your javascript after the page(HTML) loads. That means calls to external JS files and your internal JS should go after the page code has exicuted but before the </baody> tag.

    Do not put <style> sections in the body and only ONE <body> tag:
    Code:
    <body id="higher-grades-faster-™-can-make-your-child-age-group-14-21-smarter" class="template-index" >
      <script>
        window.__shgProducts = window.__shgProducts || {};
      </script>
    <div class="shg-clearfix"></div>
    <body>
    <!-- Created with Shogun. -->
    <div class="shogun-root" data-shogun-id="5d90b1c4b819c40050187644" data-shogun-site-id="991f95bc-5f2d-4f39-b512-e1d141d1d721" data-shogun-page-id="5d90b1c4b819c40050187644" data-shogun-page-version-id="5d95e9c751dad2005196af88" data-shogun-platform-type="shopify" data-shogun-variant-id="5d95e9c751dad2005196afc6" data-region="main">
      <link rel="stylesheet" type="text/css" href="https://cdn.getshogun.com/5d95e9c751dad2005196afc6.css">
    <script type="text/javascript" src="https://lib.getshogun.com/lazysizes/2.0.0/shogun-lazysizes.js" async></script>
    <div class="shg-fw"><div class="shg-box-vertical-align-wrapper">
        <div class="shg-box shg-c    " id="s-fa277926-a999-420b-a865-8b4f8f094ebf">
          <div class="shg-box-overlay"></div>
    <div class="shg-box-video-wrapper"></div>
    <div class="shg-box-content">
            <div id="s-901393a2-f4e6-4e21-96d2-9c7ea8dcb1a8" class="shg-c  ">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>untitled document</title>
    <!--<link rel="stylesheet" href="https://www.codingforums.com/screen.css" media="screen">-->
    <style media="screen">
    html {
        box-sizing: border-box;
     }

    Dear Mr Sunfighter,
    A million thanks as ever for your legendary assistance!

    Just in case anyone else is struggling with this problem: in addition to Mr Sunfighter's steps as per his post above, there is also the option of using a .gif as a header background – which may not be as bad as it sounds, as long as (i) your original footage is of reasonable quality; and (ii) your clip is not too long.

    There is an excellent little program for Macs by the name of Gifrocket, which will convert your video to .gif format: the more modest the resolution, the slimmer the clip. Many header video backgrounds are actually not that high a resolution, so something like 640 pixels in width should be acceptable.

    You can then double-compress your .gif file at https://ezgif.com/ and then https://gifcompressor.com/ (i.e. put the same file through both compressors sequentially); this should drastically reduce the size of your movie file, with practically no loss in quality.

    Hope this helps someone...

    With very best wishes,

    Alex Maxim


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •