Jak zaoszczędzić pół megabajta na każdym filmie z Youtube na Twojej stronie | DailyWeb.pl

Jak zaoszczędzić pół megabajta na każdym filmie z Youtube na Twojej stronie

Opublikowano 3 lata temu - 9


Rok jutuba już prawie na półmetku, a co w naszej rodzimej sieci? Antyłeby dyskutują często i w sumie fajnie czasem posłuchać, zaś konkurencyjne Spidersłeby sprawdzają co w plecaku nosi prawdziwy Geek (np. instrukcja do aparatu fotograficznego, bez właściwego urządzenia), no ale kto zabroni? Można? Można, w końcu rok jutuba. O dziwo nam także się udzieliło i to w sumie nie przez zapowiedziany trend, ot zupełny przypadek, a udało się wpaść w wartki nurt trendów i zrobiliśmy chociażby video recenzję słuchawek Samsung Level Over.

Dla tych, którzy zaspali lub tych, którzy ciągle wierzą w rok mobile czy innego Linuksa i chcą nadrobić zaległości, dając upust swojej twórczości za pośrednictwem serwisu Youtube, mam coś specjalnego. Oczywiście bez wodotrysków, za to jednak mocno efektywnie i bardzo wydajnie. Dlaczego?

Po co, dlaczego?

Otóż to żadna nowość, że po umieszczeniu materiału video wprost z Youtube na naszej stronie internetowej, pojawia się cała masa zapytań, by ów materiał wczytać. Oczywiście, nie pokaże Wam jak pozbyć się tych wartości, ale jak umiejętnie i wydajnie je wczytywać, na żądanie gościa naszej witryny, a nie domyślnie. Gra jest warta świeczki, gdyż nie każdy użytkownik zechcę wybrany przez nas materiał obejrzeć. W takich sytuacjach do zaoszczędzenia jest bagatela 500KB, a to z punktu widzenia użytkowników mobilnych - ogromna oszczędność.

Dla swoich testów przygotowałem dedykowaną stronę, która sprawdza możliwości skryptu. Jego zadanie jest dość proste, otóż nie wywołuje on wszystkich zewnętrznych skryptów związanych z uruchomienie materiału z YT wraz z wczytaniem strony. Zamienia on wszystkie materiały video na takie, które zostaną wywołane przez użytkownika po kliknięciu w nie. Korzyść jak już wspomniałem wyżej jest oczywista: nie bombardujemy użytkownika niepotrzebnymi zapytania, jeśli nie zamierza on obejrzeć załączony materiałów video.

Korzyści

Jak widać, wersja bez skryptu wynosiła 464.2KB, przy 811ms czasu wczytywania i 18 zapytaniach.

Zrzut ekranu 2015-04-07 o 13.49.17

 

Jaki będzie efekt końcowy? Otóż gra jest warta świeczki, bo objętość strony zmniejszyła się z 464.2KB na raptem 14.8KB. Oczywiście cała różnica wielkości zostanie zaczytana, kiedy użytkownik kliknie przycisk odtwarzania, ale będzie to zrobione na żądanie.

Krok 1

Na początek musimy znać kod do umieszczania materiału z Youtube. Z pewnością nie stanowi on dla Was żadnej tajemnicy i wygląda  on mniej więcej następująco:


<iframe width="560" height="315" src="https://www.youtube.com/embed/tobfxbHaau4" frameborder="0" allowfullscreen></iframe>

Pływająca ramka, jej wysokość, szerokość i źródło. To co będzie nam potrzebne z tego kodu, to id naszego video, które w powyższym przykładzie, to wartość po https://www.youtube.com/embed/..., czyli tobfxbHaau4.

Po co nam numer id? Otóż dlatego, że do umieszczania materiałów video, będę korzystał z dedykowanych divów, do których podpięty jest kod JS i który odpowiedzialny jest za wszystkie te efekty końcowe, wygląda on następująco:

<div class="youtube-container">
   <div class="youtube-player" data-id="VIDEOID"></div>
</div>

W miejscu VIDEO_ID podajemy wcześniej wyciągnięty numer id.

Krok 2

Po wstawieniu kodu odpowiedzialnego za wywołanie filmu z YT, czas na kod JavaScript, który to wszystko zrobi. Należy go dodać w stopce strony i wygląda on następująco:

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();
 
function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

Krok 3

To co nam pozostaje do utworzenia, to jakiś przyzwoity styl CSS. Poniżej propozycja autora kodu, ale oczywiście można ją zmienić wedle uznania. Dodam tylko, że jeśli spodoba Wam się poniższa propozycja (bo jest bardzo przyzwoita), to proszę pamiętajcie by zapisać ikonę odtwarzania na własnym serwerze (aktualny adres: http://i.imgur.com/TxzC70f.png), by ograniczyć odpytywanie serwerów zewnętrznych podczas wczytywania strony.

<style>
.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>

Efekt?

Zdecydowanie warty zachodu, sami zobaczcie poniżej. Wielkość strony zdecydowanie mniejsza, co oczywiście powoduje jej szybszy czas odpowiedzi, a i wszystkie żądania wyglądają zdecydowanie lepiej.

Zrzut ekranu 2015-04-07 o 14.14.29

Mam nadzieję, że tutorial okaże się przydatny. Dodam, że zamierzam go zaimplementować w nadchodzącej - nowej wersji DailyWeb. W związku z tym napisze gotową funkcję albo plugin na bazie tego skryptu, do zastosowania we własnym WordPressie.

 
Credits
Autorem skryptu jest Amit Agarwal.