Optimiza de manera profesional tu página web

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Optimiza de manera profesional tu página web"

Monica Méndez Luna
hace 8 años
Vistas:

1 Optimiza de manera profesional tu página web 1

2 Darío Balbontín Fernández contacto@dariobf.com 2

3 09/11/12 49

4 09/11/12 49

5 Plan de vuelo 1) Qué es el WPO y por qué? 2) FEO. 3) SSO. 4) Herramientas. 6) Imágenes. 7) Wordpress. 5

6 Qué es WPO? WPO o Web Performance Optimization es el proceso de optimización de sitios web tanto a nivel usuario como a nivel servidor para reducir el tiempo de carga del mismo. Hagamos sitios web más rápidos. WPO es similar al SEO en términos de que optimizar el tiempo de carga genera mayor tráfi co hacia tu sitio web. Sin embargo, WPO no termina ahí. Existe clara evidencia de que WPO mejora, además, la experiencia de usuario, aumenta las ganancias y reduce costos operativos. Steve Souders, encargado del equipo de WPO en Google 6

reducir el tiempo de carga del mismo. Hagamos sitios web más rápidos.

7 Por qué WPO? El tiempo de carga del sitio infl uye en las métricas de negocio. Pérdidas: Bing: una página dos segundos más lenta resulta en una reducción de un 4,3% en ganancias por usuario. Yahoo: Una demora de 400 milisegundos supone una pérdida del 5% al 9% en toda la página. Google: Una demora de 400 milisegundos genera una bajada del 0,59% de búsquedas por usuario. Amazon: 100 milisegundos de demora en el tiempo de carga les hace perder un 1% de ventas. Ganancias: Mozilla: Hizo su página de descargas 2,2 segundos más rápida e incrementó el número de descargas en el 15,4%. Google Maps: Aligeró los fi cheros que conformaban la página en un 30% y la consulta al sitio aumentó en un 30%. Netfl ix: Al habilitar la compresión Gzip hizo que su web fuese entre el 13 y el 25% más rápida; redujo su volumen de tráfi co a la mitad. 7

Amazon: 100 milisegundos de demora en el tiempo de carga les hace perder un 1% de ventas.

8 FEO Front End Optimization u optimización del lado cliente. Reducir peticiones HTTP: Combinar JS y CSS en un único fi chero. Mejor uno grande que muchos pequeños. Combinar imágenes: CSS Sprites. CSS en la parte superior. JS en la parte inferior. Evitar 404. Cachear, cachear y CACHEAR el contenido estático (imágenes, css, js, etc) Evitar redirecciones. Compresión Gzip. 8

Mejor uno grande que muchos pequeños. Combinar imágenes: CSS Sprites.

9 FEO NO TAN RÁPIDO 09/11/12 9

10 FEO Combinar JS y CSS en un único fi chero. Mejor uno grande que muchos pequeños. 10

11 FEO Combinar imágenes: CSS Sprites. 11

12 FEO Front End Optimization u optimización del lado cliente. Reducir peticiones HTTP: Combinar JS y CSS en un único fi chero. Mejor uno grande que muchos pequeños. Combinar imágenes: CSS Sprites. CSS en la parte superior. JS en la parte inferior. Evitar 404. Cachear, cachear y CACHEAR el contenido estático (imágenes, css, js, etc) Evitar redirecciones. Compresión Gzip. 12

13 SSO

14 SSO Server-Side Optimization u optimización del lado servidor. Compresión Gzip. Caché: php-apc, php-xcache (opcode) Expiración. Minimizar peticiones externas (peticiones DNS). 14

15 SSO Compresión Gzip. <ifmodule mod_defl ate.c> AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE font/truetype AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/eot </ifmodule>

application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE

16 SSO Expiración con mod_expires. <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" AddType image/x-icon.ico ExpiresByType image/x-icon "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> 16

year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" AddType

17 SSO Server-Side Optimization u optimización del lado servidor. Compresión Gzip. Caché: php-apc, php-xcache (opcode) Expiración. Minimizar peticiones externas (peticiones DNS). 17

18 Herramientas Google pagespeed Insights: GTMetrix: Webpagetest: LoadImpact page analyzer: LoadImpact: Loads.in: Yslow: Pingdom: 18

org LoadImpact page analyzer: http://loadimpact.

19 Imágenes Domain sharding ww1.dominio.ext/imagen1.png ww1.dominio.ext/imagen2.png ww1.dominio.ext/imagen3.png ww2.dominio.ext/imagen4.png ww2.dominio.ext/imagen5.png ww2.dominio.ext/imagen6.png ww1.dominio.ext/imagen7.png 19

png ww2.dominio.ext/imagen4.png www.dominio.ext/imagen5.png ww2.dominio.ext/imagen5.png www.dominio.ext/imagen6.png ww2.dominio.ext/imagen6.png www.dominio.ext/imagen7.

20 Imágenes Geolocalización de contenidos (CDN) Se replica en centros de datos de todo el mundo y el sistema redirecciona al contenido geolocalizado que ha de descargarse. Recomendado para sitios grandes, con cierto tamaño y proyección internacional. Caro. 20

contenido geolocalizado que ha de descargarse.

21 Wordpress Plugins WPO WP Super Cache o W3 Total Cache. Lazy load. (carga imágenes de forma asíncrona; según el usuario hace scroll). WP Smush.it Optimiza multimedias cuando se suben al panel). WP Minify. WP Parallel Loading System Automatiza (bastante) el domain sharding de imágenes. 21

22 PREGUNTAS? Profundiza conocimientos con la guía WPO de Javier Casares 49

23 Darío Balbontín Fernández contacto@dariobf.com 23

Documentos relacionados

Web Performance Optimization rapidez por defecto

Web Performance Optimization rapidez por defecto Qué es Web Performance Optimization? Steve Souders acuña el térmico WPO Cuanto más rápido va un sitio, mejor. Rapidez por defecto: muchas aplicaciones que