• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ladezeiten reduzieren - CSS/Java Zusammenlegen?

G

gaplex

Mitglied
Hallo,
um die Ladezeit zu reduzieren sollte man die HTTP Requests beim Laden der Seite ja möglichst reduzieren. D.h. es ist immer gut, mehere CSS- und/oder JS-Dateien zusammenzulegen.

Aber gilt das auch wenn z.B. eine JS- oder CSS-Datei nur auf wenigen Seiten bzw. einer Seite benötigt wird?

Beispiel: Auf der Startseite habe ich einen Slider mit eigener CSS und JS-Datei. Diesen Slider gibt es aber nur auf der Startseite sonst niergendwo. Soll ich das CSS des Sliders dennoch in die eine Haupt-CSS-Datei stecken oder doch einzeln laden lassen sofern die Startseite aufgerufen wird? Ist das eher zum Nachteil wenn der Browser dann auf jeder Seite CSS und JS-Code läd der gar nicht benötigt wird oder wenn auf der Startseite zwei HTTP-Request mehr stattfinden? Zumal die Startseite nur bei der Hälfte der Besucher die Einstiegsseite ist.

Was meint Ihr? Wie macht ihr das?
 
Werbung:
Ich würde es zusammenlegen (und minifizieren). Das sollten nur ein paar kb sein, die dann auf anderen Seiten "zuviel" sind, und im Normalfall hat der User die Files dann sowieso im lokalen Cache. Ich denke, du sparst dadurch mehr.
Aber wenn es dich genau interessiert, kannst du ja Vergleichstest machen, mal mit, mal ohne Zusammenlegen. Zeit messen (mit entspr. Tools) und dann vergleichen.
 
Ich hab ne ähnliche frage. :)
Jede meiner Sites hat unterschiedliche JS/CSS files.
Über meinem PHP Code, lade ich all diese Dateien im Vorfeld, und komprimiere sie, und Speichere das ganze als eine js/css datei ab. (Das komprimieren erfolgt nicht bei jedem aufruf, sondern nur im Dev-Modus der Site) (Ist ein etwas größeres Projekt) jetzt das problem
=> Ich lade die Sites nicht komplett neu, sondern nur den inhalt (ajax Request) auf diese weise lade ich auch die js/css styles nach die für den Anzuzeigenden Content gebraucht werden nach.
Wenn jetzt eine Site mehrmals aufgerufen wird, wird auch jedesmal der JS/CSS Code erneut geladen.
Jetzt die Frage. Ist es sinnvoll Alle JS/CSS Files zu laden, egal ob sie für den content gebraucht werden oder nicht. Oder soll ich nur das derzeitige System fixen/verbessern. (Es sind insgesammt 5MB unkomprimierter JS Code).

Wer sichs mal ansehen möchte http://playmc.eu (Registrierung ist nicht möglich, und der Baustellen modus ist auch nur für 2Tage ausgeschaltet (Muss grad die Registrierung schreiben :D))
 
Werbung:
eieste schrieb:
Ich hab ne ähnliche frage. :)
Jetzt die Frage. Ist es sinnvoll Alle JS/CSS Files zu laden, egal ob sie für den content gebraucht werden oder nicht. Oder soll ich nur das derzeitige System fixen/verbessern. (Es sind insgesammt 5MB unkomprimierter JS Code).

Wer sichs mal ansehen möchte http://playmc.eu (Registrierung ist nicht möglich, und der Baustellen modus ist auch nur für 2Tage ausgeschaltet (Muss grad die Registrierung schreiben :D))
Zum Vergrößern anklicken....

Ich weiß nicht ob das in deinem Fall ratsam ist aber was man bspw. tun kann ist, das CSS der Seite von nicht benutzten Klassen/IDs zu bereinigen.
Das geht u. a. mit Grunt, einem JavaScript-Task Tool. Für Grunt benötigst du außerdem auch Node.js.

Um deine HTMl Seite von eben jenen Klassen/IDs zu befreien und auch gleich noch einiges anderes wie komprimieren und verhässlichen zu erledigen könntest du folgendes gruntfile.js nehmen.

HTML:
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Optimized</title>
        <!-- build:css css/compiled.min.css -->
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
        <link rel="stylesheet" type="text/css" href="./css/main.css">
        <link rel="stylesheet" type="text/css" href="./css/buttons.css">
        <!-- /build -->
        <!-- build:js js/compiled.min.js -->
        <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="./js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="./js/ausgabe.js"></script>
        <script type="text/javascript" src="./js/delete_rows.js"></script>
        <!-- /build -->
    </head>
   <body>
   </body>
</html>

Und das Gruntfile dann so:
Code: 
module.exports = function(grunt) {
  grunt.initConfig({
 
    pkg: grunt.file.readJSON('package.json'),
   
    // Tasks-------------------------------------------------------------------
   
    // Copy new files into a new directory
    copy: {
      dist: {
        cwd: 'src/',
        expand: true,
        src: '**',
        dest: 'dist/'
      }
    },
   
    // Remove unused CSS across multiple files, compressing the final output
    uncss: {
      dist: {
        files: [
          {
            src: 'src/*.html',
            dest: 'dist/css/compiled.min.css'         
          }
        ]
      },
      options: {
        compress: true
      }
    },
   
    // To load the new compiled CSS and JavaScript instead of the old ones.
    // Needs to be in the markup e. g.:
    // <!-- build:css css/compiled.min.css -->mittens.css<!-- /build -->
    // <!-- build:js js/compiled.min.js -->mittens.js<!-- /build -->
    processhtml: {
      dist: {
        files: {
          // 'destination': ['source']
          'dist/ausgabe.html': ['src/ausgabe.html'],
          'dist/historie.html': ['src/historie.html']
        }
      }
    },
   
    // Minify files
    uglify: {
      dist: {
        files: {
          // make sure we load jQuery first
          'dist/js/compiled.min.js': ['src/js/jquery-1.9.1.min.js','src/js/*.js']
        }
      }
    }
   
  });
 
  // END: Tasks------------------------------------------------------------------
 
  // Load the plugins
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-uncss');
  grunt.loadNpmTasks('grunt-processhtml');
  grunt.loadNpmTasks('grunt-contrib-uglify');
 
  // Default tasks.
  // Can be triggered typing 'grunt' in the project directory
  grunt.registerTask('default', ['copy', 'uncss', 'uglify', 'processhtml']);
 
};

Dann benötigt es noch ein package.json
Code: 
{
  "name": "gruntUncss",
  "description": "Remove unused CSS",
  "author": "Chronos",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-uncss": "^0.3.2",
    "grunt-contrib-copy": "^0.5.0"
  }
}


Ich hoffe die Kommentare sind soweit ausreichend um es zu verstehen.
Sieht zwar erst mal nach viel Text und Aufwand aus aber das macht man ein mal und startet später nur den Grunt-Befehl.

Das wäre ein möglicher Vorschlag, ein anderer wäre z. B. für Bilder WebP zu verwenden bzw. deinen Server so einzustellen das dieser schaut ob der Browser das kann und wenn nicht das normale Bild ausliefert.
 
Chronos schrieb:
Ich weiß nicht ob das in deinem Fall ratsam ist aber was man bspw. tun kann ist, das CSS der Seite von nicht benutzten Klassen/IDs zu bereinigen.
Das geht u. a. mit Grunt, einem JavaScript-Task Tool. Für Grunt benötigst du außerdem auch Node.js.

Um deine HTMl Seite von eben jenen Klassen/IDs zu befreien und auch gleich noch einiges anderes wie komprimieren und verhässlichen zu erledigen könntest du folgendes gruntfile.js nehmen.

HTML:
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Optimized</title>
        <!-- build:css css/compiled.min.css -->
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
        <link rel="stylesheet" type="text/css" href="./css/main.css">
        <link rel="stylesheet" type="text/css" href="./css/buttons.css">
        <!-- /build -->
        <!-- build:js js/compiled.min.js -->
        <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="./js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="./js/ausgabe.js"></script>
        <script type="text/javascript" src="./js/delete_rows.js"></script>
        <!-- /build -->
    </head>
   <body>
   </body>
</html>

Und das Gruntfile dann so:
Code: 
module.exports = function(grunt) {
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
 
    // Tasks-------------------------------------------------------------------
 
    // Copy new files into a new directory
    copy: {
      dist: {
        cwd: 'src/',
        expand: true,
        src: '**',
        dest: 'dist/'
      }
    },
 
    // Remove unused CSS across multiple files, compressing the final output
    uncss: {
      dist: {
        files: [
          {
            src: 'src/*.html',
            dest: 'dist/css/compiled.min.css'       
          }
        ]
      },
      options: {
        compress: true
      }
    },
 
    // To load the new compiled CSS and JavaScript instead of the old ones.
    // Needs to be in the markup e. g.:
    // <!-- build:css css/compiled.min.css -->mittens.css<!-- /build -->
    // <!-- build:js js/compiled.min.js -->mittens.js<!-- /build -->
    processhtml: {
      dist: {
        files: {
          // 'destination': ['source']
          'dist/ausgabe.html': ['src/ausgabe.html'],
          'dist/historie.html': ['src/historie.html']
        }
      }
    },
 
    // Minify files
    uglify: {
      dist: {
        files: {
          // make sure we load jQuery first
          'dist/js/compiled.min.js': ['src/js/jquery-1.9.1.min.js','src/js/*.js']
        }
      }
    }
 
  });

  // END: Tasks------------------------------------------------------------------

  // Load the plugins
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-uncss');
  grunt.loadNpmTasks('grunt-processhtml');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default tasks.
  // Can be triggered typing 'grunt' in the project directory
  grunt.registerTask('default', ['copy', 'uncss', 'uglify', 'processhtml']);

};

Dann benötigt es noch ein package.json
Code: 
{
  "name": "gruntUncss",
  "description": "Remove unused CSS",
  "author": "Chronos",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-uncss": "^0.3.2",
    "grunt-contrib-copy": "^0.5.0"
  }
}


Ich hoffe die Kommentare sind soweit ausreichend um es zu verstehen.
Sieht zwar erst mal nach viel Text und Aufwand aus aber das macht man ein mal und startet später nur den Grunt-Befehl.

Das wäre ein möglicher Vorschlag, ein anderer wäre z. B. für Bilder WebP zu verwenden bzw. deinen Server so einzustellen das dieser schaut ob der Browser das kann und wenn nicht das normale Bild ausliefert.
Zum Vergrößern anklicken....

Irgendwie bezweifle ich dass das gut funktioniert. Insbesondere wenn eine Klasse von JS hinzugefügt wird oder per Ajax nachgeladen. Woher will "grunt" wissen ob ich eine Klasse benötige oder nicht.
Noch viel schlimmer finde ich es aber, überhaupt so planlos zu coden, dass man eine Software benötigt, die die eigene Software bereinigt.

@eieste

Grundsätzlich ist es immer besser, möglichst wenige HTTP-Requests gleichzeitig durchzuführen.
Deshalb würde ich sagen: Alles in eine Datei.
Alles was geladen wurde, wird im Cache gespeichert.
Wenn du also einmal alle JS- und CSS-Dateien geladen hast, hast du danach Ruhe.

Allerdings habe ich da ein paar Ausnahmen. Bekannte Libraries wie jQuery werde ich immer von CDNs beziehen.
Bei denen ist die Wahrscheinlichkeit recht groß, dass diese bereits auf einer anderen Website inkludiert waren.
Dadurch befinden sie sich bereits im Cache und müssen nicht einmal mehr beim ersten Besuch geladen werden.

Dass dein JS 5 MB hat, bezweifle ich mal schwer. Das Projekt an dem ich gerade dran bin, hat gerade mal 30 KB bei 800 Zeilen.
Handgelenk x Pi = 136533 Zeilen Code!?
Selbst geschrieben hast du die wohl kaum?

Bei 5 MB schweren Scripts musst du dich jedenfalls nicht um Performance sorgen - da scheint es weitaus größere Probleme zu geben.
 
Okay das ist richtig, das kann es nicht wissen - das mit dem nachladen habe ich nicht bedacht.

Für alles andere, statische bringt das aber natürlich sehr wohl etwas, gerade wenn man bspw. Bootstrap nutzt - auf einer meiner Seiten brachte das dann bis zu 30% weniger CSS, was ja eine Menge ist (nicht nur Bootstrap aber eben auch Klassen die nicht auf jeder Seite verwendet werden). Wie das funktioniert ist ja auch klar, es parst das HTML nach Klassen und IDs und entfernt diese dann in einem neuen CSS. Das soll jetzt kein Angriff sein aber das hat auch nichts mit planlos coden zu tun, das ist einfach eine Möglichkeit die Seitengröße weiter zu optimieren und bei mit unter 10k+ Zeilen CSS glaub ich kaum das du so gut planen kannst als das du da genügend Überblick hast, gerade wenn mehrere daran arbeiten - solche Tools gibt es nicht ohne Grund. Wenn alles im Projekt fertig ist, lässt man es im Nachhinein drüber laufen und liefert die Seite dann aus - was hat das mit planlos zu tun, sorry.
 
Werbung:
Tut mir leid ich hab Sünde getan!
Es sind nur 4,23 MB

upload_2014-4-25_11-21-22.png

Natürlich sind die nicht selbst geschrieben. Und es sind auch nicht alle in Verwendung (Siehe die ganzen jQuery files)
Ich hab für das Projekt ein fertiges Design bekommen, da ich keinen Designer hab, aber alles gut aussehen sollte.

Und die 5 MB ist ja der Code für alle Sites die mit dem Projekt zu tun haben, und js code benötigen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben