#SMMDay

WPO para tiendas online WooCommerce

#SMMDay

@alvarofontela

CO-FUNDADOR DE

RAIOLA NETWORKS

CONSULTOR WORDPRESSESPECIALIZADO EN WPO

¿QUÉ ES EL WPO?

Se trata de una serie de técnicas y buenasprácticas para hacer que un sitio web cargue más rápido y el visitante vea la página antes.

@alvarofontela #SMMDay

@alvarofontela #SMMDay

RAZONES PARA TENER UN ECOMMERCE RÁPIDOPARTE I

Zalando consiguió durante el veranode 2018 una mejora aproximada del 0,7% en el ticket

medio simplemente mejorando la velocidad de carga en 100ms.

AliExpress mejoró la velocidad de carga en 2016un 36% y aumentó en un 27% la conversión para nuevos clientes.

RAZONES PARA TENER UN ECOMMERCE RÁPIDOPARTE II

@alvarofontela #SMMDay

Walmart mejoró en 1 segundo su velocidad de cargaen 2013 y aumentó aproximadamente en un 10% la conversión.

RAZONES PARA TENER UN ECOMMERCE RÁPIDOPARTE III

@alvarofontela #SMMDay

En 2008, Amazon publicó un estudio dondecomentaba que un retraso de 0,1 segundos (100ms) en la

carga de sus páginas provocaba una bajada de ventas del 1%.

RAZONES PARA TENER UN ECOMMERCE RÁPIDOPARTE IV

@alvarofontela #SMMDay

TÚ TAMBIÉN PUEDES HACERLO EN TU ECOMMERCE

¿POR QUÉ WOOCOMMERCE + WORDPRESS?

@alvarofontela

USO FACILIDAD COSTES

#SMMDay

WPO PARA WOOCOMMERCE

@alvarofontela

Un cache de página bien configurado para ser eficiente nos proporcionará una mejora BRUTAL en los tiempos de carga.

@alvarofontela

1- CONFIGURACIÓN DE CACHE EN WOOCOMMERCE

PARTE I

#SMMDay

WP Rocket W3 Total Cache Swift Performance

Para WordPress + WooCommerce recomiendo estas soluciones de cache:

@alvarofontela

1- CONFIGURACIÓN DE CACHE EN WOOCOMMERCE

PARTE II

En servidores con LiteSpeed Cache, es recomendable usar LS Cache.

#SMMDay

Es MUY importante revisar que no se incluyan en cache las partes

dinámicas de una tienda online, yaque pueden provocar un problema de

privacidad importante.

@alvarofontela

1- CONFIGURACIÓN DE CACHE EN WOOCOMMERCE

PARTE III

#SMMDay

Las mejoras no solo serán de caraal usuario, sino también de cara al

bot de Google y al rastreo denuestrositio web.

@alvarofontela

1- CONFIGURACIÓN DE CACHE EN WOOCOMMERCE

PARTE IV

#SMMDay

El 99% de los sitios web de Internet tienen problemas con la optimización y el escalado

de las imágenes cargadas.

@alvarofontela

2 – OPTIMIZACIÓN DE IMÁGENESPARTE I

#SMMDay

@alvarofontela

2 – OPTIMIZACIÓN DE IMÁGENESPARTE II

IMAGIFY TINYPNG EWWW IMAGE OPTIMIZER

Mediante plugins para WordPress podemos optimizar y escalar automáticamente las imágenes subidas a la tienda online.

#SMMDay

Es muy importante controlar el reescalado para evitar mostrar imágenes

demasiado GRANDES en huecos demasiado pequeños.

@alvarofontela

2 – OPTIMIZACIÓN DE IMÁGENESPARTE III

#SMMDay

@alvarofontela

3 – OPTIMIZACIÓN DE CSS Y JAVASCRIPTPARTE I

COMBINAR:

MINIFICAR:

CARGA ASÍNCRONA:

Unir varios archivos del mismo tipo en un único archivo.

Reducir el peso de los archivos eliminando “basura”.

Carga del JavaScript en paralelo para “ganar tiempo”.

#SMMDay

En WordPress podemos hacer estomediante plugins, aunque su

funcionamiento no siempre es el correcto.

@alvarofontela

3 – OPTIMIZACIÓN DE CSS Y JAVASCRIPTPARTE II

Más información aquí: raiola.es/optimizarjscss

#SMMDay

Las mejoras no son solo en la velocidad de carga para el usuario, sino en la

facilidad que tiene el bot de Google para rastrear la web.

@alvarofontela

3 – OPTIMIZACIÓN DE CSS Y JAVASCRIPTPARTE III

#SMMDay

@alvarofontela

4 – OPTIMIZACIÓN DE GOOGLE FONTS PARTE I

Al abusar de Google Fonts se producen problemas derendimiento por peticiones externas.

Al extenderse el uso de Google Fonts, muchos sitios web ABUSANde estas fuentes.

#SMMDay

@alvarofontela

4 – OPTIMIZACIÓN DE GOOGLE FONTS PARTE II

Combinar todas las peticiones en una única petición.

Cargar las fuentes de Google Fonts desde el servidor de la web (local).

Para optimizar la carga de Google Fonts podemos:

#SMMDay

@alvarofontela

4 – OPTIMIZACIÓN DE GOOGLE FONTS PARTE III

SELF-HOSTED GOOGLE FONTS PRO ANY FONT

Existen dos plugins que te ayudarán a optimizar la cargade Google Fonts en WordPress:

#SMMDay

La carga condicional o carga inteligente de elementos en WordPress + WooCommerce

nos permite cargar scripts JS y hojas de estilos CSS en páginas de la web donde realmente se necesitan y no se cargan

donde no se necesitan.

@alvarofontela

5 – CARGA CONDICIONAL DE ELEMENTOS Y PLUGINS

PARTE I

#SMMDay

@alvarofontela

5 – CARGA CONDICIONAL DE ELEMENTOS Y PLUGINS

PARTE II

En situaciones “chungas” podemos mejorar los tiempos de respuesta para

Google simplemente con la carga condicional de elementos.

#SMMDay

@alvarofontela

5 – CARGA CONDICIONAL DE ELEMENTOS Y PLUGINS

PARTE III

PERFMATTERS SCRIPTS DEQUEUER GONZALES WORDPRESS PLUGIN

3 plugins te permitirán hacer carga condicional FÁCIL en WordPress:

#SMMDay

@alvarofontela

6 – CONFIGURACIÓN DE UN CDN PARTE I

Un CDN es un servicio que nos permite servir contenidos estáticosdesde servidores más cercanos geográficamente al visitante.

#SMMDay

6 – CONFIGURACIÓN DE UN CDN PARTE II

Un CDN es útil cuando tenemos mucho tráfico internacional. Por ejemplo, cuando tenemos una web en España pero vendemos a TODO el mundo,

sobretodo a habla hispana.

@alvarofontela #SMMDay

6 – CONFIGURACIÓN DE UN CDN PARTE III

La mejora al servir imágenes con un CDN se nota mucho, sobretodo cuanto mayor es la distancia y por lo tanto la latencia.

@alvarofontela

(Prueba desde EE. UU., servidor en España, CloudFlare CDN)

#SMMDay

6 – CONFIGURACIÓN DE UN CDN PARTE IV

@alvarofontela

KEYCDN CDN77 AMAZON CLOUDFRONT

Existen distintos servicios CDN, pero yo recomiendo estos 3

#SMMDay

WordPress SOLO puede usar de forma nativa 40 MB de RAM por proceso PHP.

Podemos ampliar este límite en el wp-config.php

@alvarofontela

7 – TWEAKS Y AJUSTES EN WOOCOMMERCE

PARTE I

Más información aquí: raiola.es/wpmemorylimit

Ampliar WP_MEMORY_LIMIT

#SMMDay

@alvarofontela

7 – TWEAKS Y AJUSTES EN WOOCOMMERCE

PARTE II

Optimizar las consultas y la ejecución de scripts de WooCommerce conPremmerce WooCommerce Performance Optimizer.

Más información aquí: raiola.es/premmercewpo

#SMMDay

Esto suele funcionar en tiendas MUY grandescon muchos productos y muchas variaciones,

aunque es una medida de último recurso.

@alvarofontela

7 – TWEAKS Y AJUSTES EN WOOCOMMERCE

PARTE III

Optimización de la base de datos MySQLy creación de índices

#SMMDay

@alvarofontela

7 – TWEAKS Y AJUSTES EN WOOCOMMERCE

PARTE IV

#SMMDay

Un servidor web con Nginx o LiteSpeed puede ayudarte a obtener mejores

tiempos de respuesta al servir páginasa los visitantes, incluso con un cache

de página configurado.

gracias@ALVAROFONTELA @RAIOLANETWORKS

muchasCONSULTOR WORDPRESS & CO-FUNDADOR DE RAIOLA NETWORKS