andr3aa/Optimizacion4AndreaAntonioPedroHector — pull request #1 by hector81 (2014-01-27 17:38:36+00:00)
Title: pruebaandrea3

reveal.js - The HTML Presentation Framework

UNIFICAR SCRIPTS Y CSS

Realizado porJulia / Héctor

OBJETIVOS:

Incluir scripts .js y css que se utilizan en la misma página en un único fichero conjunto.

Reducir al máximo el tiempo de descarga de la web. Cuantas menos peticiones HTTP se realicen menor será el tiempo de descarga.

Optimizando nuestra Página Web

Comprimir los ficheros .js y .css.

Se cree que es una buena práctica utilizar muchos ficheros pequeños Javascript y CSS en lugar de uno grande, pero ralentiza el rendimiento de la página.

Una técnica WPO sería combinar varios CSS y JavaScript en uno.

Para que funcione todo más rápido, es mejor tener un único fichero .JS o .CSS de un tamaño mayor que no varios pequeños.

Cuando el navegador solicita los archivos JavaScript y CSS, se realiza una solicitud HTTP por archivo.

Cada petición HTTP devuelve unos resultados, este ir y venir de datos se llama latencia.

Así que, si tiene tres javascripts y dos css cargados por una página, se está perdiendo tiempo en cinco viajes de ida y vuelta de la red.

Aquí está un gráfico que muestra la suma de espera, la cual representa un retraso significativo en la carga de páginas:

Sin embargo, una solución mejor es entregar múltiples archivos a través de una solicitud utilizando un HttpHandler que combina varios archivos. Así que, en vez de poner muchas etiquetas <script> o <link> ,mejor poner solor una etiqueta <script> y una etiqueta , y vincularlas al HttpHandler.

Hay que indicar al manejador los archivos que se desea combinar y entregar esos archivos en una respuesta. Esto ahorra al navegador hacer muchas peticiones y elimina tiempos de espera.

Aquí se puede ver la cantidad de mejora que se obtiene si se pueden combinar varios archivos JavaScript y CSS en uno.

Otra forma de reducir el tiempo de carga de la Página

En una página web típica, podrá haber muchos javascripts de referencia:

<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jquery.js"></script>

<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jDate.js"></script>

<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Core.js"></script>

<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Delegate.js"></script>

<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Validation.js"></script>

Si combinamos todos los scripts en un bloque y los CSS en otro, quedaría de esta forma

<script type=”text/javascript” src=”HttpCombiner.ashx?s=scripts&t=text/javascript&v=1″></script>

<link type=”text/css” rel=”stylesheet” href=”HttpCombiner.ashx?s=css&t=text/css&v=1″></link>

Podemos reducirlo aún más si hacemos uso de HttpCombiner1. Para ello usaremos un fichero de configuración (web.config) que será similar a este:

<appSettings>

<add key=”scripts” value=”js/jquery.js, js/jDate.js, js/jQuery.Core.js, js/jQuery.Delegate.js, js/jQuery.Validation.js”/>

<add key=”css” value=”css/Theme.css, css/Common.css, css/grid.css”/>

<⁄appSettings>

Puedes pinchar aquí y ver la páginade referencia:

Algunas Herramientas

Zbugs

Csstidy

JSmin

Jmerge

CleanCSS

PageSpeed

HttpCombiner

Xtreeme

Ejemplo Práctico

Normal. (Pulsar para ver código)

Comprimido un 38,3%. (Pulsar para ver código)

Compresión Máxima (46,2%). (Pulsar para ver código)

THE END

Julia / Héctor