Hoy vengo a contar algo muy sencillo para creo que es interesante y puede llegar a ser importante para tu blog.
Seguimos con algunos trucos para mejorar el tiempo de carga de tu web, al igual que en algunas ocasiones os hemos hablado sobre otros trucos para ello como podrían ser:
- Reducir las imágenes de tus artículos sin perder calidad.
- Eliminar plugins para limpiar tu blog y conseguir un mejor tiempo de carga.
- Limpiar estilos CSS no usados en tu blog para reducir la carga del mismo.
- Limpiar los restos de plugins antiguos que han sido eliminados.
- etc.
El tiempo de carga: factor muy importante a tener en cuenta.
Sabemos que el tiempo de carga es uno de los factores a tener muy en cuenta y a lo que últimamente deberás prestar especial atención por dos razones:
- La gente tiene cada vez menos paciencia y abandonará tu web sino carga rápido. Especialmente cuando la navegación ha aumentado mucho desde dispositivos móviles, donde la paciencia es aún cada vez menos.
- Es un factor muy importante para el SEO y si tarda mucho tu página en cargar, perderás posiciones en los resultados de Google ya que este es uno de los parámetros muy tenidos en cuenta por el buscador a la hora de posicionar una web.
Por estas razones, y otras cuantas más, hay que prestar cada vez más atención a lo que tarda en cargar tu blog.
En este artículo voy a seguir hablando del tema de la optimización de las imágenes, pero en vez de hablar sobre cómo optimizar las mismas (reduciendo el tamaño, por ejemplo), hablaré de cómo optimizar su carga.
He decir que esto podrán usarlo solo las personas que usen WordPress org como veréis a continuación.
¿Cómo optimizar la carga de imágenes en tu web?
Si te fijas en muchas grandes webs, verás como según vas bajando en la misma página, irán apareciendo las imágenes.
Eso quiere decir que no se cargan inicialmente, sino que se irán cargando según sea necesaria su visualización.
Ejemplos de esto lo puedes ver en Google Images, Facebook, o cualquier web importante en la que tengas que hacer scroll en la misma para ver más contenido.
Esto es importante por una simple razón: Al no cargarse las imágenes al principio, la página cargará mucho más rápido y el tiempo de carga que contará para el buscador será mucho menor. Del mismo modo que el lector no tendrá que estar esperando tanto tiempo para que termine de cargar completamente tu página y podrá empezar a visualizarla rápidamente.
No te preocupes porque no pasará como cuando lees un email y tienes deshabitada la visualización de imágenes mostrándose un hueco en blanco en ellas, sino que se cargarán solo las que se vayan a mostrar en la parte de la pantalla que se ve al entrar en tu web. Según vayas bajando por la misma, se irá cargando el resto.
Si miras cualquier artículo de mi web en el que haya imágenes más abajo de lo que se ve nada más cargar la página, verás cómo se nota que van apareciendo las imágenes según vas haciendo el scroll.
Bueno, basta de rollos….
¿Plugin para conseguir una carga optimizada de imágenes?
Como os he dicho, esto es muy sencillo.
Simplemente tendrás que instalar un plugin que se llama «Lazy load«. Seguro que hay muchos más, pero este es el que uso yo y funciona muy bien.
Lo bueno del mismo, es que no tienes que hacer nada. Con solo instalarlo, ya estará funcionando ya que no requiere de ningún tipo de configuración.
Acto seguido verás cómo has conseguido el efecto que comento en las imágenes de tus artículos.
Como he dicho era algo muy sencillo. No creo que haya reinventado la rueda ni nada parecido, pero espero que os pueda resultar interesante si no conocíais esa opción.
¿Lo estás aplicando ya en tu blog? ¿Qué te parece esta opción sino lo estabas haciendo?
Esta entrada tiene 15 comentarios
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
fercho 11/20/2013
Me pregunto si esto es en realidad una solución ya que me ahorro en la carga de imágenes pero a cambio tengo un plugin más que se debe cargar ¿habéis probado si compensa?
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Javier Elices 11/22/2013
Hola fercho,
Tiene sentido lo que comentas ya que estás ahorrando por un lado pero perdiendo por otro… De todas formas ten en cuenta una cosa. Una imagen en un artículo puede pesar unos 50-80 KBytes más o menos, y el fichero del plugin dudo que llegue a los 2KBytes. Al final es más lógica a aplicar al blog, pero ten en cuenta que la acción que más cuesta es la de lectura de ficheros, por tanto estás comparando una lectura entre dos ficheros de muy diferente tamaño.
Eso por verle una posible respuesta.
Por otro lado sí que he notado mejorws velocidades en la carga de mi blog, aunque tampoco te puedo decir que esté estrictamente relacionado con eso ya que he hecho unos cuantos cambios más, así que es difícil saber cuánto se ha ahorrado concretamente con cada una de las cosas.
Puedes probar tú mismo y medir los tiempos a ver qué conclusiones sacas. Agradeceré si luego nos lo comentas.
Muchas gracias por pasarte por aquí y comentar!
Un saludo y suerte.
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Luis Mena 11/23/2013
Voy a probar este plugin próximamente, ojala y funcione para acelerar la carga del blog. Gracias por la recomendación. Saludos!
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Javier Elices 11/24/2013
Hola Luis!
Me alegro que te haya parecido interesante. Ya nos contarás qué tal te va.
Realmente no se va a producir una mejora tremenda, pero todas estas pequeñas acciones van sumando para conseguir reducir la velocidad de carga.
Un saludo y mil gracias por el comentario!
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Tino 11/23/2013
Hola crack. Excelente como siempre con tus consejos. Sólo tengo una duda. Hay varios plugins con ese nombre. El que se llama Lazy Load a secas lleva un año sin actualizar y no está probado en las ultimas versiones de WP. Luego hay otro que se llama BJ Lazy Load, y ese si está actualizado hace prácticamente una semana.
¿Podrías confirmar cuál usas tu?Gracias!
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Javier Elices 11/24/2013
Hola Tino!
Uso el «Lazy load» a secas.. No me he fijado si estaba actualizado o no, pero sigue funcionando bien :).
Puedes probarlo si quieres, o también el otro.. supongo que funcionarán igual.
Gracias por comentar! 😉
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
#Jerby 11/25/2013
Una pregunta tonta: Los consejos que das sobre plugins o los tutoriales que en su momento te plantees, ¿los podemos guardar tus comentaristas?
Hace poco, le hice la misma pregunta a Víctor Campuzano y me comentó que por su parte no había problema siempre que pusiera su referencia. Por el momento lo he solucionado de esta manera: http://bit.ly/1g2f5bm
Me gustaría conocer tu opinión al respecto…
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Javier Elices 11/25/2013
Hola Javy, estoy con Victor!
Encantado de que lo guardes para ti o para quien le pueda servir si se mantiene la fuente de dónde ha salido (para evitar problemas de contenido duplicado en caso de que se publicara el contenido en otro lado). Mientras pongas solo el enlace, o parte del contenido con un enlace a la fuente, no hay problema y estaré encantado 😉
Saludos!
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
#Jerby 11/25/2013
Por ahora, la solución que he encontrado es ordenar a los autores por orden alfabético de su primer apellido (si es que lo conozco). En tu caso, como te anuncias como JaviEN pondré sólo esa referencias.
Dentro de cada autor, los plugins, tutoriales,… irán por orden alfabético. Y por último la referencia será el propio post. De esta forma, si dos autores escribieran alguna vez sobre lo mismo, aparecerían sus propias referencias y así, la gente que consultase la wiki podría tener las dos versiones a su disposición.
Tengo que reconocer que soy un enamorado de las wikis. Si se llevan bien, funcionan incluso mejor que un banco de tiempo: Cada uno aporta lo que sabe y consulta lo que ignora sin que haya ningún tipo de transacción por ello.
Ah! Ya estás puesto… mira a ver que te parece: http://bit.ly/1g2f5bm
También me he apuntado yo porque este verano me di a mí mismo un taller de blogging…
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Javier Elices 11/25/2013
Me parece perfecto cómo lo estás montando Javy!
A lo mejor, para dar un poco más de información útil, puedes poner una pequeña descripción entre el término que has puesto «Layouit», «Lazy load» y el enlace. Para que la gente que lo vea, sepa de qué va.
Algo sencillo como:
«Lazy Load»: cómo hacer que tus imágenes se carguen según se vayan visualizando en la pantalla y no en la carga inicial de la página.
Así será más fácil para la gente que lo consulte!.
Gracias como siempre por el aporte 😉
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
#Jerby 11/25/2013
Por coherencia #jerbyana, he cambiado el nombre de tutorial por el de ‘postorial’ (de post y tutorial): término imaginario que viene a significar ‘tutorial en forma de post’.
El resultado ha quedado de esta manera: http://bit.ly/18jpe3Q
Por si alguien más quiere colaborar en este ‘postorial’ he abierto el siguiente pad: http://titanpad.com/Postorial01
Transcribiré los cambios a la wiki lo antes posible…
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Javier Elices 11/25/2013
Genial! Buena iniciativa! Seguro que van saliendo artículos muy interesante… La seguiré de cerca.
Saludos!
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
#Jerby 11/25/2013
+1
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Johnny 04/23/2014
Este plugin no te da problemas de compatibilidad? Pregunto porque hace tiemo instalé uno en el blog que me desconfiguraba por ejemplo los Post relacionados y dejaba de mostrarme algunas imágenes y videos que usaba en mis artículos.
Gracias por la referencia con el plugin, viniendo de ti vale por mucho!!
Notice: Only variables should be assigned by reference in /home/monetizados/web/monetizados.com/public_html/wp-content/plugins/subscribe-to-comments/subscribe-to-comments.php on line 590
Javier Elices 04/23/2014
Hola Johnny!
Qué alegría verte por mi blog 🙂 .
Por mi parte no he tenido ningún problema. Lo tengo instalado en varios de mis proyectos y siempre me ha funcionado bien sin «estropearme» ninguna de las demás funcionalidades.
En cuanto a que dejen de aparecer algunas imágenes o vídeos, lo único que se me puede ocurrir es que haya algún problema de red, o que esté algo débil la señal o intensidad, y por eso no llegue a cargar todo ya que según vas bajando es como si fueras refrescando ciertos componentes de la página y sino hay señal suficiente no llegaría a cargarse bien.
Otra razón es que, efectivamente, tenga alguna incompatibilidad con algún plugin que tengas instalado. No sé si a alguien más le habrá pasado, pero a mi me ha ido siempre sin problemas.
Fíjate que sin este plugin, artículos como este que escribí no serían posibles http://tuviral.com/los-100-mejores-disfraces/ porque sería un infierno cargarlos al inicio.
De todas formas esto es probar y ver cómo va. Si ves que te descuadra elementos, se puede desinstalar sin problemas y como si nada hubiera pasado 😉 .
Saludos y gracias por comentar!