¿Quieres relanzar tu sitio web de comercio electrónico o lanzar uno nuevo? Es un reto apasionante porque el comercio electrónico desbloquea enormes oportunidades de crecimiento para las empresas minoristas. Una presencia online puede ser la clave del éxito o una opción necesaria para sobrevivir a la competencia internacional.

El comercio electrónico puede permitirte comercializar excelentes productos locales en todo el mundo sin la intermediación de la distribución, aprovechar estrategias de marketing avanzadas , como la publicidad dirigida y las campañas en redes sociales, y sacar partido de las herramientas de IA para mejorar la eficacia operativa, la experiencia del cliente y las estrategias de marketing.

Sin embargo, poner en marcha un sitio de comercio electrónico requiere una cuidadosa planificación estratégica y organizativa, un análisis exhaustivo de costes y beneficios, puntos fuertes y débiles, amenazas y oportunidades.

Y eso no es todo. Para tener éxito con tu comercio electrónico, necesitas un sitio web moderno, rápido y seguro que respalde tu negocio. Un sitio web de comercio electrónico de éxito debe proporcionar una experiencia de compra fluida, cumplir la normativa internacional sobre privacidad, como el GDPR, garantizar transacciones seguras y acompañar a tus clientes a través del embudo de ventas hasta llegar al punto de compra.

Debe estar optimizado para SEO, ser escalable cuando sea necesario, flexible y fácil de gestionar para que puedas centrarte en tu negocio sin perder tiempo y recursos en cuestiones técnicas.

No es tarea fácil, pero un sitio web de comercio electrónico puede darte grandes oportunidades de hacer crecer tu negocio.

En resumen, tres áreas a tener en cuenta al planificar un sitio web de comercio electrónico son el rendimiento, la seguridad y la funcionalidad.

Así que hemos reunido nuestras mejores recomendaciones sobre la optimización del comercio electrónico en tres artículos, cada uno de ellos centrado en una de estas tres áreas.

Este primer artículo se centrará en el rendimiento, compartiendo una lista de las 10 mejores prácticas para optimizar la velocidad y el rendimiento de tu sitio web de comercio electrónico.

En los dos artículos siguientes, nos centraremos en la seguridad del sitio y en la funcionalidad del servicio de alojamiento, deteniéndonos en las ventajas que puede garantizar un alojamiento optimizado para el comercio electrónico.

¿Estás preparado para saber qué necesitas para lanzar con éxito un sitio web de comercio electrónico y lanzarte a conquistar los mercados internacionales? ¡Sigue leyendo!

Por dónde empezar para lanzar un sitio web de comercio electrónico moderno

Un sitio web de comercio electrónico moderno requiere varias características técnicas y funcionales para mejorar la interacción del usuario con el sitio, garantizando una experiencia de navegación y compra rica y agradable.

Desde un punto de vista técnico, un sitio web de comercio electrónico debe estar optimizado en cuanto a rendimiento y seguridad. Debe ser fácil de gestionar para tu equipo y fácilmente escalable.

Construir un sitio web con estas características requiere una moderna infraestructura, una Red de Entrega de Contenidos de nivel empresarial, funciones avanzadas para desarrolladores, un sistema de copias de seguridad eficaz y fácil de usar, y un servicio de soporte rápido y cualificado.

Por tanto, el primer paso antes de lanzar un sitio web de comercio electrónico es averiguar dónde obtener los servicios y herramientas que necesitas. Esta decisión consiste en elegir el proveedor de infraestructura de alojamiento. Las opciones son casi infinitas. Puedes optar por gestionar tus servidores contratando a un administrador de sistemas u optar por una solución totalmente gestionada, como Wix o Shopify.

La primera opción, gestionar el servidor internamente, ofrece la máxima flexibilidad y personalización. Sin embargo, requiere recursos considerables e ingenieros sysadmin cualificados. Las grandes empresas suelen adoptar esta solución.

La segunda opción, las plataformas totalmente administradas, tiene la ventaja de su gran facilidad de uso, pero no garantiza la flexibilidad técnica y operativa que puede necesitar tu empresa. Además, a medida que la empresa crece, pueden surgir costes imprevistos.

En algún punto entre estos dos extremos, existen soluciones basadas en una plataforma de código abierto combinada con un servicio de alojamiento que proporciona las prestaciones necesarias para el comercio electrónico.

Puedes profundizar en las diferencias entre algunas de las opciones disponibles en nuestros artículos comparativos:

Página del plugin WooCommerce en WordPress.org
Página del plugin WooCommerce en WordPress.org

En Kinsta, ofrecemos alojamiento premium para sitios web de comercio electrónico. Nuestra infraestructura está optimizada para ofrecer rendimiento, seguridad y facilidad de uso para sitios web de WordPress, junto con los plugins de comercio electrónico más populares, WooCommerce y Easy Digital Downloads. Nuestra tecnología de contenedor aislado está construida sobre Google Cloud Platform y aprovecha la potencia de la red de Cloudflare para garantizar el máximo rendimiento y seguridad.

Esta es la solución técnica que recomendamos a cualquiera que se haga la pregunta: ¿cuál es la mejor infraestructura de alojamiento para un sitio web de comercio electrónico moderno?

¡Empecemos con el rendimiento del comercio electrónico!

Las 10 mejores prácticas para optimizar el rendimiento de tu sitio web de comercio electrónico

Según investigaciones recientes sobre las tasas de conversión del comercio electrónico, el principal factor de éxito de un sitio web de comercio electrónico reside en la velocidad de carga de la página. Un sitio de comercio electrónico que se carga en 1 segundo tiene una tasa de conversión 2,5 veces mayor que un sitio que se carga en 5 segundos.

Además, las páginas que se cargan en 1 segundo tienen una tasa de conversión media de alrededor del 40%. Si el tiempo de carga aumenta a 2 segundos, la tasa de conversión cae al 34%. A los 3 segundos, la tasa de conversión es del 29% y alcanza un mínimo a los 6 segundos.

El análisis sugiere optimizar tu comercio electrónico para una velocidad de carga entre uno y dos segundos.

¿Cómo se puede alcanzar este nivel de rendimiento? La optimización del rendimiento es un proceso de mejora continua que afecta a varias áreas de un sitio web. Su valor estratégico es particularmente claro para el comercio electrónico, que generalmente consume mayores cantidades de recursos.

Para ayudar a los propietarios de comercios electrónicos a optimizar el rendimiento de sus sitios web, hemos elaborado una lista de comprobación esencial de las optimizaciones necesarias para mejorar el rendimiento y la velocidad de las páginas.

En resumen, ¿cuáles son los factores clave que hay que tener en cuenta al optimizar el rendimiento de tu sitio web de comercio electrónico? ¡Vamos a ello!

1. Elige una infraestructura de alojamiento y un stack técnico de vanguardia

Al elegir un servicio de alojamiento para tu sitio web de comercio electrónico, es esencial conocer el stack tecnológico que proporciona.

La primera decisión tiene que ver con el tipo de servicio de alojamiento. Hay varios tipos de alojamiento web, que difieren considerablemente en cuanto a infraestructura y servicios:

  • Alojamiento compartido
  • Alojamiento dedicado
  • Alojamiento VPS
  • Alojamiento en la nube
  • Alojamiento Administrado de WordPress

Dado que es imprescindible garantizar el máximo rendimiento de tu comercio electrónico, la infraestructura debe ser de alta velocidad. Esto excluiría el alojamiento compartido que, aunque puede ser barato (o incluso gratuito), no garantiza los estándares mínimos de rendimiento y seguridad de los que un sitio de comercio electrónico no puede prescindir para triunfar en el mercado.

Un servicio de alojamiento dedicado basado en VPS puede ser altamente personalizado y optimizado para el rendimiento. Sin embargo, requiere conocimientos SysAdmin (de administrador de sistemas), lo que puede resultar demasiado caro para una pequeña o mediana empresa. Un servicio de alojamiento en la nube puede proporcionar rendimiento y seguridad para un sitio web de comercio electrónico moderno y puede no requerir conocimientos técnicos avanzados.

Es fácil encontrar proveedores de servicios de alojamiento administrado para WordPress y WooCommerce si trabajas con WordPress. Esto significa que no serás responsable de la configuración y optimización del servidor, y que dispondrás de un servicio de soporte especializado y de una instalación y mantenimiento del sitio simplificados.

También es necesario dotar a tu sitio web de un stack técnico de última generación. La mayoría de los alojamientos web proporcionan un stack basado en el servidor web Apache y MySQL. Sin embargo, deberías considerar un stack tecnológico más moderno y de alto rendimiento, como Nginx y MariaDB.

Infraestructura de alojamiento y stack técnico de Kinsta

En Kinsta, creemos que hemos creado la mejor y más rápida solución de alojamiento administrado de WordPress disponible hoy en día sobre la Plataforma en la Nube de Google.

Regiones de Google Cloud
Regiones de Google Cloud (Fuente: Google)

Proporcionamos máquinas virtuales optimizadas para computación C3D y C2 en todos los planes, desde Starter hasta Enterprise y superiores, en las regiones en las que están disponibles. También aprovechamos la red de Nivel Premium de baja latencia de Google, disponible para todos nuestros clientes sin coste adicional.

Red Google Cloud
Red de Google Cloud (Fuente: Google)

Además, hemos construido un stack técnico rápido y sólido basado en Nginx, MariaDB, PHP 8.3, contenedor LXD, y nuestra integración de Cloudflare Enterprise. Este stack está disponible para todos nuestros clientes, independientemente de sus planes.

Consulta este post para saber por qué Kinsta es el alojamiento administrado de WordPress más rápido.

2. Utiliza versiones de PHP compatibles

Según W3Techs, en agosto de 2024

PHP es utilizado por el 76,1% de todos los sitios web de los que conocemos el lenguaje de programación del lado del servidor.

La versión 7 es utilizada por el 52,6% de todos los sitios web que utilizan PHP, la versión 8 por el 33,0%, y la versión 5 por el 14,2%.

Si gestionas un sitio web de comercio electrónico, necesitas saber qué versión de PHP utiliza tu sitio y por qué deberías preferir una versión compatible.

En resumen, PHP tiene un ciclo de vida de versiones, y cada versión principal suele recibir soporte durante dos años. Las versiones soportadas son las únicas que reciben actualizaciones de rendimiento y seguridad, por lo que utilizar una versión no soportada de PHP implica un menor rendimiento y mayores vulnerabilidades de seguridad en comparación con las versiones soportadas.

A partir de agosto de 2024, las versiones oficialmente soportadas de PHP son PHP 8.1, 8.2 y 8.3.

Versiones de PHP soportadas
Versiones de PHP soportadas (Fuente PHP.net)

Hemos realizado nuestras propias pruebas de velocidad con PHP 8.1, 8.2 y 8.3 y varios CMS y frameworks, y hemos descubierto que PHP 8.3 ha demostrado ser la versión PHP más rápida, proporcionando hasta un 52,20% más de rendimiento a los CMS y frameworks probados.

Versiones de PHP en Kinsta

En Kinsta, sólo proporcionamos versiones de PHP compatibles. Actualmente soportamos PHP 8.1, 8.2, 8.3.

Puedes cambiar rápida y fácilmente la versión PHP de tu sitio web de WordPress en MyKinsta. Navega a la sección de configuración de tu sitio web de WordPress y selecciona Herramientas en el menú de la izquierda. Aquí encontrarás varias herramientas disponibles para nuestros clientes. Desplázate hacia abajo en la página y encuentra el motor PHP. Haz clic en el botón Modificar y selecciona la versión de PHP que necesitas para tu sitio web.

Modificar motor PHP en MyKinsta
Modificar motor PHP en MyKinsta

3. Aprovechar la caché para mejorar el rendimiento

El caché es una porción de memoria que se utiliza para almacenar copias de recursos que se pueden servir en posteriores peticiones sin necesidad de descargar de nuevo la página completa. Existen varios tipos de caché, cada uno con una finalidad específica, pero los tipos de caché que nos interesan aquí son el caché del navegador y el caché de WordPress.

Cada respuesta del servidor debe proporcionar las cabeceras HTTP correctas para que el navegador sepa durante cuánto tiempo debe almacenar en caché una copia del recurso solicitado. Esto se hace estableciendo las cabeceras ETag y Expires en la petición HTTP.

WordPress tiene su propio sistema de caché. El objeto WP_Object_Cache permite reducir el número de peticiones a la base de datos: «El caché de objetos almacena todos los datos del caché en la memoria y hace que el contenido del caché esté disponible mediante una clave, que se utiliza para nombrar y recuperar posteriormente el contenido del caché»

Los usuarios de WordPress pueden instalar un plugin de caché de terceros para WordPress. Herramientas como W3 Total Cache y WP Super Cache te permiten gestionar el caché de WordPress de forma granular. Pueden ser muy útiles si optas por una solución de alojamiento compartido o cuando el alojamiento web no proporciona soluciones de gestión del caché más eficientes.

Estas herramientas son complicadas de configurar y pueden requerir conocimientos que no todos los propietarios de sitios tienen. En resumen, necesitas una forma sencilla de gestionar tu caché.

Plugins de caché en la biblioteca de plugins de WordPress
Plugins de caché en la biblioteca de plugins de WordPress

En cuanto al comercio electrónico, puede que también quieras excluir del caché páginas específicas, como mi cuenta y el proceso de pago. Esto es fundamental para garantizar una experiencia de compra impecable a los clientes de tu sitio web. Pero, ¿cómo puedes hacerlo?

Gestión del caché en Kinsta

La gestión del caché puede resultar desalentadora, especialmente si careces de conocimientos técnicos. En Kinsta, sin embargo, gestionar el caché es fácil, y todos los ajustes están convenientemente reunidos en una única sección de tu panel MyKinsta.

La diferencia clave entre el caché de Kinsta y los plugins de WordPress de terceros es que el caché de Kinsta funciona a nivel de servidor.

En MyKinsta, navega hasta Sitios WordPress y selecciona tu sitio web. En la página de configuración del sitio, haz clic en el elemento de menú Caché de la izquierda y selecciona la pestaña Caché del servidor. Aquí, puedes borrar el caché y cambiar la caducidad del caché.

Cambiar la caducidad del caché en MyKinsta
Cambiar la caducidad del caché en MyKinsta

En Kinsta no se permiten los plugins de caché, lo que parece una contradicción con lo que hemos dicho en la sección anterior. Sin embargo, esto se debe a que Kinsta se encarga del caché en el servidor por ti, ofreciendo así un mejor rendimiento y una gestión más sencilla.

Específicamente para sitios web de WooCommerce y EDD, Kinsta omite automáticamente el caché cuando se detectan cookies de woocommerce_items_in_cart o edd_items_in_cart. Esto permite una experiencia de compra sin problemas para todos tus clientes.

Los usuarios de Kinsta también pueden gestionar el caché directamente desde su panel de WordPress gracias al plugin Kinsta MU, que se instala automáticamente en todos los nuevos sitios web WordPress alojados en Kinsta.

Plugin Kinsta MU WordPress
Configuración del plugin de WordPress Kinsta MU

En la pantalla de caché de Kinsta, puedes realizar las siguientes acciones:

  • Borrar todas los cachés
  • Borrar el caché del sitio
  • Borrar caché de objetos
  • Borrar caché CDN
  • Añadir URL personalizadas para purgar
  • Activar/desactivar autopurga

El plugin de caché de Kinsta también proporciona un botón en la barra de administración que te permite borrar:

  • Toda el caché
  • Caché del servidor (caché de página completa)
  • Caché de objetos
  • Caché CDN

Otro tipo de caché es el caché CDN. Sigue leyendo para saber más sobre él.

4. Utiliza una Red de Entrega de Contenidos

Una CDN es una red de servidores que almacenan recursos estáticos como imágenes, scripts y hojas de estilo para que puedan ser entregados a los visitantes del sitio desde la ubicación geográfica más cercana.

Una CDN suele proporcionar servicios y funcionalidades que pueden mejorar significativamente el rendimiento y la seguridad de un sitio web. En lo que respecta al rendimiento, una CDN puede ayudarte con lo siguiente:

  • Reducir la latencia de la red y el tiempo total de carga de un sitio web
  • Reducir el Tiempo hasta el Primer Byte (TTFB)
  • Aprovechar las tecnologías de caché más avanzadas
  • Reducir el tamaño de la página con un servicio de compresión de datos como GZIP o Brotli y la optimización automática de imágenes
  • Reducir los costes de ancho de banda
  • Mejorar la escalabilidad
  • Mejorar el SEO

CDN de Kinsta

Kinsta proporciona una integración gratuita de Cloudflare CDN en todos nuestros planes de alojamiento. Esto significa que puedes aprovechar las funciones de Cloudflare para empresas de forma totalmente gratuita, independientemente del plan al que te hayas suscrito.

Cloudflare proporciona un servicio de almacenamiento en caché de recursos estáticos que puede aumentar significativamente el rendimiento de los sitios web de comercio electrónico. Esto es especialmente útil cuando tu público objetivo está distribuido por una amplia zona geográfica.

Gracias a nuestra integración con Cloudflare, podemos proporcionar a todos nuestros clientes, independientemente de su plan, las siguientes funciones empresariales:

Con Kinsta, puedes aprovechar todas estas funciones activando la CDN de Cloudflare en la sección Caché de tu panel de control MyKinsta, donde puedes gestionar Edge Caching y CDN caching.

Puedes activar Caché móvil, Borrar caché y Borrar caché de URL desde la pestaña Edge Caching.

Opciones de Edge caching en MyKinsta
Opciones de Edge caching en MyKinsta

En la pestaña CDN, puedes Borrar caché CDN, optimizar imágenes y excluir archivos específicos de la caché CDN.

Opciones de caché CDN en MyKinsta
Opciones de caché CDN en MyKinsta

5. Optimizar imágenes

La optimización de las imágenes es vital para la velocidad de la página. Optimizar imágenes no es complicado para los principiantes, pero aún así necesitas algunos conocimientos básicos.

Puedes optimizar las imágenes de varias formas. En primer lugar, debes identificar el formato de imagen que mejor se adapte a las características de la imagen. Además de los formatos tradicionales JPEG, PNG y GIF, los formatos de imagen optimizados para la web, como WebP y Avif, proporcionan altos niveles de compresión con una calidad superior. WordPress admite ambos formatos de forma predeterminada, por lo que puedes utilizarlos libremente en tu sitio web de comercio electrónico.

Soporte del formato AVIF
Soporte del formato AVIF (Fuente: caniuse)

Una vez elegido el formato de imagen adecuado, puedes pasar a la compresión. Tienes dos tipos de compresión de imagen: con pérdidas y sin pérdidas. La compresión con pérdidas es más eficaz para reducir el tamaño del archivo. Sin embargo, debes tener en cuenta la pérdida de información y, por tanto, la reducción de la calidad de la imagen.

Si la calidad de la imagen es crítica para tu sitio web, la compresión sin pérdidas puede ser la opción adecuada, aunque el ahorro de tamaño puede ser insignificante. Para comprimir imágenes sin pérdida de información, necesitarás herramientas como FileOptimizer o ImageOptim para WordPress o programas de edición fotográfica como Photoshop. Otra opción es la compresión Gzip.

Optimizar imágenes con Kinsta

Gracias a nuestra integración con Cloudflare, Kinsta proporciona optimización de imágenes gratuita. Esto significa que tus imágenes PNG, GIF y JPEG se convierten automáticamente al formato WebP para mejorar la velocidad y el rendimiento de tu sitio web sin necesidad de utilizar un plugin de terceros.

Puedes activar la optimización automática de imágenes en MyKinsta en Caché > CDN > Optimización de imágenes.

Optimización de imágenes en MyKinsta
Optimización de imágenes en MyKinsta

Haz clic en el botón Configuración en el cuadro Optimización de imagen y selecciona el tipo de optimización que necesitas.

Optimización de imagen en MyKinsta
Optimización de imagen en MyKinsta

6. Reducir el tamaño de los recursos HTML, CSS y JavaScript

Puedes reducir la cantidad de datos que descarga el navegador para mostrar una página en pantalla mediante la minificación, compresión y almacenamiento en caché de los recursos HTML, CSS y JavaScript.

La minificación del código es el proceso de eliminar los caracteres innecesarios del código fuente. Los comentarios y los espacios en blanco son útiles en el desarrollo, pero el navegador no los necesita para renderizar la página. Con la minificación del código, puedes reducir el tamaño de los recursos HTML, CSS y JS hasta en un 50% o más.

Sin embargo, vale la pena señalar que Cloudflare ha anunciado recientemente la retirada de su función Auto Minify:

Las razones por las que planeamos eliminar la función son múltiples, pero se reducen al hecho de que es una función de rendimiento que se utiliza con el fin de reducir el peso de la página, y no es tan eficiente para hacer esto como otros proyectos en los que Cloudflare está trabajando, como mejorar la compresión.

Puedes reducir el tamaño de los archivos transmitidos para aumentar la velocidad de la página y utilizar menos ancho de banda mediante la compresión. La compresión GZIP te permite comprimir un conjunto de datos en bruto sin pérdida de información. Se puede comprimir cualquier tipo de archivo, pero GZIP funciona mejor con recursos basados en texto como HTML, CSS y JS. Otro tipo de compresión es Brotli, que es más reciente y eficaz que GZIP y es compatible con los principales navegadores.

Soporte de Brotli en los navegadores modernos
Soporte de Brotli en los navegadores modernos (Fuente: caniuse)

Compresión de recursos en Kinsta

Aunque hay varios pasos para activar la compresión Brotli en WordPress, los clientes de Kinsta no tienen que hacer absolutamente nada para aprovechar la potencia de este algoritmo de compresión. Gracias a nuestra integración con Cloudflare, todos los sitios web alojados en Kinsta utilizan Brotli por defecto.

Puedes comprobar el tipo de compresión en el inspector de tu navegador. Selecciona un activo en la pantalla Red > Todos y busca el encabezado content-encoding. Esto proporciona el tipo de compresión activado en tu sitio web. br significa Brotli.

Brotli está activado por defecto en todos los sitios web alojados en Kinsta
Brotli está activado por defecto en todos los sitios web alojados en Kinsta

7. Eliminar los recursos que bloquean la renderización

Puedes eliminar el JavaScript que bloquea la renderización añadiendo los atributos async y defer a las etiquetas <script>. Esto puede mejorar lo que denominamos First Contentful Paint. Más concretamente:

  • Los scripts con el atributo async se ejecutan de forma asíncrona en cuanto se cargan. Una vez cargado el script, el navegador hace una pausa, analiza el HTML y ejecuta el script.
  • Los scripts con el atributo defer sólo se ejecutan una vez finalizado el análisis sintáctico de la página.
El mensaje Eliminar recursos que bloquean la renderización en PageSpeed Insights
El mensaje Eliminar recursos que bloquean la renderización en PageSpeed Insights

También puedes eliminar el CSS que bloquea la renderización dando prioridad a los recursos por encima de la página, añadiendo CSS inline, utilizando el atributo media y usando JavaScript para cargar de forma asíncrona o aplazando la carga del CSS.

Todo esto puede ser un poco complicado si no eres un desarrollador frontend, pero puedes utilizar un plugin de WordPress que haga todo el trabajo sucio por ti.

Además, a partir de WordPress 6.3, puedes añadir atributos async y defer durante el registro del script y, a partir de WordPress 6.4, estos atributos se han implementado para los scripts frontend en el core de WordPress y en los temas incluidos.

8. Optimizar CSS

Hay que hacer un comentario específico sobre las hojas de estilo, que pueden hacer que una página web sea considerablemente más pesada.

Cuando el navegador accede a una etiqueta <link>, deja de descargar otros recursos y de analizar la página para descargar y analizar el archivo CSS. Además, debes prestar atención a algunas peculiaridades de las hojas de estilo:

  • Se pueden enlazar varias hojas de estilo externas a la misma página.
  • El enlace a otras hojas de estilo puede proceder de otra hoja de estilo, por lo que puede no ser visible en el código HTML.
  • Una hoja de estilo que no esté bien diseñada puede contener declaraciones que no sean necesarias en todas las páginas del sitio. Esto puede provocar un aumento del tamaño del archivo y tiempos de procesamiento más largos.
  • Es cierto que las hojas de estilo se almacenan en caché, pero siguen bloqueando la renderización durante un tiempo.

Esto lleva a la necesidad de optimizar las hojas de estilo y realizar un análisis exhaustivo mediante herramientas de desarrollo del navegador, como Lighthouse de Chrome y Pagespeed Insights.

Una vez realizado el análisis, tendrás que identificar las soluciones más adecuadas para reducir el impacto de las hojas de estilo en el rendimiento. La minificación y la compresión son sólo dos de las opciones disponibles. Otras medidas incluyen el almacenamiento en caché de archivos mediante la configuración de cabeceras Expires y ETag, hacer la mejor elección del tema y plugins del sitio, eliminar el código CSS innecesario, optimizar las fuentes web y otras medidas de optimización del rendimiento.

Sin embargo, la mejor opción para un desarrollador siempre es diseñar sus estilos siguiendo las mejores prácticas CSS desde el principio.

9. Reducir el número de peticiones HTTP

Las imágenes, los scripts y las hojas de estilo son recursos fundamentales para un sitio web. Sin embargo, hay otros recursos menos esenciales pero a veces críticos para el propósito específico del sitio, como el vídeo, el contenido multimedia y las fuentes web. Cada recurso genera una petición HTTP al servidor web que lo aloja, y cada petición requiere tiempos de procesamiento y respuesta que se suman unos a otros, aumentando el tiempo total de carga de la página.

Por eso es fundamental minimizar el número de peticiones HTTP al servidor.

De nuevo, varias herramientas de análisis del rendimiento pueden ayudarte a determinar el número de peticiones HTTP. Las herramientas de desarrollo del navegador y las herramientas online como Pingdom y GTMetrix pueden ser aliados valiosos cuando se trata de problemas de rendimiento.

Entre las muchas soluciones que un desarrollador puede aplicar para reducir el número de peticiones HTTP, la más eficaz es eliminar de la página los recursos innecesarios.

Los usuarios de WordPress deberían eliminar todos los plugins que no sean estrictamente necesarios o, al menos, cargar selectivamente los plugins que no sean necesarios en todo el sitio web. También deberían elegir los plugins más fiables y ligeros disponibles y evitar los llamados plugins anulados.

Otra opción es concatenar todos los archivos CSS en una única hoja de estilos.

Otras medidas que puedes tomar para reducir el número de peticiones HTTP son cargar los recursos de forma perezosa, utilizar fuentes del sistema siempre que sea posible, minimizar las peticiones HTTP de terceros, como los vídeos de YouTube, y utilizar sprites CSS para iconos y logotipos.

Un ejemplo de CSS Sprites de Amazon.
Un ejemplo de CSS Sprites de Amazon. CSS se utiliza para «apuntar» sólo a una parte específica de la imagen combinada.

10. Monitoriza el rendimiento de tu sitio web de comercio electrónico con una herramienta APM

¿Has utilizado alguna vez una herramienta de supervisión del rendimiento para tu sitio web de comercio electrónico? Si no es así, deberías. Una herramienta de monitorización del rendimiento, o APM, te permite medir el tiempo de ejecución de cada uno de los procesos de tu sitio web, como los procesos PHP, las consultas a la base de datos, las llamadas AJAX y mucho más.

Conocer el proceso o plugin que está ralentizando o rompiendo tu sitio web de comercio electrónico es crucial, porque por cada segundo de retraso en la carga de la página, pierdes ventas, por no mencionar que esto podría arruinar tu imagen de marca.

Nadie quiere confiar los datos de su tarjeta de crédito a un sitio web que no funciona como se espera. Por esta razón, utilizar una herramienta APM es crucial.

Existen varias herramientas APM en el mercado, como New Relic, LogRocket, Dynatrace y muchas otras. Debes comprobar cuáles son las más populares y elegir la que mejor se adapte a tu negocio en términos de costes y funciones.

Kinsta APM es gratuito para todos los planes de WordPress

La herramienta Kinsta APM te ayuda a identificar los cuellos de botella de rendimiento PHP en tu sitio de WordPress sin suscribirte a servicios de monitorización de terceros como New Relic. Es gratuita para todos los planes de WordPress y está integrada de forma nativa en MyKinsta.

Para acceder a la herramienta de monitorización del rendimiento de Kinsta, selecciona tu sitio de  WordPress en MyKinsta y busca el elemento APM en el menú de la izquierda.

Activar la herramienta APM de Kinsta en MyKinsta
Activar la herramienta APM de Kinsta en MyKinsta

Activa APM y selecciona el tiempo de monitorización. La herramienta APM consume recursos del servidor y puede afectar al rendimiento de tu sitio web, por lo que tal vez quieras habilitarla durante un tiempo limitado.

Selecciona el tiempo de monitorización
Selecciona el tiempo de monitorización

Una vez habilitada, la herramienta APM supervisa los procesos de tu sitio web y proporciona una gran cantidad de datos organizados en cuatro pestañas:

Transacciones: Esta pantalla muestra un diagrama con el tiempo total de transacción de los procesos PHP, MySQL, Redis y Externos, y una tabla con las transacciones más lentas de tu sitio web. Puedes seleccionar una entrada específica para ver los detalles de la transacción.

Transacciones de Kinsta APM
Transacciones de Kinsta APM

WordPress: Esta pantalla muestra dos tablas: Plugins de WordPress más lentos y Hooks de WordPress más lentos. De nuevo, cuando hagas clic en una entrada específica, se te dirigirá a una tabla con los detalles de la transacción.

Plugins y hooks de WordPress más lentos
Plugins y hooks de WordPress más lentos

Base de datos: En esta pantalla, puedes encontrar las consultas a la base de datos más lentas ordenadas por duración. Si utilizas el add-on Redis de Kinsta, encontrarás una lista de los caché Redis más lentos registrados.

Consultas a la base de datos más lentas en MyKinsta
Consultas a la base de datos más lentas en MyKinsta

Externa: Esta pantalla muestra una lista de las consultas externas más lentas.

Peticiones externas más lentas
Peticiones externas más lentas

Puedes profundizar en cualquier petición con los detalles Span y Stack trace.

Detalles Span y Stack trace de una petición externa
Detalles Span y Stack trace de una petición externa

Son muchos datos para solucionar cualquier problema de rendimiento y optimizar la velocidad y el rendimiento de tu sitio web de comercio electrónico.

Si quieres profundizar en la herramienta Kinsta APM, consulta los siguientes recursos:

Resumen

Este artículo proporciona una lista de comprobación de las optimizaciones esenciales que puedes implementar para mejorar el rendimiento de tu sitio web de comercio electrónico. Como alojamiento administrado de WordPress construido sobre Google Cloud Platform, nuestras recomendaciones se dirigen principalmente a los propietarios de sitios web de comercio electrónico basados en WordPress y WooCommerce. Sin embargo, pueden seguir siendo útiles independientemente de la plataforma que esté detrás de tu sitio web de comercio electrónico.

Algunas optimizaciones están directamente relacionadas con el servicio de alojamiento; otras pueden implementarse mediante plugins de WordPress o servicios de terceros.

Kinsta proporciona opciones de configuración para la gestión del caché, la optimización de imágenes, la compresión de recursos, la supervisión del rendimiento y mucho más, lo que te permite optimizar tu sitio web de WordPress + WooCommerce para obtener el mejor rendimiento.

Si quieres profundizar más, consulta las siguientes guías y tutoriales:

Ahora te toca a ti. ¿Nos hemos dejado algo? ¿Tienes más consejos que compartir con nuestros lectores para mejorar el rendimiento de un sitio web de comercio electrónico? Deja un comentario a continuación y únete a la conversación.

Carlo Daniele Kinsta

Carlo es un diseñador y desarrollador de front-end freelance. Cuando escribe artículos y tutoriales, Carlo se ocupa principalmente de los estándares web, pero cuando juega con sitios web, su mejor compañero de trabajo es WordPress.