CODEWITHSUNDEEP
javascriptcssoptimizationmedia-queries
user1277041
user1277041

Reputation:

Optimizing for mobile/ low speed connection - full background video

I am developing a website with a full background video.

To optimize for low speed connections / mobile, I am using a media query to detect screen sizes smaller then 768 px, then doing a display:none on the video container and displaying a background image instead.

My question here is:

Is this the correct way to optimize for low speed connections / mobile? Will it have any impact on my optimization when not displaying containers with css or should I be doing it in JavaScript instead, when loading the page?

Upvotes: 2

Views: 1844

Answers (2)

jiy
jiy

Reputation: 868

What are you using as a player for your videos?

For what you're doing, the answers will be in jQuery, not CSS. With videos, it's important to know what the user's bandwidth is so that you can supply the correct video resolution. Most phones can support 1080p resolutions (often times double, especially with Apple's Retina Display, or Samsung's 5K screens). In other words, it shouldn't matter if they are using a phone or a cinema display; what matters is their connection speed.

I've had good luck with JWPlayer and using Amazon S3 for storage. It's also been my experience that H.264 MP4's are the way to go.

Whatever you're using, you should be able to supply multiple versions of your video(s). For example, you might create different resolutions - 360, 720 and 1080.

Here's a jQuery utility you can use to determine the user's bandwidth. Make sure to create a file named "10.kb.file.zip" (and make sure it's exactly 10 kb).

/*
*   measureBandwidth.js
*   Directory: ~/lib/js/
*   jQuery utility for measuring a user's bandwidth
*/

var url = 'js/10.kb.file.zip?{0}';
var start = '';

function getBandwidth(callback) {
    start = new Date();
    getFile(1, callback);
}

function getFile(i, callback) {
    $.get(url.f(Math.random()), function () {
        i++;
        if (i < 6) {
            getFile(i, callback);
        } else {
            var end = new Date();
            var speed1 = Math.round(((50 / ((end - start) * .001) * 8) / 1000) * 10) / 10;
            var speed2 = Math.round(50 / ((end - start) * .001) * 10) / 10;
            callback(speed1, speed2);
        }
    });
}

String.prototype.f = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; }); };

Then, you can use it like this:

getBandwidth(function (Mbits, kBs) {
    $('#speed1').html(Mbits + ' Mbit/s');
    $('#speed2').html(kBs + ' kB/s'); 
});

Based on those results, you can then set the appropriate video for the user.

For example, I route kBs < 128 to default to 360p video, and kBs > 128 to the 720p video.

In JWPlayer, you would add all of your videos to the "playlist" and give them labels like "360p", "720p" etc.

Upvotes: 0

blex
blex

Reputation: 25659

Media queries will allow you to load different images if they are set as backgrounds, so that's a start for small screens, but not for low speed on a computer, and it won't work in the case of a video, or additionnal files being loaded or not.

In JS

This is what I can think of at the moment, probably not very reliable, because it depends on how much content you have on your website.

It would consist in only having the most important stuff loaded (low speed connexion), and getting an approximate loading time for the content (DOM, images, css, js...). Then you can choose to either load the rest or not.

// get the current time as soon as you can (directly in the head tag)
var start = new Date().getTime();

// do the same after the page has loaded and find out the difference
window.onload = function(){
    var end = new Date().getTime();
    var timeTaken = end - start;
    alert('It took ' + timeTaken + ' ms to load');

    if(timeTaken < 2000){
        // load more stuff if it took less than 2 seconds, for example
    }
}

Again: not very reliable (a page with lots of images is going to take longer, and finding the perfect "timeout" (2 seconds here) won't be easy. Also, this won't work is your users have JS disabled, but that's not a concern I'm worried about these days :) You should probably wait for other answers.

In PHP

Another method I can think of is doing it in PHP if that's an option for you. You could have your php page get the time of its request by the client. Then for example if you have an external JS, you can do this:

index.php

<script src="myScript.php?time=<?=microtime()?>"></script>

myScript.php would be a php page that will get the time of this request, compare it with the first one , and then you can choose to serve different JS files based on that (That is called a proxy page).

From the JS file you choose, you can load different stuff based on what you want to do.

myScript.php

<?php
    header("Content-Type: text/javascript");
    $start = intval( $_GET['time'] );
    $end = microtime();
    $timeTaken = $end - $start;

    if( $timeTaken < 2000 ){
        echo file_get_contents('JSForHighSpeed.js');
    } else {
        echo file_get_contents('JSForLowSpeed.js');
    }
?>

Upvotes: 1

Related Questions