{"id":15832,"date":"2023-04-27T12:41:51","date_gmt":"2023-04-27T10:41:51","guid":{"rendered":"https:\/\/dinorank.com\/blog\/?p=15832"},"modified":"2025-06-04T12:11:42","modified_gmt":"2025-06-04T10:11:42","slug":"gtmetrix-tutorial-wpo","status":"publish","type":"post","link":"https:\/\/dinorank.com\/blog\/tutorial-gtmetrix-wpo\/","title":{"rendered":"GTmetrix &#8211; Completo Tutorial en espa\u00f1ol para dejar el WPO en verde"},"content":{"rendered":"<p>Si hasta ahora no te hab\u00eda preocupado la velocidad de carga de tu web, d\u00e9jame decirte que va siendo el momento de prestarle atenci\u00f3n.<\/p>\n<p>No te preocupes, no es complicado. Hay herramientas gratuitas que te facilitan mucho el trabajo.<\/p>\n<p>Y una de las mejores que conozco es GTmetrix.<\/p>\n<p>En este art\u00edculo voy a comentarte <strong>por qu\u00e9 deber\u00edas revisar el rendimiento de tus p\u00e1ginas<\/strong> y c\u00f3mo puedes hacerlo a trav\u00e9s de esta herramienta SEO que tenemos la suerte de poder utilizar sin ning\u00fan coste.<\/p>\n<p>\u00bfMe acompa\u00f1as en este <strong>repaso de las funcionalidades de GTmetrix<\/strong>?<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-15989\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/Tutorial-Completo-GTmetrix.png\" alt=\"Tutorial Completo GTmetrix\" width=\"1100\" height=\"600\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/Tutorial-Completo-GTmetrix.png 1100w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/Tutorial-Completo-GTmetrix-300x164.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/Tutorial-Completo-GTmetrix-1024x559.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/Tutorial-Completo-GTmetrix-768x419.png 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h2>Qu\u00e9 es GTmetrix y para qu\u00e9 sirve<\/h2>\n<p>GTmetrix es una herramienta online que realiza un <strong>an\u00e1lisis de carga de tu p\u00e1gina web<\/strong> para comprobar su rendimiento y <strong>ofrecerte mejoras de optimizaci\u00f3n<\/strong>.<\/p>\n<p>\u00bfPor qu\u00e9 es importante para el SEO medir la velocidad de tu web?<\/p>\n<p>Imagina que te sientas en una terraza a tomar algo.<\/p>\n<p>Pasan los minutos y nadie te hace caso.<\/p>\n<p>Preguntas a un camarero si te puede tomar nota y te dice que enseguida te atiende.<\/p>\n<p>Pero sigue pasando el tiempo y contin\u00faas esperando.<\/p>\n<p>Al final, te desesperas y terminas y\u00e9ndote a otro bar.<\/p>\n<p>Con tu web pasa lo mismo. Pero, en este caso, no hablamos de minutos, sino de segundos e incluso mil\u00e9simas de segundo.<\/p>\n<p>Si un usuario entra a tu p\u00e1gina y \u00e9sta tarda en cargar, acaba por irse a otro sitio.<\/p>\n<p>Google lo sabe y, por eso, <strong>el rendimiento de una web es hoy en d\u00eda un factor m\u00e1s de posicionamiento<\/strong>.<\/p>\n<div class=\"su-note border=#000000\"  style=\"border-color:#007963;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#00937D;border-color:#ccffff;color:#ffffff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">Herramientas como GTmetrix te permiten evaluar los elementos que afectan a los tiempos de carga de tu web para que puedas tomar las acciones que sean necesarias para mejorar la experiencia del usuario.<\/div><\/div>\n<h2>C\u00f3mo usar GTmetrix<\/h2>\n<p>A la hora de utilizar GTmetrix, puedes elegir entre 3 modalidades diferentes, en funci\u00f3n de cu\u00e1l sea el grado de vinculaci\u00f3n que quieras adquirir con la herramienta.<\/p>\n<p>En primer lugar, tienes la manera m\u00e1s directa, ideal si \u00fanicamente quieres hacer un an\u00e1lisis r\u00e1pido de tu web de forma ocasional.<\/p>\n<p>No necesitas proporcionar ning\u00fan dato personal. Simplemente, indica la URL de tu sitio en la p\u00e1gina de inicio del portal de GTmetrix, espera unos segundos y ya podr\u00e1s analizar los resultados.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15911 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-inicio.png\" alt=\"Pantalla de inicio de GTmetrix\" width=\"1024\" height=\"491\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-inicio.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-inicio-300x144.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-inicio-768x368.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Ahora bien, si lo que quieres es llevar un m\u00ednimo seguimiento de tu web, <strong>te recomiendo crearte una cuenta gratuita<\/strong>.<\/p>\n<p>Necesitar\u00e1s dejar una direcci\u00f3n de correo y, opcionalmente, tu nombre. A cambio, tendr\u00e1s una serie de ventajas, como:<\/p>\n<ul>\n<li>Ciertas opciones de configuraci\u00f3n para los tests.<\/li>\n<li>Almacenamiento de los \u00faltimos informes.<\/li>\n<li>Monitorizaci\u00f3n de tu p\u00e1gina principal.<\/li>\n<li>Configuraci\u00f3n de alertas.<\/li>\n<li>Acceso a la API.<\/li>\n<\/ul>\n<p>Por \u00faltimo, si lo que quieres es utilizar GTmetrix de manera profesional, tienes a tu disposici\u00f3n la versi\u00f3n PRO, con varios planes premium de pago.<\/p>\n<p>Vamos a ver qu\u00e9 ventajas tienen.<\/p>\n<h3>Diferencias entre la versi\u00f3n gratuita de GTmetrix y los planes de pago<\/h3>\n<p>En funci\u00f3n de cu\u00e1les sean las necesidades de tu negocio, GTmetrix PRO te ofrece diferentes planes de pago entre los que elegir.<\/p>\n<p>Desde la opci\u00f3n m\u00e1s econ\u00f3mica, que cuesta 13 $ al mes, hasta un plan pensado para empresas de cierto volumen, que tienen un uso m\u00e1s exigente.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15912 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-precios.png\" alt=\"Planes de precios de GTmetrix\" width=\"1024\" height=\"497\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-precios.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-precios-300x146.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-precios-768x373.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Incluso existe la posibilidad de configurar un plan a medida, si no te encaja ninguno de los paquetes disponibles.<\/p>\n<p>En cualquier caso, <strong>los planes de pago ofrecen varios beneficios <\/strong>sobre la versi\u00f3n gratuita. \u00c9stos son los que encuentro m\u00e1s relevantes:<\/p>\n<ul>\n<li>Ejecuci\u00f3n de los test desde servidores ubicados en un mayor n\u00famero de pa\u00edses.<\/li>\n<li>Simulaci\u00f3n de peticiones desde dispositivos m\u00f3viles.<\/li>\n<li>Muchas m\u00e1s opciones de configuraci\u00f3n de los tests.<\/li>\n<li>Informes en PDF mucho m\u00e1s completos.<\/li>\n<li>Monitorizaci\u00f3n de m\u00e1s p\u00e1ginas.<\/li>\n<li>Mayores posibilidades de uso de la API.<\/li>\n<\/ul>\n<p><span data-sheets-root=\"1\"><div id=\"brxe-5c527e\" class=\"brxe-block p-2 gap-15\"><div id=\"brxe-d69b57\" class=\"brxe-text-basic h3\">Descubre 6 t\u00e9cnicas sencillas (pero eficaces) para que las visitas de tu web crezcan m\u00e1s r\u00e1pido que la espuma de una cerveza mal tirada.\n<\/div><div id=\"brxe-445cc8\" class=\"brxe-text-basic\"><strong>Aunque no seas un experto en SEO<\/strong> ni puedas dedicarte mucho tiempo a esto.<\/div><div id=\"brxe-lbvkeh\" data-script-id=\"lbvkeh\" class=\"brxe-code incontent-form-html\"><style>@import url(https:\/\/fonts.bunny.net\/css?family=source-sans-pro:400,700);<\/style>\n<style>\n#_form_331_{font-size:14px;line-height:1.6;font-family:arial, helvetica, sans-serif;margin:0}#_form_331_ *{outline:0}._form_hide{display:none;visibility:hidden}._form_show{display:block;visibility:visible}#_form_331_._form-top{top:0}#_form_331_._form-bottom{bottom:0}#_form_331_._form-left{left:0}#_form_331_._form-right{right:0}#_form_331_ input[type=\"text\"],#_form_331_ input[type=\"tel\"],#_form_331_ input[type=\"date\"],#_form_331_ textarea{padding:6px;height:auto;border:#979797 1px solid;border-radius:4px;color:#000 !important;font-size:14px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#_form_331_ textarea{resize:none}#_form_331_ ._submit{-webkit-appearance:none;cursor:pointer;font-family:arial, sans-serif;font-size:14px;text-align:center;background:#00C4A7 !important;border:0 !important;-moz-border-radius:3px !important;-webkit-border-radius:3px !important;border-radius:3px !important;color:#FFFFFF !important;padding:14px !important}#_form_331_ ._submit:disabled{cursor:not-allowed;opacity:0.4}#_form_331_ ._submit.processing{position:relative}#_form_331_ ._submit.processing::before{content:\"\";width:1em;height:1em;position:absolute;z-index:1;top:50%;left:50%;border:double 3px transparent;border-radius:50%;background-image:linear-gradient(#00C4A7, #00C4A7), conic-gradient(#00C4A7, #FFFFFF);background-origin:border-box;background-clip:content-box, border-box;animation:1200ms ease 0s infinite normal none running _spin}#_form_331_ ._submit.processing::after{content:\"\";position:absolute;top:0;bottom:0;left:0;right:0;background:#00C4A7 !important;border:0 !important;-moz-border-radius:3px !important;-webkit-border-radius:3px !important;border-radius:3px !important;color:#FFFFFF !important;padding:14px !important}@keyframes _spin{0%{transform:translate(-50%, -50%) rotate(90deg)}100%{transform:translate(-50%, -50%) rotate(450deg)}}#_form_331_ ._close-icon{cursor:pointer;background-image:url(\"https:\/\/d226aj4ao1t61q.cloudfront.net\/esfkyjh1u_forms-close-dark.png\");background-repeat:no-repeat;background-size:14.2px 14.2px;position:absolute;display:block;top:11px;right:9px;overflow:hidden;width:16.2px;height:16.2px}#_form_331_ ._close-icon:before{position:relative}#_form_331_ ._form-body{margin-bottom:30px}#_form_331_ ._form-image-left{width:150px;float:left}#_form_331_ ._form-content-right{margin-left:164px}#_form_331_ ._form-branding{color:#fff;font-size:10px;clear:both;text-align:left;margin-top:30px;font-weight:100}#_form_331_ ._form-branding ._logo{display:block;width:130px;height:14px;margin-top:6px;background-image:url(\"https:\/\/d226aj4ao1t61q.cloudfront.net\/hh9ujqgv5_aclogo_li.png\");background-size:130px auto;background-repeat:no-repeat}#_form_331_ .form-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#_form_331_ ._form-label,#_form_331_ ._form_element ._form-label{font-weight:bold;margin-bottom:5px;display:block}#_form_331_._dark ._form-branding{color:#333}#_form_331_._dark ._form-branding ._logo{background-image:url(\"https:\/\/d226aj4ao1t61q.cloudfront.net\/jftq2c8s_aclogo_dk.png\")}#_form_331_ ._form_element{position:relative;margin-bottom:10px;font-size:0;max-width:100%}#_form_331_ ._form_element *{font-size:14px}#_form_331_ ._form_element._clear{clear:both;width:100%;float:none}#_form_331_ ._form_element._clear:after{clear:left}#_form_331_ ._form_element input[type=\"text\"],#_form_331_ ._form_element input[type=\"date\"],#_form_331_ ._form_element select,#_form_331_ ._form_element textarea:not(.g-recaptcha-response){display:block;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:inherit}#_form_331_ ._field-wrapper{position:relative}#_form_331_ ._inline-style{float:left}#_form_331_ ._inline-style input[type=\"text\"]{width:150px}#_form_331_ ._inline-style:not(._clear){margin-right:20px}#_form_331_ ._form_element img._form-image{max-width:100%}#_form_331_ ._form_element ._form-fieldset{border:0;padding:0.01em 0 0 0;margin:0;min-width:0}#_form_331_ ._clear-element{clear:left}#_form_331_ ._full_width{width:100%}#_form_331_ ._form_full_field{display:block;width:100%;margin-bottom:10px}#_form_331_ input[type=\"text\"]._has_error,#_form_331_ textarea._has_error{border:#F37C7B 1px solid}#_form_331_ input[type=\"checkbox\"]._has_error{outline:#F37C7B 1px solid}#_form_331_ ._show_be_error{float:left}#_form_331_ ._error{display:block;position:absolute;font-size:14px;z-index:10000001}#_form_331_ ._error._above{padding-bottom:4px;bottom:39px;right:0}#_form_331_ ._error._below{padding-top:8px;top:100%;right:0}#_form_331_ ._error._above ._error-arrow{bottom:-4px;right:15px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #FFDDDD}#_form_331_ ._error._below ._error-arrow{top:0;right:15px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #FFDDDD}#_form_331_ ._error-inner{padding:12px 12px 12px 36px;background-color:#FFDDDD;background-image:url(\"data:image\/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 3V9H7V3H9ZM9 13V11H7V13H9Z' fill='%23CA0000'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:12px center;font-size:14px;font-family:arial, sans-serif;font-weight:600;line-height:16px;color:#000;text-align:center;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 1px 4px rgba(31, 33, 41, 0.298295)}@media only screen and (max-width:319px){#_form_331_ ._error-inner{padding:7px 7px 7px 25px;font-size:12px;line-height:12px;background-position:4px center;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}#_form_331_ ._error-inner._form_error{margin-bottom:5px;text-align:left}#_form_331_ ._button-wrapper ._error-inner._form_error{position:static}#_form_331_ ._error-inner._no_arrow{margin-bottom:10px}#_form_331_ ._error-arrow{position:absolute;width:0;height:0}#_form_331_ ._error-html{margin-bottom:10px}.pika-single{z-index:10000001 !important}#_form_331_ input[type=\"text\"].datetime_date{width:69%;display:inline}#_form_331_ select.datetime_time{width:29%;display:inline;height:32px}#_form_331_ input[type=\"date\"].datetime_date{width:69%;display:inline-flex}#_form_331_ input[type=\"time\"].datetime_time{width:29%;display:inline-flex}@media (min-width:320px) and (max-width:667px){::-webkit-scrollbar{display:none}#_form_331_{margin:0;width:100%;min-width:100%;max-width:100%;box-sizing:border-box}#_form_331_ *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:1em}#_form_331_ ._form-content{margin:0;width:100%}#_form_331_ ._form-inner{display:block;min-width:100%}#_form_331_ ._form-title,#_form_331_ ._inline-style{margin-top:0;margin-right:0;margin-left:0}#_form_331_ ._form-title{font-size:1.2em}#_form_331_ ._form_element{margin:0 0 20px;padding:0;width:100%}#_form_331_ ._form-element,#_form_331_ ._inline-style,#_form_331_ input[type=\"text\"],#_form_331_ label,#_form_331_ p,#_form_331_ textarea:not(.g-recaptcha-response){float:none;display:block;width:100%}#_form_331_ ._row._checkbox-radio label{display:inline}#_form_331_ ._row,#_form_331_ p,#_form_331_ label{margin-bottom:0.7em;width:100%}#_form_331_ ._row input[type=\"checkbox\"],#_form_331_ ._row input[type=\"radio\"]{margin:0 !important;vertical-align:middle !important}#_form_331_ ._row input[type=\"checkbox\"]+span label{display:inline}#_form_331_ ._row span label{margin:0 !important;width:initial !important;vertical-align:middle !important}#_form_331_ ._form-image{max-width:100%;height:auto !important}#_form_331_ input[type=\"text\"]{padding-left:10px;padding-right:10px;font-size:16px;line-height:1.3em;-webkit-appearance:none}#_form_331_ input[type=\"radio\"],#_form_331_ input[type=\"checkbox\"]{display:inline-block;width:1.3em;height:1.3em;font-size:1em;margin:0 0.3em 0 0;vertical-align:baseline}#_form_331_ button[type=\"submit\"]{padding:20px;font-size:1.5em}#_form_331_ ._inline-style{margin:20px 0 0 !important}#_form_331_ ._inline-style input[type=\"text\"]{width:100%}}#_form_331_ .sms_consent_checkbox{position:relative;width:100%;display:flex;align-items:flex-start;padding:20px 0}#_form_331_ .sms_consent_checkbox input[type=\"checkbox\"]{float:left;margin:5px 10px 10px 0}#_form_331_ .sms_consent_checkbox .sms_consent_message{display:inline;float:left;text-align:left;margin-bottom:10px;font-size:14px;color:#7D8799}#_form_331_ .sms_consent_checkbox .sms_consent_message.sms_consent_mini{width:90%}#_form_331_ .sms_consent_checkbox ._error._above{right:auto;bottom:0}#_form_331_ .sms_consent_checkbox ._error._above ._error-arrow{right:auto;left:5px}@media (min-width:320px) and (max-width:667px){#_form_331_ .sms_consent_checkbox ._error._above{top:-30px;left:0;bottom:auto}}#_form_331_ .field-required{color:#FF0000}#_form_331_{position:relative;text-align:left;margin:25px auto 0;padding:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background:rgba(255, 255, 255, 0) !important;border-top:0px solid #737373 !important;border-right:0px solid #737373 !important;border-bottom:0px solid #737373 !important;border-left:0px solid #737373 !important;max-width:800px;-moz-border-radius:1px !important;-webkit-border-radius:1px !important;border-radius:1px !important;color:#000000}#_form_331_ ._show_be_error{min-width:100%}#_form_331_._inline-form,#_form_331_._inline-form ._form-content{font-family:Source Sans Pro;font-size:14px;font-weight:400}#_form_331_._inline-form ._row span,#_form_331_._inline-form ._row label{font-family:Source Sans Pro;font-size:14px;font-weight:400;line-height:1.6em;color:#888 !important}#_form_331__inlineform input[type=\"text\"],#_form_331__inlineform input[type=\"date\"],#_form_331__inlineform input[type=\"tel\"],#_form_331__inlineform select,#_form_331__inlineform textarea:not(.g-recaptcha-response){font-family:Source Sans Pro;font-size:14px;font-weight:400;font-color:#000000;line-height:1.6em}#_form_331_._inline-form ._html-code *:not(h1, h2, h3, h4, h5, h6),#_form_331_._inline-form .sms_consent_message,#_form_331_._inline-form ._form-thank-you{font-family:Source Sans Pro;font-size:14px;font-weight:400;color:#888 !important}#_form_331_._inline-form ._form-label,#_form_331_._inline-form ._form-emailidentifier,#_form_331_._inline-form ._form-checkbox-option-label{font-family:Source Sans Pro;font-size:14px;font-weight:700;line-height:1.6em;color:#888 !important}#_form_331_._inline-form ._submit{margin-top:12px;font-family:Source Sans Pro;font-size:14px;font-weight:400}#_form_331_._inline-form ._html-code h1,#_form_331_._inline-form ._html-code h2,#_form_331_._inline-form ._html-code h3,#_form_331_._inline-form ._html-code h4,#_form_331_._inline-form ._html-code h5,#_form_331_._inline-form ._html-code h6,#_form_331_._inline-form ._form-title{font-family:Source Sans Pro;font-size:22px;line-height:normal;font-weight:700;color:black;margin-bottom:0;display:block}#_form_331_._inline-form ._form-branding{font-family:\"IBM Plex Sans\", Helvetica, sans-serif;font-size:13px;font-weight:100;font-style:normal;text-decoration:none}#_form_331_:before,#_form_331_:after{content:\" \";display:table}#_form_331_:after{clear:both}#_form_331_._inline-style{width:auto;display:inline-block}#_form_331_._inline-style input[type=\"text\"],#_form_331_._inline-style input[type=\"date\"]{padding:10px 12px}#_form_331_._inline-style button._inline-style{position:relative;top:27px}#_form_331_._inline-style p{margin:0}#_form_331_._inline-style ._button-wrapper{position:relative;margin:16px 12.5px 0 20px}#_form_331_ ._form-thank-you{position:relative;left:0;right:0;text-align:center;font-size:18px}#_form_331_ ._form-pc-confirmation ._submit{margin-top:16px}@media (min-width:320px) and (max-width:667px){#_form_331_._inline-form._inline-style ._inline-style._button-wrapper{margin-top:20px !important;margin-left:0 !important}}#_form_331_ .iti{width:100%}#_form_331_ .iti.iti--allow-dropdown.iti--separate-dial-code{width:100%}#_form_331_ .iti input{width:100%;border:#979797 1px solid;border-radius:4px}#_form_331_ .iti--separate-dial-code .iti__selected-flag{background-color:#FFFFFF;border-radius:4px}#_form_331_ .iti--separate-dial-code .iti__selected-flag:hover{background-color:rgba(0, 0, 0, 0.05)}#_form_331_ .iti__country-list{border-radius:4px;margin-top:4px;min-width:460px}#_form_331_ .iti__country-list--dropup{margin-bottom:4px}#_form_331_ .phone-error-hidden{display:none}#_form_331_ .phone-error{color:#E40E49}#_form_331_ .phone-input-error{border:1px solid #E40E49 !important}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field fieldset{margin:0;margin-bottom:1.1428571429em;border:none;padding:0}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field fieldset:last-child{margin-bottom:0}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field legend{margin-bottom:1.1428571429em}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field label{display:flex;align-items:flex-start;justify-content:flex-start;margin-bottom:0.8571428571em}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field label:last-child{margin-bottom:0}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field input{margin:0;margin-right:8px}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field ._form-checkbox-option-label{display:block;font-weight:400;margin-top:-4px}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field ._form-checkbox-option-label-with-description{display:block;font-weight:700;margin-top:-4px}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field ._form-checkbox-option-description{margin:0;font-size:0.8571428571em}#_form_331_._inline-form ._form-content ._form-list-subscriptions-field ._form-subscriptions-unsubscribe-all-description{line-height:normal;margin-top:-2px}\n#_form_331_ ._submit{width:100%;font-family:\"Source Sans Pro\", Sans-serif !important;font-size:18px !important;font-weight:500 !important}#_form_331_ ._submit:hover{background-color:#04937E !important}#_form_331_ input#email{padding:3px 12px;background-color:#ffffff;border-radius:2px}#_form_331_._form{margin-top:-5px}#_form_331_ ._error._below{position:relative !important}#_form_331_ ._error._above{position:absolute !important}@media (min-width:320px) and (max-width:667px){#_form_331_ ._form_element{margin:0 0 0px}}<\/style>\n<form method=\"POST\" action=\"https:\/\/deandelafuenteromero.activehosted.com\/proc.php\" id=\"_form_331_\" class=\"_form _form_331 _inline-form  _dark\" novalidate data-styles-version=\"5\">\n  <input type=\"hidden\" name=\"u\" value=\"331\" \/>\n  <input type=\"hidden\" name=\"f\" value=\"331\" \/>\n  <input type=\"hidden\" name=\"s\" \/>\n  <input type=\"hidden\" name=\"c\" value=\"0\" \/>\n  <input type=\"hidden\" name=\"m\" value=\"0\" \/>\n  <input type=\"hidden\" name=\"act\" value=\"sub\" \/>\n  <input type=\"hidden\" name=\"v\" value=\"2\" \/>\n  <input type=\"hidden\" name=\"or\" value=\"789ef8b4693eba56cf9cd6622eca7a0e\" \/>\n  <div class=\"_form-content\">\n    <div class=\"_form_element _x74577619 _full_width \" >\n      <label for=\"email\" class=\"_form-label\">\n      <\/label>\n      <div class=\"_field-wrapper\">\n        <input type=\"text\" id=\"email\" name=\"email\" placeholder=\"Tu email...\" required\/>\n      <\/div>\n    <\/div>\n    <div class=\"_form_element _x87696446 _full_width \" >\n      <fieldset class=\"_form-fieldset\">\n        <div class=\"_row\">\n          <legend for=\"field[15][]\" class=\"_form-label\">\n          <\/legend>\n        <\/div>\n        <input data-autofill=\"false\" type=\"hidden\" id=\"field[15][]\" name=\"field[15][]\" value=\"~|\">\n        <div class=\"_row _checkbox-radio\">\n          <input id=\"field_15He le\u00eddo y acepto la pol\u00edtica de privacidad\" type=\"checkbox\" name=\"field[15][]\"\n          value=\"He le\u00eddo y acepto la pol\u00edtica de privacidad\"                                                                                 required                                >\n          <span>\n            <label for=\"field_15He le\u00eddo y acepto la pol\u00edtica de privacidad\">\n              He le\u00eddo y acepto la pol\u00edtica de privacidad<span class=\"field-required\">\n              *\n            <\/span>\n          <\/label>\n        <\/span>\n      <\/div>\n    <\/fieldset>\n  <\/div>\n  <div class=\"_form_element _x09639014 _full_width \" >\n    <input type=\"hidden\" name=\"field[121]\" value=\"\" \/>\n  <\/div>\n  <div class=\"_form_element _x64811239 _full_width \" >\n    <input type=\"hidden\" name=\"field[122]\" value=\"\" \/>\n  <\/div>\n  <div class=\"_form_element _x58860354 _full_width \" >\n    <input type=\"hidden\" name=\"field[123]\" value=\"\" \/>\n  <\/div>\n  <div class=\"_form_element _x23331849 _full_width \" >\n    <input type=\"hidden\" name=\"field[125]\" value=\"\" \/>\n  <\/div>\n  <div class=\"_form_element _x72046679 _full_width \" >\n    <input type=\"hidden\" name=\"field[126]\" value=\"\" \/>\n  <\/div>\n  <div class=\"_form_element _x41336277 _full_width \" >\n    <input type=\"hidden\" name=\"field[127]\" value=\"\" \/>\n  <\/div>\n  <div class=\"_button-wrapper _full_width\">\n    <button id=\"_form_331_submit\" class=\"_submit\" type=\"submit\">\n      Ap\u00fantate aqu\u00ed\n    <\/button>\n  <\/div>\n  <div class=\"_clear-element\">\n  <\/div>\n<\/div>\n<div class=\"_form-thank-you\" style=\"display:none;\">\n<\/div>\n<\/form><script>\nwindow.cfields = {\"15\":\"poltica_privacidad\",\"121\":\"utm_campaign\",\"122\":\"utm_source\",\"123\":\"utm_medium\",\"125\":\"utm_content\",\"126\":\"utm_adset\",\"127\":\"utm_ad\"};\nwindow._show_thank_you = function(id, message, trackcmp_url, email) {\n    var form = document.getElementById('_form_' + id + '_'), thank_you = form.querySelector('._form-thank-you');\n    form.querySelector('._form-content').style.display = 'none';\n    thank_you.innerHTML = message;\n    thank_you.style.display = 'block';\n    const vgoAlias = typeof visitorGlobalObjectAlias === 'undefined' ? 'vgo' : visitorGlobalObjectAlias;\n    var visitorObject = window[vgoAlias];\n    if (email && typeof visitorObject !== 'undefined') {\n        visitorObject('setEmail', email);\n        visitorObject('update');\n    } else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) {\n        \/\/ Site tracking URL to use after inline form submission.\n        _load_script(trackcmp_url);\n    }\n    if (typeof window._form_callback !== 'undefined') window._form_callback(id);\n};\nwindow._show_unsubscribe = function(id, message, trackcmp_url, email) {\n    var form = document.getElementById('_form_' + id + '_'), unsub = form.querySelector('._form-thank-you');\n    var branding = form.querySelector('._form-branding');\n    if (branding) {\n        branding.style.display = 'none';\n    }\n    form.querySelector('._form-content').style.display = 'none';\n    unsub.style.display = 'block';\n    form.insertAdjacentHTML('afterend', message)\n    const vgoAlias = typeof visitorGlobalObjectAlias === 'undefined' ? 'vgo' : visitorGlobalObjectAlias;\n    var visitorObject = window[vgoAlias];\n    if (email && typeof visitorObject !== 'undefined') {\n        visitorObject('setEmail', email);\n        visitorObject('update');\n    } else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) {\n        \/\/ Site tracking URL to use after inline form submission.\n        _load_script(trackcmp_url);\n    }\n    if (typeof window._form_callback !== 'undefined') window._form_callback(id);\n};\nwindow._show_error = function(id, message, html) {\n    var form = document.getElementById('_form_' + id + '_'),\n        err = document.createElement('div'),\n        button = form.querySelector('button[type=\"submit\"]'),\n        old_error = form.querySelector('._form_error');\n    if (old_error) old_error.parentNode.removeChild(old_error);\n    err.innerHTML = message;\n    err.className = '_error-inner _form_error _no_arrow';\n    var wrapper = document.createElement('div');\n    wrapper.className = '_form-inner _show_be_error';\n    wrapper.appendChild(err);\n    button.parentNode.insertBefore(wrapper, button);\n    var submitButton = form.querySelector('[id^=\"_form\"][id$=\"_submit\"]');\n    submitButton.disabled = false;\n    submitButton.classList.remove('processing');\n    if (html) {\n        var div = document.createElement('div');\n        div.className = '_error-html';\n        div.innerHTML = html;\n        err.appendChild(div);\n    }\n};\nwindow._show_pc_confirmation = function(id, header, detail, show, email) {\n    var form = document.getElementById('_form_' + id + '_'), pc_confirmation = form.querySelector('._form-pc-confirmation');\n    if (pc_confirmation.style.display === 'none') {\n        form.querySelector('._form-content').style.display = 'none';\n        pc_confirmation.innerHTML = \"<div class='_form-title'>\" + header + \"<\/div>\" + \"<p>\" + detail + \"<\/p>\" +\n        \"<button class='_submit' id='hideButton'>Administrar preferencias<\/button>\";\n        pc_confirmation.style.display = 'block';\n        var mp = document.querySelector('input[name=\"mp\"]');\n        mp.value = '0';\n    } else {\n        form.querySelector('._form-content').style.display = 'inline';\n        pc_confirmation.style.display = 'none';\n    }\n\n    var hideButton = document.getElementById('hideButton');\n    \/\/ Add event listener to the button\n    hideButton.addEventListener('click', function() {\n        var submitButton = document.querySelector('#_form_331_submit');\n        submitButton.disabled = false;\n        submitButton.classList.remove('processing');\n        var mp = document.querySelector('input[name=\"mp\"]');\n        mp.value = '1';\n        const cacheBuster = new URL(window.location.href);\n        cacheBuster.searchParams.set('v', new Date().getTime());\n        window.location.href = cacheBuster.toString();\n    });\n\n    const vgoAlias = typeof visitorGlobalObjectAlias === 'undefined' ? 'vgo' : visitorGlobalObjectAlias;\n    var visitorObject = window[vgoAlias];\n    if (email && typeof visitorObject !== 'undefined') {\n        visitorObject('setEmail', email);\n        visitorObject('update');\n    } else if (typeof(trackcmp_url) != 'undefined' && trackcmp_url) {\n        \/\/ Site tracking URL to use after inline form submission.\n        _load_script(trackcmp_url);\n    }\n    if (typeof window._form_callback !== 'undefined') window._form_callback(id);\n};\nwindow._load_script = function(url, callback, isSubmit) {\n    var head = document.querySelector('head'), script = document.createElement('script'), r = false;\n    var submitButton = document.querySelector('#_form_331_submit');\n    script.charset = 'utf-8';\n    script.src = url;\n    if (callback) {\n        script.onload = script.onreadystatechange = function() {\n            if (!r && (!this.readyState || this.readyState == 'complete')) {\n                r = true;\n                callback();\n            }\n        };\n    }\n    script.onerror = function() {\n        if (isSubmit) {\n            if (script.src.length > 10000) {\n                _show_error(\"331\", \"Lo sentimos, ocurri\u00f3 un error con el env\u00edo. Acorta tus respuestas y vuelve a intentarlo.\");\n            } else {\n                _show_error(\"331\", \"Lo sentimos, ocurri\u00f3 un error con el env\u00edo. Vuelve a intentarlo.\");\n            }\n            submitButton.disabled = false;\n            submitButton.classList.remove('processing');\n        }\n    }\n\n    head.appendChild(script);\n};\n(function() {\n    var iti;\n    if (window.location.search.search(\"excludeform\") !== -1) return false;\n    var getCookie = function(name) {\n        var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)'));\n        return match ? match[2] : null;\n    }\n    var setCookie = function(name, value) {\n        var now = new Date();\n        var time = now.getTime();\n        var expireTime = time + 1000 * 60 * 60 * 24 * 365;\n        now.setTime(expireTime);\n        document.cookie = name + '=' + value + '; expires=' + now + ';path=\/; Secure; SameSite=Lax;';\n    }\n    var addEvent = function(element, event, func) {\n        if (element.addEventListener) {\n            element.addEventListener(event, func);\n        } else {\n            var oldFunc = element['on' + event];\n            element['on' + event] = function() {\n                oldFunc.apply(this, arguments);\n                func.apply(this, arguments);\n            };\n        }\n    }\n    var _removed = false;\n        var form_to_submit = document.getElementById('_form_331_');\n    var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false;\n\n    var getUrlParam = function(name) {\n        if (name.toLowerCase() !== 'email') {\n            var params = new URLSearchParams(window.location.search);\n            return params.get(name) || false;\n        }\n        \/\/ email is a special case because a plus is valid in the email address\n        var qString = window.location.search;\n        if (!qString) {\n            return false;\n        }\n        var parameters = qString.substr(1).split('&');\n        for (var i = 0; i < parameters.length; i++) {\n            var parameter = parameters[i].split('=');\n            if (parameter[0].toLowerCase() === 'email') {\n                return parameter[1] === undefined ? true : decodeURIComponent(parameter[1]);\n            }\n        }\n        return false;\n    };\n\n    var acctDateFormat = \"%d\/%m\/%Y\";\n    var getNormalizedDate = function(date, acctFormat) {\n        var decodedDate = decodeURIComponent(date);\n        if (acctFormat && acctFormat.match(\/(%d|%e).*%m\/gi) !== null) {\n            return decodedDate.replace(\/(\\d{2}).*(\\d{2}).*(\\d{4})\/g, '$3-$2-$1');\n        } else if (Date.parse(decodedDate)) {\n            var dateObj = new Date(decodedDate);\n            var year = dateObj.getFullYear();\n            var month = dateObj.getMonth() + 1;\n            var day = dateObj.getDate();\n            return `${year}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`;\n        }\n        return false;\n    };\n\n    var getNormalizedTime = function(time) {\n        var hour, minutes;\n        var decodedTime = decodeURIComponent(time);\n        var timeParts = Array.from(decodedTime.matchAll(\/(\\d{1,2}):(\\d{1,2})\\W*([AaPp][Mm])?\/gm))[0];\n        if (timeParts[3]) { \/\/ 12 hour format\n            var isPM = timeParts[3].toLowerCase() === 'pm';\n            if (isPM) {\n                hour = parseInt(timeParts[1]) === 12 ? '12' : `${parseInt(timeParts[1]) + 12}`;\n            } else {\n                hour = parseInt(timeParts[1]) === 12 ? '0' : timeParts[1];\n            }\n        } else { \/\/ 24 hour format\n            hour = timeParts[1];\n        }\n        var normalizedHour = parseInt(hour) < 10 ? `0${parseInt(hour)}` : hour;\n        var minutes = timeParts[2];\n        return `${normalizedHour}:${minutes}`;\n    };\n\n    for (var i = 0; i < allInputs.length; i++) {\n        var regexStr = \"field\\\\[(\\\\d+)\\\\]\";\n        var results = new RegExp(regexStr).exec(allInputs[i].name);\n        if (results != undefined) {\n            allInputs[i].dataset.name = allInputs[i].name.match(\/\\[time\\]$\/)\n                ? `${window.cfields[results[1]]}_time`\n                : window.cfields[results[1]];\n        } else {\n            allInputs[i].dataset.name = allInputs[i].name;\n        }\n        var fieldVal = getUrlParam(allInputs[i].dataset.name);\n\n        if (fieldVal) {\n            if (allInputs[i].dataset.autofill === \"false\") {\n                continue;\n            }\n            if (allInputs[i].type == \"radio\" || allInputs[i].type == \"checkbox\") {\n                if (allInputs[i].value == fieldVal) {\n                    allInputs[i].checked = true;\n                }\n            } else if (allInputs[i].type == \"date\") {\n                allInputs[i].value = getNormalizedDate(fieldVal, acctDateFormat);\n            } else if (allInputs[i].type == \"time\") {\n                allInputs[i].value = getNormalizedTime(fieldVal);\n            } else {\n                allInputs[i].value = fieldVal;\n            }\n        }\n    }\n\n    var remove_tooltips = function() {\n        for (var i = 0; i < tooltips.length; i++) {\n            tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);\n        }\n        tooltips = [];\n    };\n    var remove_tooltip = function(elem) {\n        for (var i = 0; i < tooltips.length; i++) {\n            if (tooltips[i].elem === elem) {\n                tooltips[i].tip.parentNode.removeChild(tooltips[i].tip);\n                tooltips.splice(i, 1);\n                return;\n            }\n        }\n    };\n    var create_tooltip = function(elem, text) {\n        var tooltip = document.createElement('div'),\n            arrow = document.createElement('div'),\n            inner = document.createElement('div'), new_tooltip = {};\n        if (elem.type != 'radio' && (elem.type != 'checkbox' || elem.name === 'sms_consent')) {\n            tooltip.className = '_error';\n            arrow.className = '_error-arrow';\n            inner.className = '_error-inner';\n            inner.innerHTML = text;\n            tooltip.appendChild(arrow);\n            tooltip.appendChild(inner);\n            elem.parentNode.appendChild(tooltip);\n        } else {\n            tooltip.className = '_error-inner _no_arrow';\n            tooltip.innerHTML = text;\n            elem.parentNode.insertBefore(tooltip, elem);\n            new_tooltip.no_arrow = true;\n        }\n        new_tooltip.tip = tooltip;\n        new_tooltip.elem = elem;\n        tooltips.push(new_tooltip);\n        return new_tooltip;\n    };\n    var resize_tooltip = function(tooltip) {\n        var rect = tooltip.elem.getBoundingClientRect();\n        var doc = document.documentElement,\n            scrollPosition = rect.top - ((window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0));\n        if (scrollPosition < 40) {\n            tooltip.tip.className = tooltip.tip.className.replace(\/ ?(_above|_below) ?\/g, '') + ' _below';\n        } else {\n            tooltip.tip.className = tooltip.tip.className.replace(\/ ?(_above|_below) ?\/g, '') + ' _above';\n        }\n    };\n    var resize_tooltips = function() {\n        if (_removed) return;\n        for (var i = 0; i < tooltips.length; i++) {\n            if (!tooltips[i].no_arrow) resize_tooltip(tooltips[i]);\n        }\n    };\n    var validate_field = function(elem, remove) {\n        var tooltip = null, value = elem.value, no_error = true;\n        remove ? remove_tooltip(elem) : false;\n        if (elem.type != 'checkbox') elem.className = elem.className.replace(\/ ?_has_error ?\/g, '');\n        if (elem.getAttribute('required') !== null) {\n            if (elem.type == 'radio' || (elem.type == 'checkbox' && \/any\/.test(elem.className))) {\n                var elems = form_to_submit.elements[elem.name];\n                if (!(elems instanceof NodeList || elems instanceof HTMLCollection) || elems.length <= 1) {\n                    no_error = elem.checked;\n                }\n                else {\n                    no_error = false;\n                    for (var i = 0; i < elems.length; i++) {\n                        if (elems[i].checked) no_error = true;\n                    }\n                }\n                if (!no_error) {\n                    tooltip = create_tooltip(elem, \"Seleccione una opci\u00f3n.\");\n                }\n            } else if (elem.type =='checkbox') {\n                var elems = form_to_submit.elements[elem.name], found = false, err = [];\n                no_error = true;\n                for (var i = 0; i < elems.length; i++) {\n                    if (elems[i].getAttribute('required') === null) continue;\n                    if (!found && elems[i] !== elem) return true;\n                    found = true;\n                    elems[i].className = elems[i].className.replace(\/ ?_has_error ?\/g, '');\n                    if (!elems[i].checked) {\n                        no_error = false;\n                        elems[i].className = elems[i].className + ' _has_error';\n                        err.push(\"Es necesario verificar %s\".replace(\"%s\", elems[i].value));\n                    }\n                }\n                if (!no_error) {\n                    tooltip = create_tooltip(elem, err.join('<br\/>'));\n                }\n            } else if (elem.tagName == 'SELECT') {\n                var selected = true;\n                if (elem.multiple) {\n                    selected = false;\n                    for (var i = 0; i < elem.options.length; i++) {\n                        if (elem.options[i].selected) {\n                            selected = true;\n                            break;\n                        }\n                    }\n                } else {\n                    for (var i = 0; i < elem.options.length; i++) {\n                        if (elem.options[i].selected\n                            && (!elem.options[i].value\n                            || (elem.options[i].value.match(\/\\n\/g)))\n                        ) {\n                            selected = false;\n                        }\n                    }\n                }\n                if (!selected) {\n                    elem.className = elem.className + ' _has_error';\n                    no_error = false;\n                    tooltip = create_tooltip(elem, \"Seleccione una opci\u00f3n.\");\n                }\n            } else if (value === undefined || value === null || value === '') {\n                elem.className = elem.className + ' _has_error';\n                no_error = false;\n                tooltip = create_tooltip(elem, \"Este campo es obligatorio.\");\n            }\n        }\n        if (no_error && elem.name == 'email') {\n            if (!value.match(\/^[\\+_a-z0-9-'&=]+(\\.[\\+_a-z0-9-']+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,})$\/i)) {\n                elem.className = elem.className + ' _has_error';\n                no_error = false;\n                tooltip = create_tooltip(elem, \"Introduzca una direcci\u00f3n de correo electr\u00f3nico v\u00e1lida.\");\n            }\n        }\n        if (no_error && (elem.id == 'phone')) {\n            if (elem.value.trim() && typeof iti != 'undefined' && !iti.isValidNumber()) {\n                elem.className = elem.className + ' _has_error';\n                no_error = false;\n                tooltip = create_tooltip(elem, \"Ingresa un n\u00famero de tel\u00e9fono v\u00e1lido.\");\n            }\n        }\n        if (no_error && \/date_field\/.test(elem.className)) {\n            if (!value.match(\/^\\d\\d\\d\\d-\\d\\d-\\d\\d$\/)) {\n                elem.className = elem.className + ' _has_error';\n                no_error = false;\n                tooltip = create_tooltip(elem, \"Introduzca una fecha v\u00e1lida.\");\n            }\n        }\n\n        if (no_error && elem.name === 'sms_consent') {\n            const elemShouldBeChecked = (!!elem.attributes.required && !elem.checked);\n            if (elemShouldBeChecked) {\n                elem.className = elem.className + ' _has_error';\n                no_error = false;\n                tooltip = create_tooltip(elem, \"Marca esta casilla para continuar\");\n            } else {\n                elem.className = elem.className.replace(\/ ?_has_error ?\/g, '');\n            }\n        }\n        tooltip ? resize_tooltip(tooltip) : false;\n        return no_error;\n    };\n    var needs_validate = function(el) {\n        if(el.getAttribute('required') !== null){\n            return true;\n        }\n        if((el.name === 'email' || el.id === 'phone') && el.value !== \"\"){\n            return true;\n        }\n\n        return false;\n    };\n    var validate_form = function(e) {\n        var err = form_to_submit.querySelector('._form_error'), no_error = true;\n        if (!submitted) {\n            submitted = true;\n            for (var i = 0, len = allInputs.length; i < len; i++) {\n                var input = allInputs[i];\n                if (needs_validate(input)) {\n                    if (input.type == 'text' || input.type == 'number' || input.type == 'time' || input.type == 'tel') {\n                        addEvent(input, 'blur', function() {\n                            this.value = this.value.trim();\n                            validate_field(this, true);\n                        });\n                        addEvent(input, 'input', function() {\n                            validate_field(this, true);\n                        });\n                    } else if (input.type == 'radio' || input.type == 'checkbox') {\n                        (function(el) {\n                            function getElementsArray(name){\n                                const value =  form_to_submit.elements[name];\n                                if (Array.isArray(value)){\n                                    return value;\n                                }\n                                return [value];\n                            }\n                            var radios = getElementsArray(el.name);\n                            for (var i = 0; i < radios.length; i++) {\n                                addEvent(radios[i], 'change', function() {\n                                    validate_field(el, true);\n                                });\n                            }\n                        })(input);\n                    } else if (input.tagName == 'SELECT') {\n                        addEvent(input, 'change', function() {\n                            validate_field(this, true);\n                        });\n                    } else if (input.type == 'textarea'){\n                        addEvent(input, 'input', function() {\n                            validate_field(this, true);\n                        });\n                    }\n                }\n            }\n        }\n        remove_tooltips();\n        for (var i = 0, len = allInputs.length; i < len; i++) {\n            var elem = allInputs[i];\n            if (needs_validate(elem)) {\n                if (elem.tagName.toLowerCase() !== \"select\") {\n                    elem.value = elem.value.trim();\n                }\n                validate_field(elem) ? true : no_error = false;\n            }\n        }\n        if (!no_error && e) {\n            e.preventDefault();\n        }\n        resize_tooltips();\n        return no_error;\n    };\n    addEvent(window, 'resize', resize_tooltips);\n    addEvent(window, 'scroll', resize_tooltips);\n\n    var _form_serialize = function(form){if(!form||form.nodeName!==\"FORM\"){return }var i,j,q=[];for(i=0;i<form.elements.length;i++){if(form.elements[i].name===\"\"){continue}switch(form.elements[i].nodeName){case\"INPUT\":switch(form.elements[i].type){case\"tel\":q.push(form.elements[i].name+\"=\"+encodeURIComponent(form.elements[i].previousSibling.querySelector('div.iti__selected-dial-code').innerText)+encodeURIComponent(\" \")+encodeURIComponent(form.elements[i].value));break;case\"text\":case\"number\":case\"date\":case\"time\":case\"hidden\":case\"password\":case\"button\":case\"reset\":case\"submit\":q.push(form.elements[i].name+\"=\"+encodeURIComponent(form.elements[i].value));break;case\"checkbox\":case\"radio\":if(form.elements[i].checked){q.push(form.elements[i].name+\"=\"+encodeURIComponent(form.elements[i].value))}break;case\"file\":break}break;case\"TEXTAREA\":q.push(form.elements[i].name+\"=\"+encodeURIComponent(form.elements[i].value));break;case\"SELECT\":switch(form.elements[i].type){case\"select-one\":q.push(form.elements[i].name+\"=\"+encodeURIComponent(form.elements[i].value));break;case\"select-multiple\":for(j=0;j<form.elements[i].options.length;j++){if(form.elements[i].options[j].selected){q.push(form.elements[i].name+\"=\"+encodeURIComponent(form.elements[i].options[j].value))}}break}break;case\"BUTTON\":switch(form.elements[i].type){case\"reset\":case\"submit\":case\"button\":q.push(form.elements[i].name+\"=\"+encodeURIComponent(form.elements[i].value));break}break}}return q.join(\"&\")};\n\n    const formSupportsPost = false;\n    var form_submit = function(e) {\n\n        e.preventDefault();\n        if (validate_form()) {\n            if(form_to_submit.querySelector('input[name=\"phone\"]') && typeof iti != 'undefined') {\n                form_to_submit.querySelector('input[name=\"phone\"]').value = iti.getNumber();\n            }\n            \/\/ use this trick to get the submit button & disable it using plain javascript\n            var submitButton = e.target.querySelector('#_form_331_submit');\n            submitButton.disabled = true;\n            submitButton.classList.add('processing');\n                    var serialized = _form_serialize(document.getElementById('_form_331_')).replace(\/%0A\/g, '\\\\n');\n            var err = form_to_submit.querySelector('._form_error');\n            err ? err.parentNode.removeChild(err) : false;\n            async function submitForm() {\n                var formData = new FormData();\n                const searchParams = new URLSearchParams(serialized);\n                searchParams.forEach((value, key) => {\n                    if (key !== 'hideButton') {\n                        formData.append(key, value);\n                    }\n                });\n                let request = {\n                    headers: {\n                        \"Accept\": \"application\/json\"\n                    },\n                    body: formData,\n                    method: \"POST\"\n                };\n\n                let pageUrlParams = new URLSearchParams(window.location.search);\n                if (pageUrlParams.has('t')) {\n                    request.headers.Authorization = 'Bearer ' + pageUrlParams.get('t');\n                }\n                const response = await fetch('https:\/\/deandelafuenteromero.activehosted.com\/proc.php?jsonp=true', request);\n\n                return response.json();\n            }\n            if (formSupportsPost) {\n                submitForm().then((data) => {\n                    eval(data.js);\n                }).catch(() => {\n                    _show_error(\"331\", \"Lo sentimos, ocurri\u00f3 un error con el env\u00edo. Vuelve a intentarlo.\");\n                });\n            } else {\n                _load_script('https:\/\/deandelafuenteromero.activehosted.com\/proc.php?' + serialized + '&jsonp=true', null, true);\n            }\n        }\n        return false;\n    };\n    addEvent(form_to_submit, 'submit', form_submit);\n})();\n\n<\/script><style>\/* Texto junto al checkbox: blanco y en l\u00ednea *\/\n._form_299 ._checkbox-radio label {\n  display: inline !important;\n  margin-left: 8px !important;\n}\n\n\/* Color blanco del texto \"Verifica que eres un humano\" *\/\n._form_299 label[for=\"ls\"],\n._form_299 ._form_element label._form-label {\n  color: #ffffff !important;\n  display: inline-block;\n  font-weight: 400 !important;\n  margin-left: 8px;\n}\n\n\/* Placeholder del campo de email *\/\n#_form_299_ #email::placeholder {\n  color: #002132 !important;\n}\n\n\/* Altura del campo de email reducida *\/\n#_form_299_ #email {\n  padding: 8px 12px !important;\n  height: 40px !important;\n  font-size: 14px !important;\n  line-height: 1.2 !important;\n  margin-bottom: 16px !important;\n}\n\nlabel {\n    display: inline;\n}<\/style><\/div><\/div><\/span><\/p>\n<h2>Gu\u00eda de GTmetrix paso a paso<\/h2>\n<p>A continuaci\u00f3n te voy a comentar c\u00f3mo utilizar las principales funciones de GTmetrix.<\/p>\n<p>Ver\u00e1s que no es demasiado complicado. Simplemente requiere tener claros ciertos conceptos.<\/p>\n<p>Al terminar, ser\u00e1s capaz de realizar un an\u00e1lisis de rendimiento de tus sitios web sin demasiadas dificultades.<\/p>\n<h3>El panel principal<\/h3>\n<p>Para la realizaci\u00f3n de este tutorial he utilizado la versi\u00f3n gratuita de GTmetrix, ya que es m\u00e1s que suficiente para efectuar un an\u00e1lisis y realizar un seguimiento b\u00e1sico de nuestra web.<\/p>\n<p>Una vez hacemos login con nuestro usuario y contrase\u00f1a, la herramienta nos lleva a un panel de control compuesto por tres zonas principales.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15913 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal.png\" alt=\"Panel principal del usuario en GTmetrix\" width=\"1024\" height=\"539\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal-300x158.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal-768x404.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>En la parte inferior tenemos dos pesta\u00f1as.<\/p>\n<ul>\n<li>La primera nos da acceso a los informes de los tests que ya hemos ejecutado.<\/li>\n<li>La segunda nos muestra los proyectos que estamos monitorizando.<\/li>\n<\/ul>\n<p>Adem\u00e1s, <strong>podemos crear nuevas pesta\u00f1as<\/strong> con los filtros que configuremos.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15914 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal-nuevo-filtro.png\" alt=\"Creaci\u00f3n de una nueva pesta\u00f1a para los informes de GTmetrix\" width=\"1024\" height=\"548\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal-nuevo-filtro.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal-nuevo-filtro-300x161.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-panel-principal-nuevo-filtro-768x411.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>En la parte superior del panel de control podemos ver una caja de texto donde deberemos introducir la URL de nuestra p\u00e1gina para realizar nuevos tests.<\/p>\n<p>Vamos entonces a realizar un an\u00e1lisis de la p\u00e1gina de DinoRANK.<\/p>\n<p>Pero antes de lanzar la ejecuci\u00f3n, configuraremos algunas opciones.<\/p>\n<h3>Opciones de an\u00e1lisis de GTmetrix<\/h3>\n<p>Justo debajo del bot\u00f3n \u201cAnalyze\u201d tenemos un desplegable para acceder a las opciones de configuraci\u00f3n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15915 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-analisis.png\" alt=\"Opciones de an\u00e1lisis de la herramienta GTmetrix\" width=\"1024\" height=\"671\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-analisis.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-analisis-300x197.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-analisis-768x503.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Como podr\u00e1s ver, la mayor\u00eda de las posibilidades s\u00f3lo est\u00e1n disponibles para los planes PRO.<\/p>\n<p>No obstante, vamos a ver qu\u00e9 podemos configurar para nuestro an\u00e1lisis:<\/p>\n<ul>\n<li><strong>Localizaci\u00f3n<\/strong>. Ubicaci\u00f3n del servidor desde donde se lanzar\u00e1n los tests. Conviene configurarlo si queremos que nuestra web se dirija a un pa\u00eds espec\u00edfico. Nosotros seleccionaremos San Antonio para ver c\u00f3mo se comporta la web para USA.<\/li>\n<li><strong>Dispositivo<\/strong>. En este caso s\u00f3lo podemos seleccionar que el test de velocidad se realice para escritorio (mediante el navegador web Google Chrome).<\/li>\n<li><strong>Conexi\u00f3n<\/strong>. Por si queremos analizar un tipo de conexi\u00f3n concreta. Dejamos el valor por defecto.<\/li>\n<li><strong>V\u00eddeo<\/strong>. Se crear\u00e1 un v\u00eddeo con la secuencia de carga de nuestra web. Lo activamos.<\/li>\n<li><strong>Adblock Plus<\/strong>. Para evitar la carga de anuncios de terceros. En nuestro caso, lo dejamos desactivado.<\/li>\n<\/ul>\n<p>Adem\u00e1s de estas opciones de configuraci\u00f3n, GTmetrix nos ofrece otras opciones avanzadas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15916 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-avanzadas.png\" alt=\"Opciones avanzadas de an\u00e1lisis en GTmetrix\" width=\"1024\" height=\"674\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-avanzadas.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-avanzadas-300x197.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-opciones-avanzadas-768x506.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>De este modo, si lo necesitas, puedes configurar la autenticaci\u00f3n para acceder a tu web, el almacenamiento de cookies o el bloqueo de URLs con recursos que no quieres cargar.<\/p>\n<p>Tambi\u00e9n tienes m\u00e1s par\u00e1metros de configuraci\u00f3n para la versi\u00f3n PRO.<\/p>\n<p>Normalmente, estas opciones adicionales no suelen ser necesarias. Pero, si en alg\u00fan momento quieres utilizarlas, est\u00e1 bien saber d\u00f3nde encontrarlas.<\/p>\n<h3>An\u00e1lisis de una web e interpretaci\u00f3n de los resultados<\/h3>\n<p>Una vez hemos configurado nuestro an\u00e1lisis, es el momento de pulsar el bot\u00f3n azul \u201cAnalyze\u201d para ejecutarlo.<\/p>\n<p>Al terminar, GTmetrix nos muestra una p\u00e1gina con los resultados.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15917 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resultados.png\" alt=\"Ejemplo del resultado de un an\u00e1lisis de rendimiento de una p\u00e1gina web con GTmetrix\" width=\"1024\" height=\"481\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resultados.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resultados-300x141.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resultados-768x361.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>En la parte superior podremos ver una captura de nuestra web, junto con el resumen de la configuraci\u00f3n del test.<\/p>\n<p>A continuaci\u00f3n, obtendremos la <strong>puntuaci\u00f3n general que asigna GTmetrix<\/strong> a nuestra web.<\/p>\n<p>Esta puntuaci\u00f3n general viene representada por una letra (de la A a la F) y se calcula como <strong>una media de las dos m\u00e9tricas siguientes<\/strong> (en una proporci\u00f3n 70 \/ 30):<\/p>\n<ul>\n<li><strong>Performance Score<\/strong>. Nos indica c\u00f3mo es el rendimiento de nuestra web, en base a los par\u00e1metros que mide la herramienta Lighthouse de Google.<\/li>\n<li><strong>Structure Score<\/strong>. Nos da una idea sobre c\u00f3mo est\u00e1 construido nuestro sitio web en cuanto a la implementaci\u00f3n de buenas pr\u00e1cticas para lograr un buen rendimiento.<\/li>\n<\/ul>\n<p>Junto a las puntuaciones de GTmetrix, tenemos tambi\u00e9n una visi\u00f3n de las principales <strong>m\u00e9tricas de los Web Vitals de Google<\/strong>.<\/p>\n<p>Finalmente, en la parte inferior se muestran una serie de pesta\u00f1as, a trav\u00e9s de las que podemos acceder a informaci\u00f3n m\u00e1s detallada y que vamos a explicar a continuaci\u00f3n.<\/p>\n<h4>Pesta\u00f1a Summary (resumen)<\/h4>\n<p>La pesta\u00f1a resumen nos proporciona un visi\u00f3n general del rendimiento de la p\u00e1gina.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15918 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen.png\" alt=\"GTmetrix - pesta\u00f1a resumen de un informe de rendimiento\" width=\"1024\" height=\"716\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen-300x210.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen-768x537.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>La parte m\u00e1s interesante, en mi opini\u00f3n, se encuentra al principio y es una representaci\u00f3n gr\u00e1fica de la carga de la web.<\/p>\n<p>Podemos observar <strong>c\u00f3mo se va mostrando el contenido de la p\u00e1gina a lo largo del tiempo<\/strong>, as\u00ed como los momentos en los que tienen lugar las principales m\u00e9tricas que se usan en el an\u00e1lisis.<\/p>\n<p>A continuaci\u00f3n tenemos las recomendaciones de GTmetrix para mejorar los tiempos de carga del sitio web.<\/p>\n<p>Este listado es simplemente una visi\u00f3n r\u00e1pida de lo que encontraremos en la pesta\u00f1a Structure.<\/p>\n<p>Finalmente, la pesta\u00f1a Resumen nos muestra una <strong>representaci\u00f3n gr\u00e1fica de la distribuci\u00f3n de los recursos<\/strong> de nuestra p\u00e1gina desde dos puntos de vista: el tama\u00f1o que representan y el n\u00famero de peticiones que se realizan para cada tipo de recurso.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15919 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen-detalles-pagina.png\" alt=\"GTmetrix - detalle de los recursos de una p\u00e1gina en la pesta\u00f1a resumen\" width=\"1024\" height=\"440\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen-detalles-pagina.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen-detalles-pagina-300x129.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-resumen-detalles-pagina-768x330.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>De este modo, podemos hacernos una idea sobre el impacto que tienen dichos recursos en la carga de la p\u00e1gina.<\/p>\n<h4>Pesta\u00f1a Performance (rendimiento)<\/h4>\n<p>En esta pesta\u00f1a localizamos el detalle de cada una de las m\u00e9tricas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15920 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento.png\" alt=\"GTmetrix - pesta\u00f1a rendimiento\" width=\"1024\" height=\"574\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento-300x168.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento-768x431.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>En primer lugar, vemos las <strong>mediciones de la herramienta Lighthouse de Google<\/strong>, aplicadas a los par\u00e1metros para los que hemos configurado nuestro test de velocidad en GTmetrix (localizaci\u00f3n, dispositivo, conexi\u00f3n, etc).<\/p>\n<p>Estas m\u00e9tricas son:<\/p>\n<ul>\n<li><strong>First Contentful Paint (FCP)<\/strong>. Tiempo en mostrarse la primera imagen o texto completo en la web.<\/li>\n<li><strong>Speed Index<\/strong>. Tiempo en el que los elementos de la p\u00e1gina son visibles.<\/li>\n<li><strong>Largest Contentful Paint (LCP)<\/strong>. Tiempo que tarda en pintarse el elemento m\u00e1s grande de la web.<\/li>\n<li><strong>Time to Interactive<\/strong>. Cu\u00e1nto tardan en cargar todos los elementos para permitir interactuar completamente con la p\u00e1gina.<\/li>\n<li><strong>Total Blocking Time (TBT)<\/strong>. Tiempo, tras FCP, en el que la p\u00e1gina est\u00e1 bloqueada por la ejecuci\u00f3n de scripts y no permite ninguna interacci\u00f3n.<\/li>\n<li><strong>Cumulative Layout Shift (CLS)<\/strong>. Indica si hay elementos que cambian de posici\u00f3n durante la carga de la p\u00e1gina.<\/li>\n<\/ul>\n<p>La evaluaci\u00f3n de estas 6 m\u00e9tricas determinan el Performance Score de la p\u00e1gina, que ya hemos visto anteriormente.<\/p>\n<p>Por otro lado, esta pesta\u00f1a muestra otras m\u00e9tricas que, si bien no influyen directamente en el Performance Score, s\u00ed que ofrecen informaci\u00f3n sobre el rendimiento de la web.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15921 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento-navegador.png\" alt=\"GTmetrix - tiempos del navegador en la pesta\u00f1a rendimiento\" width=\"1024\" height=\"382\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento-navegador.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento-navegador-300x112.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-rendimiento-navegador-768x287.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Si quieres conocer qu\u00e9 significa cada una de estas m\u00e9tricas, tan s\u00f3lo tienes que pulsar el icono con forma de interrogante que tienes junto a ellas.<\/p>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#00604a;border-radius:4px;max-width:none\"><div class=\"su-box-title\" style=\"background-color:#00937d;color:#ffffff;border-top-left-radius:2px;border-top-right-radius:2px\"><strong>GTmetrix vs Google Pagespeed Insights<\/strong><\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:2px;border-bottom-right-radius:2px\">Aunque ambas herramientas utilizan de base el software Lighthouse de Google, las m\u00e9tricas que muestran pueden variar ligeramente.<\/p>\n<p>Esto es debido a las<strong> diferencias de configuraci\u00f3n de los entornos<\/strong> para los tests, que pueden arrojar mediciones diferentes en funci\u00f3n de sus caracter\u00edsticas.<\/p>\n<p>Factores como la ubicaci\u00f3n de los servidores, el hardware utilizado o las conexiones de las redes utilizadas por cada herramienta afectan en cierta medida a los resultados.<\/p>\n<p>En cualquier caso, estas diferencias no deber\u00edan ser sustanciales y cualquiera de las dos aplicaciones es v\u00e1lida a la hora de evaluar el rendimiento de una web.<\/p>\n<\/div><\/div>\n<h4>Pesta\u00f1a Structure (estructura)<\/h4>\n<p>Esta secci\u00f3n es probablemente la parte m\u00e1s pr\u00e1ctica del informe, ya que nos indica las <strong>acciones que podemos llevar a cabo para mejorar el rendimiento<\/strong> de nuestra p\u00e1gina web.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15922 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura.png\" alt=\"GTmetrix - pesta\u00f1a estructura\" width=\"1024\" height=\"498\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura-300x146.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura-768x374.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Cada sugerencia est\u00e1 marcada de un color, en funci\u00f3n del impacto que tendr\u00eda en tu web si la llegaras a implementar.<\/p>\n<p>Tambi\u00e9n est\u00e1n etiquetadas con las m\u00e9tricas que podr\u00edas mejorar al ejecutarlas, de modo que puedes filtrar los resultados en funci\u00f3n de estas etiquetas.<\/p>\n<p>Si desplegamos el detalle de cada acci\u00f3n podremos ver una peque\u00f1a descripci\u00f3n de la misma, los recursos que se ver\u00edan afectados, as\u00ed como un enlace a m\u00e1s informaci\u00f3n sobre c\u00f3mo llevar a cabo la mejora.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15923 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura-detalle.png\" alt=\"GTmetrix - detalle de una recomendaci\u00f3n en la pesta\u00f1a estructura\" width=\"1024\" height=\"827\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura-detalle.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura-detalle-300x242.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-estructura-detalle-768x620.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h4>Pesta\u00f1a Waterfall (cascada de peticiones)<\/h4>\n<p>A trav\u00e9s de la pesta\u00f1a Waterfall obtenemos una <strong>visi\u00f3n gr\u00e1fica y muy detallada de las peticiones<\/strong> que se producen para cargar por completo una p\u00e1gina web.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15924 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones.png\" alt=\"GTmetrix - pesta\u00f1a Waterfall\" width=\"1024\" height=\"760\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-300x223.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-768x570.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>De este modo, podemos ver, ordenados temporalmente, todos los recursos que se solicitan para mostrar todos los elementos de la p\u00e1gina.<\/p>\n<p>Disponemos de varias columnas (URL, c\u00f3digo de respuesta, tama\u00f1o del recurso, etc), pero la m\u00e1s interesante es sin duda la denominada Timeline.<\/p>\n<p>Aqu\u00ed se nos muestra el <strong>tiempo que tarda en cargarse un recurso<\/strong> concreto mediante una escala de colores que nos indican las distintas secuencias de la carga:<\/p>\n<ul>\n<li><strong>Marr\u00f3n<\/strong>. Tiempo que permanece bloqueado.<\/li>\n<li><strong>Verde azulado<\/strong>. Resoluci\u00f3n DNS.<\/li>\n<li><strong>Verde<\/strong>. Conexi\u00f3n con el servidor.<\/li>\n<li><strong>Rojo<\/strong>. Env\u00edo de la petici\u00f3n al servidor.<\/li>\n<li><strong>Morado<\/strong>. Esperando la respuesta.<\/li>\n<li><strong>Gris<\/strong>. Recepci\u00f3n del recurso.<\/li>\n<\/ul>\n<p>Al pasar el rat\u00f3n por encima del recurso podemos ver m\u00e1s detalles sobre estas peticiones, as\u00ed como otras m\u00e9tricas relacionadas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15925 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-timeline.png\" alt=\"Detalle del timeline de una petici\u00f3n en la pesta\u00f1a Waterfall de GTmetrix\" width=\"1024\" height=\"531\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-timeline.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-timeline-300x156.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-timeline-768x398.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Finalmente, si hacemos clic en cada fila de la tabla, accederemos al detalle de la petici\u00f3n del recurso y de la respuesta.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15926 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-detalle.png\" alt=\"Detalle de una petici\u00f3n en la pesta\u00f1a Waterfall de GTmetrix\" width=\"1024\" height=\"459\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-detalle.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-detalle-300x134.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-cascada-peticiones-detalle-768x344.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h4>Pesta\u00f1a Video (representaci\u00f3n en v\u00eddeo)<\/h4>\n<p>\u00bfRecuerdas la opci\u00f3n de configuraci\u00f3n que nos permit\u00eda crear un <strong>v\u00eddeo con la secuencia de carga<\/strong>?<\/p>\n<p>En esta pesta\u00f1a puedes ver el resultado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15927 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-video.png\" alt=\"GTmetrix - pesta\u00f1a Video\" width=\"1024\" height=\"708\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-video.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-video-300x207.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-video-768x531.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>De este modo, puedes visualizar f\u00e1cilmente c\u00f3mo se van cargando los elementos de tu web.<\/p>\n<p>Adem\u00e1s, para hacerte m\u00e1s f\u00e1cil la tarea, tienes <strong>marcas de tiempo sobre el v\u00eddeo<\/strong> con los momentos clave de cada m\u00e9trica y la posibilidad de reproducirlo a velocidad reducida.<\/p>\n<h4>Pesta\u00f1a History (historial)<\/h4>\n<p>La \u00faltima de las pesta\u00f1as te da acceso al hist\u00f3rico de tus peticiones.<\/p>\n<p>Si has ejecutado varias veces el mismo test, desde esta secci\u00f3n <strong>puedes ver la evoluci\u00f3n a trav\u00e9s de diferentes gr\u00e1ficas<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15928 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-historial.png\" alt=\"GTmetrix - hist\u00f3rico de informes\" width=\"1024\" height=\"606\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-historial.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-historial-300x178.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-historial-768x455.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3>Comparaci\u00f3n de informes<\/h3>\n<p>GTmetrix te da la posibilidad de comparar informes entre s\u00ed.<\/p>\n<p>De este modo, puedes observar las <strong>variaciones en el rendimiento de una web<\/strong> bajo diferentes configuraciones (ubicaciones, dispositivos, conexiones, etc).<\/p>\n<p>Tambi\u00e9n podr\u00edas comparar dos p\u00e1ginas distintas, por ejemplo para <strong>estudiar las diferencias con tus competidores<\/strong>.<\/p>\n<p>As\u00ed, la pantalla de comparaci\u00f3n de informes nos muestra todos los an\u00e1lisis, uno a continuaci\u00f3n de otro.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15929 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes.png\" alt=\"Comparaci\u00f3n de informes en GTmetrix\" width=\"1024\" height=\"756\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes-300x221.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes-768x567.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>En la parte superior observamos sus m\u00e9tricas principales. De un r\u00e1pido vistazo podemos ver los aspectos diferenciales m\u00e1s importantes.<\/p>\n<p>Debajo tenemos informaci\u00f3n m\u00e1s extendida, agrupada en varias pesta\u00f1as mediante las que podemos comparar:<\/p>\n<ul>\n<li>Las secuencias de carga.<\/li>\n<li>Las m\u00e9tricas de rendimiento.<\/li>\n<li>Las optimizaciones en la estructura.<\/li>\n<li>Las sucesi\u00f3n de peticiones.<\/li>\n<\/ul>\n<p>Finalmente, en la \u00faltima pesta\u00f1a tenemos diferentes gr\u00e1ficas que ponen en contraposici\u00f3n las m\u00e9tricas m\u00e1s destacadas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15930 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes-graficas.png\" alt=\"Comparaci\u00f3n de informes en GTmetrix - gr\u00e1ficas comparativas\" width=\"1024\" height=\"617\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes-graficas.png 1024w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes-graficas-300x181.png 300w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-comparacion-informes-graficas-768x463.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3>Monitorizaci\u00f3n y alertas<\/h3>\n<p>Una de las utilidades de GTmetrix es la posibilidad de <strong>monitorizar ciertas p\u00e1ginas web<\/strong>.<\/p>\n<p>Ahora bien, <strong>en la versi\u00f3n gratuita esta funcionalidad est\u00e1 restringida a un \u00fanico informe<\/strong> y s\u00f3lo para aquellos tests que hayas configurado con el servidor web por defecto (Vancouver, Canad\u00e1).<\/p>\n<p>Por lo tanto, si quieres una mayor flexibilidad te tocar\u00e1 pasar por caja.<\/p>\n<p>Para hacer el seguimiento de un informe simplemente tienes que indicarlo a trav\u00e9s del bot\u00f3n Monitor que aparece a derecha de la p\u00e1gina e indicar la frecuencia de seguimiento.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15931 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-monitorizacion.png\" alt=\"Monitorizaci\u00f3n de p\u00e1ginas en GTmetrix\" width=\"705\" height=\"322\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-monitorizacion.png 705w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-monitorizacion-300x137.png 300w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/p>\n<p>Adem\u00e1s, puedes <strong>definir alertas<\/strong>.<\/p>\n<p>Nuevamente, la opci\u00f3n se encuentra en los botones de la derecha de la p\u00e1gina.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15932 size-full\" src=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-alertas.png\" alt=\"Configuraci\u00f3n de alarmas en GTmetrix\" width=\"705\" height=\"669\" srcset=\"https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-alertas.png 705w, https:\/\/dinorank.com\/blog\/wp-content\/uploads\/2023\/04\/gtmetrix-alertas-300x285.png 300w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/p>\n<p>Tan s\u00f3lo tendr\u00e1s que definir diferentes condiciones que deben cumplir las m\u00e9tricas que desees vigilar para que <strong>GTmetrix te env\u00ede un email si en alg\u00fan momento se cumplen<\/strong>.<\/p>\n<h3>GTmetrix API<\/h3>\n<p>GTmetrix dispone de una API para poder <strong>integrar sus mediciones en otras aplicaciones<\/strong>.<\/p>\n<p>Esta API funciona en base a cr\u00e9ditos. En la versi\u00f3n gratuita son pr\u00e1cticamente testimoniales y van aumentando seg\u00fan el plan de pago que contrates.<\/p>\n<p>No obstante, si usas GTmetrix de manera ocasional, las limitaciones de su versi\u00f3n gratis pueden ser m\u00e1s que suficientes para ti.<\/p>\n<p>Entre las aplicaciones existentes que hace uso de la API, hay que destacar un <strong>plugin para wordpress que permite consultar las m\u00e9tricas de GTmetrix<\/strong> desde el propio CMS.<\/p>\n<h2>Conclusi\u00f3n y opiniones<\/h2>\n<p>GTmetrix es una <strong>herramienta muy \u00fatil para mejorar el rendimiento<\/strong> de una p\u00e1gina web.<\/p>\n<p>No s\u00f3lo te ofrece m\u00e9tricas para valorar la velocidad de carga y el comportamiento de la p\u00e1gina, sino que adem\u00e1s te indica c\u00f3mo puedes optimizarla.<\/p>\n<p>Y lo mejor de todo es que <strong>puedes utilizar la herramienta de manera gratuita<\/strong>.<\/p>\n<p>Si no quieres, no hace falta ni registrarte.<\/p>\n<p>No obstante, si tienes una web y quieres mejorarla, s\u00ed que te recomendar\u00eda abrirte una cuenta.<\/p>\n<p>No pierdes nada y vas a tener acceso a muchas m\u00e1s opciones, que estoy seguro te ayudar\u00e1n a mejorar el rendimiento de tu web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si hasta ahora no te hab\u00eda preocupado la velocidad de carga de tu web, d\u00e9jame decirte que va siendo el momento de prestarle atenci\u00f3n. No te preocupes, no es complicado. Hay herramientas gratuitas que te facilitan mucho el trabajo. Y una de las mejores que conozco es GTmetrix. En este art\u00edculo voy a comentarte por [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":15989,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-15832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales-herramientas-seo"],"acf":[],"_links":{"self":[{"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/posts\/15832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/comments?post=15832"}],"version-history":[{"count":1,"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/posts\/15832\/revisions"}],"predecessor-version":[{"id":29647,"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/posts\/15832\/revisions\/29647"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/media\/15989"}],"wp:attachment":[{"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/media?parent=15832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/categories?post=15832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dinorank.com\/blog\/wp-json\/wp\/v2\/tags?post=15832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}