Expresando TI

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

Coloque hojas de estilo en la parte superior

Si quieres una página se cargue progresivamente, es decir, queremos que el navegador muestre el contenido de lo que tiene, tan pronto como sea posible, poner el CSS en la parte superior de la página dentro de la cabecera del documento. Esto hace que las páginas parecen estar de carga más rápido, ya que esto facilita la representación progresiva de la página. Esto es especialmente importante para las páginas con mucho contenido y para los usuarios de conexiones a Internet más lentas.

Es un hecho documentado de que para mejorar la experiencia general del usuario, es importante proporcionar a los indicadores de progreso y la retroalimentación visual. Para evitar tener que volver a dibujar los elementos de la página, en caso de que si cambian sus estilos, algunos navegadores, como Internet Explorer, los bloques de la representación de la página hasta que el CSS se carga totalmente. Debido a esto, el usuario es llega a ver una página en blanco.

Las especificaciones HTML de W3 también establece que la CSS debe incluirme en la sección HEAD de la página HTML. at the bottom of the page, so it's best not to use it. También tenga en cuenta que, en la IE @import se comporta de la misma como el uso de <link> en la parte inferior de la página, así que es mejor no usarlo.

Evitar el uso de las características específicas del navegador

Filtros: El uso de filtros aumenta el consumo de memoria y se aplica por cada elemento, no por imagen, por lo que el problema se multiplica. Además, los filtros son de propiedad exclusiva de IE, por lo tanto no va a funcionar como está previsto en otros navegadores. Si quieres un fondo transparente o gradiente, use 1pixel con imágenes.
Las expresiones: expresiones CSS son una buena característica a tener en CSS, pero todavía es una característica específica de IE. Además, es importante señalar que, estas expresiones son evalúa cuando se procesa la página y cambiar de tamaño, desplazarse e incluso cuando el usuario mueve el puntero del ratón sobre la página. Huelga decir que esto podría afectar el rendimiento de su página. Por eso, en palabras simples, Evite el uso de expresiones CSS, a menos que sienta sus pros 'pesa más que sus contras "

Externalizar a CSS

El uso de CSS externa se traducirá en una carga más rápida de la páginas debido a que los archivos JavaScript y CSS son cacheadas por el navegador. CSS en línea 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. CSS externa 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.

Empaca tus archivos CSS

Embalaje o crujido de su CSS es la práctica de la eliminación de caracteres innecesarios del código para reducir su tamaño con objeto de optimizar los tiempos de carga.

La CSS puede que me crujía mediante la eliminación de todas las observaciones y los personajes no deseados, como los espacios en blanco, saltos de línea, etc

Por edades, he pensando en la consolidación de todas las mejores prácticas, he estado leyendo de vez en cuando. ¡Por fin! Hice bajar a ponerlo a la pluma. Me di cuenta de que va a ser tarea gigantesca creación de este documento mamut, así que decidí dedicar toda una categoría a la misma, para que yo pudiera seguir añadiendo cosas acerca de las mejores prácticas como y cuando les encuentran ...

Bueno! el contenido aquí será una fusión de mis prácticas personales de interfaz de usuario con los recomendados para el desarrollo por escrito por los desarrolladores del estándar como Yahoo, Google, etc

Mire este espacio y mantener browing la Mejor Categoría Prácticas

Habla simple (para aquellos que nunca oído hablar de tipo de documento antes de hoy)! DOCTYPE es la declaración en un documento HTML que viene antes de la etiqueta <HTML>, que se ve algo como esto (pegado de la fuente de esta misma página)

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

Por lo tanto solución a este problema fue

• permitir a los desarrolladores web que conocían sus normas para elegir el modo de usar.
• continuar mostrando las páginas de edad de acuerdo a la antigua (rarezas) las normas.

Y DOCTYPE nació.

Por lo tanto, en función de si la página está diseñada con los estándares o no, puede elegir el tipo de documento correspondiente.

Antiguo páginas escritas antes de que estas normas fueron introducidas no tienen un tipo de documento. Por lo tanto cuando no hay DOCTYPE en el código HTML a continuación, el navegador está en modo no estándar.
Pero si el DOCTYPE se define como uno de los siguientes, a continuación, el navegador se dice que es en modo estricto.

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">