Sois muchos los que después del twitt que puse el otro día me habéis enviado mails y habéis compartido algún wave conmigo para que os ayude a reducir el tiempo de carga de vuestro blog, es por eso que para no seguir repitiendo lo mismo a todos, voy a explicaros como he conseguido bajar del segundo en el medidor de velocidad de Pingdom.
Como en Pingdom se guardan los registros de las consultas, podéis comprobar que hace un mes cuando comprobe la carga de mi blog, estaba en 8,7 segundos xD
Los principales pasos que he seguido para optimizar mi blog, són los siguientes, primero tenemos que comprobar lo que tarda en cagar nuestro blog en Pingdom, nos fijaremos en las dos ventanas de resultados que nos muestra.
Si prestamos atención a la primera ventana, descubriremos que tenemos que:
- Buscar las lineas en rojo. Esas lineas son llamadas a archivos o normalmente imágenes que no se encuentran, bien porque las hemos cambiado de sitio o las hemos borrado, por lo que tendremos que buscar esa línea en nuestro código y borrarla.
- Fijarnos en los archivos con el final de la barra azul. Suelen ser archivos muy grandes y tenemos que intentar reducir su peso, como normalmente son imágenes es muy fácil, hay muchos optimizadores de imágenes online, aunque si no nos gusta ninguno siempre podemos hacerlo nosotros con algún editor, o directamente usar este.
Ahora nos vamos a centrar en la segunda ventana, en la que nos dice el tiempo total de carga y la cantidad de llamadas a archivos de cada tipo que ha encontrado. Y mirando estos datos tendremos que:
- Juntar todos los archivos CSS que tengamos por ahí sueltos en uno solo, el style.css de nuestro theme de WordPress (esto es muy fácil, sólo hay que copiar y pegar).
- Juntar todos los scripts (archivos JS) en uno sólo. Para eso seguí uno de los magníficos post que tiene Andrés sobre el tema.
- Usar CSS-Sprites. Podéis usar alguno de los que existen on-line, van bastante bien, y os cargará todas las imágenes de fondo de una sola vez, con lo que el número total de objetos lo reduciremos muchísimo.
Con todo esto ya reduciremos bastante la velocidad de carga de nuestro blog, pero todavía quedan muchas otras cosas que nos ayudarán a que nuestro blog sea el más rápido.
- Optimizar nuestro theme de WordPress. Todas las consultas que tengamos dinámicas hay que ponerlas estáticas.Tendremos que reemplazar todas las lineas dinámicas del header.php y el footer.php principalmente, para hacer eso, nos dirigiremos a Ver código fuente en el navegador, y sólo tendremos que copiar las rutas estáticas de ahí.
Ejemplo, donde ponga:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?;> charset=<?php bloginfo('charset'); ?>" />pondremos:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />- También podemos comprimir el CSS, hay muchas y diferentes formas para realizar esta compresión, eso ya es decisión vuestra optar por una u otra.
- Instalarnos el plugin de WordPress, WP-super cache si no lo tienes, que he podido comprobar que va el doble de rápido que el WP-Cache.
- Y por supuesto tener un buen Hosting, que nos proporcione la velocidad de carga necesaria para nuestro blog.
Aparte de todo esto, supongo que ha estas alturas ya sabéis todos que Google se esta tomando cada vez la velocidad de carga más en serio y dentro de poco esta velocidad influirá en los resultados de búsqueda, por lo que este pequeño manual os va a ir muy bien para mejorar vuestro posicionamiento.
Y por último, podemos seguir optimizando nuestro blog para que cargue más rápido instalando 2 extensiones de Firefox que van de lujo para esto, Firebug y YSlow. Yo ahora mismo estoy trabajando con ellos y haciendo pruebas de como puedo reducir más el tiempo de carga, si descubro algo nuevo, ya os lo contaré en el próximo post, así que sindicaros a mi blog para no perder detalle 😉
Mira que casualidad, llevo una semana con todo esto, dándole vueltas al blog y poco a poco voy reduciendo la carga.
Hay que tener en cuenta que varios plugins utilizan sus propios css o javascript, y estos los incluyen en la cabecera (Ej. wp-polls o ig-syntax-hilite), por lo que a la hora de unirlos todos en uno puede ser un poco más complicado.
Saludos.
Toni, para esto hay dos posibles soluciones:
PD: Ponte un avatar macho 😛
La segunda opción es la que había considerado.
Yo tenía el mismo problema, reducir todos los JS y CSS en uno solo, y lo conseguí, pero fallaban los plugins con CSS o JS externos.
Entonces buscando, encontré este plugin, WP Minify, que con solo instalarlo os juntará todos los ficheros CSS y JS en uno solo. Tan solo instalarlo y el solo hará su trabajo. Además cachea el resultado para mayor velocidad.
http://omninoggin.com/projects/wordpress-plugins/wp-minify-wordpress-plugin/
PD: InKiLiNo, sigue contando las técnicas para reducir el peso lo máximo posible.
Gracias por lo del plugin Dani, lo probaré.
Y si, os seguiré contando todo lo que descubra 😉
También se puede medir el tiempo de carga de la web con http://webwait.com/ . Te hace varias mediciones y calcula la media. Es cierto que no da mucha información pero son interesantes los resultados y compararlos.
Con pingdom puedes tener problemas con el httaccess y la configuración contra hotlinking, a mi me daban error las imágenes por ese motivo, ahora no me permite realizar la medición (tema permisos supongo)
Una parte clave es reducir el número de imagenes y optimizarlas. ¿Cual es el rango de colores de las imágenes? ¿Necesitas más de 256 colores para un icono?, busca optimizador de imagenes en google y haz la prueba te sorprenderas.
Saludos.
@Dani Salgueiro, he probado el plugin y no acaba por convencerme, además de que me daba un error de carga (por firebug lo ví). Pero es cierto que es muy interesante y se nota la velocidad de carga, para personas que no quieran complicarse es el plugin perfecto. Es una alternativa más.
En nuestro caso hemos desactivado el plugin y lo haremos manual, tal como indica @inkilino y la referencia al artículo de @anieto2k, para cargar los javascript asincronamente.
@Dani Salgueiro yo también probe anoche el plugin en un par de blgos y como me reducía el tiempo de carga y no me daba los resultados esperados, le dije a mi colega @intruso que lo probará él, y tampoco obtuvo los resultados esperados.
En definitiva, lo mejor es hacerlo uno mismo como bien comenta @komoloves.
Según Pingdom tools mi blog tarda 5.3 segundos, pero es por que ahora mismo tengo unas imágenes gigantescas en portada si no tardaría unos 4 segundos.
De todas formas veo que tendré que aplicar algunos de tus consejos y optimizar un poco el blog para cuando tenga más visitas 😉
Por cierto el plugin wp-super caché no me ha gustado nada me dejaba el blog en 8 segundos xD he tenido que borrarlo y borrar también los rastros mediante FTP por que no se borra del todo al desinstalarlo, igual es que no he sabido configurarlo bien. La verdad es que no me gusta tener muchos plugins, tengo los justos y necesarios, haber si puedo hacer a mano las cosas que aconsejas.
Y ya nos dirás cómo funciona el YSlow que ando pez con ese complemnto de firefox.
PD: Perdona por el tocho, salu2!!
Por cierto webwait me marca entre 4 y 5 segundos, me parece que el pingdom tool me marca más segundos por que cuenta las imágenes, y cómo tengo la portada del blog repleta de imágenes grandes tarda más de lo que yo esperaba.
La verdad es que tendré que prescindir de usar imágenes tan pesadas, o por lo menos usar un optimizador 🙁
Salu2!!
@Espineli lo de optimizar las imagenes te iría muy bien, piensa que no van a perder mucha calidad, a la vista ni se nota, y baja muchísimo su peso.
Y lo del Super Cache, ¿activaste todas las opciones de la configuración paa que fuese más rápido? Es muy raro porque a mi me sorprendio el aumento de velocidad, es más, si vaio la cache y entro en Pingdom, el blog se me va a casi 2 segundos 😮
En la configuración del Super cache, también hay un enlace para desinstalarlo con un click.
A mi me recomendaron desde el mismo hosting, utilizar un sistema de cache en el blog, porque un día los dejé un poco saturados de CPU, con un pico de visitas hacia una misma imagen. Al final preferí WP_Super_Cache, y ciertamente me ha bajado la transferencia mensual este mes.
Saludos.
Otra herramienta online para medir el tiempo de carga
http://www.octagate.com/service/SiteTimer/?Target=AJAX
Aquí komoloves.com e Inkilino.com están más o menos a la par. @Inkilino, en esta herramienta te sale un js en rojo, en cambio en el pingdom no.
Saludos
Ups! quizá fué eso que no activé todas las opciones, la verdad es que sólo dejé las que venían activadas por defecto.
Probaré activando todas las opciones cómo dices, a ver que ocurre 😀
Salu2!!
Hola!
Tal vez te interese probar Autoptimize: http://wordpress.org/extend/plugins/autoptimize/
Es un plugin que hice para hacer específicamente esto 🙂
Si tienes algun problema me dices! 🙂
Emilio he estado probando tu plugin y aparte de hacerme el doble de consultas, el tiempo de carga también era del doble.
Lo he probado en este blog y otro para asegurarme, y marcando casi todas las opciones en la configuración del plugin, y siento decirte que el resultado no ha sido el que esperaba.
El problema es que no hay que marcar todas las opciones 😛 Además, el plugin no hace consultas a la base de datos, por lo que no se de donde sacas que hace el doble de consultas :O
Si quieres charlar sobre autoptimize agregame al gtalk (tienes mi email en el comentario) o al msn webmaster arroba turl.com.ar
Un saludo!
Gran post. He aprendido mucho con él. Un Saludo.
Muy buen post.
Muy buena información, me pongo a trabajar en mis blogs con esto…
Muchas gracias…
Velocidad de carga: otro factor de posicionamiento SEO. Con la inclusión de la velocidad de carga en los algoritmos de Google, los SEO se preguntan ansiosos si acabará primando la velocidad sobre la calidad o la relevancia en los resultados de nuestros amados buscadores.