Te drukken

Optimaliseer afbeeldingen

Optimalisatie betekent eenvoudig houden van de grootte van het beeld kleine houden van de kwaliteit van het beeld tot het gewenste niveau. Er zijn tal van procedures die een keer kan uitvoeren om beelden te optimaliseren voordat ze worden geladen op de server voor levering. De tools die we gebruiken voor het creëren van deze beelden (Photoshop, Fireworks etc.) hebben doorgaans tools die gebruikers in staat stellen om het beeld voor web gebruik te optimaliseren.
• Controleer de GIF's te zien of ze gebruik maakt van een palet grootte overeenkomt met het aantal kleuren in het beeld. Wanneer een beeld wordt 4 kleuren en een 256-kleurenpalet gebruikt, dan is het beeld verder kan worden geoptimaliseerd

• Converteer GIF is om PNG's waar mogelijk en bekijk of er is een besparing. Vaker wel dan niet, er is. Aarzel niet om het gebruik van PNG's, zoals ze worden volledig ondersteund door de meeste van de gebruikte browsers. Verwacht van de animatie-mogelijkheden een PNG kan doen wat een GIF doet, met inbegrip van transparantie.

• Voor de afbeeldingen in CSS sprites, schik de afbeeldingen in de sprite horizontaal in plaats van verticaal resulteert meestal in een kleinere bestandsgrootte. Ook de beelden combineren met soortgelijke kleuren in een sprite. Dit helpt u om de kleur aantal laag is, idealiter onder 256 kleuren om zo te passen in een PNG8.

• Als u gebruik maakt van een favicon.ico, hou het klein, bij voorkeur onder 1K.

Gebruik goed geschaald / vergroot of verkleind.

Probeer altijd en gebruiken verkleinde foto's, dat wil zeggen geen gebruik maken van een groter plaatje dan je nodig hebt, alleen maar omdat je kunt de breedte en hoogte in HTML te stellen. Als u een 100px X 100px afbeelding weer te geven op de pagina, maak dan geen gebruik van een verkleinde afbeelding 200x200px.

Gebruik progressieve beelden

Een webbrowser maakt al afbeeldingen geleidelijk. Om nog beter te doen, slaat u GIF-of PNG-afbeeldingen met de "interlaced" optie, of uw JPEG-afbeeldingen met de "progressieve" optie.

Er is discussie onder internetgebruikers over de vraag of het gebruik van progressieve beeld is een zegen of een belemmering. Ook een progressief beeld weegt ongeveer 20% meer dan de niet progressieve tegenhanger. Dus, als je denkt dat je lay-out maakt gebruik van beelden die de gebruiker-ervaring zal geen belemmering vormen voor de door haar zijn progressieve, voel je vrij om dat te doen.

Inclusief JavaScript's aan de onderkant van de HTML-document

Als u niet beschikt over document.write (of een dynamische generatie van de pagina-inhoud met behulp van javascripts) om een ​​deel van de inhoud van de pagina in te voegen in uw scripts, verplaatst u de script toe te voegen verklaring aan de onderkant van de pagina, voor het einde van de BODY tag.
De HTTP/1.1 specificatie blijkt dat browsers niet meer dan twee componenten te downloaden in parallel per hostnaam. Als u van dienst uw afbeeldingen van meerdere hostnamen, kunt u meer dan twee downloads voor te komen in parallel. Terwijl een script downloaden, echter, zal de browser niet starten een andere downloads, zelfs op verschillende hostnamen.
Er zijn ook manieren om dynamisch SCRIPT knooppunten en te laden op afstand scripts nadat de pagina is geladen met behulp van AJAX.

Externaliseren u JavaScript's

Gebruik van externe JavaScript-bestanden zal resulteren in een snellere laden van pagina's, omdat de JavaScript-bestanden in de cache van de browser. Inline JavaScript's "in HTML-documenten krijgen gedownload elke keer dat de HTML-document wordt gevraagd. Dit kan zelfs het aantal van de gemaakte HTTP-verzoeken, maar vervolgens neemt de grootte van het HTML-document. Externe JavaScript's worden gecached door de browser, de grootte van het HTML-document wordt verminderd zonder toename van het aantal HTTP-verzoeken.
Let op: Als gebruikers van uw site hebben meerdere bekeken pagina's per sessie en veel van uw pagina's weer gebruik maken van dezelfde scripts en stylesheets, is er een groter potentieel voordeel uit externe bestanden in de cache.

Pak uw JavaScript-bestanden

In het geval van JavaScripts, in tegenstelling tot de CSS, kunnen de bestanden gekraakt met behulp van een aantal standaard algoritmen die een kleinere bestanden dan alleen het verwijderen van spaties of tabs zou geven. Een voorbeeld van javascript verpakker kan hier http://dean.edwards.name/packer/ te vinden

Weg met alle dubbele Scripts

Het is zeer ongebruikelijk dat hele scripts kan worden gedupliceerd, maar een evaluatie van de tien top van de Amerikaanse websites blijkt dat twee van hen een dubbel script bevatten. Dubbele scripts maar uiteraard vermindert de prestaties door het creëren van onnodige HTTP-verzoeken en verspilling van JavaScript-uitvoering.
Ook in veel gevallen, maar de scripts namen verschillend zijn, is er een kans van dubbele scripts in dezelfde pagina als gevolg van het team grootte en het aantal scripts.

Beperk de toegang tot DOM-elementen waar mogelijk

Toegang tot DOM-elementen met JavaScript is traag, zodat het oog op een meer responsieve pagina, moet u beschikken over:
• Cache verwijzingen naar toegankelijk elementen
• Update nodes "offline" en dan voeg ze toe aan de boom
• Vermijd vaststelling van lay-out met JavaScript

Aparte Gedrag van inhoud en presentatie

Net zoals we afzonderlijke presentatie (CSS / XSLT) van Content (XHTML / XML), moeten we ook het gedrag te scheiden (Javascript). Dit is de zogenaamde onopvallende Javascript. Net zoals we linken naar externe CSS-bestanden, moeten we linken naar externe javascript bestanden.

In plaats van hard te coderen gedrag in de inhoud (bv. onmouseover, onclick, enz.), moet het gedrag van dynamisch worden toegevoegd aan de elementen, klassen en unieke elementen (ID's) met behulp van de DOM. De fundamentele document, de inhoud, mag alleen een geldig XHTML / XML en geen javascript.
Javascript moet vergroten inhoud door het toevoegen van gedrag. De inhoud moet blijven nuttig en bruikbaar zonder javascript (of zonder volledige JavaScript-ondersteuning).

Ik heb gered dit artikel eeuwen terug, dus Sorry! Ik dont de bron onthouden ... maar het leek nuttig, voor ons die moeten zich bewust zijn over de doelgroep voor wie we de site te ontwikkelen voor ... dus even i

Pagina gewicht kan worden gebruikt om de overbrenging tijd voor een pagina bepalen verschillende internet snelheden. Bij wijze van voorbeeld, de volgende tabel toont de downloadtijden voor drie verschillende pagina's een aantal populaire verbindingssnelheden.

Voordelen van het verminderen van pagina gewicht?

Het positieve effect van het verminderen van pagina gewicht komt zowel website-eigenaren en consumenten. Potentiële voordelen zijn:

1. Pagina's sneller te laden. De meest voor de hand liggende impact van het verminderen van pagina gewicht is dat uw website de pagina's sneller laden voor bezoekers, ongeacht hun verbindingssnelheid.
2. Lagere pagina te laden keer voor een aangenamere bezoekers. Bezoekers zijn minder snel gefrustreerd en elders te gaan als uw pagina's snel te laden. Aan de andere kant, langzaam ladende pagina's zijn een van de zekerste manieren om bezoekers en potentiële klanten te verliezen.
3. Snellere load-tijden zal bijdragen tot een verhoogde conversie. Meer bezoekers blijft langer op uw site. Meer van hen zal uiteindelijk het doen van aankopen, het aanmelden voor uw nieuwsbrief, of boek-markering uw site.
4. Uw perceptie van het merk zal worden versterkt. Terugkerende klanten en nieuwe bezoekers zullen zowel meer geneigd zijn om uw site (en zakelijke) beschrijven als "professionele" als uw pagina's snel te laden.
5. Pagina's met schone, stevige code zal vaak beter worden geïndexeerd door natuurlijke zoekmachines.
6. Pagina's geoptimaliseerd voor gewicht kan daadwerkelijk op te slaan bandbreedte kosten op sites met veel verkeer. 100.000 pagina's met een gewicht van 150 Kb vereist twee keer zoveel bandbreedte van uw ISP dan 100.000 pagina's per gewicht, 75 Kb. Voor ISP's die in rekening voor de gebruikte bandbreedte of voor het restant, kan deze vermindering leiden tot aanzienlijke besparingen op bandbreedte kosten.

Houd rekening met de volgende gegevens, gepubliceerd in een rapport

Als XML / XSL-transformaties is uw domian, dan zijn er momenten waarop we een stuk van dynamische code te gebruiken bibliotheekitem (gemaakt worden herbruikbare) willen. Wat ik bedoel, kan waarschijnlijk worden gemaakt met dit voorbeeld duidelijk scenario.

Stel je voor dat het maken van een website (en het gebruik van XML, XSL transfroms natuurlijk) en de meeste van de pagina's zou een Opmerkingen Module hebben. Nou! vervolgens te kopiëren of deze code plakken in elke pagina template (die ik dont have zeggen, maar maken het onderhoud en rework een nachtmerrie), of nog beter, maak je een INCLUDE-bestand dat kan in waar je zelf wil worden getrokken in uw pagina ( s) ...
Dus Hoe creëren we een XSL INCLUDE-bestand en dit opnemen in een andere XSL-bestand? Hier is hoe ...

Gewoon om dingen duidelijk maken ... hier is een snelle lijst met bestanden die je zou maken ... hier, zullen we ook informatie over fruit en groenten in een bovenliggende pagina genaamd voedsel.

1. food.xml - XML-gegevensbestand, waarop de transformatie zal worden toegepast
2. food.xsl - belangrijkste XSL-bestand, dat onze food.xml zal transformeren
3. inc_fruits.xsl - XSL-bestand dat onder meer zal maken vruchten gegevens
4. inc_vegtables.xsl - XSL-bestand dat onder meer zal maken vetetables gegevens

Ik denk niet dat ik moet uitleggen veel, de codes voor bovenstaande elementen, zal zijn spreekt voor zichzelf ...

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>

Download al deze bestanden hier (252 downloads)