Web Performance Optimization: Mejorando el proceso de carga

M E J O R A N D O E L P R O C E S O D E C A R G A
Web Performance Optimization
Por Jesús Pernas Alonso - @jpernasCurso de SEO para principiantes

Este soy yo
Siempre estoy
hablando de SEO.
Se lo he consultado
al médico y dice
que es crónico.
Curso de SEO para principiantes
Responsable de Marketing Online e
Imagen Corporativa en
www.pernas.eu
@jpernas
+JesúsPernasAlonso
jesuspernas.seo
jesuspernas
Jesús Pernas Alonso
Por Jesús Pernas Alonso - @jpernas

D E F I N I C I Ó N
“ C O N J U N TO D E AC C I O N E S Q U E M E J O R AN E L
R E N D I M I E N TO D E N U E S T R A W E B Y Q U E
L L E VAM O S A C AB O TAN TO A N I V E L D E S E RV I D O R
C O M O D E L A P R O P I A P Á G I N A”
¿Qué es WPO?
Curso de SEO para principiantes Por Jesús Pernas Alonso - @jpernas

¿Por qué hacer WPO?
…pues yo no
hago WPO y no
me va tan mal.

SEO

Ayuda al SEO
 Es un factor de posicionamiento en Google
 Es un factor de posicionamiento en Bing
 Google te etiquetará como “slow”

SEM

SEM más barato
Mejora el Quality Score
(> Quality Score = < CPC)

¿Cómo mejoramos el Quality Score?
• Más relevancia para esa búsqueda
• Mejorando la calidad de la landing
 La velocidad como factor de calidad

La experiencia
de usuario

La paciencia del usuario
0
2
4
6
8
10
2000 2005 2010 2014
tiempo medio en segundos
Fuentes: Akamai y HuminbirdUK

Conversiones
móviles

Conversiones móviles
Desde móviles se realizan
• 1 de cada 3 visitas
• 50% del tráfico en los ecommerce
• 1 de cada 4 compras

Velocidad de conexión y carga
Desde dispositivos móviles
cuando la conexión es mala
la Optimización es vital

Costes de
servidor

Ahorros en el servidor

El principio
del WPO

Steve Souders: el padre del WPO
2000 2008

¿Cómo es
el proceso de carga?

L O S P R O T O C O L O S H T T P Y E L F U T U R O D E L W P O
Protocolo HTTP
• En 1996 salió el HTTP 1.0
• En 1999 salió el HTTP 1.1
…y ahí nos quedamos?

La solución de Google

HTTP/2: El sucesor de SPDY

Optimización
de las imágenes

No más grande de lo que se ve
782Kb – 1500px x 1500px
Width=150; Height=150;
8Kb – 150px x 150px
Width=150; Height=150;
manzanas-xxl.jpg manzanas-xs.jpg

Resolución óptima
Las imágenes en una
pesolución de 72ppp

WORDPRESSOFFLINEONLINE
Herramientas para optimizar imágenes

Utiliza el formato adecuado
http://www.pernas.eu/formatos-de-imagen-para-web/

Utiliza CSS Sprites
#nav li a {background-image:url(‘imagen.png’)}
#nav li a.boton1 {background-position:0px 0px;)}
#nav li a:hover.boton1 {background-position:0px 50px;)}
#nav li a.boton2 {background-position:0px 100px;)}
#nav li a:hover.boton2 {background-position:0px 150px;)

Herramientas para generar Sprites
http://csssprites.com/
http://instantsprite.com/
http://www.es.spritegen.website-performance.org/

Comprimir con Gzip o Deflate
Amigo…
necesitas
bajar peso.

Como activar la compresión Gzip
1) En el servidor
2) En .htaccess
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file.(html?|css|js|phpl)$
mod_gzip_item_include handler^cgi-script$
mod_gzip_item_include mime^text/.*
mod_gzip_item_include mime^application/x-javascript.*
mod_gzip_item_exclude mime^image/.*
mod_gzip_item_exclude rspheader^Content-Encoding:.*gzip.*
</IfModule>
Habilitar el módulo mod_gzip.c en Apache.

Como activar la compresión Deflate
1) En el servidor
2) En .htaccess
<IfModule mod_deflate.c>
<filesMatch ".(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
Habilitar el módulo mod_deflate en Apache.

Minify

¿Qué es minificar el CSS?

Herramientas para minificar CSS y JS
WORDPRESSJAVA SCRIPTCSS
http://refresh-sf.com/
http://javascript-minifier.com/
http://www.jsmini.com/
http://jscompress.com/
http://www.minifycss.com/css-
compressor/
http://csscompressor.com/
http://www.freeformatter.com/cs
s-minifier.html

Controlar la carga de
CSS y JS

Combinando ficheros

Carga el CSS al principio
Antes de la etiqueta </head> siempre que sea posible

Carga el JS al final
Antes de la etiqueta </body> siempre que sea posible

Cargar asíncrona de JS
NO asíncrona Detiene la carga
Asíncrona NO detiene la carga

Caché de Navegador

Configurar la caché en Apache
httpd.conf
.htaccess

…o con plugins en Wordpress

EL TTFB
(Time To First Bite)
No es que sea
rápido… es que mi
TTFB es de 0,001seg
El TTFB mide cuánto tiempo tarda el
navegador en recibir el primer byte desde
el servidor cuando cargamos una URL
determinada

TTFB: Lo que de verdad posiciona
http://moz.com/blog/how-website-speed-actually-impacts-search-ranking

¿Cómo mejorar el TTFB?
 Servidor menos sobrecargado
 Menor latencia
 Optimizar la base de datos

Escoge bien
el Hosting

CDN
(Content Delivery Network)

Hosting

CDN

Algunos CDNs
http://www.cdnplanet.com/

H E R R A M I E N T A S
¿Cómo mido la velocidad de
carga?

http://www.webpagetest.org/

Google y Yahoo!

http://gtmetrix.com/

http://tools.pingdom.com/

Consejos para hacer
un WPO efectivo

¿Qué página analizas?
Analizo mi dominio
…y pienso
¡Todo va bien!

Analiza las landing
a las que llega el tráfico
Algo ocurría en las
páginas interiores
…y tu ni te enterabas.

Un par de consejos
si usas WordPress

L O S C A R G A E L D I A B L O
Cuidado con los Plugins

Q U E N O H A Y P O R D O N D E C O G E R L O S
Themes muy bonitos

• R E D U C I R L O S E L E M E N T O S D O M
• U T I L I Z A R S I E M P R E < L I N K > E N V E Z D E @ I M P O R T E N C S S
• M I N I F I C A R T A M B I É N E L H T M L
• E L I M I N A R E R R O R E S 4 0 4
• E V I T A R R E D I R E C C I O N E S
• … Y M U C H A S M Á S
Otras cuestiones
que se pueden mejorar

¡Muchas gracias!
A H O R A T E T O C A A T I
¿Alguna pregunta?

Web Performance Optimization: Mejorando el proceso de carga

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Web Performance Optimization: Mejorando el proceso de carga

Similar to Web Performance Optimization: Mejorando el proceso de carga (20)

Web Performance Optimization: Mejorando el proceso de carga