Expresando TI

Optimizar imágenes

Optimización simplemente significa mantener el tamaño de la pequeña imagen de mantenimiento de la calidad de la imagen hasta el nivel requerido. Hay un montón de procedimientos que una vez que puedan llevar a cabo para optimizar las imágenes antes de que se cargan en el servidor para la entrega. Las herramientas que utilizamos para la creación de estas imágenes (Photoshop, Fireworks, etc) suelen tener herramientas que permiten a los usuarios optimizar la imagen para uso en la web.
• Compruebe la del GIF para ver si está utilizando un tamaño de la paleta correspondiente al número de colores en la imagen. Cuando una imagen se utiliza 4 colores y una paleta de 256 colores, la imagen podría estar más optimizado

• Convertir GIF a PNG, donde sea posible y ver si hay un ahorro. Más a menudo que no, no lo es. No dude en ponerse en uso de Papua Nueva Guinea, ya que son totalmente compatibles con la mayoría de los navegadores de uso común. Esperar de las capacidades de animación en formato PNG pueden hacer lo que hace un GIF, incluida la transparencia.

• Para las imágenes utilizadas en sprites CSS, organiza las imágenes en el sprite en horizontal en lugar de verticalmente por lo general resulta en un tamaño de archivo más pequeño. Además, combinar imágenes con colores similares en un sprite. Esto le ayuda a mantener el número de color de baja densidad, lo ideal sería en 256 colores por lo que caben en un PNG8.

• Si usted está usando un favicon.ico, que sea pequeña, de preferencia bajo 1K.

Utilice la escala apropiada / cambiar el tamaño de la imagen.

Siempre tratar de utilizar las imágenes redimensionadas, es decir, no utilice una imagen más grande de lo que necesita sólo porque se puede establecer la anchura y la altura en HTML. Si usted necesita para mostrar una imagen de 100px X 100px en la página, no utilice una imagen reducida 200x200px.

Use imágenes progresivas

Un navegador web que ya hace que las imágenes de forma progresiva. Para hacerlo aún mejor, sólo tiene que guardar su GIF o PNG imágenes con el "entrelazado" opción, o las imágenes JPEG con el "progresista" opción.

Existe un debate permanente entre los usuarios de la web en cuanto a si el uso de la imagen progresiva es una bendición o un obstáculo. También una imagen progresista pesa aproximadamente un 20% más que su homólogo no progresiva. Así pues, si usted piensa que el diseño utiliza imágenes que no obstaculizan la experiencia del usuario por el mismo ser progresista, no dude en hacerlo.

Incluir JavaScript en la parte inferior del documento HTML

Si usted no tiene document.write (o de cualquier generación dinámica de contenidos de la página Uso de archivos JavaScript) para insertar parte del contenido de la página en los scripts, mueva el script de incluir una declaración en la parte inferior de la página, antes del final de la etiqueta BODY.
La especificación HTTP/1.1 sugiere que los navegadores de descarga no más de dos componentes en paralelo por el nombre de host. Si va a servir a sus imágenes de varios nombres de host, puede obtener más de dos descargas que se producen en paralelo. Mientras que un script se está descargando, sin embargo, el navegador no se iniciará ningún tipo de descarga de otro modo, incluso en los diferentes nombres de host.
También hay formas de crear dinámicamente los nodos SCRIPT y cargar scripts remotos después de la página se carga mediante AJAX.

Externalizar a JavaScript

Uso de archivos JavaScript externos se traducirá en una carga más rápida de páginas debido a que los archivos JavaScript se almacenan en caché por el navegador. "En línea de JavaScript en los documentos HTML se descargan cada vez que se solicita el documento HTML. En realidad, esto podría reducir el número de peticiones HTTP realizadas pero posteriormente aumenta el tamaño del documento HTML. Externa de JavaScript se almacenan en caché por el navegador, el tamaño del documento HTML se reduce sin aumentar el número de peticiones HTTP.
Tenga en cuenta que, si los usuarios de su sitio con vistas de varias páginas por sesión y muchas de sus páginas de volver a utilizar los mismos scripts y hojas de estilo, hay un mayor beneficio potencial de la caché de archivos externos.

Empaquetar los archivos Javascript

En el caso de JavaScript, a diferencia de CSS, los archivos pueden crujir el uso de algunos algoritmos estándar que dan un tamaño de archivo reducido a la simple eliminación de espacios o tabuladores. Un ejemplo de Javascript empacador se puede encontrar aquí http://dean.edwards.name/packer/

Deshágase de los scripts duplicados

Es muy inusual que los guiones enteros podría ser duplicada, pero una revisión de los diez mejores sitios web de Estados Unidos muestra que dos de ellos contienen un guión duplicado. Duplicar las secuencias de comandos pero, obviamente, reduce el rendimiento mediante la creación de las peticiones HTTP innecesarias y pérdida de la ejecución de JavaScript.
Además, en muchos casos, aunque los nombres de las secuencias de comandos son diferentes, hay una probabilidad de scripts duplicados en la misma página por el tamaño del equipo y el número de secuencias de comandos.

Reducir al mínimo el acceso a los elementos DOM cuando sea posible

Acceso a los elementos DOM con JavaScript es lento por lo que con el fin de tener una página de mayor capacidad de respuesta, usted debe:
• Las referencias a los elementos de caché de acceso
• Los nodos de actualización "en línea" y luego añadir al árbol
• evitar la fijación de diseño con JavaScript

Comportamiento separado del contenido y presentación

Así como la presentación por separado (CSS / XSLT) de contenidos (XHTML / XML), también hay que separar el comportamiento (Javascript). Esto se llama Javascript discreta. Así como enlaces a archivos CSS externos, que debería enlazar a archivos externos de JavaScript.

En lugar de un comportamiento difícil de codificación en el contenido (por ejemplo, onmouseover, onclick, etc), el comportamiento debe agregarse de manera dinámica a los elementos, clases y elementos singulares (IDS) utilizando el DOM. El documento fundacional, el contenido, debe contener sólo es válido XHTML / XML y Javascript no.
Javascript debe aumentar el contenido mediante la adición de comportamiento. El contenido debe seguir siendo útil y utilizable sin javascript (o sin el pleno apoyo de Javascript).

He guardado este artículo edades atrás, así que ¡Lo siento! No recuerdo la fuente ... pero me pareció útil, para nosotros, que tienen que ser conscientes acerca de la audiencia para las que desarrollamos el sitio para ... Así que aquí es

Peso de la página se puede utilizar para determinar el tiempo de descarga de una página determinada en una variedad de velocidades de conexión a Internet. A modo de ejemplo, la tabla siguiente se muestran los tiempos de descarga para tres diferentes páginas en un número de velocidades de conexión populares.

Los beneficios de la reducción de peso de la página?

El impacto positivo de la reducción de los beneficios de páginas de peso tanto a los propietarios de sitios web y los consumidores. Los beneficios potenciales incluyen:

1. Las páginas se cargan más rápido. El impacto más evidente de la reducción de peso de la página es que las páginas de su sitio web se carguen más rápido para los visitantes, independientemente de su velocidad de conexión.
2. Menores tiempos de carga de páginas crear los visitantes estén más cómodos. Los visitantes son menos propensos a sentirse frustrados y ve a otro si sus páginas se cargan rápidamente. Por otro lado, la carga lenta de las páginas son una de las maneras más seguras de perder visitantes y clientes potenciales.
3. Más rápidas de carga-tiempos contribuirán a una mayor conversión. Más visitantes se quedarán en su sitio durante más tiempo. Más de ellos terminan haciendo las compras, la suscripción a su boletín de noticias, o un libro-marca de su sitio.
4. Su percepción de la marca se verá reforzada. Los clientes que regresan y los visitantes por primera vez por igual estarán más inclinados a describir su sitio (y negocio) como "profesional" si sus páginas se cargan rápidamente.
5. Las páginas con código limpio, sólido menudo será indexado más eficazmente por los motores de búsqueda naturales.
6. Páginas optimizadas para el peso se puede ahorrar gastos de ancho de banda en sitios de alto tráfico. 100.000 páginas cada una pesa 150 Kb requerirá el doble de ancho de banda de su proveedor de 100.000 páginas cada peso a 75 KB. Para los ISP que cobran por ancho de banda utilizado, o por exceso, esta reducción puede generar ahorros significativos en gastos de ancho de banda.

Considere los siguientes datos, publicados en un informe

Si XML / XSL transforma es su domian, entonces hay momentos en los que quieren un pedazo de código dinámico para ser utilizado elemento de la biblioteca (que se hizo re-utilizables). Lo que quiero decir, probablemente podría ser más claro con este escenario de ejemplo.

Imagínese que usted está creando un sitio web (y el uso de XML, XSL transfroms por supuesto) y la mayoría de las páginas que tienen un módulo de comentarios. Bueno! entonces o bien copiar o pegar este código en todas las plantillas de página (que yo no tienen voz, pero que el mantenimiento y la modificación de un pesadilla) o mejor aún, crear un archivo de inclusión que puede ser tirado en donde quiera que usted lo desea en su página ( s) ...
Así que ¿cómo podemos crear un archivo XSL INCLUDE e incluirlo dentro de otro archivo XSL? Aquí es cómo ...

Sólo para dejar las cosas claras ... aquí está la lista rápida de los archivos que usted crea ... aquí, estaremos incluyendo información acerca de las frutas y verduras en una página principal llamada de los alimentos.

1. food.xml - archivo de datos XML en el que se aplica la transformación
2. food.xsl - principal archivo XSL que transformará nuestra food.xml
3. inc_fruits.xsl - XSL archivo de inclusión que se procesan los datos de las frutas
4. inc_vegtables.xsl - XSL archivo de inclusión que se procesan los datos vetetables

No creo que tengo que explicar mucho, los códigos de los elementos anteriores, se explica por sí mismo ...

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>

Descargar todos los archivos anteriores aquí (252 descargas)