{"id":6167,"date":"2013-05-17T12:11:09","date_gmt":"2013-05-17T10:11:09","guid":{"rendered":"http:\/\/www.mkeficaz.com\/?p=4427"},"modified":"2013-05-17T12:11:09","modified_gmt":"2013-05-17T10:11:09","slug":"web-performance-optimization-la-velocidad-de-un-site","status":"publish","type":"post","link":"https:\/\/www.tresce.com\/blog\/web-performance-optimization-la-velocidad-de-un-site\/","title":{"rendered":"Web Performance Optimization la velocidad de un site"},"content":{"rendered":"<p>A partir de un segundo y medio una web es lenta. Cu\u00e1nto m\u00e1s r\u00e1pido va un sitio mejor. Estas son las m\u00e1ximas de la <strong>WPO (Web Performance Optimization) o la optimizaci\u00f3n de la conectividad de redes, servidores web y los diferentes elementos que tienen un sitio web, desde el HTML hasta el JavaScript, pasando por los CSS o la cantidad de peticiones a servidores DNS para que la velocidad sea un elemento diferenciador.<\/strong><\/p>\n<p>Si una p\u00e1gina tarda dos segundos en cargar cualquier persona la califica como una web lenta, es mec\u00e1nico, cerebral, propio del ser humano. Est\u00e1 demostrado que <strong>la carga veloz de sitios web aumenta la satisfacci\u00f3n de los usuarios y por tanto su lealtad.\u00a0<\/strong>Adem\u00e1s <strong>la WPO est\u00e1 ligada a un intento de ecologismo de la web, reducir al m\u00e1ximo el\u00a0<\/strong><strong>consumo de energ\u00eda de un sitio web y de este modo su impacto ambiental.<\/strong> Importante tenerlo en cuenta al crear o implementar sitios web.<\/p>\n<p>Algunos datos que ilustran la importancia de la WPO:<\/p>\n<ul>\n<li><strong>0,1 segundos de retraso<\/strong> implican una<strong> p\u00e9rdida del 1% de los ingresos<\/strong> de Amazon.<\/li>\n<li>AOL hizo una revisi\u00f3n del n\u00famero de p\u00e1ginas vistas en diferentes webs y concluy\u00f3 que<strong> aquellos que funcionan r\u00e1pido tienen unas 7-8 p\u00e1ginas vistas por usuario<\/strong> y que <strong>las lentas tan\u00a0s\u00f3lo 3-4 p\u00e1ginas vistas<\/strong> por usuario.<\/li>\n<li>Si<strong> Facebook va 0,5 segundos m\u00e1s lento de lo habitual \u00a0provoca una ca\u00edda de tr\u00e1fico del 3%<\/strong>; 1 segundo provoca una\u00a0ca\u00edda del 6%.<\/li>\n<li><strong>Google sufre una ca\u00edda de 0,59% de las b\u00fasquedas por usuario<\/strong> <strong>si presenta un retraso de \u00a00,4 segundos<\/strong>. 0,5\u00a0segundos m\u00e1s en cargar implica un 25% menos de b\u00fasquedas.<\/li>\n<li>Entre los usuarios,<strong> el 14% cambia de tienda online si la p\u00e1gina tarda en carga<\/strong>r y <strong>el\u00a040% abandona una p\u00e1gina que tarda m\u00e1s de 3 segundos en cargar.<\/strong><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<div><strong>Para conseguir mejoras en nuestro site enmarcadas en la WPO se ha de trabajar en : conectividad, contenidos, \u00a0im\u00e1genes,\u00a0cookies, CSS, JavaScript, HTML, servidores y dispositivos.<\/strong><\/div>\n<div><\/div>\n<div>El objetivo de la Web Performance Optimization es reducir al m\u00e1ximo el tiempo de descarga de tu web. Cu\u00e1ntas menos peticiones HTTP se realicen menor ser\u00e1 el tiempo de descarga. En algunos casos se consume m\u00e1s tr\u00e1fico en la petici\u00f3n de la informaci\u00f3n que en la transferencia de la informaci\u00f3n en si.<\/div>\n<div><\/div>\n<div><strong>Una t\u00e9cnica WPO ser\u00eda combinar varios CSS y JavaScript en uno<\/strong>. Normalmente los JavaScript y los CSS se encuentran en puntos de la p\u00e1gina como la cabecera\u00a0&lt;head&gt;, as\u00ed que cuando la web comienza a descargarse, en paralelo tambi\u00e9n lo hacen estos elementos CSS o JS pudiendo causar bloqueos.<\/div>\n<div><\/div>\n<div>Para que funcione todo m\u00e1s r\u00e1pido, es mejor tener un \u00fanico fichero .JS o .CSS de un tama\u00f1o. A\u00fan reducimos m\u00e1s si los combinamos haciendo uso de HttpCombiner1: la idea de combinar todos los scripts en un bloque, y los CSS en otro. De esta forma\u00a0tendr\u00edamos algo tal que:<\/div>\n<p>&lt;script type=\u00bbtext\/javascript\u00bb<br \/>\nsrc=\u00bbHttpCombiner.ashx?s=scripts&amp;t=text\/javascript&amp;v=1&#8243;&gt;&lt;\/script&gt;<\/p>\n<p>Igual con las hojas de estilo:<\/p>\n<p>&lt;link type=\u00bbtext\/css\u00bb rel=\u00bbstylesheet\u00bb<br \/>\nhref=\u00bbHttpCombiner.ashx?s=css&amp;t=text\/css&amp;v=1&#8243;&gt;&lt;\/link&gt;<\/p>\n<p>Para ello usaremos un fichero de configuraci\u00f3n (web.config) que ser\u00e1 similar a este:<\/p>\n<p>&lt;appSettings&gt;<br \/>\n&lt;add key=\u00bbscripts\u00bb value=\u00bbjs\/jquery.js, js\/jDate.js, js\/jQuery.Core.js,<br \/>\njs\/jQuery.Delegate.js, js\/jQuery.Validation.js\u00bb\/&gt;<br \/>\n&lt;add key=\u00bbcss\u00bb value=\u00bbcss\/Theme.css, css\/Common.css, css\/grid.css\u00bb\/&gt;<br \/>\n&lt;\/appSettings&gt;<\/p>\n<p><strong>Otro m\u00e9todo es la combinaci\u00f3n de im\u00e1genes o ic\u00f3nos en CSS Sprites.<\/strong><\/p>\n<p>En muchas ocasiones las webs tienen iconos que se van repitiendo en las diferentes p\u00e1ginas que la componen. Esta cantidad de iconos puede producir el efecto de un exceso de peticiones y, por ello, un n\u00famero elevado de conexiones in\u00fatiles. Una buena soluci\u00f3n es la de integrar varias im\u00e1genes en una imagen \u00fanica. Esta imagen, que suele ser un PNG8, contiene una cantidad de im\u00e1genes peque\u00f1as suficiente para no tener un tama\u00f1o excesivo y con una \u00fanica imagen poder gestionar todos los elementos desde el CSS. Este sistema, conocido como CSS Sprites permite que carguemos una \u00fanica URL (que se usar\u00e1 en distintas zonas de la p\u00e1gina) de forma r\u00e1pida y con una \u00fanica petici\u00f3n HTTP.<\/p>\n<p>Adem\u00e1s de estos consejos referidos al c\u00f3digo, en la WPO se ha de tener en cuenta la\u00a0<strong>red de distribuci\u00f3n de contenidos<\/strong>\u00a0(\u00a0<strong>CDN<\/strong>\u00a0), el <strong>responsive desing,<\/strong> la tenencia de un buen soporte, un <strong>hosting<\/strong> en servidores que garanticen que tu web nunca se caer\u00e1, \u00a0y un campo infinito de mejoras que has de investigar.<\/p>\n<p>Algunas herramientas que te ayudar\u00e1n en esta investigaci\u00f3n son:<\/p>\n<ul>\n<li><a title=\"BOOMERANG\" href=\"http:\/\/yahoo.github.io\/boomerang\/doc\/\" target=\"_blank\">Boomerang<\/a>, es un c\u00f3digo JavaScript que te permite medir el rendimiento de las p\u00e1ginas<\/li>\n<li><a title=\"Google page speed\" href=\"https:\/\/developers.google.com\/speed\/pagespeed\/mod?hl=es\" target=\"_blank\">Google mod_pagespeed<\/a>. Un m\u00f3dulo para Apache 2 que lleva la configuraci\u00f3n por defecto dediversas\u00a0opciones (compresi\u00f3n, agrupar CSS y JS&#8230;).<\/li>\n<li><a title=\"Page Speed_Google\" href=\"https:\/\/developers.google.com\/speed\/pagespeed\/\" target=\"_blank\">Google Page Speed<\/a>\u00a0es una herramienta que se puede instalar en Mozilla Firefox junto al<br \/>\na\u00f1adido Firebug y tambi\u00e9n en Google Chrome y permite revisar una serie de elementos de<br \/>\nWPO.<\/li>\n<li><a title=\"httpperf\" href=\"http:\/\/www.hpl.hp.com\/research\/linux\/httperf\/\" target=\"_blank\">Httperf <\/a>es una herramienta de Hewlett-Packard que permite hacer peticiones de estr\u00e9s a los\u00a0servidores y ver c\u00f3mo se comportan.<\/li>\n<\/ul>\n<div><a href=\"https:\/\/www.tresce.com\/blog\/wp-content\/uploads\/2013\/05\/page-speed-google1.bmp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-4433\" title=\"page speed google\" src=\"https:\/\/www.tresce.com\/blog\/wp-content\/uploads\/2013\/05\/page-speed-google1.bmp\" alt=\"page speed google\" width=\"575\" height=\"328\" \/><\/a><\/div>\n<div><\/div>\n<p>Esperamos haber plantado un semilla de curiosidad para que os plant\u00e9is la creaci\u00f3n de sitios o la mejorar a partir de la WPO.<strong> Los usuarios estar\u00e1n m\u00e1s satisfechos, la conversi\u00f3n aumentar\u00e1, tu web ser\u00e1 m\u00e1s r\u00e1pida y el gasto de energ\u00eda se minimizar\u00e1<\/strong>. WPO o todos felices \u00bfno cre\u00e9is?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A partir de un segundo y medio una web es lenta. Cu\u00e1nto m\u00e1s r\u00e1pido va un sitio mejor. Estas son las m\u00e1ximas de la WPO (Web Performance Optimization) o la optimizaci\u00f3n de la conectividad de redes, servidores web y los diferentes elementos que tienen un sitio web, desde el HTML hasta el JavaScript, pasando por [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[],"class_list":["post-6167","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web"],"_links":{"self":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/posts\/6167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/comments?post=6167"}],"version-history":[{"count":0,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/posts\/6167\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/media?parent=6167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/categories?post=6167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tresce.com\/blog\/wp-json\/wp\/v2\/tags?post=6167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}