{"id":3846,"date":"2024-10-24T14:33:11","date_gmt":"2024-10-24T06:33:11","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=3846"},"modified":"2024-10-26T18:18:58","modified_gmt":"2024-10-26T10:18:58","slug":"in-depth-analysis-adding-a-custom-preloader-to-wordpress","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/es\/analisis-en-profundidad-anadir-un-precargador-personalizado-a-wordpress","title":{"rendered":"An\u00e1lisis en profundidad: C\u00f3mo a\u00f1adir un precargador personalizado a WordPress"},"content":{"rendered":"

Crear un sitio web WordPress profesional y atractivo requiere algo m\u00e1s que un contenido atractivo y un aspecto visual atractivo. Un aspecto que a menudo se pasa por alto y que puede mejorar significativamente la experiencia del usuario es utilizar un precargador personalizado<\/strong>. Un precargador puede ayudar a entretener a los usuarios mientras se carga su p\u00e1gina, reducir las tasas de rebote y a\u00f1adir un toque de personalidad de marca a su sitio.<\/p>

Esta gu\u00eda en profundidad le proporcionar\u00e1 detalles exhaustivos sobre c\u00f3mo a\u00f1adir un precargador personalizado a su sitio web WordPress. Exploraremos tanto los m\u00e9todos basados en plugins como los manuales, discutiremos las mejores pr\u00e1cticas y examinaremos ejemplos del mundo real.<\/p>

\"\"<\/figure>

\u00bfPor qu\u00e9 utilizar un precargador personalizado?<\/h2>

Un precargador es un elemento gr\u00e1fico o animaci\u00f3n que aparece mientras se carga una p\u00e1gina o un activo. Para comprender el valor de un precargador personalizado es necesario profundizar en el comportamiento del usuario, la velocidad del sitio web y la estrategia de marca. He aqu\u00ed algunas ventajas clave:<\/p>

  1. Reducir las tasas de rebote<\/strong>: Los tiempos de carga prolongados suelen provocar que los usuarios abandonen un sitio web antes de que aparezca el contenido. Un precargador proporciona informaci\u00f3n visual que indica el progreso, lo que puede reducir significativamente las tasas de rebote.<\/li>\n\n
  2. Reforzar la marca<\/strong>: Los precargadores personalizados le permiten reflejar la personalidad de su marca. Ya sea a trav\u00e9s de colores, logotipos o animaciones, un precargador bien dise\u00f1ado mejora el reconocimiento de la marca.<\/li>\n\n
  3. Mejorar la profesionalidad<\/strong>: Los sitios web con precargadores sutiles y pulidos parecen m\u00e1s sofisticados y cuidadosamente dise\u00f1ados.<\/li>\n\n
  4. Mejorar la experiencia del usuario<\/strong>: En lugar de mirar una pantalla en blanco, los usuarios tienen algo atractivo que ver, lo que ayuda a aliviar la frustraci\u00f3n de la espera.<\/li><\/ol>
    \"\"<\/figure>

    La ciencia tras los tiempos de carga y el comportamiento de los usuarios<\/h2>

    Las investigaciones demuestran que los usuarios se forman una opini\u00f3n sobre un sitio web en los 0,05 segundos siguientes a su primera interacci\u00f3n. Los retrasos en la carga de la p\u00e1gina pueden crear primeras impresiones negativas, afectando a la satisfacci\u00f3n y retenci\u00f3n del usuario. Un precargador ocupa a los usuarios durante la carga y contribuye a crear expectativas y crear expectaci\u00f3n por el contenido.<\/p>

    Soluciones de precargadores para WordPress<\/h2>

    Al a\u00f1adir un precargador a un sitio de WordPress, tiene dos opciones principales:<\/p>

    1. Uso de plugins<\/strong>: Este m\u00e9todo es accesible para principiantes y no requiere conocimientos de codificaci\u00f3n.<\/li>\n\n
    2. M\u00e9todo manual<\/strong>: Para los usuarios avanzados, el enfoque manual ofrece una mayor flexibilidad y permite una personalizaci\u00f3n detallada.<\/li><\/ol>
      \"\"<\/figure>

      Discutiremos ambos m\u00e9todos, incluyendo ejemplos pr\u00e1cticos, para ayudarle a elegir el mejor enfoque para su proyecto.<\/p>

      M\u00e9todo 1: A\u00f1adir un precargador mediante un plugin de WordPress<\/h2>

      Paso 1: Elegir el plugin adecuado<\/h3>

      WordPress ofrece varios plugins para a\u00f1adir precargadores personalizados. Algunas opciones populares incluyen:<\/p>

      • Precargador Plus<\/strong><\/li>\n\n
      • LoftLoader<\/strong><\/li>\n\n
      • Precargador inteligente WP<\/strong><\/li><\/ul>

        Para esta discusi\u00f3n, utilizaremos Precargador Plus<\/strong> debido a su facilidad de uso y flexibilidad.<\/p>

        Paso 2: Instalaci\u00f3n y activaci\u00f3n del plugin<\/h3>
        1. Acceda al panel de control de WordPress.<\/li>\n\n
        2. Navegue hasta Plugins > A\u00f1adir nuevo<\/strong>.<\/li>\n\n
        3. Buscar Precargador Plus<\/strong>.<\/li>\n\n
        4. Haga clic en Instalar ahora<\/strong> y luego Active<\/strong>.<\/li><\/ol>
          \"\"<\/figure>

          Paso 3: Configuraci\u00f3n de los ajustes del precargador<\/h3>

          Para configurar su precargador:<\/p>

          1. Ir a Ajustes > Preloader Plus<\/strong>.<\/li>\n\n
          2. Aqu\u00ed encontrar\u00e1 opciones de personalizaci\u00f3n:
            • Tipo de animaci\u00f3n<\/strong>: Elija un tipo de animaci\u00f3n como spinner, fade o un SVG personalizado.<\/li>\n\n
            • Mensaje de carga<\/strong>: Un mensaje breve y atractivo puede mejorar a\u00fan m\u00e1s la experiencia del usuario.<\/li>\n\n
            • Duraci\u00f3n y retraso<\/strong>: Establezca una duraci\u00f3n adecuada para mantener el precargador en pantalla hasta que el contenido est\u00e9 listo.<\/li><\/ul><\/li>\n\n
            • Utilice la funci\u00f3n de vista previa para ver el efecto y ajustar la configuraci\u00f3n seg\u00fan sea necesario.<\/li><\/ol>

              Ejemplo: Configuraci\u00f3n de un sencillo precargador giratorio<\/h3>

              Vamos a configurar un simple spinner:<\/p>

              1. En Ajustes > Preloader Plus<\/strong>, seleccione Spinner<\/strong> como la animaci\u00f3n.<\/li>\n\n
              2. Fije Color primario<\/strong> a juego con su marca.<\/li>\n\n
              3. Definir el Duraci\u00f3n<\/strong> como 2 segundos.<\/li>\n\n
              4. A\u00f1ada un mensaje de carga como \"\u00a1Agarraos fuerte, ya casi hemos llegado!\".<\/li>\n\n
              5. Guarde los cambios y visite su p\u00e1gina web para ver el precargador en acci\u00f3n.<\/li><\/ol>
                \"\"<\/figure>

                M\u00e9todo 2: A\u00f1adir un precargador manualmente con c\u00f3digo personalizado<\/h2>

                Si busca un control total, el m\u00e9todo manual le permite crear precargadores personalizados que se ajusten perfectamente a la identidad de su marca. Aqu\u00ed puede aprovechar HTML, CSS y JavaScript para crear algo \u00fanico.<\/p>

                \"\"<\/figure>

                Paso 1: Creaci\u00f3n del precargador<\/h3>

                Decida el dise\u00f1o del precargador. Puede optar por un hilandero simple<\/strong>, a barra de progreso<\/strong>o un animaci\u00f3n personalizada<\/strong> con su logotipo.<\/p>

                C\u00f3digo HTML<\/h4>

                Crear un <div><\/code> para el precargador:<\/p>

                <div id="preloader">\n    <div class="spinner"><\/div>\n<\/div><\/code><\/pre>
                C\u00f3digo CSS<\/h4>
                Estilizar el hilandero<\/em>:<\/p>
                #preloader {\n    posici\u00f3n: fija;\n    izquierda: 0\n    arriba: 0;\n    ancho: 100%\n    altura: 100%;\n    fondo: #ffffff;\n    mostrar: flex;\n    alinear-elementos: centro;\n    justify-content: center;\n    z-index: 9999;\n}\n\n.spinner {\n    borde: 5px solid rgba(0, 0, 0, 0.1);\n    color del borde izquierdo: #000;\n    radio del borde: 50%;\n    anchura: 50px;\n    altura: 50px;\n    animaci\u00f3n: giro 1s lineal infinito;\n}\n\n@keyframes giro {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}<\/code><\/pre>
                Paso 2: JavaScript para ocultar el precargador<\/h3>
                A\u00f1ada JavaScript para ocultar el precargador una vez cargada la p\u00e1gina:<\/p>
                <script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    window.addEventListener(\"load\", function() {\n        var preloader = document.getElementById('preloader');\n        preloader.style.display = 'none';\n    });\n});\n<\/script><\/code><\/pre>
                Paso 3: Insertar el c\u00f3digo en su tema<\/h3>
                Para a\u00f1adir el precargador a su tema:<\/p>
                1. Haga una copia de seguridad de su tema<\/strong>: Cree siempre una copia de seguridad antes de realizar cambios.<\/li>\n\n
                2. Edite <\/strong>header.php<\/strong><\/code>: Navegue hasta Apariencia > Editor de temas<\/strong> y abra header.php<\/code>.<\/li>\n\n
                3. Inserte el HTML, CSS y JavaScript<\/strong>: A\u00f1ada el HTML justo debajo del <body><\/code> e incluya el CSS y el JavaScript seg\u00fan sea necesario.<\/li><\/ol>
                  \"\"<\/figure>
                  Ejemplo: A\u00f1adir un precargador centrado en la marca<\/h3>
                  Si tiene un logotipo de marca, puede utilizarlo como precargador:<\/p>
                  C\u00f3digo HTML<\/h4>
                  Utilice la imagen de su logotipo como precargador:<\/p>
                  <div id="preloader">\n    <img src="path\/to\/your\/logo.png" alt="Cargando...">\n<\/div><\/code><\/pre>
                  C\u00f3digo CSS<\/h4>
                  Centre el logotipo en la pantalla:<\/p>
                  #preloader {\n    posici\u00f3n: fija;\n    izquierda: 0\n    arriba: 0;\n    ancho: 100%\n    altura: 100%;\n    fondo: #ffffff;\n    mostrar: flex;\n    alinear-elementos: centro;\n    justify-content: center;\n    z-index: 9999;\n}\n\n#preloader img {\n    anchura: 100px;\n    altura: auto;\n    animaci\u00f3n: fadeIn 1.5s ease-in-out;\n}\n\n@keyframes fadeIn {\n    0% { opacidad: 0; }\n    100% { opacidad: 1; }\n}<\/code><\/pre>
                  Mejores pr\u00e1cticas para precargadores<\/h2>
                  Para asegurarse de que el precargador funciona eficazmente en diferentes dispositivos y navegadores, es fundamental realizar pruebas y optimizaciones exhaustivas. A continuaci\u00f3n encontrar\u00e1 algunas instrucciones detalladas:<\/p>
                  Compatibilidad entre dispositivos m\u00f3viles y navegadores<\/h3>
                  \"\"<\/figure>
                  1. Herramientas de prueba<\/strong>: Utilice herramientas como BrowserStack<\/strong> o LambdaTest<\/strong> para probar su precargador en varios dispositivos y navegadores. Esto garantiza que las animaciones funcionen bien en entornos como Safari (iOS) o versiones antiguas de Internet Explorer.<\/li>\n\n
                  2. Consideraciones sobre la ventana gr\u00e1fica<\/strong>: Aseg\u00farese de que su precargador responde utilizando unidades relativas (por ejemplo, %<\/code>, vw<\/code>, vh<\/code>) en lugar de unidades fijas como px<\/code>. Esto garantiza que el precargador se adapte correctamente a los distintos tama\u00f1os de pantalla.<\/li>\n\n
                  3. Degradaci\u00f3n gradual<\/strong>: Para los navegadores que no admiten animaciones CSS avanzadas, proporcione estilos de reserva. Por ejemplo, utilice un precargador m\u00e1s sencillo o una imagen est\u00e1tica como alternativa si las animaciones no son compatibles.<\/li>\n\n
                  4. Optimizaci\u00f3n del rendimiento<\/strong>: Utilice will-change<\/code> en CSS para informar al navegador de qu\u00e9 propiedades cambiar\u00e1n, lo que permite una mejor optimizaci\u00f3n. Por ejemplo:<\/li><\/ol>
                    .spinner {\n    will-change: transform;\n}<\/code><\/pre>
                           5.Movimiento reducido<\/strong>: Tenga en cuenta a los usuarios que prefieren un movimiento reducido utilizando media queries para desactivar las animaciones:@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }<\/code><\/p>
                    Para asegurarse de que los precargadores a\u00f1aden valor a su sitio web, es importante atenerse a las mejores pr\u00e1cticas:<\/p>
                    1. Optimizar los tiempos de carga<\/strong>: Los precargadores no sustituyen la optimizaci\u00f3n del rendimiento del sitio. Aseg\u00farese de que su sitio web est\u00e1 optimizado para que el precargador aparezca s\u00f3lo brevemente.<\/li>\n\n
                    2. Dise\u00f1o minimalista<\/strong>: Utilice animaciones sencillas y elegantes que no distraigan a los usuarios. Las animaciones complejas pueden afectar negativamente al rendimiento.<\/li>\n\n
                    3. Compatibilidad con m\u00f3viles y navegadores<\/strong>: Verifique que el precargador funciona bien tanto en dispositivos de sobremesa como m\u00f3viles. Pru\u00e9belo en varios navegadores.<\/li>\n\n
                    4. Pruebas A\/B<\/strong>: Considere la posibilidad de realizar pruebas A\/B para determinar c\u00f3mo afectan los distintos precargadores a la experiencia del usuario y a las tasas de rebote.<\/li><\/ol>
                      Estudio de caso: Eficacia de los precargadores<\/h2>
                      Para ilustrar la eficacia de los precargadores, consideremos un escenario con datos y perspectivas visuales. A continuaci\u00f3n, encontrar\u00e1 un gr\u00e1fico que demuestra el impacto de a\u00f1adir un precargador personalizado en las tasas de rebote y las m\u00e9tricas de compromiso de los usuarios.<\/p>
                      Datos sobre el impacto de la precarga<\/h3>
                      \"\"<\/figure>
                      • Reducci\u00f3n de la tasa de rebote<\/strong>: Una muestra de 100 sitios web de comercio electr\u00f3nico mostr\u00f3 una reducci\u00f3n media de la tasa de rebote de 20%<\/strong> despu\u00e9s de implementar los precargadores.<\/li>\n\n
                      • Compromiso de los usuarios<\/strong>: La duraci\u00f3n media de las sesiones aument\u00f3 en 15%<\/strong>, lo que indica una mejora de la paciencia y el compromiso de los usuarios mientras esperan a que se cargue la p\u00e1gina.<\/li>\n\n
                      • Tasas de conversi\u00f3n<\/strong>: Los sitios web con precargadores experimentaron un aumento de 10% en las tasas de conversi\u00f3n en comparaci\u00f3n con los que no ten\u00edan precargador.<\/li><\/ul>
                        Gr\u00e1fico: Impacto de los precargadores en las m\u00e9tricas de los usuarios<\/h3>
                        Este gr\u00e1fico muestra c\u00f3mo la implementaci\u00f3n de un precargador mejor\u00f3 las tasas de rebote, la duraci\u00f3n de las sesiones y las tasas de conversi\u00f3n en diferentes sectores. Observe la tendencia al alza en la duraci\u00f3n de la sesi\u00f3n y las m\u00e9tricas de conversi\u00f3n tras integrar los precargadores, lo que ilustra su valor para mantener el compromiso del usuario.<\/p>
                        Un estudio de caso sobre un sitio web de comercio electr\u00f3nico descubri\u00f3 que a\u00f1adir un precargador reduc\u00eda las tasas de rebote en un 20%<\/strong>. El precargador mostraba una sutil animaci\u00f3n del logotipo de la marca, creando una experiencia de usuario positiva durante los tiempos de carga. Los usuarios percibieron el sitio como m\u00e1s pulido y profesional, lo que en \u00faltima instancia mejor\u00f3 las m\u00e9tricas de compromiso.<\/p>
                        Este caso pone de relieve el papel de un precargador sencillo pero bien pensado a la hora de mejorar la percepci\u00f3n y la interacci\u00f3n del usuario.<\/p>
                        \"\"<\/figure>
                        Conclusi\u00f3n<\/h2>
                        A\u00f1adir un precargador personalizado a su sitio de WordPress puede mejorar la experiencia del usuario, reducir las tasas de rebote y a\u00f1adir una capa de pulido profesional a su marca. Tanto si utiliza un plugin como si implementa una soluci\u00f3n personalizada utilizando HTML, CSS y JavaScript, es esencial centrarse en los aspectos fundamentales de usabilidad, est\u00e9tica y rendimiento.<\/p>","protected":false},"excerpt":{"rendered":"
                        Crear un sitio web WordPress profesional y atractivo requiere algo m\u00e1s que un contenido atractivo y un aspecto visual atractivo. Un aspecto que a menudo se pasa por alto y que puede mejorar significativamente la experiencia del usuario...<\/p>","protected":false},"author":31,"featured_media":3866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65,58],"tags":[340,338,339,206],"class_list":["post-3846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-page-loading","category-speed","tag-cross-browser-compatibility","tag-custom-preloader","tag-ux-design","tag-wordpress-development",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/3846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/comments?post=3846"}],"version-history":[{"count":7,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/3846\/revisions"}],"predecessor-version":[{"id":3869,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/3846\/revisions\/3869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media\/3866"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media?parent=3846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/categories?post=3846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/tags?post=3846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}