« Zurück zu allen Tipps

HTML, CSS und JavaScript reduzieren

Home / Tipps / HTML, CSS und JavaScript reduzieren /

Die Idee dahinter

HTML, CSS und JavaScript sind Textformate. Das bedeutet, dass alle drei nur aus Text bestehen, der in eine bestimmte Struktur gebracht wird. Dein Browser weiß so, was er auf einer Webseite darstellen soll. Hier sind drei kleine Beispiele:

HTML

<!doctype html>
<html>
     <!-- Hier wird eine ganz einfache Webseite nur mit einer Überschrift und einer Zeile Text gezeigt -->
     <head>
         <title>My Title</title>
     </head>
     <body>
         <h1>Das ist eine Überschrift</h1>
         <p>Das hier ist ein Paragraph.</p>
     </body>
</html>

CSS

html
{
     /* Färbt den Hintergrund komplett schwarz. */
     background: black;
}

JavaScript

function helloWorld()
{
     /* Öffnet ein Pop-up mit dem Text „Hello World“ */
     alter(“Hello World”);
}

helloWorld();

Alle drei dieser Beispiele zeigen einen (für einen Webdesigner) gut lesbaren Text. Jeder dieser Texte ist an bestimmten Stellen eingerückt, um das Lesen des Textes zu erleichtern. Diese Erleichterung ist allerdings nur für den Menschen gedacht, da Computer die Texte auch verstehen können, wenn sie nicht eingerückt sind. Das Entfernen der Einrückung und der unnötigen Zeilenumbrüche nennt man „HTML/CSS/JavaScript reduzieren“. (Dabei werden auch alle Kommentare entfernt.)

Das Endergebnis würde so aussehen:

HTML

<!doctype html><html><head><title>My Title</title></head><body><h1>Das ist eine Überschrift</h1><p>Das hier ist ein Paragraph.</p></body></html>

CSS

html{background: black}

JavaScript

function helloWorld(){alter(“Hello World”);}helloWorld();

Durch das Entfernen der zusätzlichen Zeichen wird die Größe der Webseite erneut reduziert. Lasse Dich von den einfachen Beispielen nicht täuschen, diese Optimierung kann genau so viel bringen, wie das Optimieren von kleineren Bildern.

Deine Webseite optimieren

HTML & PHP Entwickler

Im Internet findest du verschiedene Tools, um diese Minimierung der Dateien automatisch vorzunehmen. Suche einfach nach “HTML/CSS/JavaScript minimieren”. Bevor Du Deine alten Dateien überschreibst, solltest Du ein Back-up der Dateien anlegen. Ersetze nun einfach die alten, nicht optimierten Dateien Deiner Webseite durch die neuen, optimierten Dateien.

Shopware Betreiber

Shopware komprimiert CSS und JavaScript automatisch. In der Entwicklung wird dies häufig abgeschalten, da dies die Arbeit für Webentwickler erleichtert. Wenn Du prüfen möchtest, ob Deine Installation die Komprimierung abgeschalten hat, kannst Du dies in den Einstellungen des Thememanagers nachschauen. Eine genaue Anleitung findest Du in meinem Blogpost “Shopware Ladezeiten Challenge - Konfiguration”.

HTML kann Shopware leider nicht komprimieren. Da mich das gestört hat, habe ich ein Plugin dafür geschrieben. Du kannst es bei den Tools unter “Shopware WOTipps HTML reduzieren & komprimieren” finden.

 

« Zurück zu allen Tipps