16

Reduce el tiempo de carga de tu sitio con un simple plugin – LazyLoad

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (Sé el primero en calificar)
Loading ... Loading ...

Anteriormente hemos visto algunas herramientas para medir la velocidad de tu sitio, y así conocer donde “fallamos” en ese aspecto.

Esta vez vamos a echar un vistazo a una herramienta (Plugin) para mejorar ese tiempo de carga que es tan importante ante los ojos de google para un buen posicionamiento SEO.

Esto no es mas que una simple mejora de MUCHAS que hay, pero que vamos a ir viendo poco a poco.. Para tener nuestro sitio óptimo al 100% o al menos cerca.. Recordemos que la velocidad de nuestro sitio es clave, fundamental si queremos posicionarnos en google.

Lo que esta vez veremos es una “técnica” para reducir una buena porción de tiempo de carga de nuestro sitio web, nuestros usuarios y google no los agradecerá ;).. A esto se le conoce como Carga diferida o “Lazy Load”:

De que trata? =>

La idea aquí, es cargar las imágenes justas y necesarias al abrir el sitio. Normalmente, si tu sitio (home) tiene 15 imágenes cuando un usuario entra, tu navegador las carga TODAS.. (y no tiene porque).. Para que necesitamos que se “carguen” las imágenes del footer si no lo miraremos a primera vista?.. El caso es que si tenemos imágenes en nuestra web donde el usuario debe desplazarse para ver dichas  imágenes (abajo), no nos interesa que éstas imágenes sean cargadas inmediatamente al abrir nuestro sitio.. Solo necesitamos cargar los elementos (en este caso imágenes) necesarios para visualizar la página a primera vista (parte de arriba). Pero tranquilo, que esto no tiene “efecto secundario”, el usuario a medida que vaya “bajando” (explorando) tu sitio irán apareciendo (cargándose) las imágenes que no se cargaron al instante de entrar en tu sitio.. La idea? que en todo momento el navegador cargue solo los elementos necesarios.

previews-lazyload

Como lo hacemos? =>

Si ya hemos captado la esencia de este “tip”, vamos a ver como podemos ponerlo en practica.. Lo primero es saber que puedes hacer esto con TODOS los elementos de tu página.. Lo que mas nos interesaría son las imágenes (png, jpg, gif) y los widgets (cajón de facebook, de twitter, etc).. Que suele ser lo mas pesado. Esto podemos hacerlo con código duro y puro!! Pero este blog no está dedicado para entendidos en el tema precisamente (es mas para un “todo público”), por lo que intento ir siempre por el camino fácil y usar retoques de código lo “menos” posible..

Aplicación=>

Por ello y para ello vamos a usar un simple plugin » Advanced Lazy Load.

lazyload plugin

Los pasos? te los diré a continuación, presta mucha atención:

Descargar Plugin » Y YA. LISTO!!! :D  Eso es todo..

El plugin al “activarlo” pone a funcionar ese excelente método de lazyload que acabamos de mirar, en nuestro blog de WordPress. La única “función” que tiene y que podemos configurar en el plugin, es la velocidad con la que aparecen las imágenes cuando el usuario baja por nuestro sitio.. Quieres ver como se ve?.. Abre otra ventana de mi blog  » aquí « y al bajar verás como las imágenes van apareciendo poco a poco a medida que es NECESARIO verlas.. (Esa velocidad con la que aparecen las imágenes es lo que te permite modificar el plugin).. Puedes incluso quitarle la velocidad (el efecto), y que aparezcan al instante.. Eso no afectará nuestra intención de ganar velocidad en nuestro sitio.
No sé si puedas ver reflejado el “rendimiento” ganado en una herramienta Online de velocidad como la que hemos visto antes, ya que esto funciona con el navegador y scroll del usuario.. Y me parece que estas herramientas no “analizan” como un usuario (humano), sino mas bien como un bot (robot).  Sin embargo, no necesitas que ninguna herramienta te diga si ha mejorado expresado en % (porcentaje) o no, tu puedes notarlo perfectamente ;)

Comparte!

LuisLY

Soy Luis LY, la mayor parte de mi tiempo lo invierto aprendiendo y compartiendo sobre Diseño Web, Marketing y SEO.

16 Comments

    • Hola Rogelio.

      El problema puede producirse por 2 motivos:

      1.- Que estés usando compresión GZIP.. en este caso tendrás que subir el php.ini a la carpeta de Avanced-LazyLoad (que normalmente estará en la carpeta de plugins de tus ficheros).

      2.- El .js no está siendo cargado correctamente en tu plantilla.. Algo que puedes hacer manualmente incluyendo algo así: en la cabecera de tu sitio por ejemplo.

      Son un par de problemas que se me ocurren ahora mismo, ya que si no funciona, es porque el problema está directamente relacionado con el .js del plugin!

      Saludos.

  1. Gracias por el post, es super interesante… Lo que pasa es que este plugin solo vale para wordpress???… Y para los que tenemos blogger no sirve???… Es una pena. ¿Habria alguna posibilidad de algo similar para los que tenermos un blog con blogger??? . Gracias ;)

    • Hola Karmela,

      Desde luego que se puede.

      Tendrías que ir a Diseño » Edición de HTML » buscas la etiqueta </head> y justo encima añades esto:

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
      <script src='https://sites.google.com/site/scriptsbalcon/b/blcnlazzy' type='text/javascript'/>
      <script type='text/javascript'>
      jQuery(document).ready(function($){
      jQuery("img").lazyload({
      effect:"fadeIn",
      });
      });
      </script>

      Con ello cargas el script desde google. Y tus imágenes cargarán unicamente cuando sea necesario y haga falta verlas!!

      Saludos.

      • Muchas gracias Luis, probaré a ver que tal funciona con este script, aunque me da un poco de miedo meterme en el HTML, que ya me ha traido algún que otro disgusto, y me a la larga me ha bloquedado en alguna ocasión el blog, jeje … Saludos¡¡¡ ;)

        • Te entiendo, he pasado por ello.. Pero no es mas complicado que, hacer una copia del código.. Yo incluso, expandía los artilugios, luego copiaba TODO, y lo pegaba en un bloc de notas.. En plan “segundo respaldo”.
          Ya me contarás..

          PD. En tu blog que tienes cantidad de imágenes, te vendría de lujo!! Ademas comprimir cada imagen.

          Un saludo Karmela.

        • Por cierto acabo de intentar insertar el código que me indicas y me da error. No lo guarda porque algo está mal configurado…. Supongo que cuando dices que lo inserte justo encima de es eso justamente no???. O da igual donde lo inserte mientras sea antes de ello… Es que con estas cosas me hago un poco de lio…
          Mira me pone esto: No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 464, columna 85: Element type “script” must be followed by either attribute specifications, “>” or “/>”.
          Supongo que algo falla. Espero que lo puedas leer… Gracias Luis.

      • Gracias, no si las imágenes, aunque parezcan grandes, son de poco peso, que ya me encargo yo de eso… Solo tengo una pequeña duda. Habrás visto que tengo imágenes tipo gadget en el lateral derecho para definir lo que hay justo debajo de cada una de ellas o como enlace a webs… No sé si eso les afectará en cierta medida y algo se desconfigurará, que ya me ha ocurrido. Además no sé si tu sabrás el porque desde hace unos días, cuando subías una imagen como gadget, no te obligaba a ponerle un título y ahora si… Es un asco porque yo precisamente pongo la imagen para evitar el titulo y me estoy viendo obligada a poner aunque sea un punto para que me deje ponerlas… ¿Sabes porque es??… Algo ha cambiado en la configuración de blogger con esto?. Es una mierda, la verdad porque queda feo y ocupa espacio entre cada gadget… ¿Me sabrías decir algo??. Gracias infinitas… ;)

      • Bueno, vayamos por partes como diría Jack el destripador jeje..

        — Ya he actualizado el código, efectivamente tenía un pequeño error de cierre! Intenta colocar el código nuevamente (lo he editado) y justo arriba de la etiqueta de cierre /head.
        — He mirado lo que me decías en blogspot y tienes razón, actualmente piden “obligatoriamente” un título.. También he mirado lo del “punto” que colocas.. Si piensas que se ve muy hortera y para solucionar esto, puedes hacer lo siguiente:
        Al momento de “dar” un título, en lugar de poner un punto, pones esto: &nbsp;

        Ya me contarás! :)

        Saludos.

        • Hola Luis, nada no me deja guardar los cambios en la plantilla. Yo pongo en código justo encima de la etiqueta que dices de head, le doy a guardar plantilla, parece que la guarda, pero cuando le doy atrás me dice, que si me salgo sin guardar los cambios los perderé… Es decir, que no admite el código no se porqué. Ayer también quise poner un código de google analitics para tener unas estadísticas más completas del blog y cuando lo ponía en el HTML al salirme me daba el mismo mensaje… No lo entiendo porque ya he metido otros muchos y no me había dado problemas hasta ahora.. Ya estoy temblando que haya modificado algo en la plantilla y la haya jodido :( Es que he tenido muchos problemas (y los tengo) con el Avanzado de Personalizar de blogger y no puedo cambiar muchas cosas por un problema de ellos que no han sabido ayudarnos a los que nos paso hace meses y solo podía modificar cosas desde el HTML y si ahora tampoco voy a poder cambiar nada me voy a cabrear de verdad… Jo, es que no sé que hago mal¡¡¡¡ Me puedes ayudar porf avor???. Ya se que soy una plasta… ;)

    • No te preocupes Karmela, seguro hay una solución.
      Lo primero es identificar el problema.. Lo que dices es algo “quizás muy común”, en su día me pasó a mi lo mismo.. Antes de nada, asegúrate de que el problema lo tienes al momento de hacer cambios (indiferentemente de los cambios que hagas).. Para ello, puedes entrar al html y cambiar algo minúsculo, como por ejemplo un valor cualquiera, como el color de algo.. luego guardas y verificas que tanto el cambio realizado se haya producido con éxito y que no te ha dado ningún error.. Sea cual sea el resultado, me lo comentas!!

      • Hola Luis, vuelvo a la carga con esto del plugin para reducir el tiempo de carga de mi blog. Te acordarás que quise ponerlo en el HTML de la plantilla y me daba error. Bueno, ya he probado con otros códigos y no he tenido problemas. Ahora estoy intentado poner el tuyo y, sinceramente me pierdo a la hora de “colocarlo” Busco la etiqueta que dices de head, pero no sé donde tengo que ponerlo¡¡¡ Sé que parezco un poco paleta, y no entiendo que con tantos como he puesto ya en la plantilla todavía dude de donde tengo que ponerlo, pero lo cierto es que no sé exactamente donde tengo que ubicarlo para que la plantilla lo acepte. Me podrías indicar claramente en que posición hay que insertarlo???. Necesito tu ayuda¡¡ Gracias y espero me contestes porfavor… :)

  2. He probado el plugin y es muy interesante (gracias por el artículo). Sin embargo, no lo he mantenido activo por una razón: Yo uso un logo con imagen en mi blog y el plugin actúa sobre la misma de igual modo que con las demás. ¿Habría alguna manera (incluida la posibilidad de usar código PHP en vez del plugin) para poder seleccionar que imágenes “retardar” en la carga?

    Saludos y gracias de nuevo.

    • Hola Oscar,

      Hmmm me temo que algo está saliendo mal! El plugin no retarda las imágenes que se pueden ver a simple vista en el ordenador, esta diseñado para retardar unicamente las imágenes “que aún no se han visto” (que están debajo de tu barra de escritorio) y comienzan a “aparecer” una vez comenzamos a bajar..
      De cualquier modo si se puede hacer sin necesidad de plugin, unos comentarios mas arriba le explico a Karmela que script usar para hacerlo sin plugin (en su caso porque usa blogspot).

Deja un comentario