10 Consejos para Optimizar Drásticamente el Peso de tu Página Web

5

 Varias veces analicé como mejorar el tiempo en que una página web tarda en cargar ya sea con Aeromental (el cual sigue en proceso continuo de mejora) y con mis otros proyectos.

Crea Tu Página Web por 5 pesos

Es importante que una página cargue rápido, puesto que no es bueno que una visita espera frente a una página en blanco o a un contenido que tarada mucho para verse. Muchos se cansan de esperar y directamente cierran la página y buscan otra. Además los primeros 7 segundos son importantes, es el tiempo promedio en que una persona decide leer tu página o cerrarla. Es la primera impresión , SI SOLO 7 segundos, así que es mejor optimizar la estructura y diseño para captar visitantes, futuros seguidores y evitar al máximo el tener desertores.

Hay 3 formas de optimizar la velocidad de carga para que se vea tu página web:

  • Hardware: El servidor donde se encuentra alojada tu página debe ser rápido.
  • La optimización del código por el lado del servidor (PHP, Java, Perl, Ajax, Python)
  • La optimización del front-end de tu página (HTML, CSS, JavaScript, e imágenes)

En este artículo se verán puntos para optimizar el front-end, el cual es más simple de mejorar e influye bastante en el tiempo de carga
Si uno quisiera optimizar el servidor de alojamiento web, se necesita tener acceso de root y en la mayoría de los casos tal ves no lo tengas, ya que te encuentras con el servicio de web hosting mexico compartido, además tocar opciones de un servidor o de la base de Datos es un trabajo muy delicado, con buenos resultados, pero se necesita bastante conocimiento especializado para no arruinar la configuración de un server.

web hosting mexico, el proveedor de web hosting mexico que hará crecer tu negocio en internet. Contacta ahora a un ejecutivo al 01800 632 1001.

Estos son los 10 consejos prácticos:

1. Optimiza el tiempo de carga de cada módulo de tu sitio. Identifica a los gordos

Cuanto más rápido cargue tu sitio, los usuarios tendrán menos tiempo de espera para la información que necesitan ver.

Es bueno que analices que componentes (imágenes, animaciones flash, CSS, JavaScript, etc) son redundantes, innecesarios, y cuales pueden ser optimizados. Identifica alos que pesan más y trata de ponerles en dieta rigurosa de bytes.

Es recomendable que la mayoría de tus componentes (ya sea un script o un ícono) no sobrepasen los 25KB cada uno (peso para una página ligera).

Yahoo recomienda mantener todo inferior a 25, porque ese es el peso estándar para que el archivo se quede guardado en la mayoría de los celulares, como en el iPhone.

El plugin firebug de Firefox tiene una opción para ver el tiempo de carga de cada archivo de una página. Lo puedes usar para optimizar este paso.

2. Usa las imágenes en el formato apropiado para reducir su peso

JPEG vs GIF vs PNG la eterna discordia.

Si tienes muchas imágenes en tu página, es ESENCIAL que aprendas a usar el formato óptimo apra cada una de ellas, podrás conseguir GRANDES diferencias.

Los formatos recomendados son JPG, PNG y GIF (por nada del mundo uses TIFF o BMP).

De todas maneras estos 3 formatos son diferentes. JPG lo tendrías que usar sólo para fotos. PNG y GIF para dibujos con colores sólidos, dibujos vectoriales, logotipos, iconos, gráficos de barras, etc. Si hay muchos degrades de tonos, PNG es mejor que GIF en calidad y tamaño.

3.- Optimiza tus archivos CSS y JavaScript para ahorrar unos bytes

Cada byte cuenta, uno por uno luego sumaran una diferencia notable.

Optimizar y minimizar estos archivos consiste en un proceso de quitar caracteres innecesarios (como espacios, comentarios largos de código, código comentado, variables redundantes, saltos de linea (enter), etc).

Para este punto hay buenas noticias. existen servicios que te optimizan tu código automáticamente con sólo dar un click del mouse: Lista de servicios para optimizar CSS, y para optimizar código JavaScript puedes usar: JSMIN (The JavaScript Minifier), YUI Compressor, y JavaScript Code Improver.

Beneficia a tu empresa con un servidor dedicado. Conoce las ventajas que ofrecemos. Visítanos en Servidores-Dedicados.com.mx

Una buena herramienta reductora de código te da la opción de revertir el proceso y reordenar tu código con espacios y enters para cuando necesites hacer modificaciones, porque siendo sinceros te volverías loco leyendo todo sin altos de línea.

4. Combina archivos CSS para reducir los llamados HTTP

Para cada componente que se necesita para cargar una página web, se hace un llamado HTTP al servidor. De esta manera si tienes 5 archivos CSS se necesitarán de 5 HTTP GET. Si los unieras en menos archivos, reducirías los llamados HTTP y tus páginas cargarían más rápido.

Si quieres unir tu CSS con los archivos JavaScript en uno solo puedes hacerlo con PHP, esta es una guía al respecto.

5. Usar CSS sprites para reducir llamados HTTP

Un CSS Sprite es una combinación de pequeñas imágenes en una sola. Puedes poner todos tus pequeño iconos, esquineros, logos, flechas, fondos, etc en unsa sola imagen que se cargue solo una vez en tu página y no se hagan varios llamados HTTP.

Con CSS luego puedes dar las coordenadas X Y de la imagen a usarse en las propiedades del background.

La famosa página Digg usa ese método: CSS Sprite de Digg
Para crear estas grandes imágenes puedes usar este: CSS Sprite Creator.

6. Usar compresión por el lado del servidor

Eso es similar a crear archivos ZIP. Si estas en un servidor de web hosting mexico dedicado necesitaras de un VPS, si es que no tienes la compresión habilitada, deberás instalar. Puedes ver esta guía de como instalar mod_gzip en Apache.

Recibe 10 Folios Gratis
7. Debes evitar el cóodigo cSS y JavaScript dentro de tu HTML

Un gran error es poner el código CSS o de JavaScript internamente en el código HTMl de tu página. Los archivos externos con guardados en la memoria caché de los navegadores, por lo tanto no necesitan volverse a cargar si el usuario sigue navegando por tu sitio.

8. Carga algunas cosas de tu sitio en servicios de terceros que acepten el hotlinking

Enviando algunos archivos del contenido de tu sitio a servicios web de terceros reduce grandemente el trabajo de tu servidor web. Esto se llama offloading. Por ejemplo tu feed RSS se lo puedes dejar a los servidores de FeedBurner, algunas fotos o imágenes las puedes subir a flickr, tus vídeos pueden estar en YouTube, y si eres más detallista puedes usar el Google AJAX Libraries API para llamar a librerías y frameworks populares de JavaScript como: MooTools, jQuery, y Dojo.

Algunas veces debes asumir que dependes que los servidores de estos servicios podrán estar caídos o quien sabe un día desaparezcan del mapa, por lo que tiene cierto riesgo.

9. Rediseña tu sitio web para que no use muchas imágenes

Debes ver como optimizar el diseño de tu sitio web de tal manera de usar la decoración apropiada sin sobrecargar su diseño con imágenes, lo que lo vuelve pesado de cargar. Optimiza y encuentra un equilibrio entre lo liviano, lo agradable visualmente y lo funcional.

A nadie le gusta un decorado sobrecargado o un sitio muy simple sin nada de especial. Algunas veces un decorado se puede sustituir por simples líneas de efectos con CSS.

10. Monitorea el rendimiento de tu servidor

A veces nunca se puede cubrir todos los detalles de cada página. Será bueno que revises de tiempo en tiempo si algún archivo esta sobrecargando el procesador de tu servidor o si todos los pedidos y respuestas estan llegando a destino.

si tienes acceso root puedes usar ab para Apache o Httperf de IBM.

si no tienes acceso a tu webserver puedes usar: Fiddler o HTTPWatch para analizar tu tráfico HTTP.

Fuente de  Informacion: www.aeromental.com

Como podrás ver hay muchas formas de optimizar el peso de tu página, pero definitivamente la más sencilla y la que más comúnmente es la causal de dicho problema son las imágenes. Una página sin imágenes generalmente se ve “sin chiste”, claro, siempre y cuando sean unas imágenes que apoyen el contenido escrito. Pero para logar que estos llamativos elementos aporten algo al sitio hay que saber qué tipo e imágenes utilizar, les recomendamos este video en el que nos muestran las 10 imágenes que no debes usar en una página web:

 El mejor web hosting mexico para Pymes. Conoce los planes y disfruta de los beneficios. Llama al 01800 632 1001.

Las imágenes no solo pueden ser un bonito elementos en una página web, estas también te pueden ayudar a mejorar tu posicionamiento seo. Así que si necesitas optimizar las imágenes de tu sitio web, aquí les dejamos 3 alternativas que les servirá para reducir y optimizar el peso de las imágenes en una página web:

JPEGmini: simple y potente optimizador de imágenes online

Alternativa online para reducir el peso de nuestras fotos directamente desde el navegador enfocada únicamente al formato JPEG. Subiremos la imagen que queremos optimizar y en cuestión de segundos nos mostrará el peso final y por supuesto, la posibilidad de descargar la imagen reducida. Además antes de descargarlo podremos comparar el antes y después de la imagen, desplazándonos horizontalmente por ella con el ratón.

RIOT: completo optimizador de imágenes para Windows

Aplicación de escritorio gratuita, sencilla y completa. Dispone de más opciones para reducir y optimizar nuestras imágenes. Incluso tendremos la posibilidad de ajustar el peso final de la foto de manera proporcional a la calidad de la misma, es decir, al reducir el peso de la imagen bajará su calidad.

Entre sus opciones podremos modificar la imagen usando los distintos filtros que tiene disponible, como girar la imagen, voltearla, ajustar brillo y contraste, entre otros. Admite distintos formatos de imagen, incluido PSD de Photoshop, pero solo podremos exportar la imagen a JPEG, PNG o GIF.

FILEminimizer Pictures: aplicación para comprimir imágenes simultáneamente

FILEminimizer Pictures es una aplicación gratuita que permite comprimir imágenes para optimizar el tamaño del archivo, hasta un 98 % en algunos casos. Usando algoritmos de compresión reduce drásticamente el tamaño de los archivos para que estos sean más fáciles de compartir y subirlos a Internet, y de esta manera ahorrarnos espacio tantos en discos físicos como virtuales.

Fuente de Información: www.genbeta.com

Artículos relacionados

Necesitas accesar tu equipo remotamente? Lee este articulo

Share.

About Author

5 comentarios

  1. Me encanta ver estas ayudas, por cierto también para un mejor rendimiento como en una imagen cambiante se puede usar la carga de mayor imagenes posibles como en un menu que tiene dos fondos de imagenes, solo cargar una que contenga los dos fondo y por medio de background-position en el CSS se puede mover la imagen de posicion sin tener que estar recargando varias imagenes.

  2. hola, Gracias por el dato : D
    una pregunta, yo uso firebug, pero no encuentro esa parte de la herramienta donde vez el timepo que toma descargar los archivos, me dirias donde es?

  3. Pingback: SEO posicionamiento para una página Web

  4. Pingback: Guía visual SEOConsultor SEO - Marketing digital

  5. Pingback: 4 Razones por las que tu tráfico aumenta y tu conversión no

Deja un comentario

Shares
Share This