14 Steps - Usar CDN (Content Delivery Networks)

Se utilizan para entregar de manera simultánea imagánes, scripts, hojas de estilo, banners, etc..

14 Steps - Evitar Redirecciones

¿Porqué es bueno evitar las redirecciones? Es bueno evitar las redirecciones porque son bloqueantes. Mantiene al usuario a la espera. En ocasiones el usuario puede llegar a ver un pantallazo en blanco entre la página deseada y la redireccionada.

Evitar una redirección es bueno por la experiencia del usuario de nuestro site.

14 Steps - Importancia de las reglas YSlow

Rule Name	Rule Id	Default weight
Make fewer HTTP requests	ynumreq	8
Use a CDN	ycdn	6
Add an Expires header	yexpires	10
Compress components	ycompress	8
Put CSS at top	ycsstop	4
Put Javascript at the bottom	yjsbottom	4
Avoid CSS expression	yexpressions	3
Make JS and CSS external	yexternal	4
Reduce DNS lookups	ydns	3
Minify JS and CSS	yminify	4
Avoid redirects	yredirects	4
Remove duplicate JS and CSS	ydupes	4
Configure ETags	yetags	2
Make Ajax cacheable	yxhr	5
Use GET for AJAX requests	yxhrmethod	5
Reduce the Number of DOM elements	ymindom	5
No 404s	yno404	5
Reduce Cookie Size	ymincookie	5
Use Cookie-free Domains	ycookiefree	5
Avoid filters	ynofilter	5
Don't Scale Images in HTML	yimgnoscale	5
Make favicon Small and Cacheable	yfavicon	5

14 Steps - Hacer ajax cacheable

Hacer ajax cacheable consiste en que la información que le enviamos al cliente actualizada la pueda memorizar y si vuelve a pasar a esa información que no haga falta volver a descargarla desde nuestro servidor.

14 Steps - Configurar ETags

¿Qué son los ETags? Son un mecanismo que los servidores utilizan para validar si un componente está validado en el cliente. El problema aparece cuando tenemos servidores replicados. Este mecanismo está pensado para que nuestras peticiones se sirvan desde un solo servidor y no de dos o tres balanceados. En el caso de tener un solo servidor podemos configurar los ETags en caso contrario vale la pena desactivarlas.
FileETag none

14 Steps - Borrar Scripts duplicados

Hay que tener cuidado a la hora de añadir un script a nuestro código. En internet explorer se descarga dos veces el script. En internet explorer y firefox se evalúan los dos javascripts. Sabiendo lo mencionado en un post anterior, durante el tiempo de evaluación el navegador se mantiene bloqueado y no sigue descargando otros archivos.

14 Steps - Reducir Consultas DNS

Cada vez que accedemos a un dominio se hace una consulta dns. La información de esta consulta se guarda en el navegador. El tiempo de guardado de la información depende del navegador que usemos.
El inconveniente de realizar varias consultas dns es el tiempo de respuesta de los servidores de dns. Hasta que no se obtiene la ip, el navegador no sabrá donde pedir la página web.
Un subdominio también necesita una nueva consulta dns. Hay que tenerlo en cuenta si nuestro sistema de imágenes está en un subdominio.

14 Steps - CSS y js externos o internos

Es importante saber que los estilos CSS y los js internos, dentro de nuestro código son más rápidos que los de archivos externos. Pero también tenemos que tener en cuenta que son mucho más difíciles de depurar si están dispersos por todo nuestro código que tenerlos en un solo archivo. Es recomendable tener todos los estilos dentro de una sola hoja de estilos al igual que con nuestro código javascript para facilitar la reutilización y la actualización.

14 Steps - Evitar CSS expressions

¿Por qué evitar expresiones CSS? Debemos intentar evitar expresiones CSS del estilo cada vez que se mueva el ratón, cada vez que se presiona una tecla, cuando se redimensiona la pantalla del navegador, etc… Esto lo que hace es que se vuelvan a evaluar todas nuestras expresiones del CSS y provoquen que se haga más lenta nuestra página. Evitando expresiones regulares apoyamos a los estándares web y esto también significa un incremento del rendimiento y reduce el procesamiento por parte del navegador.

14 Steps - Poner scripts al final

¿Por qué poner los scripts al final? Muy sencillo, el comportamiento no es el mismo que el de un CSS. Los scripts son bloqueantes. Pueden dañar mucho la experiencia del usuario. ¿De qué forma? Si los scripts los ponemos al principio el usuario verá durante unos segundos una hoja en blanco ya que estará descargando el script y deja de descargar cualquier otra cosa. Por eso se recomienda que solo se haga la descarga de un solo javascript. Al bloquear se detiene cualquier descarga posible.

<script language=javascript src="script.js"></script>


14 Steps - Poner hojas de estilo al principio

¿Por qué poner las hojas de estilo al principio del html? Las hojas de estilo no son bloqueantes, es decir, el navegador no deja de descargar elementos mientras se descarga un css. Se recomienda ponerlas al principio y con la etiqueta <link> porque el navegador va renderizando poco a poco el html. En conclusión la página se va descargando y las cosas se van poniendo en su lugar y con su tamaño poco a poco.
Se recomienda ponerlas al principio porque la experiencia del usuario es mejor que si lo cargásemos al final.

<link rel="stylesheet" type="text/css" href="estilos.css" title="default"/>


14 Steps - Mod_deflate

Otra manera para ganar velocidad de transferencia es la compresión. Dicha compresión se realiza en el servidor y luego será descomprimida en el cliente. Útil cuando nuestra versión de apache es 2.x.

Activar la compression con mod_deflate:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/php

Comprimir todo menos imágenes
<Location />
# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>

Nivel de compresión:
DeflateCompressionLevel 3



14 Steps - Mod_gzip

Una manera sencilla pero útil para ganar velocidad de transferencia es que el servidor comprima los elementos que van a ser enviados. Mediante mod_gzip le podemos indicar al servidor que cosas queremos enviar comprimidas. El cliente se encargará de descomprimir la información enviada. Útil cuando nuestra versión de apache es la 1.3.

Para activar el modulo mod_gzip:

# Enable the module
mod_gzip_on yes

# Allow GZIP compression for all requests
mod_gzip_item_include mime .?

# By file extension
SetEnvIfNoCase request_uri \.mdb$ gzip=9
SetEnvIfNoCase request_uri \.bmp$ gzip cache-enable=mem
SetEnvIfNoCase request_uri \.(?:jpg|gif|png|swf|avi|rm)$ no-gzip

# By MIME type
SetEnvIfNoCase mime text/.* gzip=9 cache-enable=mem
SetEnvIfNoCase mime audio/wav gzip cache-enable=mem
SetEnvIfNoCase mime image/bmp gzip cache-enable=mem
SetEnvIfNoCase mime message/rfc822 gzip

SetEnvIfNoCase mime application/msword gzip
SetEnvIfNoCase mime application/postscript gzip
SetEnvIfNoCase mime application/vnd.ms-excel gzip
SetEnvIfNoCase mime application/vnd.ms-powerpoint gzip
SetEnvIfNoCase mime application/vnd.ms-works gzip
SetEnvIfNoCase mime application/x-javascript gzip cache-enable=mem
SetEnvIfNoCase mime application/x-msaccess gzip
SetEnvIfNoCase mime application/pdf gzip

# Exceptions for old browsers
#BrowserMatchNoCase \bOpera(?:\s5\.|/5) and mime application/.* no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bMozilla/4\.[67] and (mime application/.* or mime image/.*) no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bNetscape(?:6/6\.|/) and mime application/.* no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bFirefox/1 and mime application/pdf no-gzip vary-agent !cache-enable

SetEnvIfNoCase (mime text/css) or (mime image/jpeg) vary-agent
BrowserMatchNoCase \bMSIE\s[567]\. and (mime text/css or mime image/jpeg) no-gzip vary-agent !cache-enable

# Vary header should be properly set for caching
Header merge Vary User-Agent env=vary-agent

# Set expiry delta for static content.
# Dynamic pages should set expiry delta by oneself.
Header merge Cache-Control max-age=86400 env=cache-enable


14 Steps - Expires Headers

Otra forma de que el navegador cliente memorice nuestra información es mediante cabeceras de expiración. Con estas cabeceras podemos decir durante cuanto tiempo queremos que el navegador no nos vuelva a pedir un elemento.

Ejemplo 1:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>


Ejemplo 2:
<FilesMatch "^(bg-header|bg-div|calendar|boton)\.gif$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>


Ejemplo 3:
<FilesMatch "\.(js|css|pdf|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "\.(html|htm|txt)$">
Header set Cache-Control "max-age=600"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>


14 Steps - Mod_expires

Ahora lo que queremos conseguir es que el cliente memorice elementos de nuestra página. Mediante mod_expires podemos decir al navegador del cliente que elementos debe guardar en memoria y durante cuanto tiempo.

Ejemplo 1:
ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

Ejemplo2:
# enable expirations
ExpiresActive On

# expire GIF images after a month in the client's cache
ExpiresByType image/gif A2592000

# HTML documents are good for a week from the
# time they were changed
ExpiresByType text/html M604800

14 Steps - Componer CSS's y Javascripts

¿En qué consiste componer CSS’s o scripts? Componer un CSS consiste en coger todos los CSS que tenemos añadidos en una archivo html, php, etc… y juntarlos en unos sólo. La ganancia es mayor dependiendo del número de archivos que tengamos por separado. Lo que está claro es que podemos llegar a reducir el número de peticiones http a dos. Una para la hoja de estilos CSS y la otra para el javascript.
Un programa útil y sencillo de utilizar es el minify. Incluso nos quita los caracteres no útiles como retornos de carro o comentarios. Con este programa reducimos las peticiones http y encima reducimos el tamaño de los CSS y javascripts.

En esta url http://code.google.com/p/minify/ tenemos el código del proyecto minify que sirve para minimizar y unir css y js en un solo archivo.

14 Steps - Imágenes Inline

Otra opción para optimizar nuestro código es insertar directamente la información de la imagen. A continuación veremos una imagen en la que ponemos la información en el mismo src de la imagen. También mostraremos el código generado en base 64.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAgAElEQVR4Ae2dCZSdR3Xn7+t+S++b1OpWa21JlmQZyQvCNmAZYxvbmOWEeA42S5LDTDIzIWGSQDiTk4GTCWeWM3OYZAITcsbBCRgI24ADZjG2Yxtb3uRFkrVbu9RqtXpR73u/7vn/6r37+tOzVizpdXK6ur9X9dVX23fvrVu3bt2qL2Yz2O3evbuyra3tmnQ6/a6ioqLrJycnY/LjuoqmpqZiugia4nmLYn5isZgp3pRnilvicKSP+iEy8kM5pJGTl0mbTR8iCUefEc5mnywuLh5V/jHV+UgikXh8w4YNr2efzXgvB6CZ1NJnn3123tDQ0O+qTR9NJpMry8rKHMmhmULQBTdXCAuE4Rm5Px/n6ajTw9F8HiciMIhI7R4YHx9/Qun/9y233PJkNO1MDJ8fFC5jy59++uk7R0ZGvlxbW3vF4OCgbdq0yV577TXr6ekJRAAi6PFchLlwZwtHm+/po3EePtczkE0aRzq+XyUlJbZ8+XK7+eab7eqrr7be3t7xsbGxvxJX+Py73/3uEa9jpvkzigCefPLJ+wSwvxPySx977DG7//777dChQzkkO+DPBMRzPT9TvosRD2FAlKWlpXbHHXfYH//xH9ucOXOsq6vrewsXLvyt5ubmGUkEM4YAnn/++XcODw8/UlNTU/GNb3zDvvSlLwWWGo/HLwZ+LlsZEII4mF111VX2la98xRoaGqyzs/OLN91002cvWyMuoKKiC0h7yZJu3bq1fHR09Esg/5lnnrEvf/nLJmHK/rkhHwDBheACO3bssC984QsBZpJh/lByzc2XDIBvouAZQQDqMfdoDL1OwpM98MADp4yzb+LdCpoVInjqqads48aNNm/evLiE2c+IO8wYjuvAKTgBZIHysfLycnv99ddNUz8TsLx9/6x9yTOGLANXSKVSt73yyivLZtoLFXyA3b59+zyx+mth+YcPHzZJzoGFXixAMSZT5rkc6WgD07mL5SgLIXZiYsKqq6vLJRBeq7L3X6zyL0Y5BScA9ZImzZ/r6CUSAi/GO+XKAKlMz2699VZDl8C9zxTwmbfjc/Hs5ZdftiNHjlw0IqBchjVmB7RDBLE017gZEij4ECAgpQQYebHz6qkXAjd6/vXXX2+SwE1CJtrB0BvpkSCGOIhuYGDAqqqq7MMf/nB4fiF1nCstdUEAcANdledKf7...

14 Steps - CSS sprites

Ahora mostraremos como hacer sprites en CSS. La técnica consiste en coger una imagen y localizar una zona que la usaremos para mostrar un trozo de la imagen. Lo que conseguimos con los sprites es reducir las peticiones http de imágenes.

Lo que queremos es crear diferentes botones, con la imagen que mostramos a la izquierda. Lo que tendremos que hacer es ir al CSS y modificar el CSS e introducirle los backgrounds indicando que zona de la imagen debe poner en cada botón:







a.ejemplo {display:block; font-weigh:bold; padding:10px 10px 10px 10px; text-decoration:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF04zIki3Bcab-YWaA2vdMKl39a0f7aHp7ie3OMtg8Wb8HbtR2Yj6Zp57RBywuzsIBZ_vVoScV1-bcJfnHMV_Lz0zMuMcmLYHOs8IoZYfId9xajeW_AKG_n1dBdYeUWUNvBeWFyt7oCqo6/s400/botones.gif) 0px 0px;text-align:center;color:#fff}
a:hover .ejemplo {text-decoration:underline;}

Aquí vemos el ejemplo:

Botón

Claves para la optimización web (14 Steps)

A continuación veremos como mejorar el rendimiento de una web en entornos LAMP. Casi todas estas prácticas se pueden utilizar en otros entornos.

1. Hacer menos peticiones http
2. Usar CDN
3. Añadir Expires Headers
4. Gzip Componentes
5. Poner hojas de estilo al principio
6. Poner scripts al final
7. Evitar CSS expressions
8. CSS y Scripts externos
9. Reducir consultar DNS
10. Minimizar Javascripts
11. Evitar redirecciones
12. Borrar scripts duplicados
13. Configurar Etags
14. Hacer ajax cacheable

14 Steps - Mapas de imagen html

Ahora veremos cuando podemos utilizar un mapa de imágenes en nuestras web. Nos puede ser útiles en menús de inicio (home) y también cuando tenemos una imagen en la que tenemos diferentes zonas para hacer click.
Ahora mostraremos un ejemplo en el que podremos hacer click en cada uno de los primeros cuatro equipos que vemos en la imagen.

Este es el código necesario para realizar el ejemplo,

<img id="Image-Maps_5200911091044394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTyoTAsKCY46-ElZIMciydoe5ztYGR2R58OJ-Wa0vaprw9l2tYFXatSqQCSnfHnDqoChYMGri9cxFrKfG7UhyphenhyphenKkas9qqB977wCeN-p5wqY38CocTgNC5gAT6ahP5vYGfZBoWyKunGKulQ/" usemap="#equipo" />
<map name="equipo">
<area shape="rect" coords="15,0,73,72" href="http://www.almeriaunion.com/" alt="Almería" title="Almería">
<area shape="rect" coords="72,0,127,72" href="http://www.miathletic.com/" alt="Atlético de Bilbao" title="Atlético de Bilbao">
<area shape="rect" coords="127,0,182,72" href="http://www.colchonero.com/" alt="Atlético de Madrid" title="Atlético de Madrid">
<area shape="rect" coords="181,0,233,72" href="http://www.vamostenerife.com/" alt="Tenerife" title="Tenerife">
</map>