PHP Gangsta - Der PHP Blog mit Praxisbezug » fast http://www.phpgangsta.de Ein PHP Blog mit Themen aller Art. Manchmal vergewaltige ich PHP... Thu, 02 Feb 2012 22:22:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Externe Javascript Dateien zusammenfassenhttp://www.phpgangsta.de/externe-javascript-dateien-zusammenfassen http://www.phpgangsta.de/externe-javascript-dateien-zusammenfassen#comments Tue, 25 Aug 2009 17:59:54 +0000 Michael Kliewe http://www.phpgangsta.de/?p=341
Keine ähnlichen Artikel.]]> Wir alle wissen: Langsame Webseiten bekommen weniger Besucher. Dazu gibt es auch Auswertungen von großen Portalen und Suchmaschinen.

Doch wie beschleunigt man die eigene Webseite? Häufig übersieht man einen wichtigen Teil: Das Frontend bzw. den Client.

Mag das PHP-Script auch sehr schnell sein (die Zeit gemessen mit microtime() ergibt 0.1 Sekunden), die Seite kann sich trotzdem langsam anfühlen. Das liegt häufig an vielen externen Dateien, die der Browser noch nachladen muss. Dazu gehören sowohl CSS-Dateien, Javascript-Dateien, Bilder usw.

Nachdem der Browser den kompletten HTML-Inhalt empfangen hat, fängt er an, ihn zu parsen. Falls er dabei auf externe Dateien stößt, lädt er sie nach. Nehmen wir mal folgendes Beispiel:

<html>
<head>
	<title>Testpage 1</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen">

	<script type="text/javascript" src="js/custom/helpLayer.js"></script>
	<script type="text/javascript" src="js/custom/filterRewriteUrl.js"></script>
	<script type="text/javascript" src="js/custom/other.js"></script>
	<script type="text/javascript" src="js/firebug_for_ie/firebug-lite-compressed.js"></script>
</head>
<body>
	<script type="text/javascript" src="js/wz_tooltip/wz_tooltip.js"></script>
	Just a testpage
</body>
</html>

Es werden also 3 css-Dateien und 5 js-Dateien nachgeladen. Grafisch dargestellt (mit dem Firefox Addon Firebug) sieht das dann so aus (man beachte: das ist localhost, durchs Internet wären die Verzögerungen noch etwas größer bei jedem Request):

firebug1a

Man kann schön erkennen, dass die css-Dateien parallel bearbeitet werden. Die Javascript-Dateien werden nacheinander geladen, da es ja Abhängigkeiten geben könnte und die Reihenfolge wichtig ist.

Nun kann man natürlich erstmal die unnötigen Dateien entfernen. Da ich das Tooltip-Script nicht brauche (und es sowieso unschön ist, es im body aufzurufen, aber das muss so bei diesem Script), entferne ich es, und erhalte dann:

firebug2

Wir haben also 31KB gespart und auch 15% der Ladezeit.

Nun fassen wir die css-Dateien und js-Dateien zusammen mittels PHP, das sieht dann so aus:

<html>
<head>
	<title>Testpage 3</title>

	<link rel="stylesheet" type="text/css" href="css/css.php">

	<script type="text/javascript" src="js/js.php"></script>
</head>
<body>
	Just a testpage
</body>
</html>
<?php
header('Content-type: text/javascript');

$output  = file_get_contents('custom/helpLayer.js');
$output .= file_get_contents('custom/filterRewriteUrl.js');
$output .= file_get_contents('custom/other.js');
$output .= file_get_contents('firebug_for_ie/firebug-lite-compressed.js');

// remove comments from JS (this can cause problems if brackets
// or semikolons are not used correctly)
#$output = preg_replace('#//.*#', '', $output);
#$output = preg_replace('#\n|\r\n|\r|\t#', '', $output);

echo $output;
<?php
header("Content-Type: text/css");

$output =  file_get_contents('css/style.css');
$output .= file_get_contents('css/custom.css');

echo $output;

Man sieht auf den ersten Blick: Wir haben nur noch 2 externe Dateien eingebunden. Wie sieht die Ladezeit aus?

firebug4

Wir haben also, ohne irgendeine Funktionalität zu ändern oder js-Dateien manuell zusammenfassen zu müssen die Hälfte der Zeit gespart (von 407ms auf 190ms). Ein PHP-Script von 400ms auf 200ms zu beschleunigen ist mehr Arbeit glaube ich ;-)

Was lernen wir daraus? So wenig externe Dateien wie möglich laden oder sie zusammenfassen, um die Anzahl der HTTP-Request zu vermindern. Es gibt noch weitere Tricks, die ich aber noch nie produktiv eingesetzt habe. In hoch produktiven Webseiten kann das aber vielleicht Sinn machen, hier eine SEHR GUTE Präsentation zu dem ganzen Thema, die man sich angucken MUSS als Webentwickler:

Don’t make me wait! or Building High-Performance Web Applications


Keine ähnlichen Artikel.

]]> http://www.phpgangsta.de/externe-javascript-dateien-zusammenfassen/feed 26