Cómo Mejorar La Velocidad De Sitios Web - Parte 2: Cómo Optimizar El Código De Tu Website Para Acelerarlo
Curated by: Luigi Canali De Rossi
 


6 February 2010

Cómo Mejorar La Velocidad De Sitios Web - Parte 2: Cómo Optimizar El Código De Tu Website Para Acelerarlo

Aprender a acelerar su sitio web, pronto será un requisito fundamental para cualquier editor online con pretensiones serias. Como cuestión de hecho, como he mencionado en la Parte 1 de esta guía, Google pronto comenzará a utilizar la velocidad de carga de tu sitio junto con otros factores para determinar tu posicionamiento en los resultados de búsqueda. ¿Estás listo para esto?

mejorar_velocidad_website.jpg
Crédito de la foto norebbo

En la Parte 1 de esta guía, has encontrado las herramientas y tutoriales útiles para acelerar tu sitio web, mientras que en la segunda parte, tendrá la oportunidad de conocer en profundidad, desde el director técnico de MasterNewMedia, Drazen Dobrovodska, lo que debe ser otro elemento clave en su estrategia la optimización de código de tu sitio web.

Esta guía puede ser leída y entendida por personas sin experiencia técnica, y es, de hecho, dedicada a los que deben decidir y coordinar las tareas como la optimización del rendimiento, así como aquellos que realmente la llevan a cabo.

Al mismo tiempo, como no necesitas ser un programador para entender lo que está escrito en esta guía, es realmente útil si eres un técnico competente, o tienes a alguien que te puede ayudar en la aplicación de algunas de estas técnicas para optimizar la velocidad.

En esta parte de la guía, se encuentra un manual detallado sobre cómo optimizar el código de tu sitio web para que sea mucho más rápido de lo que es ahora.

En realidad puedes probar y medir la velocidad de carga de la página, comparándola a otro sitio web dentro del mismo nicho, es decir, un competidor, para asegurarte de que sea tan rápido o más que los ellos.

Éstos son los puntos clave planteados

  • Utilizar las páginas estáticas en lugar de las dinámica
  • Solicitudes externas de gestión de manera eficiente
  • Cómo sacar provecho de tu CSS
  • ¿A qué factores debes dar prioridad en el código de tu sitio web
  • Cómo poner el código de tu sitio web en dieta.


 

 

Como Optimizar El Código De Tu Sitio Web Para Mejorar Su Velocidad

por Drazen Dobrovodski



1. Evita Crear Páginas Dinámicas

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_avoid_dynamic_page_creation_id12686651.jpg

Si vas a crear tus páginas estáticas por cuenta propia, puedes saltarte este paso. Sin embargo, esto sólo es útil para los desarrolladores de algunas páginas como un pasatiempo para un sitio pequeño o corporativo, es una tarjeta de visita "online" más que otra cosa.

Cualquier sitio web que tiene más ambición suele usar otras plataformas como Movable Type, WordPress, o un sistema de gestión de contenido como Drupal.

La mayoría de ellas va a generar el contenido dinámico de forma predeterminada. Esto significa que para cada visitante en cualquiera de las páginas será un script CGI o PHP ejecutando una base de datos para el modelo (aspecto) de la página, el contenido de la página (texto e imágenes) y los combina para exhibirlo todo a los visitantes.

No hace falta ser muy listo para darse cuenta que si recibes 1000 visitantes, esto se traduce en al menos 2000 consultas a bases de datos y tiempo de procesamiento para "vestir" tu texto con un modelo. Todo esto sobre las 1000 solicitudes HTTP que el servidor tiene que tratar.

Utilizar páginas HTML estáticas es mucho más rápido y más fácil para el servidor y por lo tanto se debe utilizar siempre que puedas.

Este es un punto muy importante que todas las principales plataformas de publicación y los sistemas de gestión de contenido en las que puedo pensar deben tener la capacidad de crear un pre-cache de las páginas. Así, los visitantes pueden obtener páginas estáticas listas en lugar de tener que esperar a que la base de datos lea y desarrolle scripts para formar las mismas páginas para cada visitante.

Para utilizar páginas HTML estáticas:

  • En Movable Type: En las configuraciones de tu publicación, elige la construcción de todos los modelos de forma estática.
  • En WordPress: Se necesitará algunos plugins para el cache WP o Super GT caché.
  • En Drupal: Los plugins Boost y Advanced cache lo hará por ti.

 



2. Usa La Menor Cuantidad de Includes y HTTP Posible

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_use_as_few_includes_and_http_requests_as_possible_id44371371.jpg

Casi todas las páginas y las plantillas de ahora utilizan imágenes, JavaScripts, Flash, e includes. Para cada uno de estos, el servidor web tiene que establecer una conexión, comprobar los permisos de los archivos, enviar headers, etc.. Cada una de ellos aumenta el tiempo de carga de la página web. Así que, una vez más - todas estas cosas están ahí por una razón. Son necesarias.

Así que, como puedes preservar tus imágenes, JavaScript, e includes al mismo tiempo en que mantienes un número bajo de elementos? Reúnes el mayor número posible de ellos en un sólo archivo.



2.1 Agrupando Imágenes En Un Único Archivo Usando CSS Sprite

El lenguaje CSS te permite realizar la fusión de imágenes múltiples en un solo archivo y posicionarlo de forma diferente, para que sólo una sección sea visualizada en cualquier lugar de la página.

Esta es la imagen que tendrás:



Esta es la imagen con dimensión en pixels.



Ahora, el primer layer DIV que obtendrás del "SuperGreatLogo" tendrá 194px de largo, 33px de alto y empezará de la parte superior a la izquierda de la imagen (cero offset a partir de la parte superior, cero a partir de la izquierda).


#supergreatlogo {
width:194px;
height:33px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px 0px;
}

En formato HTML, el código aparecerá en una única línea:




<div id="supergreatlogo"></div>


E este será el resultado:

El "Menu Item", como podemos ver tiene 43px de alto y 194px de ancho. Comienza en cero de la izquierda y 33px en la parte superior. Por lo tanto, el CSS "Menu Item" tendrá este aspecto:


#ourmenuitem {
width:194px;
height:43px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px -33px;
}

En HTML, será así:




<div id="ourmenuitem"></div>


Este es el resultado:

"Icon1", esta parte de la imagen tiene 36px de alto y 89px de largo. Comienza de cero a partir de la izquierda y 76px desde la parte superior. Por eso, el CSS para ese tramo será:


#ourIcon1 {
width:89px;
height:36px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px -76px;
}

Así será en HTML, una sola línea:




<div id="ourIcon1"></div>


Resultando en:

Finalmente, el "Icon2" tiene 36px de alto y 105px de largo. Comienza en 89px a la izquierda y 76px en la parte superior. El CSS será:


#ourIcon2 {
width:105px;
height:36px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat -89px -76px;
}

En HTML:




<div id="ourIcon2"></div>


Resultado:

El uso de CSS Sprites puede combinar todas las imágenes de tu sitio en una interfaz, por lo tanto reduciendo drásticamente el número de peticiones HTTP. Dependiendo de la complejidad de la interfaz del sitio web, esto puede ser un factor importante para su velocidad.

 

2.2. Agrupando JavaScript e Includes PHP/ASP/JSP

Si ya has codificado algo en JavaScript, PHP o cualquier otro lenguaje, sabrás que no es mucha molestia combinar los códigos. El problema comienza cuando este script tiene que demostrar algo en un lugar exacto en la página.

Como se puede combinar JavaScript si alguien escribe algo en el header, otra cosa en la segunda columna y otra en un tercio en el pie?

La respuesta es: usando la propiedad innerHTML JavaScript. Ella permite cambiar cualquier elemento de HTML interno que especifiques.

Echa un vistazo a la disposición de este ejemplo:



var myTopText="Text for the header";
var mySideText="Text for the side div";
var mySideText="Text for the footer";

document.getElementById('topdiv').innerHTML=myTopText;
document.getElementById('sidediv').innerHTML=mySideText;
document.getElementById('footerdiv').innerHTML=mySideText;

Usando este método, puedes combinar múltiples JavaScripts, o al lado del servidor (como PHP), e includes y aún direccionar las salidas desde cualquier lugar que desees en la página.

 

2.3 Usa Rutas Relativas En Vez De Rutas Absolutas

En vez de nombrar tus imágenes usando:

img src="http://www.mysite.com/images/extra-pretty-images/image.jpg"

usa una ruta relativa para el archivo en el servidor, como el siguiente:

img src="../images/extra-pretty-images/image.jpg"

Obviamente, el código cambia en función de la posición de los archivos HTML, pero después de reemplazar todas las rutas absolutas a rutas de acceso relativas para la imagen, el servidor no tendrá que volver a establecer una conexión para cada imagen en la página.

 



3. Usa Componentes Gzip A Tu Favor

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_take_advantage_of_gzip_components_id30693381.jpg

Todas las versiones recientes de los navegadores web tienen la capacidad de aceptar contenidos en formato gzip (y desde Internet Explorer 4 y Netscape / Mozilla versiones 6 y 7). Esto significa que puedes empacar todos tus CSS y JavaScript con gzip y los navegadores los mostrarán con normalidad.

La página que estás leyendo utiliza gzip para CSS y JavaScript diferentes. Las imágenes JPEG ya están comprimidas de modo que puedes dejarlas como están, pero hacer una pre-compresión de CSS y JavaScript, puede reducir significativamente el tamaño de los archivos que se transfieren. Esto acelera tanto el cargar la página, pero reduce su ancho de banda.

Vamos a explicarlo con un archivo CSS.

En primer lugar hacer un archivo gzip y alojarlo en un servidor. Ahora, cambia la llamada CSS en tus páginas para reflejar la nueva extensión GZ. Por ejemplo:



Ahora, en la carpeta CSS, crea un archivo .htaccess con el siguiente código:

AddEncoding x-gzip gz
AddType 'text/css; charset=UTF-8' .gz

La primera línea muestra que los archivos con extensión "gz" están codificados en "x-gzip". La segunda es que deben ser enviados con el header "text / css" para que el navegador sepa cómo usarlos.

Para hacer esto para JavaScript, crea una carpeta separada (por ejemplo, /js) y añade el mismo .Htaccess utilizando sólo las líneas "text / javascript" en lugar de "text/css ".

 



4. Reduce El Número de DNS Lookups

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_reduce_the_number_of_dns_lookups_id51050161.jpg

En las secciones 2 y 3, vimos cómo sustituir las rutas absolutas por rutas relativas. Sin embargo, si las imágenes (u otros componentes) se encuentran en un servidor Web independiente, utilizar un código como este:

img src="http://www.mysite.com/images/extra-pretty-images/image.jpg"

hace que el navegador del usuario realice una pesquisa DNS.

Como ves, la dirección real de tu sitio web no es "www.misitioweb.com" (o lo que sea). Tu dirección real es un número IP. La dirección IP se compone de cuatro números, cada uno con 1-3 cifras divididas por períodos. Por ejemplo: IP 69.147.76.15 es Yahoo!, 216.92.198.27 es MasterNewMedia y así sucesivamente.

Cada vez que utilices una dirección como "misitioweb.com" en el código de la página, el navegador debe primero realizar un DNS (Domain Name Service) para ver qué IP se asocia con el dominio "misitioweb.com". No es necesario decir que esto lleva tiempo.

Para evitarlo (y el contenido está en un servidor independiente, por lo que no puedes utilizar rutas de acceso relativas), utiliza la dirección IP en lugar del nombre de dominio como "www.misitioweb.com".

 



5. Usa Cache Cuanto Puedas

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_use_caching_as_much_as_you_can_id30411311.jpg

Algunos tutoriales ponen demasiado énfasis en todo lo que se refiere al cache, como los expires headers. Su valor depende del tipo de tráfico que tu sitio web recibe.

Tienes que conocer tu sitio web. Es común tener el 80% de nuevos visitantes oriundos de algún motor de búsqueda(s).

  • Si tu audiencia está compuesta principalmente de visitantes que visitan tu sitio web sólo una vez, los archivos en cache no ayudarán a aumentar considerablemente la velocidad.
  • En cambio, si tu audiencia predominantemente se compone de visitantes fieles, la memoria cache se convierte en un factor importante.


  • 5.1 Pon los Códigos JavaScript y CSS en Archivos Externos

    El navegador almacena el cache en CSS y JavaScript, y los usa de nuevo cuando el visitante va a otras páginas. De esta manera, no tienes que cargar el mismo código CSS y JavaScript en cada página.




    5.2 Agrega un "Expires" Header Con Una Fecha Futura Distante

    Puedes hacerlo para cualquer tipo de archivo en .htaccess, de esta forma:



    Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"

    El ejemplo anterior es para las imágenes y archivos Flash, pero puedes usarlo para los archivos CSS y Javascript, así:

     

    5.3 Configura las Etags

    Las ETags se envían en headers en HTTP para cada archivo. Luego, el navegador puede comparar la Etag de los archivos que ha almacenado en cache con las del archivo en el servidor y luego, si coinciden, el navegador utiliza el archivo de cache en vez de descargarlo de nuevo.

    Las ETags permiten flexibilidad con la memoria cache. Si no necesitas tener esa flexibilidad (por ejemplo, para las imágenes en tus páginas, CSS, etc), puedes simplemente apagar las ETags y el navegador usará otros métodos para determinar si recurre o no a la copia en cache. Así que si ya has añadido las líneas anteriores, el punto 5.2 punto a tu .htaccess, a continuación, sólo tienes que utilizar esta línea:

    FileETag none

     



    6. Ahorra el Tiempo del Navegador en los Archivos en CSS y JavaScript

    how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_save_browser_s_time_on_css_and_javascript_id2294511.jpg



    6.1 Evita Expresiones en CSS

    Expresiones en CSS son un recurso en IE que no es compatible con otros navegadores. Te permite colocar los valores que no son fijos en el CSS. Por ejemplo:


    width:expression(document.body.clientWidth > 1024? "1024px": "auto" );

    Se necesita tiempo para que los navegadores lo interpreten y sólo el IE lo soporta, así que es mejor evitarlo.

     

    6.2 Reduce el Número de Elementos DOM

    Cada layer DIV, cada enlace o formulario en cada página, todos estos elementos son parte de lo que se conoce por DOM (Document Object Model).

    Si disminuyse el número de elementos DOM en tus páginas, el navegador dedicará menos tiempo en la comparación con los CSS y por ende, con la apertura de la página.

     

    6.3 CSS Arriba, JavaScript Abajo

    Si cargas el CSS en la parte superior de la página (preferiblemente en ), con lo que se carga la página, el navegador será capaz de formatearla correctamente.

    De lo contrario, el navegador tendrá que pasar el código de la página, hasta que "alcance" el CSS y luego trate de formatear las secciones de la página cargadas antes del CSS. Obviamente, esta no es una forma eficaz de proceder. Para explicarlo mejor - donde quieras que ubiques el CSS, la cantidad de datos que viaja entre el servidor y el visitante seguirá siendo la misma. Sin embargo, todo el contenido de la página que se carga antes de CSS aparecerá no formateado. Así que cuando el navegador finalmente lea el CSS, volverá a empezar a formatear el contenido. Es como si trozos de textos recibiesen nuevos fuentes y colores, y el visitante lo entiende como el tiempo de carga de la página.

    El JavaScript bloquea las descargas paralelas. Esto significa que tu navegador debe esperar hasta que el script sea cargado y ejecutado antes de proceder a la carga de todo lo que viene después del código JavaScript (imágenes, Flash, CSS, incluso si se colocan por tanto).

    JavaScript también depende mucho de los elementos de la página. Si te refieres a la sección 2.2, veremos un ejemplo. Al hacer clic en el código JavaScript que figura en la parte superior de la página aparecerá un error. JavaScript se cargó antes que los datos personales se hayan establecido y, por tanto, no puedes encontrar la ID a que se refiere.

    Todo bajo consideración, lo mejor es mantener el código JavaScript en la parte inferior de la página de códigos.

     

    6.4 Reduce el Número de Líneas Usadas en JavaScript y CSS

    En cualquier circunstancia normal, no sería importante, pero se merece su lugar en tu lista.

    Todos los comentarios, las nuevas líneas, espacios dobles, etc, simplemente aumentan el tamaño de los CSS y JavaScripts. Si tienes un montón de ellos, pueden aumentar el tiempo de carga de la página web.

    Puedes hacerlo tú mismo o descargar el YUI Compressor para que reduzca la cantidad de CSS y JavaScript para ti.

     



    7. Reduce el Número De Cookies

    how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_keep_your_cookies_small_id26395991.jpg

    Si utilizas cookies, trata de mantenerlos en la menor cantidad posible. Los "cookies" vienen cargados con los headers antes del contenido, por lo que si son pocos, el usuario puede disfrutar de una página que se carga más rápido.

     



    8. Evita Redirecciones

    how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_avoid_redirects_id842344.jpg

    Redireccionamientos son utilizados para (sorpresa, sorpresa) que los usuarios redireccionen automáticamente desde una URL a otra. Esto se puede hacer porque una URL antigua ya no se utiliza o porque estás enviando el usuario a un área de login, etc

    Redirecciones no son algo que todo sitio web use (por esto en 7º. en la lista). Algunos sitios no los usan, pero no debes quitarlos.

    Por ejemplo, si utilizas la plataforma de publicación de WordPress, no tienes opción. WordPress agrega una redirección al archivo .htaccess y si lo eliminas, el sitio muere.

    Sin embargo, debes tener en cuenta utilizar redirecciones con moderación, ya que aumentan el tiempo de carga de la página.

     



    9. Usa Una Red de Entrega de Contenido

    how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_use_a_content_delivery_network_id10072152.jpg

    Esto es sólo para grandotes.

    Ya se ha mencionado en la Parte 1 que la velocidad de entrega de contenido depende de la proximidad de la audiencia con el servidor.

    Cuando tienes un sitio web internacional, puedes poner tu contenido (o por lo menos componentes estáticos del mismo) en múltiples servidores en múltiples ubicaciones geográficas, lo que hace que las páginas se carguen más rápido para un número mayor de personas. De nuevo, esto es útil tan sólo para los sitios de gran tamaño.

     



    Conclusiones

    Acelerar tu sitio web depende de una serie de factores. Aquí, sólo se discuten los más generales que la mayoría de los usuarios será capaz de usar.

    Para obtener más consejos dirigidos a tu sitio en específico, puedes descargar Google Page Speed o Yahoo! YSlow.

    YSlow incluso te da una evaluación para los elementos que agregan o disminuyen la velocidad de tu sitio web. De hecho, si pruebas a Yahoo YSlow, señalando algunas de las páginas de Yahoo, te darás cuenta de que esta página recibe una mera C. El punto es: No tomse esta "evaluación" tan en serio así.

    Algunos de los consejos y sugerencias sólo son viables para los sitios grandes (una red de distribución de contenidos, como ejemplo obvio).

    También ten en cuenta que la adición de cualquier contenido de terceros, como widgets, anuncios o botones significa que el número de elementos DOM crece y se va con el mismo número de solicitudes HTTP, las búsquedas de DNS, sin los componentes de compresión, cookies, etc. Cuanto más sean utilizados, más la velocidad de tu sitio web dependerá de los componentes fuera de tu control.

    Cada sitio web es único y para cada uno existe un punto realista para el que la optimización es viable o significativa.

    Por último, como un detalle más, hace tiempo ando prestando mucha atención al protocolo spdy. Google está haciendo presión acerca del tema, por lo tanto parece ser algo que vendrá a importar y mucho dentro de poco.

    Ahora todas las direcciones web comienzan con "http://", porque todas las páginas web usan HyperText Transfer Protocol (HTTP). HTTP fue creado hace mucho tiempo cuando se tenía acceso a la Internet con un módem a 9600 KB (o aún menor) en páginas que trataban tan sólo de textos académicos, con tal vez una imagen o dos.

    Este nuevo mundo de Flash, CSS, superposiciones de imágenes y todas las campanas y silbidos de hoy no están hechos para el HTTP.

    El spdy debe acercarse a los protocolos de transferencia de la velocidad requerida para el contenido del siglo 21, pero los tips de velocidad en esta lista te ayudarán a quitarte de unos segundos en el tiempo de carga de la página.




    Fin de la Parte 2 -- Parte 1 aquí.




    Crédito de las fotos:
    Evita Crear Páginas Dinámicas - norebbo
    Usa Lo Menos Includes y HTTP Posibles - John Takai
    Usa Componentes Gzip A Tu Favor - Kirsty Pargeter
    Reduce El Número de DNS Lookups - pixbox
    Usa Cache Cuanto Puedas - Stepan Popov
    Ahorra el Tiempo del Navegador en los Archivos en CSS y JavaScript - mipan
    Reduce El Número de DNS Lookups - superdumb
    Evita Redirecciones - hypermania
    Usa una Red De Entrega de Contenido - adistock

    Drazen Dobrovodski -
    Referencia: MasterNewMedia [ Seguir leyendo ]
    Si te gustó la nota puedes recibir actualizaciones suscribiéndote via RSS o via email.

    O compartirla:
     
     
     
     
    Comentar    
    blog comments powered by Disqus
     


     

     

     

     

    Creative Commons License
    This work is licensed under a Creative Commons License.

     

    15636
    

    Curated by

    Publisher MasterNewMedia.org - New media explorer - Communication designer
    Web Analytics