En lo que respecta a la optimización del rendimiento de WordPress, podemos intentar lo siguiente.

Instalar el tema y rellenar el contenido

Cuando configure nuestro tema en una nueva instalación de WordPress, normalmente importará algún contenido ficticio. Este contenido está pensado para ayudarte a poner en marcha tu sitio rápidamente y a entender cómo está construido y configurado. Debido a que este contenido contiene muchas imágenes, páginas, entradas y productos que es posible que pronto elimine, no están optimizados para el rendimiento. Por lo tanto, no es necesario medir el rendimiento del sitio para este paso.

Tras instalar el tema, hay que navegar por las secciones del sitio web y rellenarlas con imágenes, productos, entradas y páginas reales. Esto elimina todos los datos obsoletos y prepara el sitio para futuros visitantes. En esta fase, debes centrarte en las siguientes recomendaciones para garantizar la velocidad y el rendimiento del sitio web:

1. Comprobación de certificados SSL Asegúrese de que su sitio web dispone de un certificado SSL válido. Esto es fundamental para el rendimiento y la seguridad de su sitio web. Si aún no lo tiene, póngase en contacto con su proveedor de alojamiento para que le ayude.
2. Imágenes optimizadas Optimice todas las imágenes y utilice tamaños de imagen adecuados antes de cargarlas. Consulte el paso 3 para obtener más información.
3. Sustitución de imágenes en contenidos virtuales Asegúrese de sustituir todas las imágenes del contenido virtual por las suyas propias. Algunas de las imágenes virtuales pueden cargarse desde nuestro servidor y ralentizar su sitio.
4. Simplificar el contenido de las páginas Evite crear páginas complejas con muchos controles deslizantes, animaciones, rotaciones y productos. Cada elemento adicional de la página añade complejidad y tamaño al DOM, lo que provoca problemas de rendimiento. Simplifica tus páginas y reduce los elementos innecesarios.

Comprobación de los tiempos de respuesta del servidor y optimización

Asegurarse de que su servidor de alojamiento web es rápido y fiable es vital para el rendimiento de su sitio web. En una instalación nueva sin plugins instalados, el tiempo de respuesta del servidor debe estar entre De 0,5 a 1,2 segundosEntre. He aquí algunas formas de medir y optimizar los tiempos de respuesta del servidor:

1. Seleccionar página de prueba El tiempo de respuesta del servidor puede variar de una página a otra. Normalmente, lo probamos en la página del carrito de la compra porque esta página no tiene elementos adicionales y el plugin de almacenamiento en caché (si está activado) no le afecta.
2. Pruebas con WebPageTest entrevistas WebPageTestejecute la prueba de tiempo de respuesta del servidor. El tiempo de respuesta de su servidor se mostrará en la ventana "cascadas"La primera petición de la Fig.

3. Comprobar y optimizar la configuración del servidor Asegúrese de que la compresión GZIP está activada en el servidor para reducir el tiempo de carga de los recursos. Para ello, utilice la función GiftOfSpeed sonda Compresión GZIPSi funciona correctamente. Si no está habilitado, póngase en contacto con su proveedor de alojamiento para obtener ayuda.

Configuración de los ajustes de rendimiento del tema

La configuración por defecto de nuestro tema está muy optimizada para soportar la mayoría de las características. Sin embargo, si hay algunas características que no necesita, puede desactivarlas para mejorar el rendimiento. Aquí hay algunas opciones que se pueden configurar inmediatamente después de la instalación:

1. Desactivar estilos Gutenberg Si utilizas principalmente Elementor o el constructor de páginas WPBakery, puedes desactivar todos los archivos CSS y JS de Gutenberg:
   • Navega hasta:Ajuste temático -> actuaciones -> CSS
   • Selecciona:Desactivar estilos Gutenberg
2. Configuración de la visualización de fuentes Para mejorar el rendimiento, se recomienda que las fuentes de Google y los iconos del fuente-display ajustado a Intercambiar::
   • Navega hasta:Ajuste temático -> actuaciones -> Fuentes e iconos
   • Entorno:fuente-display debido a Intercambiar
   • Para más información Google Docs
3. Activar la carga diferida Si tiene un gran número de imágenes en su página, puede activar la carga diferida para reducir el tamaño de la página:
   • Navega hasta:Configuración del tema -> Rendimiento -> Retraso de carga
   • Habilitar:carga retrasada(Esta opción no está siempre activada, pero es útil cuando hay muchas imágenes)
4. Optimizar el constructor de páginas WPBakery Si utilizas el constructor de páginas WPBakery, puedes reducir el tamaño del CSS desactivando los widgets que no utilices:
   • Navega hasta:Panel -> WoodMart -> Herramientas -> Generador CSS WPBakery
   • Desactivar: widgets innecesarios
5. Inicializar la rotación al desplazarse Para todos los elementos giratorios que no estén en la pantalla inicial, se recomienda activar la opción "Inicializar rotación al desplazarse":
   • Esto reduce el tiempo de ejecución inicial de JS y mejora la velocidad de carga de la página.

6. Activar menú desplegable AJAX
   • senderos::apariciones -> menú
   • plataformaHabilita la opción de menú AJAX para todos los menús desplegables con bloques HTML para reducir el tamaño del DOM en la carga inicial de la página y mejorar el rendimiento.

Configurando estas opciones, es posible reducir el tamaño de la página en 10-40%. asegúrese de volver a comprobar todo después de activar o desactivar cualquiera de las opciones para asegurarse de que no se ha producido ningún problema.

Pasos de la optimización de imágenes

Las imágenes grandes, no optimizadas y de tamaño inadecuado son una de las principales causas de la lentitud de carga de las páginas. Normalmente, las imágenes ocupan el 50-80% del peso total de una página. Si optimiza las imágenes y reduce su número, puede mejorar significativamente la velocidad de carga de la página y las puntuaciones de las métricas web principales. A continuación se indican los pasos específicos de optimización:

1. Controlar el tamaño de la imagen
   • Tamaño recomendadoTodas las imágenes deben tener un tamaño de entre 100 y 200 KB. El tamaño medio de las imágenes de productos y entradas debe ser de 50-150 KB. Las imágenes grandes para la sección principal y el control deslizante pueden ser de 150-200 KB, pero sin excederse.

2. Optimización de imágenes con herramientas en línea
   • Herramientas recomendadasAntes de cargar una imagen, utilice el botón TinyPNG y otras herramientas en línea para la compresión. Basta con subir la imagen al sitio web y descargar la imagen optimizada.
3. Instale el plug-in Optimización automática de imágenes
   • Plug-ins recomendadosSi no desea optimizar las imágenes manualmente, puede instalar un plugin de optimización automática, por ejemplo Imagify. El plugin no sólo comprime las imágenes, sino que también las convierte al formato WEBP, más pequeño, reduciendo aún más el peso 20-40% de la imagen.

4. Ajuste del tamaño de la imagen
   • Imágenes de productos en la página de la tienda: a través de paneles de instrumentos -> apariciones -> personalización -> WooCommerce -> Imágenes del producto Ajuste el tamaño de la imagen.
   • Imágenes del blog: a través de paneles de instrumentos -> establecer -> medios de comunicación Ajuste el tamaño de la imagen.
   • elemento específico de la páginaPermite definir el tamaño de la imagen de elementos como banners, infoboxes, galerías, etc. al editar una página utilizando un constructor de páginas como WPBakery o Elementor.

Principales recomendaciones

• Optimice todas las imágenes antes de subirlasAsegúrese de que la imagen ha sido comprimida y redimensionada con una herramienta antes de cargarla.
• Activar el formato WEBPNuestro tema es compatible con el formato WEBP, puede reducir aún más el tamaño de la imagen mediante la conversión de la imagen a formato WEBP con Imagify plugin.
• Evitar demasiados elementos gráficosReduzca al mínimo el número de imágenes de la página y evite el exceso de controles deslizantes, animaciones y rotaciones.

Instalar el plugin WP Rocket Cache

Los plugins de caché son cruciales para cualquier sitio web WordPress, ya que pueden reducir significativamente los tiempos de respuesta del servidor y hacer que las páginas se carguen casi al instante. Recomendamos WP Rocket, un plugin de caché y optimización del rendimiento premium y fácil de usar. Aunque WP Rocket es un plugin de pago, sus resultados son notables. Si tienes un presupuesto limitado, prueba alternativas gratuitas como Autoptimize, W3 Total Cache o WP Super Cache.

Configuración del plugin WP Rocket

Después de activar el plugin WP Rocket, siga los siguientes pasos para configurarlo y asegurar un rendimiento óptimo:

1. Optimización de archivos
   • Minimización CSSEsta opción comprime los archivos CSS y reduce su tamaño. Aunque mejorará la puntuación de velocidad de página de Google, las opciones Optimizar la entrega de CSS y Eliminar CSS no utilizado pueden provocar parpadeos de estilo al cargar la página, por lo que no solemos activar estas opciones.
   • JS Carga mínima y retardadaHabilite la opción de minimización de JavaScript para reducir el tamaño del archivo JS. Retrasar la ejecución de JS es una buena opción para reducir el tiempo de carga inicial. Sin embargo, algunos scripts pueden retrasar la carga antes de que el usuario comience a interactuar con ellos, por lo que los archivos JS importantes deben añadirse a una lista de excepciones. Esta lista se puede rellenar automáticamente en la versión 7.0 de WoodMart.

2. Configuración de la caché
   • Archivos de caché separados para dispositivos móvilesSi utiliza la opción Optimización de DOM móvil, se recomienda activar esta función para crear un archivo de caché independiente para dispositivos móviles.
   • Nunca guarde en caché las URLReglas Avanzadas: En Reglas Avanzadas, añade URLs de páginas que no deban ser almacenadas en caché, como las páginas de lista de deseos y comparación. Las páginas predeterminadas de WooCommerce como Mi cuenta, Carrito y Pago ya están excluidas de la caché.

Recomendaciones para una mayor optimización

• Utilizar una CDNLa configuración de una red de distribución de contenidos (CDN) puede mejorar drásticamente la velocidad de carga para los visitantes de todo el mundo. Los tiempos de carga pueden reducirse significativamente.

Ejemplo de configuración

A continuación se muestra nuestra configuración de muestra con los ajustes que nos ayudaron a lograr tiempos de carga rápidos y altas puntuaciones de Google Page Speed:

• WP Rocket -> Configuración -> Optimización de ArchivosHabilita la minimización de CSS y JS y retrasa la carga de archivos JS.
• WP Rocket -> Configuración -> Caché: Archivos de caché separados para dispositivos móviles.
• WP Rocket -> Configuración -> Reglas Avanzadas: Añade una lista de deseos y la URL de la página de comparación a la lista de Never Cache.

Cómo solucionar la advertencia de velocidad de página de Google

El informe de Google Page Speed da advertencias específicas basadas en diferentes factores para cada sitio web. Aquí están las advertencias más comunes y sus correcciones para nuestro proyecto.

1. Eliminación de los recursos de bloqueo de renderizado

Esta es una de las advertencias más comunes para los sitios web de WordPress. Cuantos más recursos haya en la cabecera de la página, más tiempo se bloquea la renderización. Normalmente, estos recursos incluyen archivos CSS, archivos JS y fuentes (como Google Fonts). Estos son algunos pasos para reducir el tiempo de bloqueo de renderizado:

• Desactivar estilos Gutenberg: Si no utilizas el editor Gutenberg, puedes desactivar sus estilos para reducir los archivos CSS innecesarios (consulta el paso 2 anterior).
• Evitar fuentes duplicadas de Google FontsAsegúrate de que las fuentes de Google sólo se cargan desde una fuente. Por ejemplo, si las fuentes de Google se cargan a través del tema y Elementor, puede restablecer la configuración de fuentes en la configuración del sitio de Elementor.

• Desactivar Google Fonts innecesariasSi no necesitas las fuentes de Google, puedes desactivarlas en la configuración del tema o descargarlas y cargarlas desde el servidor.
• Reducir archivos CSS innecesariosPor ejemplo, los archivos CSS de iconos de Font Awesome pueden cargarse innecesariamente en la página. Intenta utilizar iconos SVG individuales en lugar de bibliotecas de iconos completas.

2. Reducir el JavaScript no utilizado

Preste atención a esta advertencia y compruebe todos los archivos JS cargados, especialmente los archivos script de plugins de terceros. Ejemplo:

• Desinstalar plug-ins no utilizadosSi el plugin Slider Revolution no se utiliza, puede simplemente desinstalarlo. Si sólo se utiliza en páginas específicas, puede desactivar su función de carga global.
• Uso de alternativas más ligerasPor ejemplo, utilice el control deslizante ligero que viene con WoodMart en lugar del plugin de control deslizante pesado.

3. Reducción del tiempo de respuesta inicial del servidor

Un tiempo de respuesta inicial del servidor excesivo puede afectar al rendimiento del sitio web. Esto puede optimizarse siguiendo los pasos que se indican a continuación:

• Uso del plugin de cachéLa instalación de un plugin de caché como WP Rocket puede reducir significativamente los tiempos de respuesta del servidor.
• solución de problemasSi el tiempo de respuesta supera 2 segundos.La causa raíz del problema puede identificarse mediante las siguientes pruebas:
  • Desactive todos los plugins externos y mida el tiempo de respuesta, activando los plugins uno a uno hasta encontrar el que causa el problema.
  • Pruebe con el tema predeterminado de WordPress y compare su tiempo de respuesta con el del tema WoodMart. Si el tema por defecto tiene un tiempo de respuesta significativamente menor, puede ser un problema del tema.
  • Si el tiempo de respuesta sigue siendo demasiado largo después de desactivar todos los plugins y utilizar el tema por defecto, se recomienda consultar la páginatutelaproveedor de servicios, ya que puede haber problemas con la configuración o el rendimiento del servidor.

Resumen:

En este artículo, detallamos cómo optimizar el rendimiento de un sitio web WordPress Con estos pasos de optimización, puede mejorar significativamente la velocidad de carga de su sitio web y la experiencia del usuario.