Expressant TI

Optimitzar imatges

Optimització simplement significa mantenir la mida de la petita imatge de manteniment de la qualitat de la imatge fins al nivell requerit. Hi ha un munt de procediments que una vegada que puguin dur a terme per optimitzar les imatges abans que es carreguen al servidor per al lliurament. Les eines que utilitzem per a la creació d'aquestes imatges (Photoshop, Fireworks, etc) solen tenir eines que permeten als usuaris optimitzar la imatge per a ús a la web.
• Comproveu la del GIF per veure si està utilitzant una mida de la paleta corresponent al nombre de colors a la imatge. Quan una imatge s'utilitza 4 colors i una paleta de 256 colors, la imatge podria estar més optimitzat

• Convertir GIF a PNG, on sigui possible i veure si hi ha un estalvi. Més sovint que no, no ho és. No dubti en posar en ús de Papua Nova Guinea, ja que són totalment compatibles amb la majoria dels navegadors d'ús comú. Esperar de les capacitats d'animació en format PNG poden fer el que fa un GIF, inclosa la transparència.

• Per a les imatges utilitzades en sprites CSS, organitza les imatges en el sprite en horitzontal en lloc de verticalment en general resulta en una mida de fitxer més petita. A més, combinar imatges amb colors similars en un sprite. Això l'ajuda a mantenir el nombre de color de baixa densitat, l'ideal seria en 256 colors de manera que caben en un PNG8.

• Si utilitzeu un favicon.ico, que sigui petita, de preferència sota 1K.

Utilitzeu l'escala apropiada / canviar la mida de la imatge.

Sempre tractar d'utilitzar les imatges redimensionades, és a dir, no utilitzi una imatge més gran del que necessita només perquè es pot establir l'amplada i l'alçada en HTML. Si vostè necessita per mostrar una imatge de 100px X 100px a la pàgina, no utilitzi una imatge reduïda 200x200px.

Utilitza imatges progressives

Un navegador web que ja fa que les imatges de forma progressiva. Per fer-ho encara millor, només ha de guardar la seva GIF o PNG imatges amb el "entrellaçat" opció, o les imatges JPEG amb el "progressista" opció.

Existeix un debat permanent entre els usuaris de la web quant a si l'ús de la imatge progressiva és una benedicció o un obstacle. També una imatge progressista pesa aproximadament un 20% més que el seu homòleg no progressiva. Així doncs, si vostè pensa que el disseny utilitza imatges que no obstaculitzen la experiència de l'usuari pel mateix ser progressista, no dubti en fer-ho.

Incloure JavaScript a la part inferior del document HTML

Si no té document.write (o de qualsevol generació dinàmica de continguts de la pàgina Ús d'arxius JavaScript) per inserir part del contingut de la pàgina en els scripts, mogui l'script d'incloure una declaració a la part inferior de la pàgina, abans del final de l'etiqueta BODY.
L'especificació HTTP/1.1 suggereix que els navegadors de descàrrega no més de dos components en paral · lel pel nom de host. Si servirà a les seves imatges de diversos noms de host, pot obtenir més de dos descàrregues que es produeixen en paral · lel. Mentre que un script s'està descarregant, però, el navegador no s'iniciarà cap tipus de descàrrega d'una altra manera, fins i tot en els diferents noms de host.
També hi ha formes de crear dinàmicament els nodes SCRIPT i carregar scripts remots després de la pàgina es carrega mitjançant AJAX.

Externalitzar al JavaScript

Ús d'arxius JavaScript externs es traduirà en una càrrega més ràpida de pàgines a causa que els arxius JavaScript s'emmagatzemen en memòria cau pel navegador. "En línia Javascript en els documents HTML es descarreguen cada vegada que se sol · licita el document HTML. En realitat, això podria reduir el nombre de peticions HTTP realitzades però posteriorment augmenta la mida del document HTML. Externa de JavaScript s'emmagatzemen en memòria cau pel navegador, la mida del document HTML es redueix sense augmentar el nombre de peticions HTTP.
Tingueu en compte que, si els usuaris del seu lloc amb vistes de diverses pàgines per sessió i moltes de les seves pàgines de tornar a utilitzar els mateixos scripts i fulls d'estil, hi ha un major benefici potencial de la memòria cau d'arxius externs.

Empaquetar els arxius Javascript

En el cas de JavaScript, a diferència de CSS, els arxius poden cruixir l'ús d'alguns algoritmes estàndard que donen una mida de fitxer reduït a la simple eliminació d'espais o tabuladors. Un exemple de Javascript empacador es pot trobar aquí http://dean.edwards.name/packer/

Deshágase dels scripts duplicats

És molt inusual que els guions sencers podria ser duplicat, però una revisió dels deu millors llocs web dels Estats Units mostra que dos d'ells contenen un guió duplicat. Duplicar les seqüències d'ordres però, òbviament, redueix el rendiment mitjançant la creació de les peticions HTTP innecessàries i pèrdua de l'execució de Javascript.
A més, en molts casos, encara que els noms de les seqüències d'ordres són diferents, hi ha una probabilitat d'scripts duplicats a la mateixa pàgina per la grandària de l'equip i el nombre de seqüència.

Reduir al mínim l'accés als elements DOM quan sigui possible

Accés als elements DOM amb JavaScript és lent pel que per tal de tenir una pàgina de major capacitat de resposta, vostè ha de:
• Les referències als elements de memòria cau d'accés
• Els nodes d'actualització "en línia" i després afegir l'arbre
• evitar la fixació de disseny amb JavaScript

Comportament separat del contingut i presentació

Així com la presentació per separat (CSS / XSLT) de continguts (XHTML / XML), també cal separar el comportament (Javascript). Això es diu Javascript discreta. Així com enllaços a arxius CSS externs, que hauria enllaçar a arxius externs de JavaScript.

En lloc d'un comportament difícil de codificació en el contingut (per exemple, onMouseOver, onclick, etc), el comportament ha d'agregar de manera dinàmica als elements, classes i elements singulars (IDS) utilitzant el DOM. El document fundacional, el contingut, ha de contenir només és vàlid XHTML / XML i Javascript.
Javascript ha d'augmentar el contingut mitjançant l'addició de comportament. El contingut ha de continuar sent útil i utilitzable sense javascript (o sense el ple suport de Javascript).

He guardat aquest article edats enrere, així que sap greu! No recordo la font ... però em va semblar útil, per a nosaltres, que han de ser conscients sobre l'audiència per a les quals desenvolupem el lloc per ... Així que aquí és

Pes de la pàgina es pot utilitzar per determinar el temps de descàrrega d'una pàgina determinada en una varietat de velocitats de connexió a Internet. A tall d'exemple, la taula següent es mostren els temps de descàrrega per a tres diferents pàgines en un nombre de velocitats de connexió populars.

Els beneficis de la reducció de pes de la pàgina?

L'impacte positiu de la reducció dels beneficis de pàgines de pes tant als propietaris de llocs web i els consumidors. Els beneficis potencials inclouen:

1. Les pàgines es carreguen més ràpid. L'impacte més evident de la reducció de pes de la pàgina és que les pàgines del seu lloc web es carreguen més ràpid per als visitants, independentment de la seva velocitat de connexió.
2. Menors temps de càrrega de pàgines crear els visitants poden sentir més còmodes. Els visitants són menys propensos a sentir frustrats i veu un altre si les seves pàgines es carreguen ràpidament. D'altra banda, la càrrega lenta de les pàgines són una de les maneres més segures de perdre visitants i clients potencials.
3. Més ràpides de càrrega-temps contribuiran a una major conversió. Més visitants es quedaran al seu lloc durant més temps. Més d'ells acaben fent les compres, la subscripció al seu butlletí de notícies, o un llibre-marca del seu lloc.
4. La seva percepció de la marca es veurà reforçada. Els clients que tornen i els visitants per primera vegada per igual estaran més inclinats a descriure el seu lloc (i negoci) com "professional" si les seves pàgines es carreguen ràpidament.
5. Les pàgines amb codi net, sòlid sovint serà indexat més eficaçment pels motors de cerca naturals.
6. Pàgines optimitzades per al pes es pot estalviar despeses d'ample de banda en llocs d'alt trànsit. 100.000 pàgines cadascuna pesa 150 Kb requerirà el doble d'ample de banda del proveïdor de 100.000 pàgines cada pes a 75 KB. Per als ISP que cobren per ample de banda utilitzat, o per excés, aquesta reducció pot generar estalvis significatius en despeses d'ample de banda.

Considereu les dades següents, publicats en un informe

Si XML / XSL transforma és el seu domian, llavors hi ha moments en que volen un tros de codi dinàmic per a ser utilitzat element de la biblioteca (que es va fer re-utilitzables). El que vull dir, probablement podria ser més clar amb aquest escenari d'exemple.

Imagini que vostè està creant un lloc web (i l'ús d'XML, XSL transfroms és clar) i la majoria de les pàgines que tenen un mòdul de comentaris. Bé! llavors o bé copiar o enganxar aquest codi en totes les plantilles de pàgina (que jo no tenen veu, però que el manteniment i la modificació d'un malson) o millor encara, crear un arxiu d'inclusió que pot ser tirat en allà on vostè ho desitja a la seva pàgina ( s) ...
Així que com podem crear un arxiu XSL INCLUDE i incloure'l dins d'un altre arxiu XSL? Aquí és com ...

Només per deixar les coses clares ... aquí està la llista ràpida dels arxius que vostè cregui ... aquí, estarem incloent informació sobre les fruites i verdures en una pàgina principal anomenada dels aliments.

1. food.xml - arxiu de dades XML en el qual s'aplica la transformació
2. food.xsl - principal arxiu XSL que transformarà la nostra food.xml
3. inc_fruits.xsl - XSL arxiu d'inclusió que es processen les dades de les fruites
4. inc_vegtables.xsl - XSL arxiu d'inclusió que es processen les dades vetetables

No crec que he d'explicar molt, els codis dels elements anteriors, s'explica per si mateix ...

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>

Descarregar tots els arxius anteriors aquí (252 descàrregues)