Ausdruck ihrer IT-

Optimieren Sie Bilder

Optimierung bedeutet einfach, indem Sie die Größe des Bildes klein, die Qualität von Bild, auf das erforderliche Niveau. Es gibt viele Verfahren, die einmal durchführen können, um Bilder zu optimieren, bevor sie sich auf dem Server für die Auslieferung geladen werden. Die Werkzeuge, die wir verwenden für die Erstellung dieser Bilder (Photoshop, Fireworks usw.) haben in der Regel Werkzeuge, die es Benutzern, um das Bild für die Verwendung im Web optimieren können.
• Überprüfen Sie die GIF zu sehen, ob sie mit einer Palette Größe entsprechend der Anzahl der Farben im Bild sind. Wenn ein Bild mit 4 Farben und eine Farbpalette mit 256 Farben, dann wird das Bild könnte noch weiter optimiert werden

• Umwandlung von GIF in PNG ist, wo möglich und sehen, ob es eine Einsparung. Mehr als oft nicht, gibt es. Zögern Sie nicht, von PNG verwenden, da sie vollständig von den meisten gängigen Browsern unterstützt werden. Erwarten Sie von den Animationen möglich, eine PNG tun, was ein GIF tut, einschließlich der Transparenz kann.

• Für die Bilder in CSS-Sprites verwendet, ordnen Sie die Bilder im Sprite horizontal wie vertikal führt in der Regel eine kleinere Dateigröße entgegengesetzt. Außerdem kombinieren Bilder mit ähnlichen Farben in einem Sprite. Dies hilft Ihnen, die Farbe Zählung niedriger, im Idealfall unter 256 Farben so in einem PNG8 passen.

• Wenn Sie eine favicon.ico sind, halten sie kleine, vorzugsweise unter 1K.

Verwenden Sie richtig skaliert / verkleinerte Bild.

Versuchen Sie immer, und verwenden Sie Bilder in, dh nicht mit einem größeren Bild, als Sie brauchen, nur weil Sie können die Breite und Höhe in HTML setzen. Wenn Sie einen 100px x 100px Bild auf der Seite anzeigen möchten, dann verwenden Sie nicht eine verkleinerte Bild 200x200px.

Verwenden Sie den Progressive Bilder

Ein Web-Browser rendert Bilder schon progressiv. Um noch besser zu machen, speichern Sie einfach Ihre GIF-oder PNG-Bilder mit dem "Interlaced"-Option, oder Ihre JPEG-Bilder mit der "progressive"-Option.

Es gibt anhaltende Debatte unter den Web-Benutzer, ob die Nutzung von Progressive-Bild ist ein Segen oder ein Hindernis. Auch ein fortschrittliches Image wiegt ca. 20% mehr als ihre nicht progressive Gegenstück. Also, Wenn Sie glauben, Layout verwendet Bilder, die nicht behindern die User-Experience durch wobei es progressive wird, fühlen Sie sich frei, dies zu tun.

Fügen Sie JavaScript die an der Unterseite des HTML-Dokuments

Wenn Sie nicht über document.write (oder jede dynamische Generierung von Seiteninhalten mit Javascripts), einen Teil der den Inhalt der Seite in Ihren Scripts einfügen, verschieben Sie das Skript include-Anweisung an den unteren Rand der Seite, vor dem Ende des BODY-Tags.
Die HTTP/1.1 Spezifikation legt nahe, dass Browser herunterzuladen nicht mehr als zwei Komponenten parallel pro Hostname. Wenn Sie Ihre Bilder von mehreren Hostnamen dienen, können Sie mehr als zwei Downloads parallel auftreten. Während ein Script heruntergeladen wird, jedoch wird der Browser nicht starten alle anderen Downloads, auch auf verschiedene Hostnamen.
Es gibt auch Möglichkeiten zum dynamischen Erstellen von SCRIPT-Knoten und laden Remote-Skripts, nachdem die Seite geladen wird mittels AJAX.

Externalisieren Sie JavaScript-

Über externe JavaScript-Dateien werden in schneller Laden der Seiten führen, da die JavaScript-Dateien vom Browser zwischengespeichert sind. Inline-JavaScript-'in HTML-Dokumenten erhalten jedes Mal, wenn das HTML-Dokument angefordert wird heruntergeladen. Dies könnte in der Tat die Zahl der HTTP-Anfragen gemacht, aber es anschließend erhöht die Größe des HTML-Dokuments. Externe JavaScript-zwischengespeichert werden durch den Browser, die Größe des HTML-Dokuments ist ohne die Erhöhung der Anzahl von HTTP-Anfragen reduziert.
Bitte beachten Sie, dass, wenn Nutzer auf Ihrer Website mehrere Seitenaufrufe pro Session haben und viele von Ihren Seiten wieder verwenden die gleichen Skripte und Stylesheets, gibt es eine größere potentielle Nutzen von externen Dateien zwischengespeichert.

Packen Sie Ihre Javascript Dateien

Im Falle eines JavaScripts, im Gegensatz zu CSS, könnten die Dateien knirschte mit einigen Standard-Algorithmen, die eine geringere Dateigröße als das einfache Entfernen Leerzeichen oder Tabs geben würde. Ein Beispiel für JavaScript-Packer kann hier gefunden werden http://dean.edwards.name/packer/

Entfernt alle doppelten Scripts

Es ist sehr ungewöhnlich, dass ganze Skripte dupliziert werden könnte, sondern eine Überprüfung der zehn Top US-Websites zeigt, dass zwei von ihnen eine doppelte Skript enthalten. Duplizieren Sie Skripte aber offensichtlich reduziert die Leistung, indem unnötige HTTP-Anfragen und verschwendet die Ausführung von JavaScript.
Auch in vielen Fällen, wenn die Skripte Namen unterschiedlich sind, gibt es eine Wahrscheinlichkeit, dass Skripten mehrfach innerhalb der gleichen Seite durch Team Größe und Anzahl der Skripte.

Minimieren Sie Zugriff auf DOM-Elemente, soweit möglich

Zugriff auf DOM-Elemente mit JavaScript ist langsam so, um eine stärker auf Seite, sollten Sie mitbringen:
• Cache Artikeln, auf die zugegriffen Elemente
• Update-Knoten "offline" und fügen Sie sie an den Baum
• Vermeiden Befestigung Layout mit JavaScript

Separate Verhalten von Inhalt und Form

So wie wir getrennte Präsentation (CSS / XSLT) von Inhalt (XHTML / XML), sollten wir uns auch trennen Behavior (Javascript). Dies wird als unaufdringliche Javascript. So wie wir auf externe CSS-Dateien zu verknüpfen, sollten wir auf externe JavaScript-Dateien zu verknüpfen.

Statt hart zu kodieren Verhalten in den Inhalt (zB onmouseover, onclick, etc.), sollte das Verhalten dynamisch auf Elemente, Klassen und einzigartige Elemente (IDs) mit dem DOM hinzugefügt werden. Das grundlegende Dokument, dessen Inhalt, sollte nur gültig XHTML / XML und kein JavaScript.
Javascript sollte durch Zugabe von Verhalten zu erweitern. Der Inhalt sollte bleiben, nützlich und auch ohne JavaScript (oder ohne volle JavaScript-Unterstützung).

Ich habe diesen Artikel Zeiten zurück, rettete so leid! Ich nicht das Quelle nicht vergessen ... aber es schien sinnvoll, für uns, die sich bewusst sein, über das Publikum, für die wir entwickeln für den Standort haben ... Also hier bin ist

Seite Gewichts lässt sich die Download-Zeit für eine bestimmte Seite auf einer Vielzahl von Internet-Verbindungsgeschwindigkeit zu bestimmen. Zum Beispiel, zeigt die folgende Tabelle die Download-Zeiten für drei verschiedene Seiten mit einer Reihe von populären Verbindungsgeschwindigkeiten.

Nutzen einer Verringerung des Gewichts Seite?

Die positiven Auswirkungen der Verringerung der Seite Gewicht Vorteile sowohl Website-Betreiber und Verbraucher. Mögliche Vorteile sind:

1. Seiten schneller geladen werden. Die offensichtlichste Auswirkung der Reduzierung Seite Gewicht ist, dass Ihre Website-Seiten werden schneller geladen für die Besucher, unabhängig von ihrer Verbindungsgeschwindigkeit.
2. Geringere Ladezeiten schaffen mehr Komfort Besucher. Besucher sind weniger wahrscheinlich zu frustriert und gehen woanders hin, wenn Ihre Seiten schnell laden. Auf der anderen Seite, sind Slow-Laden von Seiten einer der sichersten Wege, um Besucher und potenzielle Kunden zu verlieren.
3. Schnellere Ladezeiten führt zu einer erhöhten Conversion beitragen. Mehr Besucher auf Ihrer Website länger zu bleiben. Mehr von ihnen werden am Ende macht Einkäufe, die Anmeldung für den Newsletter oder Buch-Kennzeichnung Ihrer Website.
4. Ihre Wahrnehmung der Marke wird erhöht. Wiederkehrende Kunden und erstmalige Besucher wird eher geneigt sein, Ihre Website (und Unternehmen) als "professionell" bezeichnen, wenn Ihre Seiten schnell laden.
5. Seiten mit sauberen, soliden Code wird oft effektiver durch natürliche Suchmaschinen indiziert werden.
6. Seiten für gewichtsoptimierte kann tatsächlich sparen Bandbreite Ladungen an High-Traffic-Sites. 100.000 Seiten einem Gewicht von je 150 Kb erfordert doppelt so viel Bandbreite von Ihrem ISP als 100.000 Seiten jedes Gewicht 75 Kb. Für ISPs, die für die verwendete Bandbreite oder für Zuschläge erheben, kann diese Reduktion erhebliche Einsparungen bei den Bandbreiten-Kosten zu schaffen.

Betrachten Sie die folgenden Daten in einem Bericht veröffentlicht

Wenn XML / XSL-Transformationen ist Ihr Domian, dann gibt es Zeiten, in denen wir eine peice von dynamischen Code verwendet werden Bibliothekselement (gemacht wiederverwendbar sein) wollen. Was ich meine, könnte wahrscheinlich deutlicher gemacht mit diesem Beispiel-Szenario werden.

Stellen Sie sich vor der Erstellung einer Website (und unter Verwendung von XML, XSL transfroms natürlich) und die meisten der Seiten würde ein Kommentar Modul haben. Na ja! dann entweder Kopieren oder fügen Sie diesen Code in jede Seite Vorlage (das ich nicht mehr haben zu sagen, aber die Wartung und Nacharbeit einen Alptraum) oder besser noch, erstellen Sie eine Include-Datei, die in, wo immer Sie wollen, dass es in Ihre Seite gezogen werden könnten ( e) ...
So wie schaffen wir eine XSL-Include-Datei und schließen es innerhalb eines anderen XSL-Datei? Hier ist, wie ...

Nur um das klarzustellen ... hier ist schnell Liste der Dateien, die Sie schaffen würde ... hier werden wir auch Infos über Obst und Gemüse in eine übergeordnete Seite aufgerufen Essen.

1. food.xml - XML-Datendatei auf dem die Transformation angewendet werden wird
2. food.xsl - Haupt-XSL-Datei, die unsere food.xml verändern wird
3. inc_fruits.xsl - XSL-Datei, die Früchte beinhalten Daten zu rendern wird
4. inc_vegtables.xsl - XSL-Datei, die gehören GEMÜSE Daten machen wird

I dont think Ich habe viel zu erklären, die Codes für die oben genannten Elemente, wird selbsterklärend sein ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Laden Sie all die oben genannten Dateien hier (251 Downloads)