MetricSpot

WEB PERFORMANCE


OPTIMIZATION
GUA PRCTICA PARA OPTIMIZAR EL RENDIMIENTO DE TU WEB
MetricSpot Executive Guides
N 1
SEO & Web Performance


MetricSpot Executive Guides - Optimizacin del Rendimiento Web (WPO)
Versin 1.3 (Septiembre 2013) Descarga la ltima versin en www.metricspot.com

Acerca de este manual
Este manual forma parte de la serie MetricSpot Executive Guides.

En l encontrars directrices que te ayudarn a incrementar la velocidad de tu Web,
organizadas segn el mbito de aplicacin:

- Servidor y Conectividad
- Hojas de estilos CSS
- Imgenes
- Tablets y SmartPhones
- Cdigo HTML
- JavaScript
- Cookies


En ocasiones se incluyen fragmentos de cdigo, a modo de ejemplo o para que
puedas copiar y pegar en el cdigo de tu Web. Aparecen dentro de cuadrados grises.

El ltimo captulo incluye enlaces a herramientas gratuitas de anlisis de rendimiento
Web, as como a otros libros y guas acerca del Rendimiento Web.


Acerca del autor
ngel Daz Ibarra es consultor SEO/WPO y responsable tcnico de MetricSpot. Puedes
conectar con l va Twitter (@angeldiazibarra).

Acerca de MetricSpot
En MetricSpot creamos herramientas y manuales que te ayudarn a optimizar tu
Web para que posicione mejor en los buscadores, atraiga trfico relevante y genere
ms conversiones.

Tambin ofrecemos servicios de consultora especializada a empresas de desarrollo
Web y Marketing Online en los mbitos del SEO, rendimiento Web y usabilidad.

MetricSpot apoya la libre circulacin de informacin. Por lo tanto, concedemos la
licencia de uso Creative Commons Reconocimiento - Compartir Igual
(1)
de uso personal
y comercial del contenido de este documento.




Enlaces:
1. bit.ly/cc-by-sa-es


MetricSpot Executive Guides - Optimizacin del Rendimiento Web (WPO)
Versin 1.3 (Septiembre 2013) Descarga la ltima versin en www.metricspot.com

Utiliza GZIP y DEFLATE
GZIP comprime los datos en el servidor antes de enviarlos al navegador del usuario. Es
muy fcil de configurar, y todos los navegadores y servidores modernos lo soportan.
Hay determinados archivos que es mejor no comprimir (como las imgenes) pero
gran parte del contenido de un sitio es simple texto (HTML, CSS, JavaScript, JSON, XML,
etc.) y conviene comprimirlo.
En servidores Apache se activa editando el archivo .htaccess aadiendo estas lneas:

<IfModule mod_deflate.c>
# Filtramos los tipos de contenido
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Quitamos los navegadores que dan problemas con GZIP
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Nos aseguramos de que los Proxy no muestren contenido equivocado
Header append Vary User-Agent env=!dont-vary
</IfModule>





MetricSpot Executive Guides - Optimizacin del Rendimiento Web (WPO)
Versin 1.3 (Septiembre 2013) Descarga la ltima versin en www.metricspot.com

Activa el Cach/Expiracin
Hay algunos tipos de archivos, los llamados contenidos estticos (CSS, JavaScript,
imgenes, etc.) que no suelen cambiar en mucho tiempo.
Cada vez que se carga una pgina el navegador tiene que descargar todos los archivos.
Podemos ahorrarle tiempo al usuario y evitar solicitudes innecesarias al servidor
permitiendo al navegador cachear archivos.
Para ello, primero tenemos que separar todos los contenidos estticos en ficheros
aparte y despus activar el cacheado editando el archivo .htaccess aadiendo estas
lneas:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 600 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>
</IfModule>

Con las instrucciones de arriba le estamos diciendo al navegador que cachee los
contenidos estticos durante una semana (604800 segundos) y los contenidos
dinmicos durante cinco minutos (600 segundos).
Si ests en versin de desarrollo o aplicando cambios a la Web, deberas desactivar el
cach.



MetricSpot Executive Guides - Optimizacin del Rendimiento Web (WPO)
Versin 1.3 (Septiembre 2013) Descarga la ltima versin en www.metricspot.com

Coloca los CSS arriba y los Scripts abajo
Debemos colocar los CSS dentro del <head> porque si los colocamos abajo la pgina
se empezar a renderizar sin estilos hasta que se descargue el archivo.
Por el contrario, los archivos JavaScript deberan ser cargados al final de la pgina
porque si no bloquean el renderizado mientras se descargan y se ejecutan. El lugar
donde deben colocarse es justo antes de la etiqueta de cierre </body>.
Un ejemplo de una pgina con los CSS y JS bien emplazados:

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">

<title>Mi Pgina Web</title>
<meta name="description" content="La META DESCRIPTION de mi pgina." />

<!-- Enlace a la hoja de estilos CSS -->
<link rel="stylesheet" href="style.css" media="all" >

</head>

<body>

<h1>El Ttulo de mi Pgina</h1>
El contenido de mi pgina

<!-- Enlace al JavaScript -->
<script src="script.js"></script>

</body>

</html>





MetricSpot Executive Guides - Optimizacin del Rendimiento Web (WPO)
Versin 1.3 (Septiembre 2013) Descarga la ltima versin en www.metricspot.com

Comprime los CSS
Al igual que ocurre con el cdigo HTML, es buena prctica usar indentacin,
tabulaciones y comentarios en los CSS para mantener el cdigo legible:

/* Inicio de la cabecera */

.cabecera {
width: 960px;
margin: 0 auto;
}

/* Inicio del cuerpo */

.cuerpo {
width: 960px;
margin: 0 auto;
padding: 10px;
color: #555555;
}

El navegador puede prescindir de ellos, por lo que comprimir las hojas de estilos
utilizando herramientas automatizadas har que la descarga y anlisis del CSS sea
mucho ms rpido.
Adems, algunas herramientas combinan elementos con propiedades iguales,
comprimen los cdigos de color, etc. reduciendo an ms el tamao de los archivos:

.cabecera,.cuerpo{width:960px;margin:0 auto;} .cuerpo{padding:10px;color:#555;}



HERRAMIENTAS:
CSS Compressor & Minifier
(1)

CSS Compressor
(2)

CSS Minifier
(3)

YUI Compressor
(4)

Clean CSS
(5)

Code Beautifier
(6)

CSS Beautify
(7)
- (Proceso inverso)
CSS Lint
(8)
- (Validador de CSS)



MetricSpot Executive Guides - Optimizacin del Rendimiento Web (WPO)
Versin 1.3 (Septiembre 2013) Descarga la ltima versin en www.metricspot.com

4. JavaScript
Externaliza todos los Scripts
Poner todos los estilos CSS en un archivo externo y enlazarlo desde el <head> es una
buena prctica porque permite el cacheado y ahorra solicitudes y ancho de banda
durante la navegacin por nuestra Web.
Adems el cdigo quedar ms limpio y ocupar menos, haciendo que las descarga
del HTML sea ms rpida.

Aplaza la ejecucin de Scripts
Los archivos JavaScript deben colocarse abajo del todo, justo antes de la etiqueta de
cierre </body> para evitar que bloquee la descarga de otros elementos.
Otra solucin es utilizar el atributo defer que indica al navegador que posponga la
descarga de un <script>. Slo debe utilizarse para Scripts que no tengan
document.write.

<script defer type="text/javascript" src="script.js" ></script>


Carga los Scripts asincrnicamente
El atributo async permite que el Script pueda ser descargado en paralelo de forma
asincrnica, sin que bloquee el anlisis del resto de la pgina.

<script async type="text/javascript" src="script.js" ></script>

Cuidado! El cdigo se ejecutar en cuanto se termine de descargar.
Esto hace que si estamos descargando un archivo de funciones que utilizan jQuery y
todava no se ha descargado la librera de jQuery en s, el Script dar error porque no
se habrn declarado todava las funciones que utiliza.


MetricSpot Executive Guides - Optimizacin del Rendimiento Web (WPO)
Versin 1.3 (Septiembre 2013) Descarga la ltima versin en www.metricspot.com

Utiliza Sprites
Una Web con muchas imgenes puede tardar mucho tiempo en cargar y genera
multitud de solicitudes HTTP.
Los Sprites son conjuntos de imgenes agrupadas en un solo archivo con el fin de
reducir el nmero de peticiones al servidor y disminuir tiempo de carga.
MetricSpot utiliza varios Sprites:




Las imgenes se posicionan mediante CSS:

.toplist {
width: 20px;
height: 20px;
background: url("http://www.metricspot.com/img/topsprite.png") 0 0;
}

.toplist:hover {
background: url("http://www.metricspot.com/img/topsprite.png") -20px 0;
}



HERRAMIENTAS:
Sprite Pad
(7)

Sprite Me
(8)

Sprite Cow
(9)

Texture Packer
(10)

Stitches
(11)