¿Qué es el WPO y cómo optimizarlo en la web de tu eCommerce?

¿Eres de los que aún no conoce la verdadera importancia del WPO dentro del sitio web de una tienda online?

La optimización del WPO es un tema que está últimamente muy de moda y sobre el que hay un gran revuelo en todo el panorama digital.

Sin embargo, éste realmente es uno de los factores por el que podemos mejorar la experiencia del usuario, el posicionamiento SEO y, por consiguiente, la conversión en nuestro eCommerce.

Estamos acostumbrados a que todo sea cada vez rápido (ordenadores, internet, móvil, etc) y también queremos que las webs por las que navegamos sean aún más rápidas.

En definitiva, nos ha tocado vivir en un mundo lleno de estrés, en el que el tiempo es el recurso más valioso, que no podemos comprar. Por ello, no queremos perder ni un solo milisegundo de más en obtener los resultados buscados en los eCommerce.

Como ya sabemos, Google y su IA no para de mejorar y han metido dentro de su algoritmo de posicionamiento algo que es muy importante para la experiencia del usuario medio, como es el WPO.

Pero, ¿realmente sabemos a ciencia cierta qué es este factor de posicionamiento?

¿Qué es el WPO?

El WPO es el acrónimo de” Web Performance Optimization” (en español, Optimización del Rendimiento Web) y es un conjunto de técnicas orientadas a mejorar el rendimiento de la página web, reduciendo así el tiempo de espera.

Dicho de otra forma: es la manera de “trucar” tu página web para que vaya lo más rápido posible. En una analogía automovilística, es algo similar como aligerar el peso del coche, quitando partes innecesarias, utilizando materiales menos pesados y poniéndole un motor enorme y unas grandes ruedas, para ser el primero en cruzar la línea de meta.

Estas técnicas se utilizan para mejorar la velocidad de nuestro sitio web, no solo de una página.

En esta guía veremos todos los puntos importantes a tener en cuenta en la optimización y mejora de WPO y todos los trucos para poder conseguirlo.

¿Por qué debo de optimizar el WPO en mi eCommerce?

La optimización del tiempo de carga influye en aspectos tan importantes para un negocio online como puede ser:

• Optimisar el rendimiento web
• La satisfacción del usuario
• El posicionamiento en buscadores (SEO)
• El porcentaje de conversión
• El coste de campañas publicitarias (Adwords)
• Coste de infraestructura

Pero, vayamos por partes:

1. Satisfacción del usuario

Una buena experiencia de uso influye positivamente en la conversión, mejora en engagement con los usuarios y la recurrencia de las ventas, al aumentar las posibilidades de que vuelvan a la web en un futuro próximo.

Seguro que anteriormente habéis visto gráficos y estadísticas similares, pero los gigantes de internet, nos muestran a niveles enormes, lo importante que es tener optimizado nuestro eCommerce y cómo le influye a ellos la pérdida de rendimiento.

• Amazon: 0,1 segundos de retraso implican una pérdida del 1% de los ingresos
• Facebook: 0,5 segundos más lento provoca una caída de tráfico del 3% y por cada segundo más lento tiene una caída del 6%
• Google Maps: redujo un 30% el tamaño de sus ficheros y el número de peticiones aumentó un 30%.
• Yahoo!: 0,4 segundos de retraso causan una caída entre el 5% y el 9% del tráfico.

Como vemos, todos ellos coinciden que la pérdida de velocidad provoca una caída de tráfico y ventas considerables, y solo muestran cuando la caída es de menos de un segundo.

Un estudio de KissMetric afirma que el 47% de los consumidores espera que las páginas web se carguen en 2 segundos o menos.

Por otro lado, el 40% de los usuarios abandonan una página que tarde más de 3 segundos en cargar.

En menos de lo que tardamos en remover el café, podemos perder casi la mitad de nuestro tráfico. Esto antes parecía insignificante, pero hoy en día, cada milisegundo de carga puede mejorar nuestra conversión.

2. Posicionamiento en buscadores (SEO)

Como he dicho anteriormente, Google tiene muy en cuenta la velocidad de nuestro sitio web, ya que desde siempre, una de sus prioridades ha sido complacer a sus usuarios y, como hemos visto antes, la mejora de velocidad mejora la satisfacción del usuario.

Para Google, hacer que las web vayan más rápido ha sido una obsesión desde hace ya unos años.

No en vano, en 2010, Google publicó que iba a tener en cuenta en el orden de su listado la velocidad del sitio web, siendo mejores valorados los sitios que tardasen menos en cargar.

En 2013, dio un vuelco, cambiando su política y en vez de valorar las webs más rápidas, dijo que iba a penalizar las webs que tuviesen una mala optimización y tardase más de 2 segundos en cargar completamente su web.

Es lógico que Google tenga en cuenta la velocidad de carga para su ranking, y no solo por complacer al usuario, ya que uno de los puntos que no dicen es que cuanto más rápidas sean las páginas web, ahorran en sus costes de infraestructura.

Google, al igual que cualquier aplicación online, necesita servidores para funcionar, por ello, si los millones de páginas que rastrea al día son más rápidas, necesitarán menos máquinas para que su araña trabaje a pleno rendimiento.

Esto le supone un ahorro muy importante, y por ello también lo tiene bastante en cuenta.

3. Porcentaje de conversión

Muchos estudios afirman que cada segundo más que tarde en cargar una web, puede suponer la pérdida de entre un 7 y un 11% de la conversión de nuestro proyecto.

Este dato, extrapolado a euros, puede suponer muchísimo dinero. Según estudios realizados por empresas como Amazon, Walmart y Google entre otras, observamos que:

• El 47% de los usuarios esperan que una página cargue en menos de 2 segundos.
• El 40% de los usuarios abandona una página que tarda más de 3 segundos en cargar
• El 14% cambia de tienda online si la página tarda en cargar.
• El 64% de los compradores que no están satisfechos cambia de sitio para su próxima compra.
• El 52% de los compradores afirman que un sitio que carga rápido los fideliza.

Uno de los puntos en el que es fundamental que tu eCommerce funcione rápido, es a la hora de realizar el pago, ya que este es el paso más doloroso para el usuario, y no podemos tardar más de la cuenta, porque nuestro cliente se pondrá nervioso.

Cuando el pago es lento, justo cuando ha metido los datos de pago puede pensar cualquier cosa. Sin embargo, cuando el proceso es rápido, se queda bastante satisfecho y posiblemente fidelicemos al cliente.

4. Coste de campañas publicitarias (Adwords)

La velocidad de carga es un factor fundamental para Adwords a la hora de puntuar la experiencia de usuario en la página de destino.

Esta puntuación determinará, en parte, el nivel de calidad de los que, a su vez, puede tener un impacto dramático en el CPC (coste por clic).

Ranking = Nivel de Calidad x CPC máx

Mejorar el tiempo de carga de su eCommerce puede reducir los costes y mejorar la posición de los anuncios.

Esto es debido a que si dos usuarios están pujando por la misma palabra clave y por el mismo precio, Google tendrá en cuenta para organizar las posiciones el nivel de calidad de los sitios web.

Por lo tanto, por el mismo CPC que nuestro competidor podemos aparecer delante de él, por el solo hecho de que nuestra web es más rápida, esto nos puede ahorrar mucha inversión en Adwords, sobre todo si es una palabra clave bastante competida.

5. Coste de infraestructura

Una buena optimización no solo reduce la velocidad de carga, mejorando la experiencia de usuario, sino que también reduce los costes de infraestructura y el consumo de ancho de banda, reduciendo así los costes operativos del servicio.

Con la optimización conseguimos que no se sobrecargue nuestro servidor cuando tengamos picos de visitas, y de esta forma podemos reducir el servidor y el ancho de banda, al no necesitar tanta máquina como si no tuviésemos el site optimizado.

Realizando una optimización, consiguiendo mejorar entre un 15% y 25% la velocidad de la web, podemos ahorrarnos un 40% de CPU y hasta un 50% de ancho de banda.

¿Qué factores debemos tener en cuenta para mejorar el WPO?

Realmente, para mejorar el WPO tenemos que tener en cuenta sólo dos factores, estos son la programación y el servidor.

Esta es la base de toda fórmula ganadora, tener un buen chasis y un motor que se complemente puede ser imparable, pero si alguno de los dos fallas, seguramente no lleguemos a ser los más rápidos nunca.

1. La programación

La programación es como el chasis de nuestro coche, si tenemos un chasis tubular de carbono, nos asegura la máxima resistencia con el mínimo peso.

El hecho de trabajar con PrestaShop tenemos garantizado más de la mitad de trabajo, ya que este CMS se ha programado a conciencia, para tener un buen rendimiento, siguiendo buenas prácticas en su desarrollo, por el que tenemos la garantía de que su core es bastante rápido como para no tener que preocuparnos por ello.

Como he dicho antes, el core está salvado, ya que su programación basada en MVC nos asegura el buen rendimiento del mismo.

Pero no todo nuestro eCommerce se compone del core y también tenemos módulos y plantillas que pueden tirar por tierra todo el buen trabajo del core de PrestaShop.

Los módulos o addons  son pequeños trozos de código (scripts), que nos aportan una funcionalidad adicional, que no estaba implementada en el core de PrestaShop.

La elección de estos módulos para nuestra tienda es muy importante, ya que si el desarrollador del módulo no ha seguido buenas prácticas puede que provoque el cuello de botella que tanto odiamos.

Por ello, aconsejo que todos los módulos que instaléis en vuestro PrestaShop estén descargados de la página de addons de PrestaShop.

Esto lo recomiendo porque PrestaShop comprueba y verifica todos los módulos que tiene en su tienda, no solo por el tema de virus e infecciones, sino que revisa que estos cumplan sus requisitos y estándares, para no influir en el rendimiento del mismo.

Además de esto, no debemos de abusar de instalar demasiados módulos, ya que cada funcionalidad, realiza una tarea que tiene un tiempo de proceso y cuanto más tengamos, más tardará en realizar todos estos procesos.

Por otro lado, tenemos los temas o plantillas, en lo que aconsejo exactamente lo mismo que con los módulos.

Si lo compramos en su propio marketplace de addons, nos aseguramos el buen funcionamiento y garantía de velocidad por parte del equipo de PrestaShop.

Aunque los temas no son tan críticos a la hora de optimización como los módulos, también tenemos que tenerlos en cuenta a la hora de adquirirlos.

2. El servidor

El corazón o motor de nuestro eCommerce es el servidor, por lo que cuanto más potencia le podamos sacar a este motor, más rápida funcionará nuestra tienda virtual.

De nada sirve tener la mejor programación del mundo, si después no tenemos un buen motor que empuje todo el contenido hacia los usuarios, lo más rápido posible.

El servidor puede variar, dependiendo del proyecto que tengamos.

Sin embargo, esto no quiere decir que siempre necesitemos un servidor dedicado para 10 visitas al día, pero sí tener un motor bien optimizado para PrestaShop, aunque sea pequeño.

Los puntos críticos a la hora de contratar un hosting son los siguientes

Hardware

Al igual que un ordenador personal, tener un hardware de última generación y mayor potencia nos asegura la velocidad, y para ello tenemos que fijarnos el tipo de CPU y en el disco duro.

Tenemos que asegurarnos que el proveedor de hosting tiene servidores montados con procesadores de última generación, con una velocidad de procesamiento de alto rendimiento, para que a la hora de ejecutar el PHP de nuestro eCommerce lo haga de forma fluida.

Hoy en día, tener discos duros SSD es imprescindible, ya que éstos tienen una mejor velocidad de lectura y escritura que los tradicionales HD.

PrestaShop, al igual que la mayoría de los CMS’s, realizan muchas lecturas y escrituras de ficheros a la hora de ejecutar la página.

Por lo tanto, tener la última tecnología de hardware en nuestro servidor no evita muchos problemas de velocidad.

 Software

Al igual que el hardware, este es un punto fundamental de nuestro hosting. Tenemos que asegurarnos que éste cumple con todos los puntos básicos, para que nuestro PrestaShop se sienta lo más cómodo posible.

Debería contar con:

• PHP multiversión: tener las últimas versiones de PHP es imprescindible, y con la salida de la versión 1.7 de PrestaShop, ya es compatible al 100% con PHP7, el cual sabemos que es mucho más rápido que su versión 5, e incluso que el sistema que desarrollo Facebook, compilando el PHP a C llamado HHVM.
• Últimas versiones de MySQL o MariaDB: éstas han demostrado una mejora de rendimiento respecto a versiones anteriores, por lo que tenemos que tener nuestra versión de MySQL 5.6 o superior, y en el caso de MariaDB tenemos que tener la versión 10 o superior.
• Sistema de caché basados en RAM: PrestaShop soporta múltiples sistemas de caché en RAM como APC, Memcachéd, Xcaché, etc.

Tenerlos activos e implementados en nuestro hosting es imprescindible para poder usarlos y así mejorar el rendimiento.

• Medidas antihack: estas medidas ponen más difícil al atacante poder infectar nuestro eCommerce.

Y aunque su intención no sea ralentizar nuestra web, el hacer acciones malintencionadas, como envío masivo de spam, inserción de publicidad, ataques DDOS o incluso la moda de minar criptomonedas mediante nuestra web, puede ralentizar la carga, además de otros muchos problemas de seguridad que podamos tener.

Centro de Datos

Los centros de datos son los edificios donde se alojan los servidores en los que tenemos nuestro eCommerce y páginas web.

No solo el servidor es una parte fundamental, también el “datacenter” donde está alojado dicho servidor

Hay dos puntos que tenemos que saber de nuestro datacenter:

• La localización del datacenter: lo más lógico es que nuestro centro de datos este en el país que más tráfico tenemos, esto es por la sencilla razón de que es más rápida la petición de usuarios que estén más cerca físicamente.

Por lo tanto, lo más óptimo para una tienda española en la que la mayoría de sus clientes sean españoles, es que el servidor esté alojado en un datacenter de España.

Por la latencia de conectividad cuanto más lejos estemos del servidor más tardará la petición, y extrapolado a 100 o 200 request por cada página web, podemos tener una gran demora de tiempo.

• Calidad y estabilidad TIER III+: el concepto de TIER nos mide el nivel de fiabilidad de los datacenters, teniendo 4 escalas, desde TIER I hasta TIER III+, por lo que estar alojado en un centro de datos de TIER III o superior nos garantiza la tranquilidad de que nuestra web esté siempre funcionando a pleno rendimiento.

¿Cómo podemos medir el WPO de la web de nuestro eCommerce?

Siempre, antes de comenzar a optimizar nuestro eCommerce, tenemos que medir, medir y medir nuestro rendimiento actual, para saber por dónde tenemos que enfocar nuestra optimización, y cuáles son nuestros puntos débiles.

Existen múltiples herramientas para medir la velocidad de nuestra web, pero yo suelo utilizar 3 herramientas que nos pueden dar puntos clave en nuestra optimización:

1. Google PageSpeed Insights

Esta no es la herramienta que más me gusta, pero hay que tenerla en cuenta, ya que es del propio Google, y este ha afirmado que la puntuación que arroja PageSpeed Insights es un factor en el ranking de su posicionamiento para el “mobile”.

Consta de 10 puntos de optimización, teniendo una puntuación de 0 a 100, siendo a partir de 85 una puntuación óptima.

Hay que reconocer que tener 100 puntos en una web no resulta del todo fácil, y tenemos que aplicar todas las técnicas conocidas para poder llegar a la máxima puntuación.

Con este sencillo test podemos saber qué parte de nuestra web tenemos que optimizar y poder ir midiendo con su puntuación la mejora de nuestra web.

2. Pingdom Website Speed Test

Esta herramienta cada vez es más utilizada, puede ser bastante básica, pero muy útil para saber el rendimiento real de velocidad de nuestra web.

En el análisis que desglosa Pingdom Website Speed Test, todos los “request” que hace nuestra web al servidor, midiendo su velocidad y desglosando la carga de cada petición.

Podemos ver qué tipos de recursos son los que más tardan, cuáles son los que más pesan, cuántas peticiones hay a diferentes dominios y una puntuación parecida a la del pagespeed.

Una de las cosas más interesantes, es que te deja realizar el test desde diferentes partes del mundo como Suecia, EEUU y Australia.

3. Web Page Test

Por último, esta mi herramienta favorita, ya que tiene lo mejor de Pingdom y del Pagespeed. Con Web Page Test tenemos unos resultados parecidos a los de Pingdom, pero mucho más avanzados.

Además, este test te da la posibilidad de hacer el test desde muchos más países que el Pingdom, e incluso de diferentes dispositivos y navegadores.

Es, sin duda, la herramienta más completa.

¿Cómo funciona Web Page Test?

Cuando realiza el test, hace un escaneo de la página 3 veces, haciendo una media y sacando los mejores resultados de las tres consultas.

Una de las partes que más me gusta de este test es lo que llaman “Speed Index”.

Este concepto, es la métrica realmente importante y que Google tiene más en cuenta.

Que la página cargue rápido es fundamental, pero aunque dos páginas tarden lo mismo en cargar, no quiere decir que Google las tenga en cuenta de igual forma.

Google, al igual que el usuario, lo que quiere es que le muestres la página, aunque no haya terminado de cargar completamente.

No me importa que me enseñes la cabecera y media parte de la página, aunque no hayas terminado de cargar el footer, así yo podré ir viendo la información y puede que no llegue ni a ver el footer.

Poniendo un ejemplo, vamos a ver la métrica de dos páginas que tardan en cargarse complemente 12 segundos cada una.

En el ejemplo azul, vemos que la web a cargado el 90% de su contenido en el primer segundo. Sin embargo, el ejemplo rojo ha tardado en cargar el 90% en 11 segundos, por ello Google no las valora igual, aunque tarden ambas en cargar el 100% en 12 segundos.

Este es el valor que se le da al Speed Index, y tener este valor por debajo de 2500 puntos quiere decir que estamos en unos valores buenos, y si estamos por debajo de 1500 es que hemos hecho un buen trabajo de optimización.

¿Cómo podemos optimizar el WPO de nuestra tienda paso a paso?

Después de esta larga explicación, nos ponemos manos a la obra para optimizar nuestro PrestaShop, por lo que vamos a ir viendo paso por paso cómo optimizar los diferentes puntos, para tener el mejor rendimiento posible.

1. Modo Profiling

Como he dicho anteriormente, la programación puede ser un causante de la pérdida de velocidad. Para asegurarnos que todo está correcto, tenemos que analizar el profiling de nuestro eCommerce.

Para ello, PrestaShop lleva incorporada una herramienta que mucha gente no sabe y es magnífica.

Este profiling se activa desde la constante que está situada en el fichero setting.inc.php, dentro de la carpeta config de nuestro PrestaShop. Cambiándola a “True” nos aparecerá un análisis de todo el rendimiento de la programación de nuestra plataforma.

Con esto, podemos ver los tiempos de carga y memoria consumida de las partes de nuestro core, así como también podemos verlo de los módulos que tenemos instalados y su consumo.

De un simple vistazo podemos saber si algún modulo instalado está funcionando lento.

Además nos da un detalle de todas las consultas a la base de datos que se han realizado en la página y nos la ordena por los tiempos de ejecución de forma descendente.

Este dato nos lo da, porque uno los problemas de velocidad más habituales son debidos a consultas lentas. De esta forma, podemos saber qué consulta o consultas son los que están ralentizando la carga, y qué fichero es el que está ejecutando.

De una forma muy gráfica, podemos ver que los valores que están en rojo es porque está dando algún problema en la velocidad de la página, y a partir de este conocimiento ya está en nuestras manos el poder solucionarlo.

2. Optimizar Base de Datos

Como he dicho antes, las consultas lentas es uno de los problemas más habituales de velocidad, para ello tenemos que tener nuestra base de datos optimizada.

Cuanto más pesada sea nuestra base de datos, más tardará en hacer cualquier consulta, tenemos que tener un mantenimiento de la misma de forma periódica para que esto no ocurra.

Lo primero es tener activos los idiomas que realmente utilizamos, en muchos casos tenemos muchos idiomas activos que realmente no utilizamos.

Tenemos que saber que por cada idioma, se registran las traducciones en base de datos engordando así el tamaño de la misma.

Hay muchas tablas que registran mucha información que realmente no nos hace falta, habitualmente en PrestaShop las tablas que más registros acumulan, y no son de importancia son:

• ps_guest: aquí se registran las sesiones de los invitados.
• ps_connections: se registran los datos de conexión de los clientes.
• ps_connections_page: las páginas que han visitados los clientes.
• ps_connections_source: desde donde se han realizado dichas conexiones.
• ps_page_viewed: todas las páginas vistas por cada cliente.

Como vemos, estas son tablas en las que podemos borrar su contenido sin que nos afecte al funcionamiento de nuestro PrestaShop, ya que solo perderemos parte de las estadísticas que PrestaShop recoge.

Otras de las tablas que suelen afectar, son los carritos que van realizando en nuestro PrestaShop:

• ps_cart: toda la información de los carritos.
• ps_cart_product: todos los productos añadidos a los carritos.
• ps_cart_discount: los descuentos aplicados a los carritos.

Estas tablas no son de gran importancia, son los carritos que se han ido creando y transformando en pedidos o abandonándolos, por lo que también está bien borrarlos cada cierto tiempo.

Para borrar estas tablas podemos hacerlo ejecutando unas simples consultas en SQL como las siguientes:

• TRUNCATE TABLE ps_page_viewed;
• TRUNCATE TABLE ps_connections_page;
• TRUNCATE TABLE ps_connections_source;
• TRUNCATE TABLE ps_connections;
• TRUNCATE TABLE ps_guest;
• TRUNCATE TABLE ps_cart;
• TRUNCATE TABLE ps_cart_product;
• TRUNCATE TABLE ps_cart_discount;

O también podemos instalar un módulo como “Optimiza el rendimiento, limpia y acelera DB”, para que haga esta función de forma automática sin necesidad de hacerlo nosotros mismos.

3. Sistema de caché

El sistema de caché a nivel de servidor seguramente es uno de los tuneos más importantes que tenemos que realizar para una buena optimización.

Para entender lo importante que es el cacheo en un desarrollo web, tenemos que saber cómo funciona la caché:

El lenguaje de PHP usado por PrestaShop en su desarrollo web, es un lenguaje no compilado, esto quiere decir que cada vez que accedemos a cualquier página web, se tiene que procesar dicho código.

Esto, en lenguajes compilados no ocurre, ya que cuando se compila el código se ejecuta en texto plano, sin tener que ejecutar funciones, consultas SQL, etc.

La caché es algo parecido a compilar el código PHP, por eso una página cacheada realmente es un archivo en html puro, que no tiene que procesarse nada, solamente mostrar este código al navegador y éste lo interpretará, para mostrar la web como normalmente vemos.

Una vez explicado muy levemente cómo funciona la caché a nivel de servidor, ya sabemos que esto es imprescindible para mejorar el rendimiento de nuestra web.

En PrestaShop tenemos dos tipos de caché, que vienen integradas y que tenemos que saber configurar.

Caché Smarty

Dentro de Parámetros Avanzados > Preferencias tenemos a configuración de la caché smarty. Esta caché la tenemos que tener activa sí o sí, es una caché que cachea toda nuestra plantilla, que realmente es todo lo que vemos en nuestro eCommerce.

Hasta aquí está claro, pero ¿cómo la configuramos?

Primero, configuramos la opción de caché de plantillas, de la cual tenemos 3 opciones:

• Nunca recompilar los archivos de las plantillas: esta es la opción más óptima, pero tenemos que tener en cuenta que cada vez que hagamos un cambio en el código de la plantilla, tenemos que limpiar la caché de forma manual para poder ver el cambio.
• Recompilar las plantillas cuando los archivos sean modificados: para mi es la opción más recomendada, ya que aunque puede que sea un poco menos optima que la anterior, cuando realizamos un cambio en la plantilla el PrestaShop lo detecta y recompila de forma automática
• Forzar compilación: esta opción para la página en producción no es nada recomendada, ya que ralentiza la web porque por cada consulta a la web el PrestaShop recompila completamente la plantilla de PrestaShop, perdiendo así mucho tiempo en procesamiento del compilado.

Como, digo la última opción no la utilizaría casi nunca, ya que con la opción de recompilar cuando se modifica sería suficiente, y si sabemos que no vamos a tocar la plantilla en algún tiempo, lo mejor es marcar la primera casilla de nunca recompilar, pero tenemos que ser conscientes de esta opción cuando volvamos a realizar modificaciones.

En tipos de caché tenemos 2 opciones:

• Sistema de archivos: guardará toda la caché en ficheros dentro de nuestro PrestaShop, esta es la opción más óptima si tenemos discos duros SSD en nuestro Hosting
• MySQL: guardará toda la caché en base de datos, puede ser más rápido que teniéndolo en un disco duro HD, pero si es verdad, que esto sobrecarga bastante la base de datos y a la larga puede ser más lento.

Por ello, hoy en día casi todos los hosting tienen SSD y tenemos que configurar la caché en sistema de archivos.

Por último tenemos la opción de borrar la caché, que es algo parecido a las primeras opciones, y podemos configurarlo para que nunca borre la caché, o que la borre cuando detecte que se haya modificado algo.

Lo más óptimo es no borrarla nunca, pero como no hay mucha diferencia en rendimiento entre ambas, yo aconsejo dejar activa la opción de borrar la caché cuando detecta cambios.

Caché

Este tipo de caché también se configura desde Parámetros Avanzados > Rendimiento.

Esta es la caché de todo el código PHP de PrestaShop, y tenemos varias opciones de configuración.

Lo bueno de esta caché es que son sistemas de caché que tienen que estar activos en el servidor y son basados en memoria RAM.

Tenemos las opciones de:

• Memcachéd
• APC
• Xcaché

Como digo, son sistemas diferentes pero todos se basan en caché de RAM, y no hay una fórmula mágica para elegir una, normalmente los servidores no tiene todos los sistemas activos y cada una pueden funcionar mejor o peor dependiendo de la configuración que tenga realizada el hosting.

Por eso yo recomiendo que se hagan pruebas con todas y dejar activa la que mejor rendimiento tengo.

4. Minificar CSS, Javascript y HTML

Cualquier herramienta de optimización que hemos visto anteriormente, analizará la minificación y concatenación de los ficheros CSS, JS y HTML.

Esto es debido, a que si reducimos al máximo el tamaño de estos ficheros, eliminando comentarios, espacios, saltos de líneas, etc., que son imprescindibles para que sea legible por los humanos, pero no tiene relevancia para las máquinas.

Por eso, todo el código innecesario que podamos eliminar para las máquinas, menos pesará el archivo y más rápido se lo descargará a nuestro ordenador.

Una de las grandes ventajas de PrestaShop, es que ya lleva integradas estas herramientas de forma nativa, sin tener que instalar módulos para realizar dichas acciones, y la verdad es que funciona bastante bien.

En la versión 1.7 de PrestaShop han simplificado las opciones, y creo que es un acierto para los usuarios de nivel medio de esta plataforma.

Lo que tenemos que hacer es dirigirnos a Parámetros Avanzados > Rendimiento y en las opciones CCC activar:

• "Smart caché" para las hojas de estilo (CSS).
• "Smart caché" para el código de JavaScript.

Con estas opciones activas, pasaremos los puntos marcados por las herramientas de análisis de compresión y combinación de estos ficheros.

Mod Deflate y Mod Expires

Esto son dos módulos que se instalan a nivel de servidor, que sirven para comprimir los ficheros y especificar una fecha de expiración de los mismos.

Estos módulos deben de estar activos en el servidor, que junto con las reglas precisas en el .htaccess, harán la magia necesaria para que esto ocurra.

Pero ¿qué son realmente el Mod Deflate y Mod Expires?

●       Mod Deflate: este módulo, lo que realmente hace es comprimir todos los recursos que son descargados por el navegador cuando accedemos a una web.

Cuando accedemos a una web nos descargamos múltiples recursos como HTML, CSS, JS, vídeos, imágenes, etc; este módulo funcionando comprime todos estos recursos en gzip, para que ocupen menos y la descarga de la misma sea más rápida.

Una vez descargados los recursos, el navegador los descomprime y los interpreta.

●       Mod Expires: los recursos estáticos como CSS, Javascript, imágenes, vídeos, etc; no solemos cambiarlos en cierto tiempo, y es una tontería que el navegador se lo esté descargando en cada petición a la web, ya que estos seguramente no hayan cambiado.

Con el mod expires, le decimos al navegador que cuando se haya descargado el recurso se lo guarde en su caché, y en la próxima petición a la web no realice la descarga y que directamente lo muestre de su caché, optimizando así el WPO de nuestra web.

¿Cómo lo hacemos desde nuestro PrestaShop?

Desde PrestaShop, podemos añadir estas reglas al .htaccess, simplemente pulsando un botón, esto facilita su implementación para los no desarrolladores y que facilita la tarea para todos sus usuarios.

Para ello lo activamos desde Parámetros Avanzados > Rendimiento en las opciones de CCC, solamente activamos el botón de “Optimización de Apache” y meterá todas las reglas necesarias en el .htaccess.

5. Optimizar imágenes

Uno de los puntos más importantes en cualquier optimización WPO son las imágenes. Las imágenes tienes que estar optimizadas tanto a nivel de resolución que estamos mostrando, como el tamaño más reducido sin perder calidad.

A nivel de resolución, PrestaShop lo hace bastante bien, ya que por cada imagen que subimos, la escala a diferentes resoluciones dependiendo de dónde mostramos la imagen, por lo que por esto no debemos de preocuparnos.

Sin embargo, en la optimización de la misma, para que pese lo menos posible sí tenemos que tenerlo muy en cuenta, para ello lo mejor es que antes de subir cualquier imagen la optimicemos con cualquier programa de escritorio.

Para ello, como pudiera ser el propio Photoshop con su opción de exportar para web.

Pero esto, puede ser bastante tedioso hacerlo por cada imagen, así que hay varios módulos en el mercado que hacen una optimización de las imágenes de forma masiva.

Uno de los que más me gusta y utilizo es el módulo que utiliza la api de resmush.it.

Éste hace una optimización de las imágenes cuando las subes a PrestaShop, y si ya las tenías subidas solo tienes que regenerar miniaturas, para que las optimice todas.

Desde su web lo podéis hacer de forma gratuita manualmente, y ver el nivel de compresión que hace de las imágenes sin perder calidad, una mejorar muy buena para nuestro WPO.

6. Lazy Load

Una técnica relativamente moderna es usar “lazy load” (carga perezosa), para cargar nuestras imágenes. Esto significa que las imágenes no serán descargadas por nuestro navegador hasta que estas no se vayan a mostrar.

Por ejemplo, si tenemos imágenes en el footer, éstas no serán cargadas hasta que bajemos y veamos el footer.

Esto mejora la carga significativamente, ya que no hay que descargar todas las imágenes cuando accedes a la web.

Para hacer esto en PrestaShop, podemos instalar módulos Premium que realizan esta acción en la tienda de PrestaShop.

7. Mod pagespeed

Llegamos al punto de optimización que más me gusta, ya que podemos decir que el mod pagespeed hace casi toda la optimización de forma automática.

Al igual que dije que el analizador de Google Pagespeed no me gustaba, he de decir que el módulo pagespeed a nivel de servidor me encanta.

El mod_pagespeed de Google es un módulo a nivel de servidor que hace una optimización del WPO de tu web de forma casi automática, sin importar el tipo de web que tengas.

Estas son algunas características que tiene el mod_pagespeed:

► Minimiza el tamaño de la carga

• Optimizar imágenes.
• Elimina comentarios.
• Elimina espacios en blanco.
• Minifica JavaScript.
• Minifica CSS.

► Minimiza los tiempos de peticiones

• Combinar CSS.
• CSS en línea.
• Combinar JavaScript.
• JavaScript en línea.
• Configuración Domain Sharing.
• Imágenes de Sprite.
• Precarga DNS.

► Optimiza la presentación de la web

• Lazy Load en imágenes.
• Javascript Footer.
• Mover CSS header.
• Optimiza Meta Tags.
• Precarga de recursos.

► Optimiza la caché

• Canonicalizar bibliotecas de JavaScript.
• Extender caché.
• Extender archivos PDF de caché.
• Caché de almacenamiento local.
• Esquema de CSS.
• Esquema de JavaScript

Como vemos estos son algunas de las características más importantes de este sistema creado por Google, y como siempre, Google se supera y hace que la optimización sea fácil.

He de decir que para que esto funcione hay que tenerlo instalado y activo en el servidor, y son muy pocos hosting los que tiene este módulo disponible.

Si tenemos contratado un VPS o algo superior para nuestro eCommerce, podemos instalarlo nosotros mismo si tenemos nociones de Sistemas, o podemos pedirlo a soport, si es un servidor administrador.

Te aseguro que con la configuración por defecto nos mejorará el WPO y la puntuación del pagespeed una barbaridad.

8. CDN vs Domain Sharding vs HTTP/2

Esta sección hay que saber diferenciarlo entre estas 3 opciones y para qué sirve cada una, y así sabremos cuál es la que debemos de utilizar en nuestro proyecto para mejorar el WPO.

1. CDN

Red de distribución de contenidos, los servicios más destacables de CDN de los que hemos hablado son CloudFlare, Amazon CloudFront y KeyCDN (recomendado para visitas externas a tu datacenter).

2. Domain Sharding

Técnica de optimización de carga que nos permite realizar la carga paralela de los elementos de una web desde varios subdominios que apuntan al mismo servidor.

3. HTTP/2

Una única conexión para gobernarlo todo, HTTP 2.0 utiliza una única conexión para ofrecer múltiples solicitudes y respuestas en paralelo.

Resumiendo tengo que decir que la técnica de Domain Sharding ya no tiene sentido desde que apareció el protocolo HTTP/2, y la CDN tiene sentido si tenemos tráfico desde países distintos de donde tenemos alojado nuestro servidor.

Por lo tanto, recomiendo tener activo el HTTP/2 siempre y utilizar el CDN cuando tengamos más de 25% de nuestros usuarios que sean de países distintos al país del alojamiento del hosting.

En PrestaShop, para configurar tanto la CDN como el Domain Sharding, basta con acceder a Parámetros Avanzados > Rendimiento y configurar los subdominios en servidores de medios, para que todo funcione correctamente.

4. AMP

AMP es una manera de compilar páginas web para contenido estático de representación rápida. AMP en acción consta de tres partes diferentes:

► AMP HTML: es básicamente contenido HTML ampliado con propiedades AMP personalizadas.

► La biblioteca AMP JS: implementa todas las prácticas recomendadas de rendimiento de AMP, administra la carga de recursos y te proporciona las etiquetas personalizadas

► El Google AMP caché: es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos.

El AMP se implementó realmente para web con mucho contenido de texto y lectura como blogs, periódicos, etc; y realmente para tiendas virtuales no tendría mucho sentido, pero si es cierto que cada vez son más las tiendas que apuestan por esta tecnología como es Ebay.

Para implementarlo en PrestaShop, tenemos varios módulos de AMP en la tienda de PrestaShop, donde podemos adquirirlos y tendremos activo el AMP en toda nuestra tienda.

Conclusión

PrestaShop es una gran herramienta para realizar eCommerce que está bien programada, que junto con un buen servidor, podemos tener una gran experiencia para los usuarios y el WPO.

Una vez tenemos estos 2 cualidades, solo tenemos que configurarlo todo correctamente e instalar algunos módulos adicionales para terminar de rematar nuestro WPO y tengamos una tienda realmente veloz.

Solamente tenemos que medir bien nuestra tienda y trabajar un poco para conseguir los mejores resultados en cuanto a velocidad.

Tenemos que recordar que Google ha admitido que la optimización y la puntuación de pagespeed insights repercutirán en el ranking de la versión mobile, por lo que ¡ya estáis tardando en mejorar vuestro WPO con la ayuda de esta guía!

Imágenes (Negocios) propiedad de Freepik.