18 Abr 2008

Optimización Web III de IV

Esta entrada es la número 3 de 23 de la serie Trucos Blog

Esta es la tercera entrada de la serie Optimización Web.

Si no leíste las anteriores, te recomiendo hacerlo antes que esta, al final de este post están los enlaces al resto de entradas de la serie.

¿Tarda demasiado en cargarse tu web?

Puede ser debido al peso de los elementos que la componen. Si utilizas Wordpress con Plugins y elementos externos como las estadísticas de Analytics, el botón del contador de technorati, … cada una de esas funcionalidades está añadiendo peso extra a tu web lo que puede provocar una descarga lenta. Dice una leyenda urbana que los usuarios en Internet no tenemos paciencia, si en unos 10 segundos no ha aparecido nada en la página a la que intentamos llegar … o nos vamos o la cerramos. Por no hablar del exceso de ancho de banda que puedes esta consumiendo en tu hosting (depende de tu límite mensual puede llegar a ser un problema cuando tengas muchas visitas).

Por otra parte, no todos los usuarios tenemos la misma velocidad de conexión, ni utilizamos el mismo navegador para ver webs (esto importa por que tratan diferente a los objetos que se descargan para mostrar una página).

Como el 75 % de los usuarios navegan con Explorer (pese a que a muchos no nos guste), aconsejo hacer todas las pruebas en él.

Para empezar visita WebSiteOptimization y averigua lo que pesa tu web y como se distribuye ese peso entre Scripts, Imágenes, Html y CSS.

Hay varios factores que no podremos controlar sobre el tiempo de descarga de la web como: la velocidad de nuestros servidores (siempre podemos cambiar de hosting), saturación de internet, peso del software (no cambiaremos wordpress pero podemos aligerarlo), las conexiones de los lectores (son las suyas) … Así que centrémonos en reducir el peso de lo que sí controlamos para minimizar posibles impactos del resto de factores.

¿Eliminar o mover alguna cosa?

Suena duro pero … ¿seguro que necesitas 27 scripts para ver las estadísticas de tu blog? ¿o que el authority de Technorati aparezca en el sidebar? ¿tantos botoncitos, imágenes, widgets externos?

¿Te ha aparecido en el listado del informe algún archivo pesado relacionado con algún plugin que casi no utilizas pero tienes activo? Quizá ha llegado el momento de pensar en eliminar alguna cosita ¿no? o recolocarla.

Pero piensa en tus lectores antes de cortar por lo sano… algunas indicaciones sobre cómo enfocar esta tarea:

  • si casi no lo usas: quítalo. En mi caso, por ejemplo, las estadísticas de feedburner, el plugin NextGen Gallery, el seguimiento de Quancast, … y algunas imágenes.
  • si es útil, pero no es necesario que esté en todas las páginas vistas: muévelo a una página estática o a una entrada. En mi caso, por ejemplo, pasé a la pagina “Sobre Mi” el Technorati y botones de rankings, ISBN, CC. De esta forma pasaron a perjudicar el peso de la estructura del blog (que se descarga en todas las páginas vistas, a estar en una sección en concreto.
  • si es necesario que esté en todas las páginas (header, footer, sidebar): … sigue en los siguientes puntos.

Optimiza tus imágenes

¿Tienes muchas imágenes? ¿Pesan mucho? Para los que no somos “diseñadores” y no nos llevamos muy bien con Photoshop y similares, tenemos la suerte de que existen herramientas online que nos ayudan en la tarea de adelgazar el peso de las imágenes.

Esto se consigue reduciendo un poco la calidad de las mismas pero en muchas ocasiones casi no se nota y podemos bajar el peso cerca de un 30%.

Una buena herramienta online es la que nos presenta Microzulo en Dynamic Drive: Herramientas para tu blog donde podemos elegir el formato de salida y ver si realmente han perdido calidad antes de descargar y sustituir la original por la optimizada.

Optimiza archivos JS y CSS

Este último punto es para los más “osados” y hay que poner mucho cuidado aunque es muy sencillo. Se trata de los archivos que dotan de funcionalidad y forma a nuestros blogs y su estructura. Algunos pesan mucho y otros no tanto, así que de aplicar esta medida, comienza por los más pesados.

Antes de empezar con esta optimización: haz un backup de todos los archivos de tu blog (en serio, es fácil errar).

La medida, aunque peligrosa, es sencilla: elimina todos las líneas en blanco y espacios de “anidamiento”. Me explicaré mejor con un ejemplo:

Ejemplo Reducción CSS

Esta medida la puedes aplicar sin problemas a todos los ficheros .js y .css que te aparezcan en el listado de Websiteoptimization.

El resultado es sorprendente, ya verás!

stas son las 3 medidas que yo tomé para bajar de peso a Phylosoft, aunque sigue pesando demasiado para mi gusto. En la próxima entrada de la serie, hablaré sobre reducir (y si se puede, erradicar) errores de código HTML, CSS y RSS o al menos de como encontrarlos ya que el código de cada uno puede ser muy diferente.

Indice:

  1. Introducción: Optimización Web I de IV
  2. Pings, Robots y Sitemaps: Optimización Web II de IV
  3. Reducir Peso: Optimización Web III de IV
  4. Corrige tu código: Optimización Web IV de IV


 

Etiquetas: , , , , ,

Suscríbete¿Te ha gustado?, ¿quieres que te lleguen nuestras nuevas entradas? Suscríbete a Phylosoft por RSS o email

 

Entradas Relacionadas

 

 

Comentarios¿Qué te ha parecido el artículo?, tu opinión es importante para ayudarnos a mejorar y ya hay algún comentario.
¿Te añades a la charla?

2 Comentarios o trackbacks.


    Comentarios

     Comentarios de los lectores

  1. MyAvatars 0.2 ronald

    sobre el mito de los 10 segundos yo creo que es cierto, personalmente no espero tanto :)
    Con respecto al ancho de banda encontré esta página que puede ayudar a clarificar algunos conceptos http://www.hosting7.cl/ancho-de-banda-o-transferencia-de-datos.php

    [Responde a este comentario]


  2. MyAvatars 0.2 Jorge

    Ronald, bienvenido a este blog. Veo que opnas como yo en ese punto… me apunto esa web y consultaré, seguro que aprendo algo.

    [Responde a este comentario]



    Trackbacks

     Trackbacks y Pingbacks (menciones en otras Webs)


Añade un comentario

En este blog hemos quitado la etiqueta NOFOLLOW de los comentarios.

XHTML: Puedes Usar los Siguientes Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscríbete a esta entrada sin escribir ningún comentario:

Trackback URI

Ilumínalo ve la luz

Miscelánea


Personal Blogs - Blog Top Sites Entertainment Personal Blogs - Blog Catalog Blog Directory blogalaxia Directorio de Blog Blog Directory Directorio blogs Blogomania
Personal Blogs Blog Submission Directorio de Blogs MyWay Gomeme 9.0
directorio de blogs Bitacoras.com Keegy

Directorio Blog Web
Directorio Bloggero
Directorio de Blogs Dofollow

Ilumínalo
 
información, noticias, blogs

Monitored by eXternalTest

Creative Commons License