{"id":9977,"date":"2019-02-05T08:42:57","date_gmt":"2019-02-05T06:42:57","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=9977"},"modified":"2023-11-28T12:21:20","modified_gmt":"2023-11-28T11:21:20","slug":"problemas-velocidad-carga-web","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/problemas-velocidad-carga-web\/","title":{"rendered":"Velocidad de carga en tu web: c\u00f3mo detectar problemas"},"content":{"rendered":"<p>La<strong> velocidad de carga de una web<\/strong> es un factor muy importante que se debe tener en cuenta tanto en su fase de desarrollo antes de ser publicada, como durante toda su fase de mantenimiento con cada nuevo evolutivo y correcci\u00f3n de incidencias.<\/p>\n<p>Por ello, en este art\u00edculo vamos a centrar el foco en <strong>c\u00f3mo detectar posibles problemas que afecten a la velocidad de carga de nuestra web y c\u00f3mo mejorar la velocidad de carga<\/strong>. Pero antes de nada vamos a tratar de ver los motivos por los cuales es tan importante la velocidad de carga de una web.<\/p>\n<p>&nbsp;<\/p>\n<h2>Problemas a evitar en la carga web \u00f3ptima<\/h2>\n<p>Los motivos por lo cuales la velocidad de carga es un factor fundamental en los buenos resultados de una web son muy variados.<\/p>\n<ul>\n<li><strong>Desde el punto de vista SEO,<\/strong> la velocidad de carga influye en el <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/posicionamiento-seo\/\">posicionamiento SEO<\/a> de \u00e9sta en el ranking de los resultados de b\u00fasqueda de buscadores como Google. Ya que \u00e9stos tienen en cuenta la velocidad de carga como una variable mas en su \u201cf\u00f3rmula\u201d de posicionamiento tras la actualizaci\u00f3n de las <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/core-web-vitals-que-son-y-como-afrontar-la-nueva-actualizacion-de-google\/\">Core Web Vitals<\/a>.<\/li>\n<li>Sin embargo <strong>desde el punto de vista de la <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/que-es-la-tasa-de-conversion\/\">tasa de conversi\u00f3n<\/a> de un E-commerce<\/strong>, se sabe que un segundo de retraso en el tiempo de carga conlleva una bajada de un 7% en la conversi\u00f3n web y hasta un 27% en la conversi\u00f3n m\u00f3vil.<\/li>\n<li>Tambi\u00e9n, <strong>desde la perspectiva del hosting<\/strong>, si la web est\u00e1 optimizada con tiempos de carga adecuados, evitar\u00e1 que tengamos que contratar una infraestructura de servidores sobredimensionada y, por lo tanto, repercutir\u00e1 en un menor coste en hosting.<\/li>\n<\/ul>\n<p>Y, por \u00faltimo, pero no menos importante, est\u00e1 el factor de la<a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/que-es-experiencia-usuario\/\"><strong> experiencia de usuario<\/strong><\/a>, por el cual la satisfacci\u00f3n de los usuarios que visitan nuestra web es inversamente proporcional cuanto mayor es el tiempo de carga de \u00e9sta.<\/p>\n<p>&nbsp;<\/p>\n<h2>Antes de resolver un problema de velocidad de carga en una web, primero hay que reconocerlo y medirlo<\/h2>\n<p>La sensaci\u00f3n de si la velocidad de carga de una web es r\u00e1pida o lenta a veces puede variar mucho dependiendo de la persona a la que se le pregunte, por eso hay que evitar caer en el error de preguntar a otras personas si creen que una web es r\u00e1pida en cargar o lenta.<\/p>\n<p>Lo que hay que hacer es medir esta velocidad de forma objetiva con alguna de las muchas <strong>herramientas gratuitas que existen online<\/strong>, como <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=es\">Google Pagespeed<\/a>, con el objetivo de conseguir un dato preciso y fiable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9997\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/Google-Speed.png\" alt=\"Google Speed\" width=\"655\" height=\"470\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/Google-Speed.png 655w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/Google-Speed-300x215.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/Google-Speed-360x258.png 360w\" sizes=\"auto, (max-width: 655px) 100vw, 655px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Adem\u00e1s, muchas de estas herramientas tambi\u00e9n te recomiendan acciones a realizar para mejorar estos tiempos de carga. Pero hay ocasiones que a\u00fan habiendo resuelto muchas de las recomendaciones propuestas por estas herramientas, seguimos obteniendo tiempos de velocidad de carga decepcionantes y, es en estas ocasiones, cuando no queda otra opci\u00f3n que realizar un an\u00e1lisis mayor de lo que se est\u00e1 ejecutando en nuestra web.<\/p>\n<h2>Profiling, profiling y m\u00e1s profiling<\/h2>\n<h3>Primero la definici\u00f3n, \u00bfqu\u00e9 es profiling?<\/h3>\n<p>Profiling es el proceso de analizar la ejecuci\u00f3n de una aplicaci\u00f3n, medir la frecuencia y la duraci\u00f3n de las llamadas a funciones, el consumo de memoria, las consultas a base de datos y m\u00e1s. Y de esta forma, ayudar a determinar d\u00f3nde est\u00e1n exactamente el\/los cuellos de botella en una aplicaci\u00f3n.<\/p>\n<p>Ahora que ya sabemos que es el profiling, en el mundo web <strong>podr\u00edamos dividirlo en dos tipos de profiling:<\/strong><\/p>\n<ul>\n<li>El que realizaremos de la parte \u201cback\u201d, es decir en el lado del servidor<\/li>\n<li>El que realizaremos en la parte \u201cfront\u201d, es decir en el lado del cliente o navegador.<\/li>\n<\/ul>\n<p>Ambos son igual de importantes para obtener tiempos de carga \u00f3ptimos en una web. El profiling que realicemos en la parte \u201cback\u201d principalmente nos ayudar\u00e1 a <strong>mejorar el TTFT \u201cTime To First Byte\u201d<\/strong> que no es otra cosa que el tiempo que tarda nuestro servidor en procesar y responder la petici\u00f3n hecha por el navegador del usuario. Y el profiling que realicemos en la parte \u201cfront\u201d nos ayudar\u00e1 a <strong>mejorar el tiempo que tarda en renderizar\/pintar el contenido de la web<\/strong>\u00a0en el navegador del usuario una vez que el servidor ha devuelto una respuesta.<\/p>\n<p>Dependiendo de si el profiling lo estamos realizando sobre el back o el front, tendremos que emplear unas herramientas u otras.<\/p>\n<p>&nbsp;<\/p>\n<h2>Reconocer el cuello de botella de la velocidad de carga de nuestra p\u00e1gina web<\/h2>\n<p>Lo primero que debemos hacer es determinar donde tenemos el\/los cuellos de botella, si en el back, en el front, o en ambos. Y esto por cada secci\u00f3n de la web donde se hayan detectado tiempos de carga lentos.<\/p>\n<p>Para ello, nos valdremos de una herramienta clave que hoy en d\u00eda tienen casi todos los navegadores, que se llama \u201c<strong>Developer Tools<\/strong>\u201d. En este art\u00edculo, usaremos las Developer Tools de Chrome tambi\u00e9n llamadas DevTools.<\/p>\n<p><strong>Para abrir\u00a0 las DevTools de Chrome<\/strong>, primero debemos tener Chrome abierto y, a continuaci\u00f3n, presionaremos Command+Option+I (en Mac) o Control+Shift+I (en Windows y Linux). Tambi\u00e9n puedes abrirlo con el rat\u00f3n (bot\u00f3n derecho, Inspeccionar). A continuaci\u00f3n haremos click sobre la pesta\u00f1a de Network y presionaremos Command+R (en Mac) o Control+R (en Windows y Linux). Una vez haya finalizado, habremos obtenido un listado, como el que se muestra a continuaci\u00f3n, donde podemos ver todo lo que se ha cargado en la p\u00e1gina que estamos visualizando en estos momentos y el tiempo en que ha tardado en cargar todo.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9978 size-large\" title=\"mejorar velocidad carga web\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/carga-web-1024x640.png\" alt=\"mejorar velocidad carga web\" width=\"620\" height=\"388\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/carga-web-1024x640.png 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/carga-web-300x188.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/carga-web-768x480.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/carga-web-360x225.png 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2019\/01\/carga-web.png 1440w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Lo primero en lo que debemos fijarnos es en la primera fila del listado, que nos indica <strong>el tiempo que ha tardado en descargar el navegador el DOM de la p\u00e1gina<\/strong>, es decir, el tiempo que ha tardado el servidor en procesar la petici\u00f3n del navegador y este \u00faltimo en descargar la respuesta.<\/p>\n<h2>Waterfall de velocidad de carga<\/h2>\n<p>Si situamos el rat\u00f3n sobre la barrita verde que vemos en la columna Waterfall, se abrir\u00e1 un popup donde se desglosa este tiempo en varios par\u00e1metros, entre ellos el TTFB, y si hemos obtenido un tiempo elevado en este punto nos va a indicar que hay problemas en el lado del back. Para hacernos una idea, <strong>un TTFB menor de 500ms se considera bueno, un TTFB entre 500ms y 1 segundo se considera aceptable y un TTFB superior a 1 segundo se considera malo<\/strong>.<\/p>\n<blockquote><p>Los motivos por los que un TTFB ha resultado elevado pueden ser muy variados, como problemas con la cach\u00e9, consultas a la base de datos lentas, llamadas a funciones recurrentes que no se almacenan en memoria y un largo etc\u00e9tera que no podemos ver en detalle en este art\u00edculo por el tiempo que esto nos llevar\u00eda. Para solucionar esto, deberemos realizar un profiling del back con alguna herramienta tipo <a href=\"https:\/\/blackfire.io\/\">BlackFire<\/a>, etc.<\/p><\/blockquote>\n<p>Lo siguiente en lo que nos fijaremos, es el resumen en el pie de las DevTools donde podemos ver el total de peticiones realizadas, el peso en megas de todo lo que se ha descargado la p\u00e1gina (html, css, js, im\u00e1genes, etc) y, por \u00faltimo, el DOMContentLoaded y el Load, dos datos muy importantes, que explicamos a continuaci\u00f3n.<\/p>\n<p><strong>El DOMContentLoaded <\/strong>indica el tiempo ha tardado el \u00e1rbol de renderizado en estar preparado para comenzar a construirse. Es decir, el tiempo que se ha tardado en cargar\/analizar el documento de la p\u00e1gina para poder empezar a pintarse en el navegador y mostrar su contenido al usuario. <em><strong>Un DOMContentLoaded lento puede ser se\u00f1al de alg\u00fan tipo de bloqueo como im\u00e1genes pesadas o javascripts lentos<\/strong><\/em>.<\/p>\n<p>Por \u00faltimo <strong>el Load<\/strong>, indica el tiempo total que ha tardado el navegador en renderizar por completo la p\u00e1gina y un valor superior a los tres segundos es lento. Si obtenemos malos resultados en cualquiera de estos dos par\u00e1metros deberemos realizar un profiling de la parte front para determinar la causa. Para ello las propias DevTools desde la pesta\u00f1a Performance nos proporciona una herramienta para poder realizar este profiling del front.<\/p>\n<h2>Contacta con Hiberus<\/h2>\n<p>En este art\u00edculo hemos visto los motivos por los que la velocidad de carga de una web es un factor muy importante que debe ser medido constantemente de forma fiable y objetiva. Adem\u00e1s, cuando el resultado obtenido no es bueno, hemos visto c\u00f3mo reconocer si el cuello de botella est\u00e1 en el back-end o en front-end y as\u00ed acotar el problema de forma general para poder focalizar nuestros esfuerzos, y adem\u00e1s elegir la herramienta correcta que nos permita localizar el problema y finalmente resolverlo.<\/p>\n<p>Si est\u00e1s eligiendo\u00a0una nueva plataforma para tu ecommerce, quieres\u00a0desarrollar la nueva web corporativa de tu compa\u00f1\u00eda o necesitas una App potente para tu medio de comunicaci\u00f3n, desde <a href=\"https:\/\/www.hiberus.com\/ecommerce\">Hiberus Digital<\/a> te ayudamos a definir tus necesidades, seleccionar la plataforma m\u00e1s adecuada y desarrollar tu proyecto con \u00e9xito.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La velocidad de carga de una web es un factor muy importante que se debe tener en cuenta tanto en su fase&#8230;<\/p>\n","protected":false},"author":33,"featured_media":9979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,232,233],"tags":[34,61],"class_list":{"0":"post-9977","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-portales-dxp","9":"category-tecnologias-ecommmerce","10":"tag-ecommerce","11":"tag-portal-corporativo"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/9977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=9977"}],"version-history":[{"count":3,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/9977\/revisions"}],"predecessor-version":[{"id":20971,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/9977\/revisions\/20971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/9979"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=9977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=9977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=9977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}