Cómo acelerar un sitio web de directorio o mercado creado con HivePress

Hoy en día, la velocidad de carga del sitio web y el rendimiento general son cruciales para una buena experiencia de usuario y una buena clasificación en los motores de búsqueda. Recientemente, Google anunció que comenzará a medir Core Web Vitals, como los puntajes de estabilidad visual y los tiempos de carga de la página, para que los sitios web determinen si calificarán para un aumento de la señal de clasificación. Además, las páginas con un tiempo de carga más largo tienden a tener tasas de rebote más altas y un tiempo promedio más bajo en la página.

En este tutorial, explicaremos cómo disparar el rendimiento de su sitio web mediante la configuración del almacenamiento en caché, la optimización de estilos y secuencias de comandos, así como la optimización del contenido multimedia. Usaremos el complemento LiteSpeed ​​Cache, una solución de aceleración de sitios web todo en uno con toneladas de herramientas y funciones para hacer que su sitio web sea increíblemente rápido.

Para fines de prueba, usaremos un sitio web de directorio de WordPress creado con HivePress y algunas extensiones junto con su tema ListingHive predeterminado. Sin embargo, si su sitio web no está construido con el complemento HivePress, puede seguir los mismos pasos para cualquier otro sitio web con tecnología de WordPress.

Entonces, comencemos con la instalación de LiteSpeed ​​Cache.

Instalación de caché LiteSpeed

En primer lugar, debe instalar el complemento LiteSpeed ​​Cache. Puede hacerlo fácilmente directamente desde su panel de WordPress yendo a la sección Complementos> Agregar nuevo . Encuéntrelo a través de la barra de búsqueda y proceda a instalarlo. Cuando finalice la instalación, simplemente haga clic en el botón "Activar" para habilitar el complemento.

Una vez que esté instalado y activado, puede comenzar a optimizar su sitio web. Primero repasemos la configuración básica de caché.

Optimización de caché

Para ajustar la configuración básica de la memoria caché, vaya a la página LiteSpeed ​​Cache > Cache . Hay muchas secciones diferentes dentro de esta página, pero solo veremos las configuraciones más importantes.

Configuración de caché

Aquí, recomendamos encarecidamente deshabilitar el caché para los usuarios registrados y las solicitudes de la API REST. Esto es necesario para que el complemento HivePress funcione correctamente. Después de habilitar o deshabilitar cualquier opción, no olvide guardar los cambios.

Caché de objetos

A continuación, habilitemos la caché de objetos . Navegue a la sección Objeto y verifique si el caché de objetos está disponible en su sitio. La prueba de conexión debe mostrarse como "aprobada". Si es así, puede habilitar el caché de objetos, y esto mejorará drásticamente el rendimiento del sitio web al almacenar en caché consultas de bases de datos duplicadas.

No debería haber problemas para pasar la prueba de conexión si su sitio web se basa en el servidor OpenLiteSpeed ​​o si su proveedor de alojamiento admite el almacenamiento en caché de objetos.

Caché de navegador

Finalmente, navegue a la sección Caché del navegador y asegúrese de que esté habilitado. Esto almacenará en caché todo el contenido estático como estilos, scripts e imágenes en el navegador del usuario.

Optimización de página

Su siguiente paso es navegar a la sección LiteSpeed ​​Cache > Page Optimization para optimizar los estilos, scripts y fuentes.

Optimización CSS

Comencemos con la sección Configuración de CSS . Aquí recomendamos activar la configuración de CSS Minify y CSS Combine .

• CSS Minify : si habilita esta opción, todos los espacios en blanco adicionales, los caracteres de nueva línea y otros datos innecesarios o redundantes se eliminarán automáticamente de los archivos CSS sin afectar los estilos del sitio web.
• Combinar CSS : al habilitar este, todos los archivos CSS individuales se fusionarán en un solo archivo CSS. De esta forma, el navegador envía una solicitud de un solo archivo en lugar de solicitar cada archivo CSS por separado, lo que reduce la cantidad de solicitudes HTTP.

Optimización de fuentes

Si su sitio usa Google Fonts, hay algunas opciones para optimizar la carga de fuentes. En la misma sección Configuración de CSS , puede desplazarse hacia abajo y establecer la opción Optimización de visualización de fuentes en Intercambiar para que la fuente alternativa se utilice para mostrar el texto hasta que la fuente personalizada se haya descargado por completo.

Una vez que configure la opción Intercambiar , vaya a la sección Optimización dentro de la misma página y active la opción Cargar fuentes de Google de forma asíncrona para cargar las fuentes de Google en segundo plano mientras se procesa la página.

Optimización JS

Ahora vayamos a la sección Configuración de JS para optimizar los archivos JavaScript. Aquí recomendamos seguir los mismos pasos que para la configuración de CSS. Simplemente habilite las opciones JS Minify y JS Combine para que los archivos JS también se minimicen y fusionen en un solo archivo.

También existe la opción Load JS Deferred que realmente puede marcar la diferencia. Una vez que habilite esta configuración, los scripts se cargarán en segundo plano mientras el navegador muestra el diseño y los estilos de la página. Las secuencias de comandos suelen ser "más pesadas" que HTML, por lo que la carga y ejecución de secuencias de comandos que no son necesarias para la presentación inicial de la página puede aplazarse y cargarse más tarde. Permite a los visitantes utilizar el sitio web casi de inmediato.

Después de marcar esta opción, asegúrese de que el front-end del sitio web no esté dañado porque es posible que sea necesario cargar algunos scripts antes de que se represente la página.

Optimización de medios

Finalmente, necesita optimizar su contenido multimedia. Dado que las imágenes a menudo representan aproximadamente la mitad del tamaño del contenido de una página web, convertir todas las imágenes al formato WebP (que en promedio es un 30% más pequeño que otros formatos) puede mejorar significativamente la velocidad de carga de su página.

En la sección LiteSpeed ​​Cache > Optimización de imagen > Configuración , puede convertir las imágenes de su sitio web al formato WebP habilitando las configuraciones Crear versiones WebP y Reemplazo de imagen WebP .

Después de marcar estas opciones, vaya a la sección Resumen de optimización de imágenes para obtener la clave de dominio y optimice las imágenes haciendo clic en el botón "Enviar solicitud de optimización" hasta que la puntuación de optimización de imágenes alcance el 100 %.

Además, si hay incrustaciones en su sitio web (por ejemplo, videos de YouTube, publicaciones de Instagram o tweets), es mejor cargar el contenido incrustado solo cuando los usuarios se desplazan hacia abajo, no durante la representación inicial de la página. Hará que la primera página se muestre mucho más rápido y reducirá el uso de la memoria del navegador.

Vaya a la sección LiteSpeed ​​Cache > Page Optimization > Media Settings y habilite la opción Lazy Load Iframes .

Terminando

A continuación se muestra la captura de pantalla de los resultados de Google PageSpeed ​​en dispositivos móviles y de escritorio después de que optimizamos el rendimiento del sitio web siguiendo los pasos de este tutorial.

¡Eso es todo! Si creó su sitio web de directorio o mercado con HivePress (o cualquier otra solución basada en WordPress) , puede seguir los mismos pasos para configurar el almacenamiento en caché, optimizar estilos, scripts y fuentes, así como el contenido multimedia como imágenes o incrustaciones. Como resultado, obtendrá un puntaje alto en Google PageSpeed ​​(lo que aumentará su clasificación de SEO) y mejorará la experiencia general del usuario de su sitio web.

Además, no dude en consultar los siguientes artículos:

• Los mejores complementos de directorio de WordPress
• Temas populares de directorio de WordPress
• Errores al crear un sitio web de listado de WordPress