Optimizacion de Wordpress con Woodmart

Introducción

El rendimiento del sitio web es uno de los factores clave para las clasificaciones de Google a partir de 2021. Recibimos una serie de mensajes de nuestros clientes todos los días preguntando sobre la velocidad de su sitio web de WordPress. Este artículo cubrirá la mayoría de los aspectos del sitio web de WordPress que afectan la velocidad y pueden aumentar Google Core Web Vitals.

Para este ejemplo utilizamos el Theme Premium Woodmart.

Siempre estamos luchando por optimizar el rendimiento de nuestros temas en cada actualización. 

Nuestra actualización de WoodMart WordPress Theme 6.2 se dedicó principalmente a su rendimiento y, como resultado, optimizamos la mayoría de los aspectos relacionados con nuestro tema y redujimos nuestro CSS y JS en promedio en un 50%. Lea el registro de cambios completo de nuestra actualización WoodMart 6.2 aquí.

Para mostrarle cómo se puede optimizar el sitio web de WordPress basado en el tema WoodMart, creamos un sitio web de prueba en el que intentamos optimizar todo en la medida de lo posible. En este artículo, describiremos todos los pasos que realizamos para optimizar este caso de prueba. Cubriremos preguntas básicas de optimización de WordPress, mejores prácticas de imágenes, recomendaciones de fuentes y brindaremos algunos consejos sobre cómo solucionar problemas de sitios web lentos y corregir advertencias particulares de informes de velocidad de página de Google.

Para nuestros propósitos de prueba, pedimos el plan de alojamiento más barato con 1 GB de RAM y un procesador de un solo núcleo en Cloudways. 

Puede consultar su precio aquí https://www.cloudways.com/en/pricing.php

Instalamos nuestro tema WoodMart y usamos su versión “Decoración”. Pero el mismo algoritmo se puede aplicar a cualquiera de nuestros temas, incluidos todos los temas de Space y Basel .

Tenga en cuenta que usamos la versión de demostración “Decor” que viene sin Slider Revolution porque si usa este complemento en su página, se vuelve 2-3 veces más pesado y no se puede optimizar para la mejor velocidad.

Más información sobre Slider Revolution se tratará más adelante en el artículo.

Después de todos estos pasos, obtendremos un sitio web súper rápido que tiene una puntuación de más de 90 en dispositivos móviles y de escritorio en Google Page Speed. Puede consultar nuestro ejemplo real y probar el resultado usted mismo aquí https://woocommerce-625997-2033187.cloudwaysapps.com/

Paso 0. Instala el tema y rellénalo con tu contenido.

En primer lugar, cuando instala nuestro tema en una instalación nueva de WordPress, normalmente también importa nuestro contenido ficticio. Nuestro contenido ficticio se crea para ayudarlo a comenzar a trabajar con su sitio web más rápido y comprender cómo se construye y configura todo. Pero no está optimizado para el mejor rendimiento, ya que contiene muchas imágenes, páginas, publicaciones y productos que probablemente eliminará pronto. Por eso no es necesario medir el rendimiento en este paso.

Después de la instalación del tema, debe pasar por las secciones de su sitio web y llenarlo con imágenes, productos, publicaciones y páginas reales. Al hacer eso, elimina todos los datos obsoletos y hace que su sitio web sea utilizable para sus futuros visitantes. Solo después de este paso, debe preocuparse por la velocidad del sitio web. Aquí hay una lista de nuestras recomendaciones para usted antes de crear sus páginas, publicaciones y cargar las imágenes:

1. Compruebe si su sitio web tiene un certificado SSL válido. Es lo básico de lo que debe preocuparse en términos de rendimiento y seguridad. Si aún no tiene el certificado en su sitio web, debe comunicarse con su proveedor de alojamiento para obtener ayuda.
2. Optimice todas las imágenes antes de cargarlas y use el tamaño de imagen correcto. (Paso 3)
3. Asegúrese de reemplazar todas las imágenes de nuestro contenido ficticio por las suyas. Algunos de ellos pueden cargarse desde nuestro servidor y ralentizar su sitio web.
4. No cree páginas infladas con toneladas de controles deslizantes, animaciones, carruseles y productos diferentes. Tenga en cuenta que cada elemento de la página aumenta su complejidad y tamaño DOM. Eso daría lugar a más problemas de rendimiento. Así que manténgalo lo más simple y limpio posible.

Paso 1. Verifique el tiempo de respuesta y las optimizaciones de su servidor.

Es muy importante tener un servidor de alojamiento rápido y confiable para su futuro sitio web. Como nuestro caso de prueba está alojado en Cloudways, no tenemos ninguna preocupación sobre el tiempo de respuesta del servidor. Este parámetro depende de muchos factores diferentes, pero con una instalación limpia y sin complementos, no debería ser más de 0.5s-1.2s (incluso sin los complementos de caché instalados). A continuación, se ofrecen algunas recomendaciones sobre cómo medir correctamente el tiempo de respuesta del servidor:

1. Este parámetro puede variar de una página a otra. Por lo general, lo probamos en la página del carrito de compras, ya que no tiene elementos adicionales y el complemento de caché (si está habilitado) no lo afecta.
2. Puede ejecutar esta prueba utilizando el servicio WebPageTest https://www.webpagetest.org/ El tiempo de respuesta de su servidor será la primera solicitud en la “Cascada”

3. También usamos el inspector de Google Chrome para esto. Haga clic en el botón derecho del mouse en algún lugar de su página y abra el “Inspector” (Ctrl + Shift + I). Luego cambie a la pestaña “Red” y vuelva a cargar la página. Filtre los resultados por “Doc” y verifique el tiempo de respuesta como se muestra en la captura de pantalla

Es necesario tener activada la compresión GZIP en su servidor para optimizar el tamaño y el tiempo de carga de los recursos. Está habilitado de forma predeterminada en Cloudways. Si no está habilitado en su servidor, debe comunicarse con su proveedor de alojamiento para obtener ayuda. Compruebe si funciona correctamente utilizando el siguiente servicio https://www.giftofspeed.com/gzip-test/

Paso 2. Configure los ajustes de rendimiento del tema

Nuestro tema por defecto está configurado para tener un buen rendimiento y soportar la mayoría de las funciones. Pero si no usa alguna funcionalidad, puede deshabilitarlas y obtener un rendimiento aún mejor. A continuación, se muestra una lista de opciones que es posible que desee configurar inmediatamente después de la instalación:

1. Configuración del tema -> Rendimiento -> CSS -> Versión de arranque ligero . Nuestro tema usa solo el sistema de cuadrícula, por lo que puede reducir el tamaño del archivo CSS habilitando esta opción.
2. Configuración del tema -> Rendimiento -> CSS -> Deshabilitar estilos de Gutenberg. Dado que en la mayoría de los casos utiliza Elementor o el creador de páginas WPBakery, sería mejor deshabilitar por completo todos los archivos CSS y JS de Gutenberg.
3. Configuración del tema -> Rendimiento -> Fuentes e iconos -> “visualización de fuentes” para las fuentes y los iconos de Google . Recomendamos establecer el valor “Swap” allí para un mejor rendimiento. Lea más información sobre todas las opciones disponibles aquí https://developers.google.com/web/updates/2016/02/font-display
4. Configuración del tema -> Rendimiento -> Carga diferida. No siempre habilitamos esta opción, pero puede reducir el tamaño de la página si muestra muchas imágenes diferentes en sus páginas.
5. Configuración del tema -> Rendimiento -> Complementos -> Cargar CSS optimizado de Elementor. Casi todas nuestras páginas de demostración están creadas con nuestros propios elementos y no usamos widgets de Elementor predeterminados. Es por eso que hemos incluido una versión “ligera” del archivo CSS de Elementor. Tenga en cuenta que si está utilizando algunos widgets estándar que vienen con Elementor de forma predeterminada, no es necesario que habilite esta opción. Esto también se relaciona con las opciones: cargar el archivo CSS de animaciones de Elementor, cargar el archivo CSS de los iconos de Elementor, la biblioteca Elementor dialog.js, la interfaz de Elementor . Tenga cuidado al desactivarlos, ya que rompen los widgets predeterminados . Debe probar todas las páginas de su sitio web después de configurar esta sección.
6. Si está utilizando el creador de páginas WPBakery, puede reducir el tamaño de CSS desactivando esos widgets a través de Dashboard -> WoodMart -> WPBakery CSS Generator.
7. Iniciar carrusel en el pergamino. Esta opción es muy útil para todos los elementos del carrusel de la página que no están en la pantalla inicial. Le recomendamos que recorra todos los carruseles de sus páginas y habilite esta opción. Reducirá el tiempo de ejecución inicial de JS.

8. Desplegables del menú AJAX . Habilite esta opción para todos los menús desplegables con bloques HTML a través de Apariencia -> Menús. Es muy útil reducir el tamaño del DOM en la carga de la página inicial y mejorar el rendimiento.

Todas estas opciones pueden reducir el tamaño de su página en un 10-40%, pero debe verificar todo cuidadosamente después de habilitar / deshabilitar cualquiera de las opciones mencionadas.

Paso 3. Optimización de imágenes

Las imágenes grandes, no optimizadas y de tamaño incorrecto son uno de los problemas más populares que ralentizan la página de forma espectacular. Por lo general, las imágenes ocupan entre el 50 y el 80% del peso total de la página. Es por eso que al optimizar todas las imágenes y reducir su número (si es posible) puede aumentar todas las puntuaciones de Core Web Vitals.

El peso de la imagen depende principalmente de su tamaño en píxeles. Pero no debe exceder los 100-200 KB para ninguna imagen. El tamaño promedio de la imagen del producto y la publicación debe ser de hasta 50-150 KB y solo las imágenes grandes para las secciones principales y los controles deslizantes pueden ser de 150 a 200 KB, pero no más. Puede optimizar todas las imágenes antes de cargarlas utilizando servicios populares como https://tinypng.com/

Simplemente cargue su imagen allí y descargue la optimizada. Si no desea hacer esto manualmente, puede instalar un complemento de optimización de imagen automática. Recomendamos Imagify como la mejor opción para esta tarea. https://imagify.io/

Este complemento también crea un formato WEBP para sus imágenes que reduce su peso en un 20-40% más. Nuestro tema es compatible con el formato WEBP, por lo que recomendamos habilitarlo para su sitio web.

Ahora, cuando haya optimizado y subido la imagen, debe cuidar su tamaño en la página. Por ejemplo, si tiene un tamaño de contenedor de sitio web de 1200 px y 6 columnas de productos, el tamaño de la miniatura de su producto no debe exceder los ~ 200 píxeles. El tamaño de la imagen se puede configurar en diferentes lugares para secciones particulares de su sitio web:

1. Para productos en la página de la tienda a través del Panel de control -> Apariencia -> Personalizar -> WooCommerce -> Imágenes de productos

2. Para publicaciones de blog Panel de control -> Configuración -> Medios

3. Para elementos particulares en la página (banner, cuadro de información, galería, etc.) puede establecer el tamaño de la imagen mientras edita este elemento con el generador de páginas (WPBakery o Elementor)

Paso 4. Instale el complemento de caché de WP Rocket

Los complementos de caché son vitales para cualquier sitio web de WordPress, ya que reducen el tiempo de respuesta del servidor y hacen que sus páginas se carguen casi instantáneamente. Por lo general, usamos WP Rocket como el complemento más avanzado y fácil de usar para la optimización de caché y rendimiento. Además del almacenamiento en caché, también optimiza todos los recursos CSS y JS y proporciona una forma sencilla de activar CDN globalmente. Es un complemento de pago, por lo que si no puede pagarlo, puede probar sus alternativas gratuitas como Autoptimize, W3 Total Cache o WP Super Cache. De forma predeterminada, Cloudways tiene sus propios complementos de caché instalados para que pueda seguir usándolo o deshabilitarlo por completo si prefiere instalar el suyo. En este artículo, describimos las opciones de WP Rocket, pero también puede aplicar el mismo conjunto para otros complementos.

Después de la activación del complemento, debe revisar sus configuraciones y configurarlas según sus necesidades. Enumeraremos opciones importantes que deben habilitarse con nuestro tema:

1. WP Rocket -> Configuración -> Optimización de archivos. Habilite CSS minificar y combinar opciones. Tenga en cuenta que funcionan con todos los archivos CSS cargados en su sitio web, y no solo con nuestro tema. Es por eso que también puede habilitar nuestro tema CSS minify. Por lo general, no utilizamos “Optimizar la entrega de CSS” y “Eliminar CSS no utilizado”. Aumentarán su puntaje de Velocidad de página de Google, pero pueden tener un impacto negativo en la apariencia de carga del sitio web, agregando algunos saltos y “destellos de contenido sin estilo”. 

2. WP Rocket -> Configuración -> Optimización de archivos. Habilite las opciones diferidas JS minify, combine y Load JS files allí.

3. Retrasar la ejecución de JS es una buena opción, pero también puede afectar su UX antes de que el usuario comience a mover el mouse para iniciar todos los scripts. Activamos esta opción para nuestro caso de prueba y agregamos la siguiente lista de archivos JS a la lista de excepciones para asegurarnos de que estas partes comiencen a funcionar inmediatamente después de cargar la página.

jquery.min
helpers.min.js
clickOnScrollButton
searchFullScreen
menuOffsets
menuDropdowns
cartWidget
mobileNavigation
loginSidebar
menuSetUp
cart-fragments
slick
productImages
cookie.min
owl.carousel
owlCarousel
imagesLoaded

4. WP Rocket -> Configuración -> Caché -> Archivos de caché separados para dispositivos móviles. Recomendado. Active esta opción si usa nuestra opción de optimización Mobile DOM en Configuración del tema -> Rendimiento o cree una página separada para dispositivos móviles usando una opción apropiada para páginas particulares.
5. WP Rocket -> Configuración -> Reglas avanzadas -> Nunca almacenar en caché las URL . Agregue allí su lista de deseos y compare páginas, ya que no deberían almacenarse en caché. Tenga en cuenta que las páginas predeterminadas de WooCommerce como Mi cuenta, Carrito y Pago están excluidas de la caché de forma predeterminada.

Esa es la configuración de nuestro sitio web de demostración. Todas las demás opciones se pueden activar cuando lo desee. Puedes jugar con diferentes combinaciones para conseguir el mejor resultado.

Paso 5. Configurar CDN

Content Delivery Network (CDN) es una red distribuida geográficamente de servidores web que puede almacenar sus recursos estáticos (imágenes, CSS, JS, fuentes, etc.) y entregarlos a sus visitantes de todo el mundo más rápido que desde su propio servidor. Esta tecnología puede aumentar la carga de su sitio web en caso de que tenga visitas desde muchas ubicaciones diferentes. Puede reducir el tiempo de carga de los recursos estáticos y también reducir la carga de su servidor.

Si va a configurar un servicio CDN en su sitio web, le recomendamos que utilice KeyCDN o RocketCDN . Son muy rápidos y muy fáciles de configurar los CDN que usamos habitualmente en nuestros proyectos.

El proceso de configuración es muy sencillo. Repasemos este proceso paso a paso para el ejemplo de KeyCDN.

1. Registre una cuenta en el sitio web de KeyCDN .
2. Vaya a “Zonas” y haga clic en el botón “Agregar nuevo”
3. Complete la “URL de origen” con la URL raíz de su sitio web como se muestra en la captura de pantalla.

4. Haga clic en el botón “Guardar” y espere unos minutos para implementar su red.
5. Cuando se implementa la zona, debe copiar su “URL de zona” como se muestra en la captura de pantalla.

6. Vaya a Configuración de WP Rocket -> CDN (o use su alternativa) y habilite la opción CDN. Además, inserte la URL de su zona en el campo correspondiente según la captura de pantalla.

7. Guarde y borre la caché.
8. Verifique si el CDN está activado en el código fuente de su sitio web. Ejemplo de CDN funcional en la captura de pantalla.

Cómo corregir las advertencias de velocidad de página de Google

Cada informe de velocidad de página de Google es individual y depende de muchas cosas diferentes de un sitio a otro. Cubriremos las advertencias más populares que solemos tener en nuestros proyectos con ejemplos de instrucciones sobre cómo solucionarlas. 

Elimina los recursos que bloquean el renderizado

Es la advertencia más popular que es peculiar para todos los sitios web de WordPress. Cuantos más recursos tenga en la cabecera de su sitio web, mayor será su tiempo de bloqueo. Por lo general, estos recursos son archivos CSS, JS y fuentes (fuentes de Google). Por lo tanto, debe revisar cada uno de los archivos enumerados en el informe y verificar si realmente es necesario en la página. En cuanto a los archivos CSS de temas, siempre nos esforzamos por hacerlos lo más pequeños posible. Pero no es posible eliminarlos por completo. En nuestro caso de prueba, hemos solucionado algunos problemas sobre este asunto:

1. Estilos de Gutenberg. Como no usamos el editor de Gutenberg, deshabilitamos sus estilos (consulte el Paso 2).
2. Fuentes de Google duplicadas. Asegúrese de tener las fuentes de Google cargadas solo desde nuestro tema. En nuestro caso, Elementor también cargó fuentes de Google. Para deshabilitarlos, debe editar cualquier página con Elementor, cambiar a Configuración del sitio -> Fuentes de Google y restablecerlas todas.

Para reducir aún más el tiempo de bloqueo y aumentar la puntuación general, puede desactivar las fuentes de Google por completo. O puede descargarlos y cargarlos desde su servidor a través de Configuración del tema -> Tipografía -> Fuentes personalizadas. Para nuestro sitio web de prueba, utilizamos una fuente personalizada para los títulos y “Pila de fuentes del sistema” para otros textos de la página.

Otro archivo CSS que se carga la mayor parte del tiempo, pero no siempre es necesario, son los iconos de Font Awesome. Tenga en cuenta que Elementor carga este archivo CSS y fuentes con íconos en cualquier página donde tenga el ícono seleccionado para algunos de los elementos. En nuestro caso, lo teníamos en nuestro menú desplegable, por lo que eliminamos los elementos del icono de allí para evitar cargar toda la biblioteca. Úselos solo cuando sea realmente necesario. De lo contrario, sería mejor cargar un solo icono SVG.

Reducir JavaScript no utilizado

Debe prestar atención a esta advertencia y verificar todos los archivos de scripts especialmente cargados por complementos de terceros. En nuestro ejemplo, había dos archivos JS de Slider Revolution que no deberían cargarse. Si no usa el control deslizante en absoluto, simplemente puede desinstalar el complemento. Si aún lo necesita para algunas de las páginas, debe desactivar estos archivos para que no se carguen globalmente. Vaya a Slider Revolution -> Globals -> Incluir bibliotecas globalmente -> OFF. Pero en la mayoría de los casos, le recomendamos que lo reemplace por completo con nuestro propio control deslizante WoodMart que tiene muchas características excelentes para crear un control deslizante funcional y ligero. Lea más información en nuestra documentación https://xtemos.com/docs/woodmart/woodmart-slider/

Reducir el tiempo de respuesta inicial del servidor

Esta advertencia se puede solucionar fácilmente instalando cualquier complemento de caché y, en nuestro caso, es WP Rocket. Tenga en cuenta que es posible que vea esta advertencia de vez en cuando cuando borre la memoria caché en el complemento. 

Si el tiempo de respuesta del servidor es de más de 2 segundos sin el complemento de caché, debe solucionar el problema, ya que no debería ser tan largo. Cómo verificar el tiempo de respuesta del servidor que explicamos en el Paso 1. Para encontrar la raíz del problema de respuesta lenta, puede realizar las siguientes pruebas:

1. Desactive todos los complementos externos y mida el tiempo. Si es mucho más rápido, puede habilitarlos uno por uno para ver cuál de ellos causa este problema.
2. Compruebe cómo funciona con el tema predeterminado de WordPress para ver la diferencia entre este y WoodMart. Debe realizar la prueba en la página del carrito de compras porque otras páginas pueden tener un contenido diferente. Tenga en cuenta que la velocidad puede ser diferente en un 10-15% de lo normal. Pero si ve que es más lento 2-3 veces, puede comunicarse con nuestro soporte para obtener ayuda.
3. Si es lento incluso sin complementos y con el tema predeterminado, le recomendamos que consulte con su proveedor de alojamiento, ya que WordPress por sí solo es muy rápido y está bien optimizado.

Conclusión

Hemos medido Web Core Vitals y estadísticas de rendimiento general para las páginas base del sitio web de prueba: página de inicio, tienda, producto único, blog y publicación única. Los resultados de nuestras optimizaciones son excelentes y puede verlos en la siguiente tabla. Además, puede ver qué tan rápida es esta demostración y verificar el rendimiento aquí https://woocommerce-625997-2033187.cloudwaysapps.com

HOGAR	HOGAR
Puntaje para dispositivos móviles: 98 Puntaje para escritorio : 100 Tamaño de página : 1.6 MB Gzip comprimido: 1.0 MB Número de solicitudes HTTP: 53
TIENDA	TIENDA
Puntaje para dispositivos móviles : 98 Puntaje para escritorio : 100 Tamaño de página : 1.3 MB Gzip comprimido: 783 kB Número de solicitudes HTTP: 62
PRODUCTO ÚNICO	PRODUCTO ÚNICO
Puntaje para dispositivos móviles : 97 Puntaje para escritorio : 100 Tamaño de página : 831 kB Gzip comprimido: 292 kB Número de solicitudes HTTP : 37
BLOG	BLOG
Puntuación para dispositivos móviles : 95 Puntuación para ordenadores : 99 Tamaño de página : 1,3 MB Gzip comprimido: 829 kB Número de solicitudes HTTP : 32
PUESTO ÚNICO	PUESTO ÚNICO
Puntuación móvil : 95 Puntuación de escritorio : 100 Tamaño de página : 1,5 MB Gzip comprimido: 1,0 MB Número de solicitudes HTTP : 40