{"id":3157,"date":"2015-01-29T14:09:42","date_gmt":"2015-01-29T13:09:42","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=3157"},"modified":"2015-05-01T21:54:17","modified_gmt":"2015-05-01T20:54:17","slug":"como-acelerar-y-medir-la-carga-de-nuestra-web","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2015\/01\/como-acelerar-y-medir-la-carga-de-nuestra-web\/","title":{"rendered":"C\u00f3mo acelerar y medir la carga de nuestra web"},"content":{"rendered":"

Hola a tod@s y bienvenidos a un nuevo art\u00edculo de Escola Espai, en \u00e9l os vamos a explicar c\u00f3mo acelerar y medir la carga de nuestra web.<\/p>\n

A medida que nuestra web va creciendo la vamos cargando con m\u00e1s im\u00e1genes, plugins<\/em> de todo tipo, tipograf\u00edas varias, librer\u00edas externas, etc… Evidentemente cuantos m\u00e1s recursos cargados m\u00e1s tiempo de carga. Una web lenta nos perjudica ya que a los buscadores las penalizan por ello bajando posiciones en las b\u00fasquedas. Adem\u00e1s los usuarios no suelen ser pacientes y optar\u00e1n por p\u00e1ginas m\u00e1s r\u00e1pidas que la nuestra.<\/p>\n

Afortunadamente hay algunas pautas sencillas a seguir para evitar estos problemas y conseguir m\u00e1s rapidez en la carga de nuestra web<\/strong>.<\/p>\n

Aqu\u00ed ten\u00e9is ten\u00e9is una peque\u00f1a introducci\u00f3n a alguna de ellas:<\/p>\n

OPTIMIZAR LAS IM\u00c1GENES<\/h3>\n

Puede parecer obvio, pero mucha gente se olvida de esta tarea tan b\u00e1sica.
\nHay una diferencia abismal en usar una imagen de tama\u00f1o medio a una imagen completamente optimizada.
\nLa optimizaci\u00f3n de im\u00e1genes no solo se refiere a reducir su tama\u00f1o, sino que tambi\u00e9n eliminamos metadatos tipo con que c\u00e1mara fue tirada, fechas, etc…<\/p>\n

Hay much\u00edsimas herramientas y plugins<\/em> para realizar esta tarea. Algunas de ellas: JPEGmini<\/a>, Yahoo! Smush.it<\/a>, ImageOptim<\/a>, tinypng.com<\/a>,\u00a0SuperPNG<\/a>…<\/p>\n

LA COMPRESI\u00d3N GZIP<\/h3>\n

Tan solo con activar la compresi\u00f3n Gzip<\/em> puede ahorrarte hasta un 50% de carga en tu web. Todo el mundo sabe que comprimir archivos significa que estos pesen menos y precisamente es eso lo que la compresi\u00f3n GZIP<\/em> hace… comprimir los archivos antes de enviarlos.<\/p>\n

En un servidor Apache<\/em>, activar la compresi\u00f3n GZIP<\/em> de archivos CSS<\/em>, Javascript<\/em>, XML<\/em>, HTML<\/em>, etc… es tan f\u00e1cil como a\u00f1adir las siguientes l\u00edneas de c\u00f3digo al archivo .htaccess<\/a><\/em> ubicado en el directorio ra\u00edz de tu web.
\n
\n<IfModule mod_rewrite.c>
\n# comprimiendo archivos de texto, html, javascript, css, xml:
\nAddOutputFilterByType DEFLATE text\/plain
\nAddOutputFilterByType DEFLATE text\/html
\nAddOutputFilterByType DEFLATE text\/xml
\nAddOutputFilterByType DEFLATE text\/css
\nAddOutputFilterByType DEFLATE application\/xml
\nAddOutputFilterByType DEFLATE application\/xhtml+xml
\nAddOutputFilterByType DEFLATE application\/rss+xml
\nAddOutputFilterByType DEFLATE application\/javascript
\nAddOutputFilterByType DEFLATE application\/x-javascript
\n<\/IfModule>
\n<\/code><\/p>\n

Esto no s\u00f3lo ayuda a la velocidad de tu p\u00e1gina web, sino que tambi\u00e9n reduce el ancho de banda del servidor y, si pagas por ancho de banda, te puede ahorrar bastante dinero haciendo esto.
\nPod\u00e9is comprobar la compresi\u00f3n GZIP<\/em> de vuestro sitio en el siguiente enlace<\/a><\/p>\n

MINIFICAR (Minify)<\/h3>\n

Se trata de que un fichero sea menos pesado modificando ciertos elementos: espacios innecesarios, tabulaciones, comentarios, etc. Aunque parezca que se ahorra poco tama\u00f1o con esto, una web tiene much\u00edsimos archivos, si de cada archivo conseguimos bajar un poquito su tama\u00f1o ser\u00e1 m\u00e1s que suficiente para que la velocidad de la web aumente considerablemente. Recordad que todo cuenta!<\/p>\n

Aqu\u00ed algunas herramientas online <\/em>para conseguirlo en un par de clics: Codekit<\/a>, Prepos<\/a>, JSCompress<\/a>, CSSminifier<\/a>.<\/p>\n

CONCATENAR ARCHIVOS CSS Y JAVASCRIPT<\/h3>\n

Seguro que usas plugins<\/em>, frameworks<\/em>, etc… tendr\u00e1s varios archivos de javascript<\/em> y css<\/em>. Esto significa que el navegador tendr\u00e1 que hacer tantas peticiones al servidor como dichos archivos haya.
\nSer\u00eda genial que un programa se encargara de concatenarlas en un \u00fanico fichero js<\/em> y css<\/em> y as\u00ed reducir el numero de peticiones no?
\nHerramientas tales como Gulp <\/a>o Grunt <\/a>que funcionan bajo node.js<\/strong> nos facilitan esta tarea.<\/p>\n

USAR LA CACH\u00c9<\/h3>\n

Si algo ya se ha bajado, porque volverlo a bajar?
\nEste m\u00e9todo es uno de de los mas recomendados y pr\u00e1cticos para lograr que nuestra web, blog, tienda, etc… cargue m\u00e1s r\u00e1pidamente.
\nPartiendo de que todos los navegadores poseen una cach\u00e9 (memoria), se trata de configurar el archivo .htacces<\/em><\/a> de nuestro servidor Apache<\/em> a trav\u00e9s de los par\u00e1metros Expires o Cache-Control<\/em> para informarle a este sobre el tiempo que puede ser almacenados diferentes tipos de archivos de nuestra p\u00e1gina.
\nDe los dos par\u00e1metros: Expires<\/em> y Cache-Control<\/em> solo es posible utilizar uno de los dos, no se puede emplear los dos simult\u00e1neamente.
\nGoogle<\/em> recomienda el uso del encabezado Expires en vez de Cache-Control<\/em> por ser soportado de forma m\u00e1s amplia.<\/p>\n

Aqu\u00ed un posible c\u00f3digo usando Cache-Control en nuestro .htacces<\/em>
\n
\n# 1 A\u00d1O
\n<filesmatch \"\\.(ico|pdf|flv)$\"=\"\">
\nHeader set Cache-Control \"max-age=29030400, public\"<\/code><\/p>\n

# 1 SEMANA
\n<filesmatch \u00ab\\.(jpg|jpeg|png|gif|swf)$\u00bb=\u00bb\u00bb>
\nHeader set Cache-Control \u00abmax-age=604800, public\u00bb<\/p>\n

# 2 DIAS
\n<filesmatch \u00ab\\.(xml|txt|css|js)$\u00bb=\u00bb\u00bb>
\nHeader set Cache-Control \u00abmax-age=172800, proxy-revalidate\u00bb<\/p>\n

# 1 MINUTO
\n<filesmatch \"\\.(html|htm|php)$\"=\"\">
\nHeader set Cache-Control \"max-age=60, private, proxy-revalidate\"<\/code><\/p>\n

Si lo deseais podeis ampliar informaci\u00f3n en este enlace<\/a>.<\/p>\n

LOS CDN<\/em><\/h3>\n

Es la abreviatura de Content Delivery Network<\/em> (Red de distribuci\u00f3n de contenido) y es una\u00a0colecci\u00f3n de servidores web distribuidos alrededor de m\u00faltiples localizaciones para distribuir contenido m\u00e1s eficientemente
\nHay varios\u00a0CDN<\/em> gratuitos, entre ellos el de\u00a0Google<\/em>, el de\u00a0Microsoft\u00a0<\/em>y el de\u00a0Edgecast<\/em>.
\nTambien hay \u00a0CDN<\/em> de pago. Algunos puede que te suenen como\u00a0Akamai\u00a0<\/em>o\u00a0Amazon CloudFront<\/em>
\nLa idea es que en vez de cargar las librer\u00edas desde tu servidor de hosting, las cargues directamente desde el CDN<\/em>. De este modo cuando se haga la petici\u00f3n se cargar\u00e1 la librer\u00eda (o librer\u00edas solicitadas) desde el nodo mas cercano al cliente con lo que se cargar\u00e1 m\u00e1s r\u00e1pido.<\/p>\n

Si ,por ejemplo, utilizas\u00a0Bootstrap <\/a>o Jquery <\/a>puedes obtener los archivos desde un CDN<\/em><\/p>\n

USAR SPRITES<\/h3>\n

En el Curso de HTML5&CSS3<\/a> ya hablamos de los sprites<\/em> y su importancia.<\/p>\n

Podemos tener decenas de imagenes en una p\u00e1gina web que se traducen en decenas de peticiones HTTP<\/em>. La tecnica de los sprites<\/em> consiste en crear una \u00fanica imagen grande que incluya todas las im\u00e1genes individuales y utilizar las propiedades CSS de las im\u00e1genes de fondo (background-image<\/em>, background-position<\/em>) para mostrar cada im\u00e1gen.<\/p>\n

El problema de los sprites<\/em> es que puede llegar a ser muy pesado de crearlos. Afortunadamente tenemos herramientas online que nos ayudan a agilizar el tr\u00e1mite como\u00a0CSS Sprite Generator<\/a> y Stitches <\/a>entre otros.<\/p>\n

 <\/p>\n

Para terminar solo nos queda saber como podemos medir la velocidad de carga de nuestra web<\/strong>. Aqu\u00ed teneis algunas herramientas gratuitas:<\/p>\n