Finally the help of IT is here

Blog de soluciones informaticas.

Pasos para mejorar la velocidad de carga de nuestro blog o web (Parte I).

Escrito por Xavier Xaus Nadal on noviembre 14th, 2010

Buenas,

Esto tutorial lo voy a dedicar casi en exclusiva a la mejora sustancial de la velocidad de carga de un blog realizado en wordpress.

Este tutorial también nos puede servir para encontrar fallos de programación en nuestra web, o también formas de optimizar el código de la misma, pero el artículo irá más enfocado a wordpress como ya he dicho antes ya que las pruebas las he realizado con mi blog actual residido en un nuevo hosting como ya sabéis pero con mi querido CMS (WordPress).

Lo primero que debemos saber es que existen webs o plugins que nos facilitan enormemente este trabajo.

Las webs que he usado para hacer este benchmark han sido:

1.- http://www.webpagetest.org

2.- http://gtmetrix.com/

Los plugins que he usado son para firefox y han sido:

1.- Firebug

2.- PageSpeed

Y ahora os lo explico paso a paso:

1.- Descargar Firefox desde el siguiente enlace: http://www.mozilla-europe.org/es/firefox/

2.- Abrir Firefox.

3.- Descargar PageSpeed e instalar.

PageSpeed_1

4.- Descargar Firebug.

PageSpeed_2

5.- Pulsar sobre Instalar ahora y reiniciar firefox.

6.- Abrir la página web que queráis testear por ejemplo www.megacrack.es

7.- En el menú Herramientas –> Firebug –> Abrir Firebug.

PageSpeed_3

8.- En la parte inferior del navegador pulsad sobre la pestaña Page Speed y pulsar sobre Analyze Performance.

Se os mostrará algo parecido a lo siguiente. Esto es un resultado de mi blog cuando empecé a realizarle las mejoras. Puntuación de (78/100).

PageSpeed_4

Y ahora el resultado actual (Aunque espero mejorarlo un poquillo más) Puntuación de (95/100).

PageSpeed_5

En mi caso ya tengo realizadas bastantes mejoras como podéis comprobar que propician la velocidad del blog y el posicionamiento en los buscadores, pero intentaré explicar con mayor detalle como ir mejorando los puntos más importantes.

Primero de todo si tenéis el blog en WordPress debéis descargaros este maravilloso plugin (W3 Total Caché) ya que después de haber probado otros plugins como WP Super Caché, force g-zip, theme minifier, etc.. Este me ha llevado al éxito y al no tener que usar 5 plugins más ya que Total Caché lleva todo lo necesario para hacer volar vuestro blog. Con unos pequeños retoques y una pequeña inversión como siempre.

Lo podéis descargar desde http://wordpress.org/extend/plugins/w3-total-cache/

Instalarlo y empezadlo a configurar de la siguiente manera:

Pestaña principal:

Page Cache       =  Enable –> Disk (enhanced)

Minify                =  Enable –> Disk

Database Cache =  Enable –> Disk

Object Cache      = Enable –> Disk

Content Delivery Network  (CDN) Os hablaré en el artículo siguiente así que de momento dejadlo desmarcado.

Browser Cache   =  Enable

Pestaña Page Caché:

Marcar Don’t cache pages for logged in users

Marcar Cache home page

Marcar Cache feeds: site, categories, tags, comments

Marcar Cache 404 (not found) pages

Pestaña Minify:

Pulsad sobre el botón help en To rebuild the minify cache use the empty cache operation. Get minify hints using the help wizard.

Os aparecerá una nueva ventana donde debéis pulsar sobre Check para marcar todas las rutas CSS (En el caso de JS os recomiendo usar otro plugin que explico más adelante) y pulsar sobre Apply & close.

NOTA: Si tenéis publicidad con Google ADsense deberéis desmarcarlos, de lo contrario no os funcionará correctamente.

Marcar Rewrite URL structure

Marcar Automatically upload mofied files

PageSpeed_7

PageSpeed_9

Pestaña Database Cache:

Marcar Don’t cache queries for logged in users.

Pestaña Object Cache:

Marcar Don’t cache WordPress Admin

Pestaña Browser Cache:

Marcar TODAS las opciones.

Pestaña CDN (En el próximo artículo).

Y ahora a esperar un poquillo y dentro de un rato volved a hacer los benchmarks de los primeros enlaces de este artículo.

Ahora descargaros desde http://wordpress.org/extend/plugins/wp-minify/ el plugin wp-minify, instadlo y modificad estos parámetros.

Dentro de vuestra configuración del blog –> Ajustes –> WP Minify.

PageSpeed_10

Dejar marcado únicamente Enable JavaScript Minification.

Y esto es todo por hoy.

Hasta pronto.

Related Posts Plugin for WordPress, Blogger...
Etiquetas: , , , , , , , , , , , , ,


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>