Cómo medir y mejorar la velocidad del sitio de comercio electrónico (11 consejos) y por qué es crucial para la optimización de la tasa de conversión

Los sitios web de carga lenta tienen una clasificación deficiente, generan menos ingresos y su ejecución cuesta más. Independientemente del negocio en el que se encuentre, si tiene presencia en línea, mejorar la velocidad de su sitio es una de las cosas más beneficiosas que puede hacer para reducir su tasa de rebote y aumentar la tasa de conversión de comercio electrónico.

Si está en el espacio del comercio electrónico, es aún más esencial dedicar tiempo y recursos para lograr la velocidad más rápida posible en el sitio. La investigación muestra que la velocidad del sitio afecta directa y significativamente la clasificación de los productos, las conversiones y el valor por visitante.

Pero muchos minoristas no están dispuestos a comprometerse a realizar cambios significativos. La optimización de la velocidad del sitio puede parecer complicada. Hay muchas áreas diferentes que requieren atención, muchas de las cuales requieren habilidades de codificación específicas que la mayoría de la gente no posee.

Si sientes lo mismo, no te preocupes. En esta guía, cubriremos todo lo que necesita saber, desde la compresión de imágenes hasta las CDN, la optimización de la base de datos del lado del servidor y más. Una vez que se haya familiarizado con los conceptos básicos, se sentirá lo suficientemente seguro y con los conocimientos necesarios para enviar la velocidad de su sitio directamente a la estratosfera. Incluso si no tiene ningún conocimiento de optimización o desarrollo técnico.

Esto es lo que puedes encontrar en esta publicación:

¿Qué es la velocidad del sitio?
¿Por qué es importante la velocidad del sitio?
Cómo comprobar la velocidad actual de su sitio: explicación de los resultados de Google PageSpeed ​​Insights
Principales métodos respaldados por datos para aumentar la velocidad de la página
1. Verifique y mejore la velocidad de su proveedor de alojamiento
2. Optimizar imágenes
3. Habilitar el almacenamiento en caché del navegador
4. Minimice HTML, JavaScript y CSS
5. Aproveche las AMP (páginas móviles aceleradas) y las PWA (aplicaciones web progresivas)
6. Elimine los complementos de WordPress de bajo rendimiento
7. Utilice una red de distribución de contenido
8. Optimice el tiempo de respuesta de su servidor
9. Utilice la compresión siempre que sea posible
10. Cargue archivos de forma asincrónica siempre que sea posible
11. Reducir redireccionamientos
Herramientas para ayudar a aumentar la velocidad de su sitio
¿Listo para mejorar la velocidad de su sitio de comercio electrónico?

¿Suena bien? ¡Vamos a profundizar entonces!

¿Qué es la velocidad del sitio?

Hay bastantes malentendidos comunes cuando se trata de la velocidad del sitio. Antes de sumergirnos en el meollo de la publicación, definamos algunos términos clave.

En primer lugar, es importante distinguir entre "velocidad de la página" y "velocidad del sitio". La velocidad de la página es el tiempo que lleva cargar una sola página específica en su sitio web. La velocidad del sitio es la velocidad media de una muestra de páginas de su sitio.

En muchos sentidos, esta distinción es arbitraria, pero vale la pena comprenderla para evitar confusiones. Esta publicación tiene como objetivo brindarle consejos de optimización específicos de la página y de todo el sitio. Al implementar las mejores prácticas de página (que informarán cómo diseñar todas sus páginas en el futuro), mejorará la velocidad general de su sitio, que es la métrica crucial.

La velocidad del sitio se puede medir en términos de tiempo de carga de la página , el tiempo que tarda una página en mostrarse por completo, o el tiempo hasta el primer byte , el tiempo que tarda un navegador en recibir el primer byte de datos de un servidor. En términos generales, el tiempo de carga de la página (y variaciones similares) es la medida más precisa y más utilizada, aunque el tiempo hasta el primer byte también es una cifra útil en ciertos contextos.

¿Por qué es importante la velocidad del sitio?

La velocidad del sitio afecta a su sitio web de muchas formas cruciales relacionadas con las clasificaciones de búsqueda, el compromiso, las conversiones y más. Pero muchos webmasters, entre ellos los minoristas de comercio electrónico, pasan por alto este aspecto vital de sus sitios.

Un tiempo de carga lento tiene un efecto directo en su balance final. Fuente

Mejorar la velocidad de su sitio es una de las formas más seguras de obtener una ventaja competitiva. Echemos un vistazo rápido a por qué es tan importante:

La velocidad del sitio afecta las clasificaciones de búsqueda

La velocidad del sitio es un factor de clasificación importante para Google. El propio Google lo ha reiterado en muchas ocasiones. Y numerosos análisis independientes confirman que la velocidad del sitio es una de las áreas más importantes para la optimización cuando se trata de SEO.

Como dice Edwin Toonen, escribiendo para Yoast: “Ni siquiera tienes que escuchar con mucha atención porque la gente de SEO lo está gritando desde los tejados: la velocidad del sitio lo es todo. No pasa un día sin un artículo nuevo, un informe técnico, un representante de Google o un experto en SEO que nos diga que optimizar la velocidad es una de las cosas más importantes que puede hacer en este momento. ¡Y tienen razón, por supuesto! "

La velocidad del sitio afecta la tasa de rebote

Es más probable que las personas abandonen su sitio si tarda mucho en cargarse. Esta actividad no solo es una señal negativa para Google (lo que indica una baja participación del cliente), sino que también afecta directamente su tasa de conversión.

Si los clientes no se quedan porque su sitio tarda demasiado en cargarse, no tienen la oportunidad de ver su maravillosa página optimizada para conversiones y sus excelentes productos.

La velocidad del sitio afecta el valor del cliente

La investigación muestra que el valor por página vista aumenta junto con la velocidad del sitio. Y no estamos hablando solo de unos pocos puntos porcentuales aquí. Reducir el tiempo de carga de su sitio a un segundo puede aumentar su valor por página vista hasta en un 100%.

Reducir la velocidad de su sitio por debajo del uno por ciento puede aumentar el valor por página vista hasta en un 100%. Fuente

Experimentar la baja velocidad del sitio tiene efectos psicológicos negativos

Un sitio web de carga lenta genera frustración para los clientes y comunica una falta de profesionalismo de su parte.

Las personas sienten un estrés tangible cuando una página tarda demasiado en cargarse. Y una vez que un posible cliente asocia su marca con esa experiencia negativa, es más probable que la vean mal en el futuro.

Por el contrario, un sitio de carga rápida brinda a los clientes una experiencia de usuario positiva (¡consulte estos 11 consejos de UX!) Y comunica la profesionalidad y la calidad de su tienda.

Cómo comprobar la velocidad actual de su sitio: explicación de los resultados de Google PageSpeed ​​Insights

Existen numerosas herramientas disponibles para probar la velocidad de su sitio. Algunos se centran en áreas específicas, como la velocidad de su proveedor de DNS o su tiempo hasta el primer byte (TTFB), mientras que otros son más completos. Como punto de partida, no hay mejor opción que Google PageSpeed ​​Insights.

A continuación, le indicamos cómo darle a su sitio un examen médico completo y qué significan los resultados:

1. Diríjase a Google PageSpeed ​​Insights y escriba su URL en la barra de texto. Haga clic en "Analizar" para obtener sus resultados. En este tutorial, usaremos Zappos como ejemplo. Google PageInsights, posiblemente la mejor herramienta disponible para probar la velocidad del sitio, es completamente gratuito y muy completo.

2. Junto con un resultado general incluido en la parte superior de la página, que clasifica su página como lenta, promedio o media, se le proporcionarán tres conjuntos de resultados tanto para dispositivos móviles como para computadoras de escritorio:

• Datos de campo : se basan en datos históricos y se derivan de una muestra de usuarios que han sido rastreados por Google. Es útil porque le permite ver problemas persistentes que pueden haber surgido en el pasado, no solo en un caso específico de prueba. La barra multicolor debajo le muestra cómo se compara su página con otras páginas en el Informe de experiencia del usuario de Chrome (todas las páginas sobre las que Google tiene datos).
• Resumen de origen (no se muestra automáticamente) : el resumen de origen, en el que debe hacer clic para expandir, muestra los datos promedio de su sitio como un todo (no una página individual). "Origen" se refiere a la URL base.
• Datos de laboratorio : estos son los resultados inmediatos de su página web en función de su rendimiento cuando hizo clic en "Analizar". Estos son resultados actuales extraídos del desempeño momentáneo, sin ningún otro dato tomado en cuenta. El puntaje general de velocidad del sitio en la parte superior de la página se basa en estos datos de laboratorio.

La sección "Datos de laboratorio" tiene el desglose más detallado de las métricas de velocidad del sitio.

3. No olvide que hay dos pestañas (menú azul en el encabezado), una para dispositivos móviles y otra para computadoras de escritorio, que muestran datos diferentes. A menudo, necesitará aplicar las sugerencias de optimización asociadas con cada uno de forma individual.

4. En cada una de las secciones, hay dos medidas de velocidad clave (FCP y FID) junto con cinco medidas independientes en la sección "Datos de laboratorio":

• First Contentful Paint FCP : en un contexto de rendimiento web, el término "primera pintura" significa el primer elemento web que es visible para un usuario del navegador. La "primera pintura con contenido" es cuando aparece la primera pieza de contenido coherente. La definición de "contenido" aquí es cualquier cosa que se defina discretamente en el modelo de objeto del documento, esencialmente un elemento individual y separado que forma parte de la jerarquía de la página, como una imagen o un bloque de texto. Un contenido es cualquier cosa que los usuarios de la web puedan "consumir". De esta manera, se distingue de la "primera pintura", que podría ser algo tan simple como un cambio de fondo o un solo píxel.
• Retraso de la primera entrada (FID): el retraso de la primera entrada es una medida de la rapidez con la que su sitio responde. Cuando un visitante interactúa con su sitio (haciendo clic en un enlace, agrandando una imagen, seleccionando una opción de producto, etc.), puede tomar más tiempo recibir una respuesta debido a los procesos del navegador en segundo plano que efectivamente "deshabilitan" los elementos interactivos del sitio. FID se basa en datos reales del usuario recopilados por Google, por lo que no se incluye en los datos de laboratorio.
• Primera pintura significativa: esencialmente una medida de cuándo los espectadores pueden comenzar a consumir contenido de manera realista. La primera pintura significativa se ha producido cuando se han cargado tanto el contenido principal de la mitad superior de la página como las fuentes web. Google ha declarado que es su principal métrica de experiencia de usuario para la velocidad del sitio.
• Índice de velocidad: el tiempo que tarda su página en cargarse por completo en un sentido visual. Se basa en el momento en que la representación del navegador deja de cambiar en una comparación cuadro por cuadro.
• Primera inactividad de la CPU: la primera inactividad de la CPU significa el momento en que un sitio web es interactivo al menos en cierto grado. Puede que no todos los elementos interactivos estén listos para funcionar, pero varios lo estarán.
• Tiempo para interactuar: el tiempo que tarda el sitio en cargarse completamente y ser completamente interactivo, listo para responder a cualquier acción del visitante.
• Retraso máximo de la primera entrada potencial: la cifra prevista para el FID más alto posible si se probara. Esta cifra se basa en datos de laboratorio, no en datos reales.

5. Debajo de estas tres secciones hay una sección titulada "oportunidades" , junto con la cantidad de tiempo que pueden reducir la velocidad de su sitio. Este es el verdadero meollo de la prueba: las sugerencias prácticas para mejorar la velocidad del sitio. Puede ampliar cada sugerencia para obtener instrucciones de implementación.

Echemos un vistazo a algunos ejemplos de la captura de pantalla a continuación (veremos la mayoría de estos con más detalle en la sección a continuación):

La sección de "oportunidades" es donde se le brindan sugerencias concretas para aumentar la velocidad de su sitio.

• Minificar JavaScript: la minificación es un proceso para comprimir archivos que contienen código (HTML, CSS, JavaScript, etc.) para que puedan transferirse de los servidores a los navegadores más rápidamente.
• Aplazar las imágenes fuera de la pantalla: aplazar las imágenes fuera de la pantalla implica retrasar el tiempo de carga de las imágenes que no están en la mitad superior de la página, lo que reduce el tamaño de la primera solicitud del servidor y proporciona un tiempo de carga inicial general más rápido. Una vez que se hayan cargado todas las imágenes de la mitad superior de la página, se renderizará el resto de las imágenes de la página.
• Eliminar CSS no utilizado: es muy común que las hojas de estilo .css incluyan grandes cantidades de código superfluo. Eliminar este código puede reducir el tamaño del archivo CSS. Incluir todo el CSS en un archivo también puede reducir la cantidad de tiempo que tarda un navegador en interpretar los datos.
• Sirva imágenes en formatos de próxima generación: los formatos de imagen como JPEG 2000, JPEG XR y WebP (junto con algunos otros) brindan una mejor compresión que las alternativas sin sacrificar la calidad.
• Reduzca el tiempo de respuesta del servidor (TTFB): el tiempo de respuesta del servidor se puede acelerar de varias maneras, incluso optimizando su CMS y optando por un proveedor de alojamiento más rápido.
• Habilitar la compresión de texto: cuando habilita la funcionalidad gzip en su servidor, el texto de los archivos se comprime, lo que reduce su tamaño y acelera la transferencia. A continuación, el navegador puede procesar los archivos comprimidos.

6. Finalmente, debajo de la sección de “oportunidades” se encuentra la sección de “diagnósticos” y auditorías aprobadas ”. Estos cubren (respectivamente) oportunidades de velocidad adicionales basadas en las mejores prácticas y criterios web que aprobó.

En las secciones siguientes, puede ver aún más sugerencias para mejorar la velocidad del sitio, junto con las auditorías que ha pasado (excelente para verificar si un cambio se ha implementado correctamente).

Google PageSpeed ​​Insights tiene documentación instructiva y clara sobre todas sus funciones y sugerencias, y es un gran recurso si tiene más dudas.

¿Quieres más información como esta?

Obtenga consejos semanales de comercio electrónico, estrategias y conocimiento líder de la industria, directamente en su bandeja de entrada.

el He leído la política de privacidad y acepto los términos y condiciones del boletín.

Seleccione esta casilla de verificación para continuar

¡Guau! Te acabas de registrar. Revise su bandeja de entrada para confirmar la suscripción.

¿Qué pasa con otras herramientas?

A pesar de todas sus características, PageSpeed ​​Insights no es perfecto.

Un área en la que tropieza es en relación con el área geográfica. Se desconoce la ubicación del servidor de prueba, por lo que es posible que los resultados no sean uniformes. Si, por ejemplo, su servidor está en el Reino Unido y el servidor de prueba está en la costa oeste de los EE. UU., Los resultados serán más rápidos para alguien que visite su sitio en el país anterior.

Utilice Pingdom y GTmetrix, los cuales le permiten establecer la ubicación del servidor de prueba, para complementar la imagen proporcionada por PageSpeed ​​Insights.

Principales métodos respaldados por datos para aumentar la velocidad de la página

Bien, profundicemos en algunos consejos prácticos.

Estos son los diez pasos principales que puede seguir para asegurarse de que su sitio se cargue en un abrir y cerrar de ojos:

1. Verifique y mejore la velocidad de su proveedor de alojamiento

Versión corta: si bien hay cambios positivos que puede realizar en sus servidores, y puede ser beneficioso pasar de un plan compartido a uno dedicado, a veces solo necesita cambiar de proveedor. Antes de pasar a las tareas que están bajo su control, verifique la calidad del servicio de su proveedor.

Si los servidores de su proveedor de alojamiento son lentos, poco puede hacer para solucionar el problema. Fuente

Utilice una herramienta como Bitcatcha para probar la velocidad del servidor de alojamiento de su sitio web y compararlo con otras empresas.

Si su proveedor de alojamiento es lento, no hay mucho que pueda hacer al respecto. Es posible que deba considerar cambiarse a un nuevo proveedor. Si está ejecutando una tienda en línea, generalmente es beneficioso cambiar a un proveedor de alojamiento dedicado o administrado con experiencia en comercio electrónico.

Estas son las diferencias clave entre los planes de alojamiento en términos de velocidad:

• Alojamiento compartido: el alojamiento compartido es la forma de alojamiento más económica y lenta. Su sitio web se almacenará en un servidor junto con los sitios web de otros usuarios. La gran desventaja de un arreglo como este es que todos los recursos del servidor, particularmente la CPU y la RAM, también se compartirán. Esto puede afectar negativamente la velocidad del sitio y puede tener consecuencias particularmente negativas para sitios más grandes que requieren mucha potencia de procesamiento.
• Servidor privado virtual (VPS): un servidor privado virtual es similar en muchos aspectos a un servidor compartido. Varios sitios están alojados en un solo servidor, pero están separados por una barrera virtual, recreando de hecho lo que sería tener su propio servidor. El principal beneficio de esto es que todos los recursos de su servidor están delimitados: no hay posibilidad de que uno de sus compañeros de piso use toda el agua caliente y lo deje drogado y seco. Los servidores privados virtuales también le permiten un mayor grado de libertad sobre la administración del servidor. Además, si necesita más espacio, puede comprarlo.
• Alojamiento dedicado: el alojamiento dedicado es el siguiente paso desde el alojamiento VPS. Con un plan dedicado, alquilará el servidor, que se utilizará exclusivamente para ejecutar su sitio. También tendrá un control total de administrador y raíz (incluida la elección del sistema operativo y la configuración de seguridad) que pueden hacer posibles optimizaciones técnicas de velocidad del sitio del servidor. El alojamiento dedicado es ideal para sitios más grandes y empresas con equipos de tecnología dedicados.

En términos generales, si está ejecutando un sitio de comercio electrónico, querrá optar por un alojamiento VPS o dedicado.

Estos son algunos de los proveedores mejor calificados para minoristas en línea:

SiteGround: SiteGround tiene varios planes dedicados para plataformas de comercio electrónico, incluidos Magento, WooCommerce y PrestaShop.

Liquid Web: una de las propuestas principales de Liquid Web es un servicio al cliente superior. La empresa ofrece acceso a asesores las 24 horas del día, los 7 días de la semana, a menudo con un tiempo de respuesta de menos de un minuto. Se ofrecen varios planes específicos de comercio electrónico (incluido el alojamiento dedicado para WooCommerce) y es una excelente opción para los minoristas pequeños y medianos que esperan escalar en el futuro.

Alojamiento InMotion: InMotion es muy popular entre los minoristas de comercio electrónico y es una de las opciones disponibles con mejor precio.

Rackspace: Rackspace es una de las principales soluciones para el comercio electrónico empresarial, que ofrece una gama de soluciones dedicadas y alojadas en la nube. El servicio al cliente y la infraestructura de seguridad se encuentran entre los mejores de la industria.

No escatime en su proveedor de alojamiento. Es la única área que no está bajo su control. Y priorizar el costo sobre el rendimiento solo conducirá a menores retornos a largo plazo.

2. Optimizar imágenes

Versión corta: optimizar imágenes es una de las formas más fáciles y rápidas de mejorar la velocidad del sitio. Asegúrese de que las imágenes estén en un formato adecuado para la web. Utilice sprites CSS para tiempos de carga de imágenes más rápidos.

Las imágenes son las principales culpables cuando se trata de la velocidad del sitio. Los archivos de imagen que son innecesariamente grandes ocupan espacio en el servidor y requieren más tiempo para enviarse a los navegadores de los visitantes.

Debe optimizar las imágenes en un programa como PhotoShop o GIMP para mantener el control total sobre la calidad de las imágenes. Los diferentes formatos funcionan mejor para diferentes tipos de imágenes. En términos generales, por ejemplo, los archivos JPEG son ideales para fotografías, mientras que las imágenes más simples con colores de archivo se renderizarán más rápidamente como archivos PNG.

Aquí hay un resumen rápido de los formatos más comunes y cuándo usarlos:

• JPEG (Joint Photographics Expert Group): JPEG es probablemente el formato más utilizado para fotografías de alta calidad e imágenes ricas en detalles. El principal beneficio es que las imágenes JPEG se renderizan bien al mismo tiempo que proporcionan un alto nivel de compresión. Para fotografías, JPEG es la opción preferida. También debe considerar el uso de variantes de JPEG más nuevas como JPEG 2000 y JPEG XR, que pueden ofrecer niveles de compresión aún más altos.
• PNG (Gráficos de red portátiles): como formato, PNG se encuentra entre JPEG y GIF. Logra un buen equilibrio entre calidad, admitiendo una amplia gama de colores y tamaño. Los PNG tienden a ser más pequeños que los JPEG, pero no tienen la misma capacidad en términos de color y detalle. Hubo preocupaciones sobre la compatibilidad con navegadores más antiguos, pero ahora son en gran parte redundantes.
• GIF (Formato de intercambio gráfico): los GIF (uno de los formatos más antiguos de la web) funcionan mejor para imágenes con paletas de colores limitadas, como logotipos. Si necesita cargar una imagen compuesta principalmente de texto, entonces un GIF es el formato a elegir. El principal beneficio de los archivos GIF es que tienden a ser bastante pequeños. Debido a la capacidad de color limitada, los GIF no deben usarse para imágenes o fotografías ricas. También puede utilizar GIF para animaciones básicas. No use GIF para medios enriquecidos. El uso de contenido alojado por terceros (como YouTube) será más beneficioso para la velocidad del sitio.

Además de usar el formato correcto, aquí hay algunas cosas más que puede hacer para optimizar las imágenes para la velocidad del sitio:

• No haga las imágenes más grandes de lo necesario: muchos diseñadores y desarrolladores cometen el error de cargar imágenes grandes (a menudo con más de varios miles de píxeles) a sus servidores y luego cambiar su tamaño utilizando el código de la página. Este es un gran error. No tiene absolutamente ningún sentido enviar una imagen de 5000 píxeles de ancho a los navegadores de sus visitantes si solo se mostrará a 1000 píxeles en la página de un producto. A menudo, las imágenes deberán ser relativamente grandes para habilitar la función de zoom, pero manténgalas lo más pequeñas posible. Cambie el tamaño de las imágenes antes de cargarlas.
• Comprima las imágenes antes de cargarlas: la compresión elimina toda la información superflua de sus archivos de imagen, reduciendo así su tamaño. Ciertos detalles "invisibles", como la hora en que se tomó una imagen, pueden estar incrustados en el archivo. Se pueden utilizar herramientas como TinyPNG, JPEG Optimizer y complementos como WPSmush para realizar esta tarea rápidamente. Todos los planes pagados necesarios para un uso intensivo son muy razonables.
• No use imágenes innecesarias en las páginas: cada imagen sobrecarga el tiempo que lleva cargar completamente su sitio, así que no use más imágenes de las absolutamente necesarias. Es fácil caer en la trampa de incluir imágenes por el simple hecho de hacerlo. Una inyección de producto más no hará daño, ¿verdad? Pero es una buena práctica eliminar imágenes innecesarias al crear páginas de productos (consulte las excelentes plantillas de páginas de productos). Es posible que también desee aprovechar la "carga diferida" para representar primero las imágenes de la mitad superior de la página (en lugar de todas las imágenes de la página simultáneamente). Las imágenes que haya configurado como "carga diferida" en el código HTML solo se cargarán después de que la información en la parte superior de la página sea visible para los visitantes, o cuando un visitante comience a desplazarse.

Finalmente, suba imágenes a su servidor como sprites CSS cuando corresponda. Los sprites CSS son colecciones de varias imágenes combinadas en un solo archivo. En lugar de cargar imágenes de un servidor individualmente, un navegador puede descargar el equivalente a una sola imagen, eliminando así la necesidad de múltiples solicitudes de servidor. Entonces es posible adaptar el código de la página para mostrar solo una imagen individual específica cuando sea necesario. Puede usar esta técnica para todo, desde imágenes de productos hasta botones de llamada a la acción (CTA) e íconos de redes sociales.

3. Habilitar el almacenamiento en caché del navegador

Versión corta: "Pida" a los navegadores que guarden y reutilicen los archivos de su sitio cuando los usuarios regresen. Al hacerlo, se reducen los tiempos de carga de la página para los visitantes habituales sin prácticamente ninguna intervención de su parte.

El almacenamiento en caché del navegador se produce cuando un navegador almacena archivos importantes que componen su sitio. Esto significa que cuando un visitante regresa a su sitio, su navegador no tiene que recuperar todos los archivos directamente de sus servidores. Solo necesita solicitar archivos específicos que probablemente se hayan actualizado, o incluso ciertas partes de páginas individuales (como la imagen del logotipo). Esto aumenta sustancialmente los tiempos de carga porque reduce el número de solicitudes realizadas al servidor.

Habilitar el almacenamiento en caché es un proceso bastante sencillo e implica agregar una pequeña cantidad de código a sus encabezados HTTP para establecer períodos de caducidad para archivos específicos. Si su sitio está alojado en WordPress, existen numerosos complementos, como W3 Total Cache, para agilizar este proceso.

El almacenamiento en caché de B Rowser puede ser un poco complicado para los minoristas en línea porque las páginas a menudo están sujetas a actualizaciones urgentes con respecto al precio, los niveles de existencias, las revisiones, la información de entrega, etc. Debido a esto, es importante distinguir entre aquellos archivos que almacenan contenido genuinamente estable (estilos CSS, logotipo, navegación, etc.) y aquellos contenidos que están sujetos a cambios . Entonces puede codificar en consecuencia. Recuerde, es completamente posible codificar elementos de página específicos como encabezados y pies de página, junto con archivos más grandes (como hojas de estilo CSS) que no son urgentes, e incluso habilitar el almacenamiento en caché para estos seguirá teniendo un efecto positivo en la velocidad del sitio.

4. Minimice HTML, JavaScript y CSS

Versión corta: use una CDN (red de entrega de contenido) para habilitar la minificación automática y reducir el tamaño de sus archivos hasta en un 60%. La configuración de una CDN es un proceso relativamente sencillo que es posible gracias a servicios conocidos como CloudFlare y Amazon AWS.

La minificación es el proceso de minimizar el código en sus archivos web. Se ha demostrado que reduce significativamente los tiempos de carga del sitio. Los archivos más pequeños se pueden solicitar con mayor velocidad y luego ser interpretados por el navegador. Esta estrategia de optimización a menudo se destaca por las herramientas de velocidad de la página y es una de las más efectivas que puede implementar.

Funciona debido a la discrepancia en longitud y complejidad que es inteligible para los desarrolladores (que generalmente incluye comentarios, espacios, comas y más) y el tipo de código mínimo que es necesario para que un navegador represente una página. A veces, esta versión reducida puede ser tan pequeña como el 40% de la versión original.

La minificación puede reducir drásticamente el tamaño de los archivos web. Fuente

Pero hay un problema clave. La minificación manual es un gran no-no. Lleva demasiado tiempo y hay demasiado margen para cometer errores. Incluso con herramientas automatizadas, se requiere un alto nivel de entrada manual en la etapa de desarrollo para procesar e implementar todo el código alternativo.

En cambio, la mejor opción es utilizar una CDN (red de entrega de contenido) que minimice automáticamente el código antes de enviarlo a un navegador. Los archivos originales se guardarán en su propio servidor, mientras que las versiones minimizadas se almacenarán en los servidores CDN. Siempre que realice cambios en las páginas, se sincronizarán con los servidores CDN. Las CDN también son útiles por una variedad de otras razones, pero las veremos más adelante.

5. Aproveche las AMP (páginas móviles aceleradas) y las PWA (aplicaciones web progresivas)

Versión corta: AMP y PWA, ambos desarrollados por Google, pueden aumentar drásticamente la velocidad a la que se cargan sus páginas móviles. Existe un gran costo de desarrollo, por lo que la transición a PWA o AMP debe tomarse a la luz de otros factores positivos (si lo desea). Si decide continuar, los impactos en la velocidad de su sitio pueden ser significativos.

Convertir sus páginas móviles a AMP puede ser un gran trabajo y no es para todos. Sin embargo, definitivamente vale la pena explorarlo como una estrategia a más largo plazo.

¿Qué son exactamente AMP y PWA? Aquí hay una descripción general rápida:

• Página móvil acelerada (AMP): AMP es un marco de desarrollo, que consta de un subconjunto HTML (AMP HTML), un marco de JavaScript y una CDN (red de entrega de contenido) opcional, que ha sido creado por Google para permitir a los desarrolladores entregar relámpagos. páginas móviles rápidas sin la necesidad de invertir recursos importantes en la optimización de la velocidad. Si bien AMP se desarrolló inicialmente para sitios basados ​​en contenido (puede ver la pequeña flecha relámpago en los resultados de búsqueda de muchas páginas de noticias), se está volviendo cada vez más popular entre los minoristas en línea.
• Aplicación web progresiva (PWA): las PWA son como aplicaciones móviles a las que se accede a través de un navegador móvil. Replican muchas de las funciones de las aplicaciones, como el acceso a través de un icono en la pantalla de inicio del móvil y las notificaciones automáticas, pero sin la necesidad de crear un software personalizado o que los usuarios instalen nada en sus teléfonos.

Existen algunas diferencias clave entre los dos (y mucho debate), pero ambos mejoran la velocidad del sitio móvil. Puede obtener información sobre los aspectos prácticos de las AMP y las PWA en la documentación completa de Google.

6. Elimine los complementos de WordPress de bajo rendimiento

Versión corta: los complementos pueden actuar como un gran drenaje en los tiempos de carga. Si su sitio de comercio electrónico está alojado en WordPress, realice una revisión exhaustiva de los complementos, elimine los que no necesita y busque soluciones alternativas para los complementos "pesados".

La disponibilidad de complementos fáciles de usar es una de las razones por las que muchos minoristas optan por plataformas como WooCommerce y Shopify. La mayoría de las veces, los complementos son beneficiosos para los minoristas. Aumentan el rendimiento, eliminan la necesidad de tareas de desarrollo complicadas y, a menudo, son gratuitas.

Sin embargo, los complementos que están mal codificados, entran en conflicto con otros elementos de su sitio o están desactualizados, pueden poner mucha tensión en los tiempos de carga del sitio. De manera similar, los complementos grandes a menudo necesitan enviar múltiples solicitudes de archivos para recuperar sus propias hojas de estilo o JavaScript.

Afortunadamente, la solución de problemas de los complementos es bastante sencilla. A menudo, el método más simple es usar su informe de velocidad para identificar problemas que podrían estar relacionados con los complementos, y volver a probarlos una vez que se hayan desactivado.

Alternativamente, puede usar un complemento de WordPress como P3. Analizará sus complementos y resaltará las áreas de bajo rendimiento.
La otra cosa interesante acerca de los complementos es que muchos de los problemas que resuelven a menudo se pueden corregir mediante simples cambios en el código de los archivos web. El uso excesivo de complementos es una señal segura de la falta de conocimiento del desarrollador. Si regularmente cae en la trampa de resolver problemas relativamente pequeños con complementos torpes, entonces podría estar haciendo que la velocidad de su sitio sea una gran injusticia.

7. Utilice una red de distribución de contenido

Versión corta: las CDN (redes de distribución / entrega de contenido) son económicas y fáciles de implementar.

Las CDN ya se han mencionado porque muchos proveedores también ofrecen la opción de minificación automática, pero vale la pena mencionarlas nuevamente aquí porque brindan beneficios adicionales además de la minificación automática.

Las CDN mitigan los efectos negativos de la transferencia de datos a grandes distancias geográficas. Fuente

La idea detrás de las CDN es muy inteligente. Una CDN es una red global de servidores que almacena versiones en caché de su sitio web. Esto proporciona a los visitantes en diferentes ubicaciones geográficas un acceso más rápido a su sitio. Siempre que un visitante haga una solicitud a su sitio a través de su navegador, se contactará con el servidor más cercano que almacena una copia de su sitio.

El uso de una CDN también puede ayudarlo a controlar los costos de ancho de banda (si los paga) y lidiar con los picos de tráfico.

8. Optimice el tiempo de respuesta de su servidor

Versión corta: si bien no puede cambiar un servidor defectuoso, puede optimizar uno que funcione bien. Concéntrese en limpiar su base de datos, elegir la configuración correcta para su CMS y optar por un proveedor de DNS rápido.

El tiempo hasta el primer byte (TTFB) es una medida de la cantidad de tiempo que tarda un navegador en recibir el primer byte de información de un servidor. Básicamente, hay tres partes de una solicitud de servidor, cada una de las cuales significa un área potencial de optimización: el tiempo que se tarda en enviar una solicitud, el tiempo que tarda el servidor en procesar una solicitud y el tiempo que se tarda en enviar la información solicitada a el navegador.

Puede comprobar su tiempo hasta el primer byte con WebPageTest. Debe ser inferior a 200 ms.

El uso de una CDN es una de las mejores formas de mejorar la primera y la tercera etapa porque la red reducirá la distancia entre los servidores y los navegadores de sus visitantes.

Es la segunda área que nos preocupa aquí. Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. Fuente
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. Pero vale la pena. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.