“Mi web carga lenta” como optimizar la carga de la web

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.

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í.

Deja un comentario

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

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Í - CERRAR