OpenByt - Su fuente definitiva de conocimientos gratuitos sobre WordPress

Análisis en profundidad: Cómo añadir un precargador personalizado a WordPress

f Lin

Crear un sitio web WordPress profesional y atractivo requiere algo más 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. Un precargador puede ayudar a entretener a los usuarios mientras se carga su página, reducir las tasas de rebote y añadir un toque de personalidad de marca a su sitio.

Esta guía en profundidad le proporcionará detalles exhaustivos sobre cómo añadir un precargador personalizado a su sitio web WordPress. Exploraremos tanto los métodos basados en plugins como los manuales, discutiremos las mejores prácticas y examinaremos ejemplos del mundo real.

¿Por qué utilizar un precargador personalizado?

Un precargador es un elemento gráfico o animación que aparece mientras se carga una página 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í algunas ventajas clave:

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

La ciencia tras los tiempos de carga y el comportamiento de los usuarios

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

Soluciones de precargadores para WordPress

Al añadir un precargador a un sitio de WordPress, tiene dos opciones principales:

  1. Uso de plugins: Este método es accesible para principiantes y no requiere conocimientos de codificación.
  2. Método manual: Para los usuarios avanzados, el enfoque manual ofrece una mayor flexibilidad y permite una personalización detallada.

Discutiremos ambos métodos, incluyendo ejemplos prácticos, para ayudarle a elegir el mejor enfoque para su proyecto.

Método 1: Añadir un precargador mediante un plugin de WordPress

Paso 1: Elegir el plugin adecuado

WordPress ofrece varios plugins para añadir precargadores personalizados. Algunas opciones populares incluyen:

Para esta discusión, utilizaremos Precargador Plus debido a su facilidad de uso y flexibilidad.

Paso 2: Instalación y activación del plugin

  1. Acceda al panel de control de WordPress.
  2. Navegue hasta Plugins > Añadir nuevo.
  3. Buscar Precargador Plus.
  4. Haga clic en Instalar ahora y luego Active.

Paso 3: Configuración de los ajustes del precargador

Para configurar su precargador:

  1. Ir a Ajustes > Preloader Plus.
  2. Aquí encontrará opciones de personalización:
    • Tipo de animación: Elija un tipo de animación como spinner, fade o un SVG personalizado.
    • Mensaje de carga: Un mensaje breve y atractivo puede mejorar aún más la experiencia del usuario.
    • Duración y retraso: Establezca una duración adecuada para mantener el precargador en pantalla hasta que el contenido esté listo.
  3. Utilice la función de vista previa para ver el efecto y ajustar la configuración según sea necesario.

Ejemplo: Configuración de un sencillo precargador giratorio

Let’s configure a simple spinner:

  1. En Ajustes > Preloader Plus, seleccione Spinner como la animación.
  2. Fije Color primario a juego con su marca.
  3. Definir el Duración como 2 segundos.
  4. Añada un mensaje de carga como "¡Agarraos fuerte, ya casi hemos llegado!".
  5. Guarde los cambios y visite su página web para ver el precargador en acción.

Método 2: Añadir un precargador manualmente con código personalizado

If you’re seeking complete control, the manual method allows for customized preloaders that align perfectly with your brand identity. Here, you can leverage HTML, CSS, and JavaScript to create something unique.

Paso 1: Creación del precargador

Decide on the preloader’s design. You could opt for a hilandero simple, a barra de progresoo un animación personalizada con su logotipo.

Código HTML

Crear un <div> para el precargador:

<div id="preloader">
    <div class="spinner"></div>
</div>

Código CSS

Estilizar el hilandero:

#preloader {
    posición: fija;
    izquierda: 0
    arriba: 0;
    ancho: 100%
    altura: 100%;
    fondo: #ffffff;
    mostrar: flex;
    alinear-elementos: centro;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    borde: 5px solid rgba(0, 0, 0, 0.1);
    color del borde izquierdo: #000;
    radio del borde: 50%;
    anchura: 50px;
    altura: 50px;
    animación: giro 1s lineal infinito;
}

@keyframes giro {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Paso 2: JavaScript para ocultar el precargador

Añada JavaScript para ocultar el precargador una vez cargada la página:

<script>
document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("load", function() {
        var preloader = document.getElementById('preloader');
        preloader.style.display = 'none';
    });
});
</script>

Paso 3: Insertar el código en su tema

Para añadir el precargador a su tema:

  1. Haga una copia de seguridad de su tema: Cree siempre una copia de seguridad antes de realizar cambios.
  2. Edite header.php: Navegue hasta Apariencia > Editor de temas y abra header.php.
  3. Inserte el HTML, CSS y JavaScript: Añada el HTML justo debajo del <body> e incluya el CSS y el JavaScript según sea necesario.

Ejemplo: Añadir un precargador centrado en la marca

Si tiene un logotipo de marca, puede utilizarlo como precargador:

Código HTML

Utilice la imagen de su logotipo como precargador:

<div id="preloader">
    <img src="path/to/your/logo.png" alt="Cargando...">
</div>

Código CSS

Centre el logotipo en la pantalla:

#preloader {
    posición: fija;
    izquierda: 0
    arriba: 0;
    ancho: 100%
    altura: 100%;
    fondo: #ffffff;
    mostrar: flex;
    alinear-elementos: centro;
    justify-content: center;
    z-index: 9999;
}

#preloader img {
    anchura: 100px;
    altura: auto;
    animación: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    0% { opacidad: 0; }
    100% { opacidad: 1; }
}

Mejores prácticas para precargadores

Para asegurarse de que el precargador funciona eficazmente en diferentes dispositivos y navegadores, es fundamental realizar pruebas y optimizaciones exhaustivas. A continuación encontrará algunas instrucciones detalladas:

Compatibilidad entre dispositivos móviles y navegadores

  1. Herramientas de prueba: Utilice herramientas como BrowserStack o LambdaTest 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.
  2. Consideraciones sobre la ventana gráfica: Asegúrese de que su precargador responde utilizando unidades relativas (por ejemplo, %, vw, vh) en lugar de unidades fijas como px. Esto garantiza que el precargador se adapte correctamente a los distintos tamaños de pantalla.
  3. Degradación gradual: Para los navegadores que no admiten animaciones CSS avanzadas, proporcione estilos de reserva. Por ejemplo, utilice un precargador más sencillo o una imagen estática como alternativa si las animaciones no son compatibles.
  4. Optimización del rendimiento: Utilice will-change en CSS para informar al navegador de qué propiedades cambiarán, lo que permite una mejor optimización. Por ejemplo:
.spinner {
    will-change: transform;
}

5.Movimiento reducido: 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; } }

Para asegurarse de que los precargadores añaden valor a su sitio web, es importante atenerse a las mejores prácticas:

  1. Optimizar los tiempos de carga: Los precargadores no sustituyen la optimización del rendimiento del sitio. Asegúrese de que su sitio web está optimizado para que el precargador aparezca sólo brevemente.
  2. Diseño minimalista: Utilice animaciones sencillas y elegantes que no distraigan a los usuarios. Las animaciones complejas pueden afectar negativamente al rendimiento.
  3. Compatibilidad con móviles y navegadores: Verifique que el precargador funciona bien tanto en dispositivos de sobremesa como móviles. Pruébelo en varios navegadores.
  4. Pruebas A/B: Considere la posibilidad de realizar pruebas A/B para determinar cómo afectan los distintos precargadores a la experiencia del usuario y a las tasas de rebote.

Estudio de caso: Eficacia de los precargadores

To illustrate the effectiveness of preloaders, let’s consider a scenario with data and visual insights. Below, you will find a graph demonstrating the impact of adding a custom preloader on bounce rates and user engagement metrics.

Datos sobre el impacto de la precarga

Gráfico: Impacto de los precargadores en las métricas de los usuarios

Este gráfico muestra cómo la implementación de un precargador mejoró las tasas de rebote, la duración de las sesiones y las tasas de conversión en diferentes sectores. Observe la tendencia al alza en la duración de la sesión y las métricas de conversión tras integrar los precargadores, lo que ilustra su valor para mantener el compromiso del usuario.

Un estudio de caso sobre un sitio web de comercio electrónico descubrió que añadir un precargador reducía las tasas de rebote en un 20%. The preloader displayed a subtle animation of the brand’s logo, creating a positive user experience during load times. Users perceived the site as more polished and professional, which ultimately improved engagement metrics.

This case highlights a simple yet thoughtful preloader’s role in enhancing user perception and interaction.

Conclusión

Adding a custom preloader to your WordPress site can enhance user experience, reduce bounce rates, and add a layer of professional polish to your brand. Whether you use a plugin or implement a custom solution using HTML, CSS, and JavaScript, it’s essential to focus on the core aspects of usability, aesthetics, and performance.

Salir de la versión móvil