How to increase ClipBucket speed

130 views October 18, 2016 Saqib Razzaq 1

Speed is a crucial thing for any website because there are millions of websites available on the internet and if yours is not loading quickly, user will have no reason to wait or to come back because they can go somewhere else.

Hence, you must take all measures to ensure that it loads in fastest possible time. We get a lot of complains regarding ClipBucket speed and people even abuse us and use bad language. But the truth is, it is not our fault.

ClipBucket speed goes down only when it is not configured properly. If you want to test speed of a website properly configured with ClipBucket, go visit Tune.pk . Now with all that said, here are some ways you can increase your ClipBucket powered website.

1. Smaller File Uploads

A good to speed up your website is by not allowing mega file uploads. Bigger files take longer to go through processing and result in higher CPU memory consumption which causes the whole site to slow down. Besides, it will also result in slower video conversion even for smaller files that are being converted at the same time and poor video streaming because server is too busy converting files.

We suggest that you allow limited number of video uploads per user, per day with limited size and duration. Once you see that some user is showing promise and that he can actively and efficiently contribute to your website, raise their limits. That would make a lot of difference in site speed.

2. Less Files In Conversion At One Time

Don’t allow more than 2 video conversions at one time. This releases some pressure from server and all newer files are added into conversion queue and only 2 of them will be processed at once.

If you set limit to higher number then server will get too busy working on multiple files which will once again lower site speed and cause you headache.

3. Better Server

Most shared hosting providers don’t allow FFMPEG and MP4Box which will force you to chose VPS but even if they allow that, never use a shared hosting plan to host ClipBucket site. Go for a high quality VPS if you don’t want to run in problems every other day.

Video conversion and streaming requires high CPU resources and only higher quality servers can handle it. The best option is Dedicated Server.

4. Multiple Servers

Choosing multiple servers option for ClipBucket is the best decision you can make. It boosts website speed more than anything else because now 1 or more servers will be fully focused on video streaming only and same applies for video conversion.

ClipBucket team has done an awesome job in creating Multiple Servers Setup script that would allow you to be up and running with multiple server in a short time.

5. Minimize CSS and JavaScript

Minimizing CSS & JS impacts on speed because minimized code takes much less bytes. It is suggested to only minimize your code once you have made all design changes because compressed code is much hard to edit. Here is an example that showcases difference between uncompressed and compressed code.

CSS Example:
Uncompressed:

/* Importing Navigation CSS */
.navbar-container .navbar-nav > li > a {
    line-height: 31px;
}
.navbar-container .nav-login-btns,
.navbar-container .nav-login-dd,
.navbar-container .nav-collapse-btn,
.navbar-container .navbar-search {
    display: none;
}
.navbar-container {
    margin: auto;
}
.navbar-container .navbar-search {
    width: 23% !important;
    line-height: 37px;
    margin-left: 20px;
}
.navbar-container .cb-logo {
    background: url('../../images/logo.png') no-repeat;
    width: 213px;
    height: 40px;
    text-indent: -500000px;
    display: inline-block;
    margin:14px 0 0 20px;
}

Compressed CSS:

.navbar-container .navbar-nav > li > a{line-height:31px}.navbar-container .nav-login-btns,.navbar-container .nav-login-dd,.navbar-container .nav-collapse-btn,.navbar-container .navbar-search{display:none}.navbar-container{margin:auto}.navbar-container .navbar-search{width:23%!important;line-height:37px;margin-left:20px}.navbar-container .cb-logo{background:url(../../images/logo.png) no-repeat;width:213px;height:40px;text-indent:-500000px;display:inline-block;margin:14px 0 0 20px}

JavaScript Example:
Uncompressed:

$(document).ready(function(){
$(".cbsearchtype a").on({
click: function(e){
e.preventDefault();
var prent_li = $(this).parents();
$('.type').val($(this).html());
$('.cbsearchtype li').removeClass('active');
prent_li.addClass('active');
/*var searchtype = $("#SearchType").val();
var buttonText = $(this).text().toLowerCase();
if($("#SearchType option[value='"+ buttonText +"']").length > 0){
$("#SearchType option:selected").removeAttr("selected");
$("#SearchType option[value='"+ buttonText +"']").attr("selected" , "selected");
$(this).parents("ul").find(".active").removeClass("active");
$(this).parent().addClass("active");

}*/
}
});

$('.show-small-form').click(function() {
$('.form-small').toggleClass('show');
});

});

Compressed JavaScript:

$(document).ready(function(){$(".cbsearchtype a").on({click:function(a){a.preventDefault();var e=$(this).parents();$(".type").val($(this).html()),$(".cbsearchtype li").removeClass("active"),e.addClass("active")}}),$(".show-small-form").click(function(){$(".form-small").toggleClass("show")})});

6. Minimize HTML

HTML compression works the same way as CSS & JS but has a serious impact on speed as compared to those two. However, it is not suggested to compress HTML if you are still developing your site and it is not ready yet.

Once you feel like you got nothing to change, compress your HTML but be careful with it because if done wrong, it can break your site.

Uncompressed HTML:

<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">{foreach $head_menu as $menu}</ul>
</ul>
<pre></pre>
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">{if $menu@iteration &lt; 5}
<li class="active"><a href="{$menu.link}">{$menu.name}</a></li>
</ul>
</ul>
{/if}
{/foreach}

{if userid()}</pre>
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<li class="dropdown hidden-lg hidden-md hidden-sm "><a class="dropdown-toggle" href="{link name='upload'}" data-toggle="dropdown">{lang code="Uploads"} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{link name='upload'}">{lang code="Upload Video"}</a></li>
<li><a href="{link name='photo_upload'}">{lang code="Upload Photo"}</a></li>
</ul>
</li>
<li class="navbar-sm-login-links"><a href="{link name='logout'}">{lang code='logout'}</a></li>
</ul>
</ul>
{else}

<!-- Shown to small devices only Start @todo : Add condition for logged in user --></pre>
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<li class="navbar-sm-login-links"><a href="#" data-toggle="modal" data-target="#login-modal">{lang code='login'}</a></li>
<li class="navbar-sm-login-links"><a href="{link name=">{lang code='Create new account'}</a></li>
</ul>
</ul>
<!-- Ends -->
{/if}
{if count($head_menu)&gt;4}</pre>
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">More <b class="caret"></b></a>{foreach $head_menu as $menu} {if $menu@iteration &gt; 4}
<ul class="dropdown-menu">
<ul class="dropdown-menu">
<li class="active"><a href="{$menu.link}">{$menu.name}</a></li>
</ul>
</ul>
{/if} {/foreach}</li>
</ul>
</ul>
{/if}

Compressed HTML:

<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">
<ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero">{foreach $head_menu as $menu}{if $menu@iteration &lt; 5}
<li class="active"><a href="{$menu.link}">{$menu.name}</a></li>
</ul>
</ul>
{/if}{/foreach} {if userid()}
<ul>
<li class="dropdown hidden-lg hidden-md hidden-sm"><a class="dropdown-toggle" href="{link name='upload'}" data-toggle="dropdown">{lang code="Uploads"}<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{link name='upload'}">{lang code="Upload Video"}</a></li>
<li><a href="{link name='photo_upload'}">{lang code="Upload Photo"}</a></li>
</ul>
</li>
<li class="navbar-sm-login-links"><a href="{link name='logout'}">{lang code='logout'}</a></li>
</ul>
&nbsp;

{else}
<ul>
<li class="navbar-sm-login-links"><a href="#" data-toggle="modal" data-target="#login-modal">{lang code='login'}</a></li>
<li class="navbar-sm-login-links"><a href="{link name=">{lang code='Create new account'}</a></li>
</ul>
&nbsp;

{/if}{if count($head_menu)&gt;4}
<ul>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">More <b class="caret"></b></a>
<ul class="dropdown-menu">
<ul class="dropdown-menu">{foreach $head_menu as $menu}{if $menu@iteration &gt; 4}
<li class="active"><a href="{$menu.link}">{$menu.name}</a></li>
</ul>
</ul>
{/if}{/foreach}</li>
</ul>
&nbsp;

{/if}

7. Careful Server Communication

ClipBucket takes care of server communication in the best way possible and you don’t need to modify any of that. However, if you have to, don’t do it if you are not very good with server side functionality and communication and languages PHP & MySQL. Badly written server code will kill website speed no matter how well you do rest of things.

8. Load Additional JavaScript Files In Footer

ClipBucket only loads some files in header and if you want to install some third party script or need to add JavaScript code, you must do that in footer. That is because if JavaScript takes some time to load, it won’t have much effect on site speed as it would have already loaded before it starts to pull footer scripts.

On the other hand if JavaScript is in header, your website can continue loading JavaScript and won’t load any other elements until it is finished which is a speed kill.

9. Don’t Use Heavy Images As Background

If you want to use image background, make sure they are compressed, light weight and ideally in png or jpg format. Using heavy images will slow down website because browser will take a lot of time loading background.

10. No Uploads In Rush Hour

If possible, don’t allow users to upload videos in times when your site gets heavy traffic. That would save conversion resources and then server can fully focus on video streaming which ultimately increases website speed.

11. Careful Self Uploading

If you are uploading videos yourself, keep in mind that the fastest conversion video format is mp4. If you upload videos that are already mp4, it will save server from doing that itself and instead it will work on converting it in other formats boosting conversion and website speed at the same time.

If you have got any other tips, add them in replies section and we’ll put them here in this list. If you need to ask any question, you are welcome to do and we are happy to help.

Was this helpful?