Mi web carga lenta

Si tu web carga lenta o le cuesta cargar, aquí veremos cómo optimizar la carga de la web o blog, como podemos hacer un test de carga, trucos y herramientas.

Hoy por hoy, la carga lenta de una web puede hacer  que nuestros visitantes abandonen rápidamente la web e incluso que no regresen. Por eso es tan importante optimizar la carga de la web como un diseño adecuado.

  1. Optimiza las imágenes antes de subirlas.
  2. Sube imágenes que den setido a tus contenidos y las imprescindibles, no las uses de decoración, no son cuadros.
  3. Comprime los archivos en GZIP o asegúrate de que lo están ya.
  4. Minimiza los archivos JS, JQ y CSS.
  5. Evita la carga de scrpits innecesarios.
  6. Utiliza sistemas y configura la caché de forma adecuada.
  7. Utiliza CSS3 para el diseño siempre que puedas. No insertes estilos en las etiquetas HTML.

Antes de nada, puedes hacer un test de tu web en estos enlaces para comprobar los tiempos de carga y que puedes mejorar para optimizar la carga de la web

PageSpeed

Una de las cosas a tener en cuenta a la hora tanto de diseñar nuestra web y como de maquetar los contenidos es el peso de las imágenes, que nosotros tengamos una ADSL de 52 MB no quiere decir que el visitante la tenga y además hemos de contar con la carga en dispositivos móviles. 72 pixeles por pulgada es suficiente y lo ideal y una imagen superior a 600px de ancho y/o de alto creo que excesiva.
Podemos tratar las imágenes con editores y optimizar el peso, bien sean comprimidas en JPG o PNG (de los GIF mejor no digo nada)

Si lo deseas, puedes bajar el peso con estas herramientas online muy útiles.

  • Smush.it™ (Yahoo!)

    Smush.it utiliza técnicas de optimización específicas de formato de imagen para eliminar bytes innecesarios de los archivos de imagen. Es una herramienta “sin pérdidas”, lo que significa que optimiza las imágenes sin necesidad de cambiar su aspecto o la calidad visual. Después Smush.it se ejecuta en una página web que informa de cuántos bytes se ahorraría mediante la optimización de imágenes de la página y proporciona un archivo zip descargable con los archivos de imágenes minimizadas.

  • TinyPNG
    TinyPNG
    Este es ideal para archivos PNG, ya que mantiene el alfa de las imágenes.
  • PageSpeed 
    Por si necesitas o quieres mirar más herramientas

Si tu web o blog es de difusión, no lo cargues de imágenes, busca o crea imágenes que den sentido o estén relacionadas con el contenido. Dejemos la decoración para los interioristas y escaparatistas y la maquetación para las revistas.

Comprime tus archivos en GZIP, este es un formato de compresión para web y se puede hacer del lado del servidor o desde el .htaccess. Normalmente en la mayoría de los hostings web, si no en todos, ya se usa esta tecnología. Para comprobar si tus archivos lo están, puedes usar este enlace: GIDZipTest™. Permite la revisión página por página, incluso puedes comprobar a través de la URL si también están comprimidos los archivos CSS, y Js.
Para dar compresión GZIP desde el archivo .htaccess, puedes hacerlo configurándolo de la siguiente forma.

<Files *.css>
SetOutputFilter DEFLATE
</Files>

<Files *.js>
SetOutputFilter DEFLATE
</Files>

Donde * es el genérico para todos los nombres de los archivos de una extensión y una línea para cada extensión.

Aquí una guía de compresión GZIP en www.desarrolloweb.com

Minimiza los archivos de HTML, scripts y las hojas de estilos CSS. En la mayoría de los casos, lo diseñadores y programadores se atienen a una estructura de texto para el código, por lo menos en mi caso me soluciona mucho la vida, para esto, bien con editores o a mano se crean espacios que realmente no mejoran la programación, pero sí que son leídos en la carga de la web.
Os dejo los enlaces recomendados por Google para mejorar estos archivos.

No coloques scripts innecesarios o que no mejoren la web. Todos sabemos que ciertos  apartados de nuestro blog o web necesitan realzarse y muchas veces buscamos movimiento o efectos para atraer al visitante, sopesa si realmente es necesario o bastaría con cambios de color o efectos menos pesados creados con CSS3.
Evita el uso de plugins en WordPress, uso de modulos en Zikula, Drupal, Prestashop… uso de aplicaciones en Joomla, que no sean necesarios o puedan sobrecargar tu página y borra los que sean inactivos, quita también los enlaces del head de los que hayas borrado o no necesites si no los borras.

La caché mejora la carga de documentos e imágenes, reduce el ancho de banda utilizado, y reduce el retardo de las descargas. Tener la caché configurada convenientemente nos ayuda a que los usuarios regresen a nuestra web. En sistemas como PrestaShop y Zikula, viene integrada en los archivos de core y con acceso a la configuración desde el panel de administración. Para WordPress, podéis utilizar pligins como WP Super Cahe , W3 Total Cahe (este es el más actualizado) o Hiper Cahe.

Diseña en hojas de estilos CSS3. Es fundamental que el diseño de la web esté basado en CSS, hoy por hoy, los navegadores más usados y en sus últimas versiones aceptan casi todos parámetros de CCS3, bueno, siempre nos queda IE, pero eso es un tema que puede dar, no solo para varios posts, sino para un blog entero. Con CSS3, a demás de efectos visuales llamativos, podemos crear fondos con degradado y por supuesto geniales efectos mouse sin necesidad de imágenes, esto lógicamente reduce el peso de la web y el ancho de banda necesario para la descarga. Evita también usar estilos directamente en las etiquetas HTML.

Aun que también podemos optimizar la web del lado del servidor, muchos hostings no dan acceso a tanto y si es así, recomiendo hacerlo en todo caso teniendo conocimiento de lo que se hace y con un buen manual al lado, así que lo dejaremos aquí.

7 Comentarios
  1. Pedro Carrillo 7 años

    Muy interesante y útil. Me he dado cuenta de que no tengo los archivos comprimidos, voy a investigar un poquito y los comprimo.
    Muchas gracias Jesús

    • Jesus AF 7 años

      Hola Pedro.

      Si te llevas bien con el .htaccess, no es difícil y la compresión es segura.
      Solo tienes que pasarlo a tu ordenador y configurarlo con un editor de texto o de programación, como más te guste.

      Para comprimir archivos JavaScript y CSS ya lo he indicado en el post, pero te dejo el código y otro forma de comprimirlos más a bajo

      < Files *.css >
      SetOutputFilter DEFLATE
      < /Files >
      < Files *.js >
      SetOutputFilter DEFLATE
      < /Files >

      Para comprimir PHP inserta estas lineas también en el archivo .htaccess

      php_flag zlib.output_compression On
      php_value zlib.output_compression_level 2

      Para el resto de archivos:

      AddOutputFilterByType DEFLATE text/html
      AddOutputFilterByType DEFLATE text/plain
      AddOutputFilterByType DEFLATE text/xml
      AddOutputFilterByType DEFLATE text/css
      AddOutputFilterByType DEFLATE application/javascript
      AddOutputFilterByType DEFLATE application/x-javascript
      AddOutputFilterByType DEFLATE application/xml
      AddOutputFilterByType DEFLATE application/xhtml+xml
      AddOutputFilterByType DEFLATE application/rss+xml

      Espero haberte ayudado y muchas gracias por tu comentario. Si tienes alguna pregunta más, no lo dudes 😉
      Un saludo

      • Pedro Carrillo 7 años

        Vaya, muchas gracias Jesús, a ver si puedo ponerme con ello este semana y te cuento como me fue.
        Saludos,

  2. Aime 7 años

    buen servicio en línea para la optimización de la imagen http://compressJPEG.com

    • Jesus AF 7 años

      Muchas gracias por la aportación Aime.
      Y disculpas por el retraso.
      Saludos afectuosos.

  3. […] este artículo de mi amigo Jesús AF podréis encontrar herramientas y consejos que os van a ayudar a mejorar la […]

  4. […] Para ello eché mano de las herramientas que mi amigo Jesús Af recomienda en su estupendo artículo sobre aumentar la velocidad de carga de nuestra web. […]

Contesta

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

*

©2013 - 2021 Jesús AF - WEB

Uso de cookies

Este sitio web utiliza cookies, tanto propias como de terceros (Google Analytics), para recopilar información estadística sobre su navegación generada a partir de las pautas de esta. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

- SÁQUEME DE AQUÍ - ACEPTAR

Aviso de cookies

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?

Create Account