Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo

@MarcosRamajo
Optimiza el rendimiento de tu
Wordpress
#bbBIO

@MarcosRamajo
¿Por qué es necesario optimizar?
.
47%
de los usuarios esperan
que la página web cargue
en menos de 2 segundos.
40%
de los usuarios abandona
una página que tarda mas
de 2 segundos en cargar.
-1%
es la perdida de ingresos
para Amazon por una
décima de segundo.

Buena respuesta (página instantánea, sin retrasos)
Objetivos

Servidor debe responder rápido (no esté ocupado)
Objetivos

Reducir transferencias de datos (ahorra tiempo y dinero)
Objetivos

Conseguir un buen posicionamiento en buscadores
Objetivos

@MarcosRamajo
WordPress es el demonio
Cuidado con el síndrome de Diógenes
858,223,524 DOWNLOADS
no ayudan a los tiempos de
carga.
menor rendimiento
36,333 PLUGINS
Las plantillas (con plugins
empaquetados)
A mayor número de plugins
Plugimanía, plugiadicción,
plugidependencia, pluginitis.

@MarcosRamajo
Herramientas de medición
• Boomerang
• Pingdom Tools
• Google PageSpeed
• Yahoo! Yslow
• Web Page Test.

@MarcosRamajo
Las Métricas
0
1
2
3
4
5
Series 1 Series 2 Series 3
Número de peticiones
Tamaño
Tiempo de carga
First to byte
Start Render
Repeat view

@MarcosRamajo
Google PageSpeed

Velocidadvisual
1seg 5seg 10seg
- Colocar estilos CSS al principio (bajo <head>)
- Colocar posibles JS al final (sobre </body>)
- Eliminar JS duplicados y combinar si es posible

@MarcosRamajo
¿Dónde vamos a optimizar?
Caché
(gzip normalmente)
Compresión de contenido
03
Compresión de HTML
Compresión de CSS
Minify
Mejorar consultas a la BD
Mejoras en cargas
de imágenes

@MarcosRamajo
Configuración
No almacenar historial de entradas
define ('WP_POST_REVISIONS', false);
Vaciar la papelera
define ('EMPTY_TRASH_DAYS', 7);
Activar el Gzip de WordPress desde las
Opciones... /wp-admin/options.php
...allí busca el parámetro [gzipcompression] y lo
pones a “1”.
Mod Deflate…

@MarcosRamajo
Limpieza BD
• WP Optimize
• WP DBManager
• Optimize DB

@MarcosRamajo
Imágenes
Plugins Imágenes:
 WP Smush.it
 Regenerate Thumbnails
 EWWW Image Optimizer
 CW Image Optimizer
 Imsanity
 Hammy
A Manopla: Subir las imágenes
optimizadas

@MarcosRamajo
Minify
WP Minify
WP Minify Fix
WP Super Minify
Better WordPress Minify

@MarcosRamajo
Asincronía
Lazy load
Infinite Scroll
BJ Lazy load

@MarcosRamajo
Soluciones All in one
W3 Total Cache
WP Super Cache
WP Rocket
Falcon

@MarcosRamajo
Truco
Agregar Web Page Speed Checker
que te envía un mail si la nota de
page speed de tu página baja de
X valor.
---------------------
GT Metrix by Wordpress

@MarcosRamajo
Cache
• Quick Cache
• Hyper Cache
• WP Fastest Cache
• WP Fast Cache
• FLEXICACHE

@MarcosRamajo
Servidor
Existen diferentes tipos de sistemas de cache específicos para sitios web y servidores web,
estos son algunos ejemplos:
• Cache de página a nivel servidor: cache de Nginx, cache de Varnish
• OPCache para PHP en RAM del servidor: Zend OPCache, eAccelerator, APC, Xcache
• Cache de objetos en RAM del servidor: Memcached, APCu, Redis,
• Optimización Apache (mod_pagespeed, mod_ruid2)

@MarcosRamajo
Resumen Plugins
• Cache de página para WordPress: Flexicache, WP SuperCache, QuickCache,
WP Fastest Cache, W3 Total Cache.
• Cache de objetos para WordPress: EM Object Cache, Cachify, W3 Total Cache.
• Cache de bases de datos para WordPress: DB Cache Reloaded Fix, W3 Total Cache.
• Cache de widgets para WordPress: WP Widget Cache, W3 Total Cache.
• WP-FFPC: integración directa con Nginx

@MarcosRamajo
Nivel medio: Utiliza un CDN
• Por norma general no tiene porque ser necesario un CDN
• JetPack viene con un CDN gratis: Photon
• MaxCDN W3TotalCache
• Cloudflare (Plugin para WP, aunque recomiendo Sunny)
• Akamai
• Cloudfront

@MarcosRamajo
Nivel avanzado: Utiliza un servidor ligero
• Lighttpd: Servidor web optimizado para un alto rendimiento.
• Nginx: Potentísimo y ligero servidor web de alta eficiencia.
• Litespeed: Servidor web privativo de alto rendimiento y
compatibilidad.
• Cherokee: Servidor web de alto rendimiento, desarrollo español.

@MarcosRamajo
Nivel avanzado: Nginx como Proxy Inverso
• Como muchas veces ciertas aplicaciones sólo son compatibles con
Apache, se suelen utilizar dos servidores, uno ligero como proxy
inverso (que sirve el contenido estático) y otro «pesado» (Apache,
que sirve el contenido dinámico).
Aligerar carga del servidor
- Nginx recibe todas las peticiones
- Si se trata de contenido estático, lo sirve Nginx
- Si se trata de contenido dinámico, lo sirve Apache

@MarcosRamajo
Nivel avanzado: Cachear en la RAM
La idea es sencilla. En un sistema informático, la memoria RAM es el dispositivo de
almacenamiento más veloz.
Sistemas como Memcached o Redis, que cachean dicha información en memoria
RAM, consiguiendo un notable aumento de velocidad y rendimiento.

@MarcosRamajo
Esto no es una ciencia exacta

Caso de uso
11 Prototipo - sin optimizar – VPS Proveedor Conocido - PS 35/42 -
Imágenes optimizadas
WEBSITE
Caso de prueba
Desde New York
Desde Amsterdam
WEBSITE
Caso de prueba

Caso de uso
11 En Server Dedicado PS Frikitek 37/44
WEBSITE
Caso de prueba
Desde New York
Desde Amsterdam
WEBSITE
Caso de prueba

Caso de uso
22 Gzip - POST W3Total Cache

Caso de uso
22 Gzip - POST W3Total Cache
WEBSITE
Caso de prueba

Caso de uso
33 Add Headers. ETag, Last-Modified, Expires and Cache-Control HTTP
headers . Después de configurar correctamente el W3 Total Cache

Caso de uso
33 Add Headers. ETag, Last-Modified, Expires and Cache-Control HTTP
headers . Después de configurar correctamente el W3 Total Cache
Caso de prueba
WEBSITE

Caso de uso
44 Y ahora viene el CDN

Caso de uso
55 Algún retoque más y premio! Nota Si se puede hacer a mano, no
utilices un plugin
WEBSITE
Caso de prueba

@MarcosRamajo
Hola! Soy Marcos
¿Tienes
alguna
pregunta?

Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo

Ähnlich wie Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Charla betabeers optimización y rendimiento en Wordpress - Marcos Ramajo