Optimizar tiempo de carga de nuestra web

Estoy leyendo este libro sobre como mejorar la carga de las webs y muchas de los blog de viajes tienen porblemas con el tiempo de carga, por eso he querido crear este post donde quiero explicar como mejorar la velocidad de carga de nuestras webs. Recibo correos pidiéndome como podría mejorar la carga de su web ya que va muy lenta y quieren acelerar la velocidad. ya que a mi siempre me han funcionado y he tenido resultados satisfactorios.

El tiempo de carga de la web es un factor muy importante tanto para el posicionamiento en buscadores como para la experiencia del usuario. El objetivo es reducir al mínimo el tiempo de carga, el mayor motivo por el abandono de una web es el exceso de tiempo de carga. Estudios indican que una persona entra a un sitio web y tarda mas de 3 segundos, el 40% termina dejando el lugar. Otra causa es debido al algoritmo de los buscadores, ya que uno de los factores que tienen en cuenta es la velocidad de carga de un sitio web, que influye directamente sobre la rastreabilidad del contenido del sitio web.

Bueno entremos en materia, primero de todo revisaremos nuestra web con diferentes herramientas online para medir la velocidad. En mi caso utilizo estas tres:

Comprobar tiempo de carga de nuestra web

https://developers.google.com/speed/pagespeed/insights/

http://gtmetrix.com/

http://tools.pingdom.com/fpt/

http://www.webpagetest.org/

Las tres webs son parecidas, en algunas puedes encontrar mas o menos información, para mi, mis favoritas es pagespeed de google, que podéis encontrar una extensión de chrome(donde hay muchas mas información y te entrega imágenes comprimidas,etc) y webpagestest, que te da unos consejos muy valiosos.

Como ejemplo realizare un análisis de mi sitio web. Primero de todo nos dirigimos a gtmetrix.com, analizara nuestra web. Los resultados son:

optimizar tiempo de carga de una web

He realizado el tiempo de carga de mi web y aproximadamente tarda 2 segundos en cargar todo el contenido de mi web. Como podemos observar me dan una buena puntuación así que el tiempo de carga de mi web es aceptable. Como veremos a continuación ahí algunos aspectos que incluso se pueden mejorar.

Ahora nos dirigimos a webpagetest.org y realizamos otro test. El rendimiento que nos muestra es:

mejorar velocidad de carga web para el posicionamiento en buscadores
como observamos el servidor tarda 1.032 segundos en enviar el primer byte de información(esto es un problema, ya que el primer byte es super importante, deberiamos tener menos de 0,3s), y la página comienza a visualizarse en 1.606s, el tiempo en load time es aceptable, pero nos perjudica mucho el first byte.

En estas dos webs podemos ver un timeline, de todo el contenido que carga y donde pierda mas tiempo y poderlo mejorar haciendonos una idea.

Enseñaros también google pagespeedDonde os muestran muchas indicaciones de como mejorar vuestra web.

Optimizar tiempo de carga web

Os explicare un pequeño caso practico, que le pasaba a un hombre que me pregunto por que le iba lenta su web, realice estos test y vi por ejemplo en gtmetrix, que el tiempo de carga del servidor en enviar el primer byte de información era de 2.7s y en google pagespeed, le mostraba un tiempo de respuesta del servidor muy lenta… Por lo tanto en estos casos tenemos que contactar con nuestro proveedor de hosting y que nos diga el motivo de esta carga tan lenta… Ya que podría ser que el servidor este mal administrado y por lo tanto conviene cambiar de proveedor o también que el first byte sea lento se debe a que tiene muchos procesos internos para mostrar la página, por ejemplo, hacer muchas consultas sql…. Podríamos plantear cachear la web para ahorrar tiempo.

Consejos para optimizar velocidad de una pagina web

Ahora os quiero enseñar algunos consejos, para poder mejorar vuestras webs.

Especificar el tamaño de las imágenes

Es importante en todas las imágenes especificar su tamaño, ya que con ello aceleramos el rendering de la página mediante la eliminación de reflows y repaints inecesarios.

Combinación de las imágenes mediante css Sprites

En este punto yo pensaba que no iba afectar mucho cuando me lo comentaron, pero mejoro mucho. ya que combinando las imágenes se reduce el número de peticiones de descarga que debe realizar el navegador para cargar el contenido total de la página web.

Crear imágenes svg o incrustadas en el código

En vez de usar un sprite, podemos utilizar imágenes svg, ya que pesan mucho menos y no pierden calidad, por ejemplo, utilizar un svg para el logo de la marca es una buena opción, ya que veremos el logo nítido y sin perder calidad, ademas solo nos ocupara unos 4-5kb. También podemos usar la imagen directamente incrustada en svg ahorrandonos una petición.

Aplazar el JavaScript

Podemos reducir el bloqueo que provoca la renderización de la página. El objetivo, es reducir al máximo el código JavaScript, sobretodo el inecesario y aplazar el JavaScript que no sea necesario al final de nuestro código.

Ordenando el css

Muchas veces instalamos plugins, widgets … Donde encontramos archivos css o JavaScript que son muy pequeños y directamente lo podríamos poner en nuestro css principal o en  nuestro código html. Ya que con esto reduciremos la cantidad de archivos que el navegador tiene que descargar antes de mostrar nuestra web. Ya que el navegador tiene que cargar nuestro HTML y luego descargar todos los archivos css o javascript. Por lo tanto Descargar 1 solo archivo es mejor que descargar dos.

Entregar imágenes al tamaño que necesitamos

Muchas veces utilizamos css o html para reducir el tamaño de una imagen, como consejo es mejor dar la imagen en el tamaño que vayamos a utilizar, con el tema del responsive no podemos hacer nada ya que la tenemos que modificar mediante css.

Optimizar las imágenes

Dentro de este punto entran muchas circunstancias como son el tamaño, el formato, formas… Yo como recomendación utilizo una web que se llama compressor.io comprime todas las imágenes. Otra cosa que podéis hacer es cuando editéis en Photoshop, las imágenes guardarlas para web y con una calidad alta. Con esto la perdida de calidad es mínima. Yo siempre paso la web por photoshop, la pongo en el tamaño que necesito, la guardo para web y luego la paso por compressor.io, con todo esto acabo ahorrando mucho y las imágenes no pesan más de 100kb(imágenes muy grandes)

Cachear la web y usando nginx

Cuando ya queremos una máxima optimización lo mejor que podemos hacer es cachear toda la web, eso si tenemos que tener mucho cuidado, ya que por ejemplo, con el cambio de moneda, usuario logueado… se tienen que mostrar bien para todos los casos, ya que si se cachea la web, puede ocurrir que cuando cambias de moneda, la web no cambia a dolares, se queda en euros…. Tendríamos que cachear la web según las cookies que usamos para cada cosa(login, moneda…). También otra opción sería usar marieDB con fullpagecache, con esto mejoraríamos bastante la web.

Con estos consejos podréis optimizar y acelerar vuestra web, espero que os haya gustado. Como cada optimización es diferente, en algunas es un simple cambio de servidor en otra es modificar la web… Si necesitáis ayuda mas especializada contactar conmigo

Si tenéis mas consejos no dudéis en comentarlos.

Si quieres ayudar a contribuir en el blog no dudes en pulsar en los banners de publicidad, Gracias!

Encuentra más Viajes

Comentarios en Optimizar tiempo de carga de nuestra web:

  1. Sara |

    He estado haciendo todas las optimizaciones del css, de la web … Y el tiempo de carga de mi web ha mejorado pero lo que no consigo reducir es el tiempo de respuesta del servidor, estoy pasando diferentes test de velocidad y siempre me sale que el tiempo de respuesta del servidor es demasiado elevado… He hablado con los del servidor y me dicen que está todo bien… Que puedo hacer para reducir el tiempo de carga de mi web?

    Responder
    1. David Gutiérrez |

      Sara, me alegro que el tiempo de respuesta de tu web se haya reducido! la verdad que el punto que te falla es un poco complejo resolver sin verlo… pero si el problema es el tiempo de respuesta del servidor que es muy elevado, puede ser por varias causas, el servidor esta mal configurado, el CMS que tienes hace muchas solicitudes para cargar la web o un poco de ambas, te aconsejo que hables con los del servidor y si te pueden cachear tu web, así evitaras tener que imprimir siempre la web… si no es así yo optaría por cambiar de servidor.

      Responder
  2. Antonio |

    Muy agradecido por tu post! Gracias a este artículo he podido mejorar el tiempo de carga de mi web de pasar de 10 segundos (la verdad es que tenía muchos problemas con la carga de la página…) A tener 3,5 segundos, creo que para mí conocimiento he mejorado bastante?

    David te atreves a mejorarme los tiempos de carga de la web? Te envío un email

    Responder
    1. David Gutiérrez |

      Buen trabajo Antonio! Y si me atrevo a mejorarte la web! Siempre hay cosas que se puede sacar algún segundo y poder cargar más rápido la web, hablamos por email!

      Responder
  3. Rafa |

    Muchas gracias David por el post! La verdad es que no le daba importancia al tiempo de carga de mi página web pero ahora que conozco estas herramientas le echaré un par de vueltas para ver como mejorar el tiempo de carga, ya que tengo un rendimiento de la web muy penoso…. Creo que tendré que contactar con un programador para que me agregue mi página web, ya que es bastante lenta… Tu estarias disponible? te envío un privado ahora!

    Responder
    1. David Gutiérrez |

      Perfecto Rafa hablamos por email y me alegro que te gusté el post sobre como optimizar tu web!

      Responder
  4. Jose |

    Hola David,

    Soy Jose miguel tengo una tienda online con prestashop y me gustaría saber como mejorar el tiempo de carga de mi web y en un futuro poder hacer algunas estrategias de seo, me podrías contactar para dejarme un presupuesto y te paso mi web la que quiero optimizar el tiempo de carga de la web … cualquier cosa me dices.

    Saludos,

    Responder
    1. David Gutiérrez |

      Hola José,

      Te envío un mail pasándote el presupuesto para optimizar la web, cualquier cosa hablamos por privado!

      Responder
  5. Joseba |

    muchas gracias David por el post super claro y fácil poder optimizar y ver el tiempo de carga de mi página web! La verdad es que he podido comprimir unas imagenes que las subi y pesaban mucho y ralentizaba mucho la carga de la web y luego por otro lado también vi que tenia scripts que no usaba…

    He podido ganar un par de segundos a la carga de mi web! Gracias

    Responder
    1. David Gutiérrez |

      Muchas gracias Joseba! Me alegro que te pueda servir de ayuda y espero que la carga de tu web ya vaya bien! Cualquier cosa me dices!

      Responder
    2. David Gutiérrez |

      Gracias Joseba, Cualquier duda que necesites de optimización de la web o de carga de la web comentamelo, si es complejo puedo escribir un nuevo post!

      Responder
  6. crear pagina web valencia |

    Es difícil encontrar a escritores con conocimientos sobre este asunto , pero creo que sabes de lo que estás comentando. Gracias compartir un tema como este.

    Responder
    1. David Gutiérrez |

      Gracias por tu comentario, si he optimizado varias webs y se los principales problemas sobre esto.

      Responder
  7. Pedro |

    Gracias por el post! He podido optimizar las imágenes de la web! y luego haré el resto de optimizaciones a ver si consigo que me cargue más rápido la web! Gracias!

    Responder
    1. David Gutiérrez |

      Pedro, me alegro que te haya funcionado! Espero que tu web cargue más rápido! Cualquier cosa me dices!

      Responder
  8. Javier |

    Gracias, por el post sobre optimizar el tiempo de carga de la web. Tengo que hablar con los chicos del servidor a ver si pueden optimizarme el cache…

    Responder
    1. David Gutiérrez |

      Javier, espero que te puedan optimizar los tiempos de carga de tu web! Cualquier cosa me dices!

      Responder
  9. Ramón |

    Muchas gracias, creo que voy hablar con la empresa del hosting y en mi tienda online vamos a implementar seguro nginx con el cache para que mejore sustancialmente, luego iremos haciendo todos los retoques para que la web vaya mejor, cambiar el peso…

    Responder
    1. David Gutiérrez |

      Ramón seguro que con la mejora del cache vas a mejorar mucho el rendimiento de tu tienda online, cualquier cosa me dices!

      Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres invertir tú dinero?