presentación webinar: "acelera tu web: optimiza el entorno"

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

http://www.siteground.es/


Sumario

Acelera tu web: optimiza el entorno

(webinar)

Claves, técnicas y estrategias relacionadas con la

optimización del entorno de tu proyecto web.


#SGwebinarAcelera



Impacto velocidad


#SGwebinarAcelera

Fuente:WPOStats



http://www.creativindie.com/



Conversión vs. Tiempo de carga


#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)


#SGwebinarAcelera




#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...


#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)


#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


#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


#SGwebinarAcelera



Hosting: datacenter


#SGwebinarAcelera



Hosting: optimización


#SGwebinarAcelera



Hosting: escalado vertical


#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)


#SGwebinarAcelera



Tecnología servidor: SSL


#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


#SGwebinarAcelera



Configuración servidor: HTTP

Revisar los códigos HTTP devueltos por el servidor


#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


#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


#SGwebinarAcelera



Ajustes servidor: robots


#SGwebinarAcelera



Cache: estrategias

• Navegador cliente

• CDN intermedia

• Proxy inversa

• Servidor web (configuración)

• PHP (memoria)

• CMS (core, plugins, módulos, memcached, ....)

• Conexión BBDD


#SGwebinarAcelera



Beneficios adicionales CDN

• Compresión de archivos

• Minificar archivos de texto

• Concatenar archivos

• Protección contra el hotlinking


#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


#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.


#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


#SGwebinarAcelera



Recursos de terceros: usar CDN


#SGwebinarAcelera



Recursos de terceros: CDN


#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:


#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


#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


#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


#SGwebinarAcelera



¿Último consejo?

A veces, inventar es copiar bien


#SGwebinarAcelera



¿Preguntas?


#SGwebinarMembership



Síguenos en

@SiteGround_ES

SiteGround España

SiteGround España


#SGwebinarMembership



presentación webinar: "acelera tu web: optimiza el entorno"

Technology