WPO para Magento - Meet Magento 2017

@SiteGround_ES#MM17ES

Claves de rendimiento y optimización para tu eCommerce

WPO PARA MAGENTO


Fernando Puente@fpuenteonline

Informático de vocación y de profesión

Consultor Enterprise en SiteGroundConsultor para La Estrategia de ChapmanFormador para no técnicos


Claves de rendimiento y optimización para tu eCommerce

WPO PARA MAGENTO


¿Es importante un eCommercerápido y optimizado?


+60% faster,+14% donations

Obama campaign


If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every yearKissmetric


AliExpress reduced load time by 36% and saw a 10.5% increase in orders and a 27% increase in conversion for new customers


Fuente: Linkedin


TODO INDICA QUE SÍ


¿SOLUCIÓN?


Aplicar estrategias WPOa tu proyecto eCommerce


¿WPO = VELOCIDAD?NO


Estrategias y tareas de diseño, de desarrollo, de optimización, de mejora del rendimiento, de gestión de los recursos y herramientas disponibles, etc... todo ello orientado a que el servicio que da nuestra web o proyecto online, sea el óptimo para todos y cada uno de los usuarios que la visitan, en cualquier soporte y en cualquier momento

WPO


Para aplicar WPO, loprimero es conocer

qué factores afectan alrendimiento web


✓ Usuario: conectividad, localización y dispositivo

✓ Servidor: software, configuración, degradación…

✓ Hosting: CPD, HW & SW, soporte…

✓ Core, Plataforma o CMS utilizado

✓ Código: plantillas, plugins, extensiones, módulos, ...

✓ Diseño: lógico y visual

Factores de rendimiento web


✓ Eliminar lo superfluo o no necesario o duplicado

✓ Optimizar el rendimiento de los recursos

✓ Diseñar una solución única para cada sesión de

usuario, no "una para todo"

✓ Liberar de carga los recursos

✓ Aplicar lo último en tecnología

Principales estrategias WPO


9+1 claves WPO para Magento


1. SIEMPRE A LA ÚLTIMA


✓ Siempre última versión de core/módulos:

- Funcionalidades

- Rendimiento

- Seguridad

- Solución de errores

✓ PHP7 + OPcache

1. Versiones & actualizaciones


El único error admisible


Versiones PHP para Magento 2

Magento 2.0.X

Magento 2.1.X

Magento 2.2.X


2. NO SEAS DIÓGENES


✓ Eliminar módulos no utilizados

✓ Limpiar los registros (Magento, sistema, errores, …)

✓ Desactivar módulos Apache y PHP no necesarios

✓ Ficheros olvidados (entorno limpio)

2. Síndrome de Diógenes


3. EL TAMAÑO IMPORTA


✓ Habilitar compresión GZip (no imágenes)

✓ Minify de archivos de texto (CSS, JS, HTML, JSON,

XML o SVG)

✓ Combinar los CSS y JS

✓ Compresión de imágenes (previo o extensiones)

✓ Lazy load imágenes front-end

3. Cuestión de tamaño


Minify y concatenar estáticos


4. LO ESTÁTICO ES RÁPIDO


✓ Habilitar todos los sistemas de caché de Magento

✓ Combinar con reverse proxy (Varnish o NGINX)

✓ Estrategia Full page caché (extensiones)

✓ Flat Catalog (categorias/productos)

✓ Habilitar mod_expires/mod_headers estáticos

✓ Eliminar cabecera ETag (obligatorio en cluster)

✓ Añadir cabecera Vary: Accept-Encoding

4. La caché


Flat Catalog

>1000 productos


5. OPTIMIZA EL ARMARIO


✓ Habilitar query_cache en MySQL

✓ Tareas de mantenimiento

5. La base de datos en forma


Configuración query_cache

[mysqld]

query_cache_type = 1

query_cache_size = 64M

query_cache_limit= 4M


6. TODO SUMA


✓ Buen servicio DNS (rápido y TTL largo)

✓ Almacenar sesiones en Redis o Memcached

✓ Envío asíncrono de correos

✓ Deshabilitar servicios RSS

✓ Utilizar un dominio para estáticos (cookieless)

✓ Cargar los JS no críticos de manera diferida (defer)

✓ Revisar los enlaces rotos (carga innecesaria)

6. Los pequeños detalles


Herramienta: SolveDNS

La importancia de un buen DNS


Envío asíncrono de correos


7. QUE TRABAJEN OTROS


✓ Utilizar para recursos estáticos y mejor entrega

global de los mismos

✓ Eliminar funciones que presta la CDN:

- GZip

- Caché

- Minify

- Cabeceras HTTP

7. Usar recursos de terceros: CDN


8. SI YA ERES HTTP/2


✓ Domain sharding o paralelizar nombres de hosts

✓ Uso de sprites o imágenes concatenadas

✓ Resource inlining (CSS o JS)

✓ Concatenar JS y CSS

✓ Keep Alive header, ya no es necesario

8. HTTP/2: evitar


✓ Imágenes JPEG en formato progresivo

✓ Implementar SERVER PUSH

8. HTTP/2: novedades


header("Link: </css/styles.css>; rel=preload; as=style");

HTTP/2: SERVER PUSH

Disponible: Apache 2.4.18+ y Cloudflare

<FilesMatch "\.html$"> Header add Link "</css/styles.css>; rel=preload; as=style" Header add Link "</js/scripts.js>; rel=preload; as=script"</FilesMatch>


9. EL LOCAL DE LA TIENDA


✓ Localización del CPD

✓ Uptime

✓ Altos estándares de seguridad

✓ Soporte técnico especializado

✓ Escalabilidad y flexibilidad

✓ Tecnología: PHP7, HTTP/2 y SSD

9. Hosting


Si tu eCommerce estácaído o inaccesible,

¿cuántas ventas generas?


BONUS TRACK


Performance Dashboard


Performance Dashboard


FUTURO WPO


✓ Offline-First: uso de Service Workers

✓ Sitios mobile-only

✓ Formatos AMP y FIA para eCommerce

✓ Nuevos algoritmos de compresión: Zopfli o Brotli

✓ Nuevos formatos de imagen: WebP o BPG

Futuro tecnológico


Todo proyecto web esoptimizable


Gracias!

Software

WPO para Magento - Meet Magento 2017