Schlagwort: performance

JavaScripts/jQuery in Contao besser zusammenfassen

Beitragsautor Von Michel
Beitragsdatum 27. Juni 2017
Keine Kommentare zu JavaScripts/jQuery in Contao besser zusammenfassen

Wenn man wie im Artikel von Rocksolid unter Schritt 4 beschrieben, die JavaScript-/jQuery-Dateien in Contao zusammenfassen möchte, müssen erstmal die Dateipfade herausgefunden (die in Contao 3.5 kein einheitliches Muster haben^*). Nachfolgend die kompletten Blöcke für deren Templates unter Berücksichtigung der Standard-Templates:

Mediaelement (j_mediaelement.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/mediaelement/'.MEDIAELEMENT.'/js/mediaelement-and-player.min.js|static';
?>

Colorbox (j_colorbox.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/colorbox/'.COLORBOX.'/js/colorbox.min.js|static';
?>

Accordion (j_accordion.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/ui/'.JQUERY_UI.'/jquery-ui.min.js|static';
?>

Slider (j_slider.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/swipe/'.SWIPE.'/js/swipe.min.js|static';
?>

Table Sorter (j_tablesort.html5)

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/tablesorter/'.TABLESORTER.'/js/tablesorter.js|static';
?>

Die Konstanten wie JQUERY_UI oder SWIPE sind unter system/config/constants.php definiert und geben die Versionsnummer der Scripts zurück.

* sei es wegen verschiedenen Vendors oder anderer Dateistruktur

Schlagwörter Contao, javascript, jquery, page speed, performance

Frontend: HTML5, CSS3, jQuery Linktipps

☞ Bilder als Data-URL: Ein Blick auf die Performance der Technik

Beitragsautor Von Michel
Beitragsdatum 10. April 2013
4 Kommentare zu ☞ Bilder als Data-URL: Ein Blick auf die Performance der Technik

Achtung: vermutlich war ich hier etwas voreilig mit Behauptungen, mehr dazu in den Kommentaren.

Sergej Müller hat das Einbinden von Bildern in CSS als Data-URL einem Performance-Test unterzogen Recommended Site. Sein Fazit:

Durch die Base64-Kodierung der Bilder hat sich der „Gewicht“ der Gesamtdatei nahezu verdoppelt. Das trägt dazu bei, dass der Server eine deutlich größere Menge an Daten zu übertragen hat – eine kostspielige Prozedur. Erst die GZIP-Komprimierung reduziert die Dateigröße erheblich und kann die Differenz der Ladezeiten auf ein Minimum verringern.

Ebenfalls nimmt der Browser mehr Zeit in Anspruch, um den Base64-Code zu dekodieren. Ein lokaler Vergleich der Dateien hat bestätigt, dass die Ausführung (das Laden entfällt, da lokal) des HTML-Codes mit Data-URLs stets um 30 ms hinterher hing. Bilder als Data-URL: Ein Blick auf die Performance der Technik

Das Base64 die Datenmenge nahezu verdoppelt war mir soweit sogar bewusst (Nachtrag: meistens handelt es sich nur um ein Drittel mehr), weswegen ich von Data-URLs bislang auch Abstand genommen habe. Der Vorteil nur eine Datei laden zu müssen ist laut diesem Test also eher eine Nullnummer, hinzu kommt ja auch noch die Zeit, die Bilddaten zu dekodieren.

Ändert sich dann doch mal eine Grafik muss diese im CSS aktualisiert werden und damit auch die komplette CSS-Datei beim Besucher neu geladen werden – inkl. der anderen Grafiken.