Javascripte oder CSS vereinen und komprimieren

Es gibt kaum noch komplexe Websites ohne Javascripte.

Und man findet daher auch jede Menge Websites die bei der Einbindung nicht alles richtig machen.

Ein typisches Beispiel:

< script src="http://www.xyz.de/js/jquery-1.9.1.min.js" type="text/javascript">
 < script src="http://www.xyz.de/javascripte/customdropdown.js" type="text/javascript" >
< script src="http://www.xyz.de/javascripte/responsivemobilemenu.js" type="text/javascript">< /script>
< script src="http://www.xyz.de/js/app.js" type="text/javascript">
 < script src="http://www.xyz.de/js/responsive.js" type="text/javascript">
< script src="http://www.xyz.de/js/modernizr.js" type="text/javascript">
 < script src="http://www.xyz.de/js/responsiveslides.min.js" type="text/javascript">
  < script src="http://www.xyz.de/js/jquery.easing.1.3.js" type="text/javascript">
< script src="http://www.xyz.de/js/jquery.liquid-slider-custom.min.js" type="text/javascript">< /script>
< script src="http://www.xyz.de/js/liquidslider.custom.js" type="text/javascript">



< script>
    $(function () {
      $("#slider").responsiveSlides({
        maxwidth: 825,
        speed: 3000,
        timeout: 4500
      });
    });
  < /script>  
 
< script>
    $(function(){
          $('#slider-id').liquidSlider({
            autoSlide:false,
            autoHeight:false
          });
    });
    < /script>
< script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-MeineKennung', 'xyz.de');
  ga('send', 'pageview');

< /script>

Wir zählen hier allein 10 externe Javascripte plus 3 interne.
10 externe Scripte bedeuten aber 10 Request's und die kosten hier konkret 30 bis 82 ms pro Request.

Schaut man dann noch genauer hin stellt man fest - die Scripte sind nicht minimiert - es werden also noch 13,5 KB an Daten völlig umsonst pro Seitenaufruf übertragen.

Es wird hier also völlig umsonst Leistung verbraten und es werden einige Besucher zum zappen genötigt.

Was aber sollte man machen ?

Alle internen Funktionen werden extern abgelegt.

Dann werden alle Scripte in genau der gleichen Folge (das ist wichtig !) wie sie ursprünglich eingesetzt waren in eine kopiert.
Unter Linux ist das einfach:

cat script1.js script2.js script3.js > all.js




ansonsten kann man auch einen Editor nutzen und mit copy und paste die Komplettdatei all.js erzeugen.




Danach wird die all.js mit dem kostenfreien yiu-compressor komprimiert.




$ yui-compressor all.js -o all.min.js

Nun wird nur noch die all.min.js eingebunden - die ursprünglich eingebundenen Scripte entfallen.

Genau so kann man verfahren, wenn mehrere CSS Dateien einzubinden sind.