Michael: Style und Skript

In genau DER Reihenfolge! Google bewertet eine Internetseite unter verschiedensten Gesichtspunkten. Damit ist jetzt nicht SEO gemeint, um einen möglichst hohen PageRank zu erhalten. Es gibt auch Kriterien, die vom Kontext der Seite unabhängig sind und sich an technischen Größen ausrichten. Dazu gehört auch die Ladegeschwindigkeit der Seite.

Moderne Webbrowser laden mehrere Seiteninhalte parallel um diese möglichst schnell zu erhalten und die Seite aufbauen zu können. Integraler Bestandteil jeder Seite sind Style-Dateien (.css) und Skripte (.js). Diese werden zumeist in dem <head>-Teil des Seitenquelltextes angegeben. Fügt man mehrere dieser Dateien in gemischter Reihenfolge ein, so verlangsamt sich künstlich Seitenaufbaugeschwindigkeit, da der Browser zuerst versucht alle Style-Informationen zu lesen, und anschließend alle Skripte auszuführen. Verweist man zuerst auf alle Style Dateien und anschließend auf die Skripte, können die beiden Dateigruppen jeweils vollständig parallel geladen werden und in optimaler Reihenfolge ausgeführt werden, ohne das nochmal eine CSS Datei geladen werden muss nachdem bereits alle Skripte geladen wurden.

Warum ist das so? JavaScript kann CSS Elemente Refferenzieren. In CSS hingegen kann man kein JavaScript sprechen. Wenn ich in CSS Datei 2 Elemente definiere, die ich nach Script 1 lade, kann ich Script 1 nicht ausführen, weil in CSS2 eventuell weitere betreffende Elemente definiert werden. Wenn aber alle CSS Informationen geladen und somit bekannt sind, kann ich die JavaScript-Dateien direkt nach dem Laden auch ausführen.

In WordPress hat man keine direkte Möglichkeit Einfluss darauf zu nehmen, in welcher Reihenfolge die einzelnen Plugins geladen werden und ihre Script- und Style-Informationen in den Seitenheader schreiben. Hier hilft ein bisschen PHP Code und ein Plugin von Satya Prakash. Nachdem der Seitenkopf komplett bestimmt wurde, geht das Plugin noch mal durch die Reihenfolge der Dateien und sortiert alle JavaScript-Referenzen nach den CSS Dateien an.

Allesblog#css#google#JavaScript#Page Speed#plugin#wordpress

Ab und zu kommt es vor, dass ich gerne das ein oder andere YouTube-Video runter laden möchte, um es offline zu genießen. Natürlich gibt es dafür bereits unzählige Tools und Plugins aber nichts ist so schön wie selbst Gemachtes!

Ziel ist es am Ende mit Hilfe der YouTube Video ID jedes beliebige YouTube Video runterladen zu können. Das passiert am einfachsten über eine URL, die für unseren Browser wie ein normales Video aussieht. In Wirklichkeit verbirgt sich dahinter etwas PHP magic. In unserem Fall wäre das ein URL, der folgender Maßen aussieht:

  • http://allesblog.de/YouTube/Ha0xp99oQyA.mp4

 

Beginnen wir also von Vorne. Domain und Apache Webserver sind bereits brauchbar eingerichtet. Darauf möchte ich hier nicht eingehen. Ich lege mir also in meinem Fall eine .htaccess Datei an, in der ich Apache sage, dass alle Anfragen, die auf .mp4 enden, an das download.php Script weitergeleitet werden sollen.

Apache .htaccess

RewriteEngine On
RewriteRule (.*.mp4)     /download.php?file=$1 [L,NS]

Die YoutTube ID bzw. den Dateinamen, bekommt unser Script als Parameter file übergeben.

Jetzt brauchen wir natürlich das Script selbst, welches in diesem Fall das Linux Kommando youtube-dl ausführt, damit wir die eigentliche Video-URL herausfinden können. Die Datei erkläre ich im Einzelnen.

PHP Code: download.php

ini_set ('user_agent', $_SERVER['HTTP_USER_AGENT']);

Als erstes setzen wir unseren eigenen User-Agent auf den Wert von unserem Browser.

$file = $_GET['file'];
$file = substr( $file, 0, -4 );

Der Dateiname endet auf .MP4. Die letzten 4 Buchstaben schmeissen wir also erstmal weg.

define("YOUTUBE-USER", "abc")
define("YOUTUBE-PASS", "123")

Unseren YouTube Account definieren wir als Konstante Werte. YouTube erlaubt leider keine anonymen Downloads mehr, aber es ist ja nicht so schwer, sich einen YouTube-Account anzulegen 😉

$a_file = explode("\n", trim( `youtube-dl -u YOUTUBE-USER -p YOUTUBE-PASS
 -e -g "http://www.youtube.com/watch?v=$file" -f 18 2>&1` ));
$file = array_pop($a_file);
$title = array_pop($a_file);

Wir übergeben das YouTube Video an das Linux Programm und parsen anschließen den Rückgabewert. Wenn wir einen Fehler erhalten, dann liefern wir Error Code 404 an den Browser aus, und dieser weiß dann, dass wir unter der URL kein Video finden können. Im Erfolgsfall geben wir die Video-Header aus und im Anschluß daran schleifen wir den Datenstrom des Videos einfach durch.

if (preg_match('/^ERROR/', $file )) {
  header("HTTP/1.0 404 Not Found");
} else {

  header('Content-type: video/mpeg');
  # header('Content-disposition: inline');
  # The following header seems not to work with iTunes
  header('Content-Disposition: attachment; filename="YouTube-'.$title.'.mp4"');
  $f = fopen($file,'r');
  fpassthru($f);
  fclose($f);
}

Den Content-Disposition Header habe ich eingebaut, damit die Videos einen einfacheren Namen erhalten.

Und zum Schluß noch ein kleiner Bonus. Mit dem folgenden Bookmarklet, für die FireFox Favoriten, können wir das Script direkt mit eingaben füttern, wenn wir gerade auf YouTube rumsurfen.

Boomarklet JavaScript:

javascript:var%20d=document,w=window,f='http://allesblog.de/YouTube/',l=d.location,x=/.*v\=(.[^&]*)&?.*/,id=x.exec(l),u=f+RegExp.$1+'.mp4';l.href=u;void(0);
Allesblog#Browser#JavaScript#PHP#YouTube