BIO
Soy informático de vocación y de profesión, formador frustrado y beginner
de comer y beber.
21 años trabajando en TI, y los últimos 11 en medios de comunicación
online.
Soy CTO de La Estrategia de Chapman, donde gestionamos millones de
visitas al mes y en cinco idiomas, Formador de no-técnicos y colaborador
de SiteGround.
Puedes seguirme en @fpuenteonline
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Sumario
Acelera tu web: optimiza el entorno
(webinar)
Claves, técnicas y estrategias relacionadas con la
optimización del entorno de tu proyecto web.
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Impacto velocidad
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Fuente:WPOStats
Conversión vs. Tiempo de carga
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Fuente:Linkedin
Factores afectan rendimiento
• Usuario: Conectividad, Localización geográfica y Dispositivo
• Servidor (software/configuración/degradación)
• Hosting
• Plataforma o core de nuestra web
• Diseño lógico y visual
• Tamaño y peso de los elementos descargados
• Desarrollo sobre la plataforma (propio y de terceros)
@SiteGroundES www.siteground.es
#SGwebinarAcelera
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Solución: aplicar WPO
¿Velocidad = WPO?
No confundir WPO sólo con velocidad de descarga
de página; es un concepto más amplio que incluye
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...
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Objetivos WPO
• Reducir el tiempo de carga y procesado de la página (UX)
• Mejorar la experiencia de usuario en nuestro sitio y tener una mejor
conversión y menor tasa de abandono (UX)
• Mejorar nuestro ranking SEO (indexación)
• Aprovechar los avances tecnológicos (costes + UX)
• Liberar y reducir el número de recursos utilizados, atendiendo un
mayor número de peticiones (costes)
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Estrategias sobre el entorno
• Hosting
• Servidor (configuración, tecnologías y versiones)
• Compresión y tamaño
• Caché
• Integración y recursos de terceros
• Diseño
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Hosting
• Tipo de servidor: adecuado a nuestro proyecto
• Calidad del servicio técnico
• Conectividad (alta disponibilidad de red)
• Disposición de los datacenters
• Uptime anual
• Hardware & software optimizado
• Extras: balanceo de carga, escalado vertical y horizontal
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Hosting: datacenter
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Hosting: optimización
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Hosting: escalado vertical
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Tecnología servidor
• Linux
• NGINX para estáticos frente a Apache
• Reverse proxy
• Mínimo PHP7 o HHVM
• HTTP/2 y SSL incluidos
• Gestor BD: servidor local o dedicado
• Últimas versiones: software base, extensiones y core CMS (seguridad
y rendimiento)
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Tecnología servidor: SSL
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Configuración servidor
.htaccess o nginx.conf
• Limpieza y orden
• Hacerlo permanente a nivel de servidor
• Sólo lo necesario: tamaño y mantenimiento
• Global o de un directorio
• Busca en Internet lo que necesites: todo se puede hacer
• Cuidado: fuente de errores
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Configuración servidor: HTTP
Revisar los códigos HTTP devueltos por el servidor
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Configuración servidor: HTTP
Revisar los códigos HTTP devueltos por el servidor
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Optimización servidor
• Minificar contenidos estáticos
• Aplicar compresión GZip (ficheros estáticos). Truco: no usar con los
ficheros PNG, ya está comprimidos.
• Carga de scripts sólo en las páginas necesarias
• Síndrome de Diógenes: pruebas, archivos olvidados, miniaturas que
no usamos, …
• HTTP/1.1: combinar ficheros JS y CSS, imágenes e iconos en Sprites.
• HTTP/2: orden de llamada y uso de carga diferida, eliminar llamadas
mixed-content
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Ajustes servidor
Objetivo: eliminar lo superfluo
• Logs de sistema: ¿suficientes, sobran, limpieza? ¿Necesarios?
• Tareas de mantenimiento y backup. ¿Cuando hacerlas?
Automática o manual. Actualizaciones de software.
• Elimina parásitos: chupadores de contenido, image hotlinking, robots
que no aportan… (robots.txt)
• Sistemas de suscripción o externos: intentar no cargar el servidor
• Sitemaps específicos por tipo y por buscador
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Ajustes servidor: robots
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Ajustes servidor: robots
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Cache: estrategias
• Navegador cliente
• CDN intermedia
• Proxy inversa
• Servidor web (configuración)
• PHP (memoria)
• CMS (core, plugins, módulos, memcached, ....)
• Conexión BBDD
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Beneficios adicionales CDN
• Compresión de archivos
• Minificar archivos de texto
• Concatenar archivos
• Protección contra el hotlinking
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Cache: objetivos
1.- Acelerar la velocidad de navegación del usuario
2.- Descargar el menor número de objetos
3.- Reducir la carga en el servidor
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Cache: problemas
• El uso inadecuado puede generar problemas durante el desarrollo o
explotación.
• Se activa tras la segunda visita.
• Algunas estrategias dependen del usuario.
• Nuestra funcionalidad debe ser la misma, con o sin caché.
• No podemos utilizarla en todos los entornos, por ejemplo,
transaccional o con control de sesiones o geolocalización.
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Recursos de terceros
• CDN intermedia: Cloudflare, MaxCDN, KeyCDN, etc…
• CDN externa: Photon, Amazon, Azure, etc…
• Uso de repositorios: YouTube, Facebook, Flickr, Dropbox, etc…
• Evitar funciones síncronas o bloqueantes
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Recursos de terceros: usar CDN
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Recursos de terceros: usar CDN
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Recursos de terceros: CDN
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Diseño visual y lógico
• Diseño 100% responsive o desktop + mobile
• ¿Dominio especifico para mobile?
• Utilizar AMP o FIA
Ejemplo de un medio:
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Cómo hacer WPO
1. Medir y leer datos
2. Analizar
3. Implementar
4. Medir la mejora
El mayor reto de cada estrategia WPO es entender si aplica y mejora
nuestro proyecto, así como estimar el coste/beneficio de su
implementación
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Cómo hacer WPO: test
● Fija un objetivo cuantificable
● Aprende a medir
● Simula a un usuario:
Incógnito
Segunda visita
Dispositivos
Velocidad de conexión
● Repite el proceso periódicamente, los sistemas se degradan
@SiteGroundES www.siteground.es
#SGwebinarAcelera
Cómo hacer WPO: herramientas
Básico:
● Navegador + logs del servidor
● Google Analytics y Google Search Console
Test velocidad:
● Google PapeSpeed Insights
● Pingdom: Website Speed Test y Page Speed Monitoring
● GTmetrix (PageSpeed + Yslow)
● Website speed test (Dotcom-Tools)
● DareBoost o Webpagetest.org @SiteGroundES www.siteground.es
#SGwebinarAcelera
Resumen
● WPO es un escenario de mejora continua, desde el momento que se
empieza a diseñar el proyecto
● Ciertas optimizaciones se vuelven obsoletas cuando cambiamos de
arquitectura o tecnología
● El proveedor de hosting tiene que estar en el hilo de comunicación de
tu estrategia WPO
● Sólo puedes optimizar lo que puedes medir
Y recuerda, ¿optimizado 100%? Nunca, lo siento
@SiteGroundES www.siteground.es
#SGwebinarAcelera
¿Último consejo?
A veces, inventar es copiar bien
@SiteGroundES www.siteground.es
#SGwebinarAcelera
¿Preguntas?
@SiteGroundES www.siteground.es
#SGwebinarMembership
Síguenos en
@SiteGround_ES
SiteGround España
SiteGround España
@SiteGroundES www.siteground.es
#SGwebinarMembership
Top Related