Über 15 Tipps zur Beschleunigung Ihrer Website und zur Optimierung Ihres Codes!

() translation by (you can also view the original English article)

Sobald Sie eine Weile programmiert haben, nehmen Sie etwas als selbstverständlich an. Sie vergessen, wie schlau Sie wirklich sind. Wie viele hundert Tastaturkürzel haben wir auswendig gelernt? Wie viele Sprachen haben wir gelernt? Wie viele Frameworks? Wie viele Hacks? Zu sagen, dass Webdesign/-entwicklung eine extrem schwierige Branche ist, bringt es auf den Punkt. Fügen Sie als nächstes hinzu, dass vieles, was Sie heute wissen, in einigen Jahren als veraltet angesehen wird.

Heute werden wir uns eine Reihe von Tipps und Tricks ansehen, die Anfängern helfen, ihre Entwicklungszeit zu verkürzen und effizienter zu programmieren. Sie sehen eine Mischung aus schnellen Tipps zur Zeitersparnis sowie spezifischen Codierungstricks, um die Effizienz Ihrer Webanwendung zu steigern.

Komprimieren Sie Ihre Bilder noch weiter

Wenn Sie das Werkzeug "Für Web speichern" in Photoshop verwenden, können Sie unsere Bilder komprimieren, um die jeweilige Dateigröße zu verringern. Aber wussten Sie, dass die Komprimierung noch weiter gehen kann, ohne die Qualität zu beeinträchtigen? Eine Site namens Smush.It macht den Prozess zum Kinderspiel.

Wie ist das möglich?

Das Team von Smush. Es verwendet eine Vielzahl von Werkzeugen.

ImageMagick, um den Bildtyp zu identifizieren und GIFs in PNG zu konvertieren.
pngcrush, um nicht benötigte Teile von PNGs zu entfernen. Wir experimentieren derzeit mit anderen PNG-Werkzeugs wie pngout, optipng und pngrewrite, die eine noch bessere png-Optimierung ermöglichen.
jpegtran, um alle Metadaten aus JPEGs zu entfernen (derzeit deaktiviert) und progressive JPEGs auszuprobieren.
Gifsicle zur Optimierung von GIF-Animationen durch Striping sich wiederholender Pixel in verschiedenen Frames.

* Die obigen Listenelemente wurden von der SmushIt-FAQ-Seite übernommen.

Führen Sie also kurz vor der Bereitstellung einer neuen Website Ihre URL über deren Dienst aus, um alle Ihre Bilder zu reduzieren und so Ihre Website zu beschleunigen. Achtung - der Dienst konvertiert möglicherweise Ihre GIF-Dateien in PNG. Möglicherweise müssen Sie Ihre HTML- und CSS-Dateien entsprechend aktualisieren. In 99% der Fälle ist das Speichern als PNG die bessere Entscheidung. Betrachten Sie das PNG-Format als bewährte Methode, es sei denn, Sie verwenden ein klebriges animiertes GIF.

Seien Sie weise. Verwenden Sie Snippets.

Viele IDEs bieten ein "Code-Snippet" -Panel an, in dem Sie Code für die spätere Verwendung speichern können. Besuchen Sie lipisum.com zu oft, um den allgemeinen Text zu lesen? Warum nicht einfach als Snippet speichern? Drücken Sie in Dreamweaver "Umschalttaste F9", um die Registerkarte "Snippet" zu öffnen. Sie können dann das entsprechende Snippet an die entsprechende Stelle ziehen. Diese Funktion spart mir im Laufe einer Woche so viel Zeit.

Verwenden Sie Console.log() zum Debuggen

Sie haben die jQuery-Bibliothek heruntergeladen und versuchen langsam, die Syntax zu verstehen. Auf dem Weg stoßen Sie auf einen Haken und stellen fest, dass Sie nicht herausfinden können, wie hoch der Wert von $ someVariable ist. Einfach, mach einfach...

1	console.log($someVariable);

Laden Sie jetzt Firefox - stellen Sie sicher, dass FireBug installiert ist - und drücken Sie F12. Sie erhalten den richtigen Wert.

Jetzt - multiplizieren Sie dies mit unendlich und bringen Sie es in die Tiefen der Ewigkeit, und Sie werden immer noch nicht erkennen, wie nützlich Firebug und console.log() sein können. :)

Laden Sie die Web Developer Werkzeugbar herunter

Dieses unglaublich hilfreiche Firefox-Plugin wurde von Chris Pederick erstellt und bietet Ihnen eine Vielzahl von Optionen. Viele von Ihnen, die meine Screencasts ansehen, wissen, dass ich die Option "CSS bearbeiten" mag, um meine Stile in Echtzeit anzupassen. Weitere hilfreiche Optionen sind...

Deaktivieren Sie einfach Javascript
Deaktivieren Sie einfach CSS
Schnelle Links zur HTML/CSS-Validierung
Lineale
Cookies deaktivieren
Zu viele großartige Funktionen zum Auflisten!

Webentwickler-Symbolleiste

Erwägen Sie, Skript-Tags unten zu platzieren

Dies ist eine Prozedur, die wir alle nicht genug durchführen. Obwohl dies nicht immer möglich ist, können Sie Ihre Website um ein Vielfaches beschleunigen, indem Sie Ihre Skript-Tags neben dem schließenden <body>-Tag platzieren.

1	....
2	<script type="text/javascript" src="someScript.js"></script>
3	<script type="text/javascript" src="anotherScript.js"></script>
4	</body>

Warum hilft das?

Die meisten aktuellen Browser können maximal zwei Komponenten für jeden Hostnamen parallel herunterladen. Beim Herunterladen eines Skripts können jedoch keine anderen Downloads erfolgen. Dieser Download muss abgeschlossen sein, bevor Sie fortfahren können.

Wenn möglich, ist es daher sinnvoll, diese Dateien an den unteren Rand Ihres Dokuments zu verschieben, damit die anderen Komponenten (Bilder, CSS usw.) zuerst geladen werden können.

Komprimieren Sie beim Bereitstellen CSS- und Javascript-Dateien

Wenn die Leistung für Ihre Website von größter Bedeutung ist, empfehle ich dringend, dass Sie Ihre CSS- und Javascript-Dateien unmittelbar vor der Bereitstellung komprimieren. Machen Sie sich nicht die Mühe, dies zu Beginn Ihrer Entwicklung zu tun. Es wird nur mehr Frustration als Hilfe verursachen. Sobald der Bogen gebunden ist, drücken Sie diese Babys zusammen.

Javascript-Komprimierungsdienste

CSS-Komprimierungsdienste

Zwei weitere hilfreiche Werkzeugs zum Packen von JavScript-Code sind YUI Compressor und JSMin.

Außerdem haben Sie die Möglichkeit, Ihr HTML zu komprimieren - obwohl ich es nicht empfehlen würde. Die Datereduktion ist vernachlässigbar.

jQuery "Quick Tip" Zusammenfassung

Vor nicht allzu langer Zeit hat Jon Hobbs-Smith von tvidesign.co.uk einen fantastischen Artikel veröffentlicht, der 25 jQuery-Tipps enthält. Stellen Sie sicher, dass Sie diese Seite mit einem Lesezeichen versehen! Hier sind einige meiner Favoriten.

Überprüfen Sie, ob ein Element vorhanden ist.

1	if ($('#myDiv).length) {
2	// this code will only run if the div with an id of #myDiv exists.
3	}

Verwenden Sie einen Kontext

Vielen Menschen ist nicht klar, dass die jQuery-Funktion beim Zugriff auf dom-Elemente einen zweiten Parameter akzeptiert - "context". Folgendes berücksichtigen...

1	var myElement = $('#someElement');

Für diesen Code muss jQuery das gesamte DOM durchlaufen. Wir können die Geschwindigkeit verbessern, indem wir einen Kontext als zweiten Parameter verwenden.

1	var myElement = $('#someElement', $('.someContainer'));

Jetzt weisen wir jQuery an, nur innerhalb des .someContainer-Elements zu suchen und alles außerhalb davon zu ignorieren.

Verwenden Sie IDs anstelle der Klassen

Beim Zugriff auf IDs mit jQuery verwendet die Bibliothek die traditionelle Methode "getElementById". Beim Zugriff auf Klassen muss jQuery jedoch eigene Methoden verwenden, um den dom zu durchlaufen (es gibt keine native "getElementByClass" -Methode). Dadurch dauert es etwas länger!

Überprüfen Sie alle 25 Tipps!

Verwenden Sie nach Möglichkeit $_GET anstelle von $_POST

Wenn Sie bei AJAX-Aufrufen die Wahl zwischen $_GET oder $_POST haben, wählen Sie die erstere.

"Der Yahoo! Das Mail-Team stellte fest, dass POST bei Verwendung von XMLHttpRequest in zwei Schritten in den Browsern implementiert wird: zuerst die Header senden, dann Daten senden. Verwenden Sie daher am besten GET, für dessen Senden nur ein TCP-Paket erforderlich ist (es sei denn, Sie haben viele Cookies)."- Developer.Yahoo.com

Denken Sie daran - verwenden Sie $_GET nicht blind. Stellen Sie sicher, dass Sie genau wissen, was Sie zuerst tun. Beispielsweise sollten Sie unter keinen Umständen den Querystring und den Datenbankzugriff mischen. Vor nicht allzu langer Zeit hat mir einer meiner Twitter-Freunde ein Bild einer Live-Website gesendet, die eine MYSQL-Abfrage in der URL enthält. TUN SIE DAS NICHT! :)

Verwenden Sie im praktischen Fall Bibliotheken und Frameworks

Unabhängig davon, ob Sie PHP, ASP.NET, MooWerkzeugs, jQuery oder eine Kombination aus allen verwenden, sollten Sie gegebenenfalls Frameworks verwenden.

Beispielsweise:

Wenn ich eine einfache statische Website betreibe und nur ein wenig Javascript benötige, um einen Rollover-Effekt zu erzielen, ist das Importieren des jQuery-Skripts unangemessen.
Wenn die komplizierteste Funktion meiner statischen Website das Abrufen einer XML-Datei ist, muss ich kein Framework verwenden. In solchen Fällen leidet meine Website und kostet mich mehr Geld für zusätzliche Bandbreitenausgaben.

Wenn ich jedoch eine komplizierte Site erstelle, die ein vollständiges CMS und einen komplizierten Datenzugriff erfordert, werde ich mir eines der Frameworks meiner bevorzugten Sprache ansehen.

Denken Sie daran - lassen Sie Frameworks für Sie arbeiten. nicht umgekehrt. Seien Sie schlau, wenn Sie diese Entscheidungen treffen.

YSlow

YSlow ist ein wunderbarer Service, der Ihre Website überprüft, um sicherzustellen, dass sie so effizient wie möglich ist. Das Yahoo Dev-Team hat vor nicht allzu langer Zeit eine Reihe von Richtlinien oder Best Practices erstellt, die bei der Entwicklung befolgt werden sollten - viele davon werden in diesem Artikel beschrieben.

Es gibt einen großartigen YSlow-Screencast, der viele zeitsparende Techniken demonstriert. Ich empfehle Ihnen dringend, es anzusehen, wenn Sie die Chance haben.

Tastatürkürzel. Lernen Sie sie!

Die meisten erfahrenen Designer/Entwickler werden mir zustimmen. Wenn ich jedes Mal, wenn ich Änderungen an meiner Site oder meinem Design vornehmen wollte, zum Symbolleistenmenü gehen müsste, wäre ich verloren. Ich habe Tastaturkürzel so lange verwendet, dass ich die richtige Position für diese Befehle nicht mehr kenne. Ich weiß nur, dass "Shift X" das richtige Fenster öffnet.

Auf den ersten Blick kann es wie verschwendetes Wissen erscheinen. Aber ich versichere Ihnen, dass es nicht ist. Ich empfehle Ihnen, eine Google-Suche nach "X-Tastaturkürzeln" durchzuführen - wobei X Ihrer Software (d. H. Photoshop) entspricht. Drucken Sie das Diagramm aus und platzieren Sie es neben Ihrem Computer. Üben Sie in den nächsten Wochen, Ihre Maus so wenig wie möglich zu berühren. Dies ist eine Sache, die die Profis von den Hobbyisten unterscheidet.

Erstellen Sie eine Vorlage "Neue Website"

Seien wir ehrlich; Nicht jede Website muss eine riesige und komplizierte Anwendung sein. Manchmal möchten wir einfach nur unser Portfolio anzeigen - wahrscheinlich die meiste Zeit für einige! Erstellen Sie in diesen Fällen eine einfache "Vorlage", die alles enthält, was Sie für den Einstieg benötigen.

In meinem Vorlagenordner habe ich die Ordner "JS" und "CSS" verschachtelt.

Ersteres enthält meine Datei "DD_belatedPNG.js" (fügt PNGs in IE6 24-Bit-Transparenz hinzu).
Letzteres enthält einfach eine leere "default.css" -Datei und meine eigene benutzerdefinierte Rücksetzdatei.

Außerdem habe ich eine "index.html (php)" - Datei, die einige Codefragmente enthält, die ich für die meisten meiner Projekte verwende. Es ist nichts Besonderes, aber es spart Zeit!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/default.css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.7a-min.js"></script>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Untitled Document</title>

<script type="text/javascript">
	$(function() {
	
	});
</script>

</head>

<body>

<div id="container">

</div><!--end container-->

</body>
</html>

Wie Sie sehen können, verweise ich auf meine CSS- und Javascript-Dateien, verweise auf die jQuery-Datei von Google, erstelle die jQuery-Funktion document.ready() und öffne das Standard-Div "container".

Es ist eher simpel, spart aber Zeit. Kopieren Sie also jedes Mal, wenn Sie eine neue Website erstellen, einfach Ihren "Vorlagen" -Ordner und stöbern Sie darin.

Inline Vs. Extern

Im Allgemeinen sollten alle Ihre CSS- und Javascript-Dateien von der Seite entfernt und in ihren jeweiligen externen Dateien abgelegt werden.

Warum sollten wir das tun?

Saubererer Code.
Die Trennung von Präsentation und Inhalt ist entscheidend.
Durch die Verwendung externer Dateien werden die Daten für die zukünftige Verwendung zwischengespeichert. Dies reduziert die Größe der HTML-Datei, ohne dass eine zusätzliche HTTP-Anforderung entsteht - aufgrund des Caching.

Wenn Sie nur wenige grundlegende Stile haben, kann eine Ausnahme gemacht werden. In diesen und nur in diesen Fällen kann es vorteilhaft sein, sie in die HTML-Seite aufzunehmen.

Stellen Sie fest, ob ein PHP-Skript mit Javascript aufgerufen wurde

AJAX liegt derzeit voll im Trend - vor allem, weil es dank Javascript-Bibliotheken endlich relativ benutzerfreundlich geworden ist. In einigen Fällen müssen Sie eine Möglichkeit haben, festzustellen, ob das Skript mit Javascript aufgerufen wurde. Es gibt einige Tage, um diese Aufgabe zu erfüllen.

Eine Möglichkeit wäre, beim Senden des POST ein eindeutiges Schlüssel-Wert-Paar an Javascript anzuhängen. Sie können dann PHP verwenden, um festzustellen, ob dieser bestimmte Schlüssel vorhanden ist. Wenn ja, wissen wir, dass Javascript aktiviert ist.

Ein besserer Weg wäre die Verwendung einer integrierten PHP-Funktion namens "HTTP_X_REQUESTED_WITH". Um zu zeigen...

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
  // write some code and rest assured that the Javascript is enabled.
} else {
  // Do something different to compensate for users that have JS turned off.
}

Link zum CDN von Google

Vor nicht allzu langer Zeit begann Google, beliebte Skripte wie jQuery zu hosten. Wenn Sie eine solche Bibliothek verwenden, wird dringend empfohlen, auf das CDN von Google zu verlinken, anstatt ein eigenes Skript zu verwenden.

AJAX Libraries API

Woher?

Caching: Es besteht die Möglichkeit, dass Ihre Benutzer das Skript überhaupt nicht herunterladen müssen! Wenn ein Browser eine Anforderung für eine Datei sieht, die bereits auf den Computer des Benutzers heruntergeladen wurde, erkennt er dies und gibt eine Antwort "304" zurück (NICHT GEÄNDERT). Stellen Sie sich zum Beispiel vor, ein Nutzer besucht 30 Websites, die alle mit dem CDN von Google verknüpft sind. In diesem Beispiel würde der Benutzer jQuery nur einmal herunterladen!
Verbessern Sie die Parallelität: Ich habe in einem früheren Tipp darüber gesprochen. Durch Entfernen dieser zusätzlichen Anforderung kann der Browser des Benutzers parallel mehr Inhalte herunterladen.

Umfassen Sie Firefox-Erweiterungen

Ich bin ein großer Fan von Google Chrome. Es öffnet sich extrem schnell und verarbeitet Javascript schneller als jeder andere Browser - zumindest vorerst (ich denke, die neueste Version von Firefox hat möglicherweise aufgeholt.).

Sie werden jedoch nicht sehen, dass ich Firefox bald verlasse. Die Anzahl der hilfreichen Plugins, die für den Browser verfügbar sind, ist erstaunlich. Hier ist eine Liste meiner Favoriten.

Wenn hilfreich, verwenden Sie eine IDE

Genauso wie es cool ist, Microsoft jetzt zu hassen, scheint es im Moment beliebt zu sein, dass Leute diejenigen angreifen, die IDEs bei der Entwicklung verwenden. Das ist einfach albern.

In vielen Fällen ist die Verwendung einer erweiterten IDE von größter Bedeutung - insbesondere bei der Arbeit in OOP-Sprachen. Wenn Sie jetzt einfach eine kleine HTML-Vorlage erstellen, funktionieren Programme wie Notepad++ und Coda hervorragend. Eigentlich würde ich ihre Verwendung in diesen Fällen empfehlen. Fügen Sie das zusätzliche Aufblähen nicht hinzu, wenn Sie es nicht benötigen. Nutzen Sie jedoch bei der Entwicklung erweiterter Anwendungen eine IDE.

Das war's Leute!

Das sollte es vorerst tun. Hoffentlich helfen einige davon (vielleicht alle!), Sie zu einem besseren Designer und Entwickler zu machen. Was sind einige Ihrer Lieblingsverknüpfungen? Hinterlassen Sie unten einen Kommentar und lassen Sie es uns wissen!