contenido 6 de mayo de 2014 a las 07.23
   Imprimir artículo
elWebmaster.com

Trucos infalibles para optimizar tu c贸digo web


images_optimizacionGoogle y Yahoo! saben que la aceleraci贸n en las p谩ginas de sus usuarios es crucial. Ambas compa帽铆as han invertido millones de d贸lares en la capacidad del servidor y mejoras del software, las cuales, son necesarias para atender r谩pidamente los resultados de las b煤squedas de millones de usuarios todos los d铆as. Sin embargo, las optimizaciones que estas empresas realizan no se detienen en las inversiones en infraestructura. Optimizan la entrega de sus datos hasta en los propios datos.

驴Has mirado en la p谩gina de origen de una consulta de Google? Implementan algunas pr谩cticas de codificaci贸n inteligentes que, cuando se aplica sistem谩ticamente, se suman a un importante ahorro de tama帽o en la p谩gina. Utilizan concisos c贸digos de JavaScript. Los nombres de las funciones y de variables son siempre lac贸nicos. Sus identificadores de CSS son uno o dos caracteres y los valores de color com煤nmente utilizan valores de tres d铆gitos hexadecimales en lugar de los valores de seis d铆gitos, siempre que sea posible. Tampoco env铆an una gran cantidad de espacio en blanco en su c贸digo fuente.

Las empresas interesadas en servir r谩pidamente millones de p谩ginas saben que el efecto acumulativo de estas optimizaciones puede resultar en ahorros significativos. Estas optimizaciones no son gran cosa cuando se ve la fuente de las p谩ginas de su navegador. Esto se debe a que el c贸digo est谩 dise帽ado para la entrega r谩pida a tu motor de renderizado manejado por el navegador, no para la lectura del ojo humano a trav茅s de la opci贸n “Ver c贸digo” en tu navegador.

En el caso de Google y Yahoo!, estas pr谩cticas de codificaci贸n inteligente probablemente fueron dise帽adas en el desarrollo de sus aplicaciones. Por desgracia, muchos autores y desarrolladores web se ven obligados en la tarea de aplicar las pr谩cticas de optimizaci贸n inteligente a un sitio web ya completo. Hay maneras que puedes realizar f谩cilmente los mismos tipos de optimizaciones en el c贸digo del sitio web existente. La mejor manera es utilizar una buena herramienta de optimizaci贸n del sitio web y esto conducir谩 a un ahorro sustancial en cualquier sitio web. He aqu铆 un ejemplo de lo mucho que se puede guardar en una p谩gina web t铆pica usando una herramienta de optimizaci贸n en tu sitio web como w3compiler para aplicar algunas de estas t茅cnicas.

Como ejemplo, tenemos la pagina de Intel, www.intel.com, ellos tienen una fuente original y una fuente optimizada. La optimizacion de codigo supuso a Intel un 51 % de ahorro en la p谩gina web solo utilizando el w3compiler. Es s贸lo una aplicaci贸n agresiva que maneja los principios utilizados por Google y Yahoo!.

Estas son algunas de las maneras en que w3compiler hace realidad esta tasa de ahorro (en velocidad/seguridad para su aplicaci贸n web) :

Eliminar espacios en blanco

Esta es la optimizaci贸n m谩s evidente cuando se ve la fuente de la p谩gina optimizada. Esta es tambi茅n la raz贸n por la que muchos optimizadores de p谩ginas web en el pasado han recibido un mal golpe. Aunque el espacio en blanco no proporciona ning煤n beneficio a un usuario del sitio web en absoluto, eliminarlos de una manera insegura puede resultar en p谩ginas rotas. Muchos removedores de espacios en blanco son culpables de esto. Una herramienta de optimizaci贸n debe ser verdaderamente conscientes de las complejidades del c贸digo de un sitio web y conocer las tecnicas para eliminar de forma segura el espacio en blanco, sin romper el c贸digo o causar errores en la pantalla .

Algunos se quejan de que tambi茅n produce c贸digo fuente en la pagina que es dif铆cil de leer. Esto realmente no es una cr铆tica v谩lida en varios casos porque acaso 驴todos los usuarios necesitan tener una visi贸n con un formato agradable de tu c贸digo fuente de la p谩gina web? 驴Van a editar el codigo por ti? Dado que las optimizaciones recomendadas aqu铆 son puramente para la implementaci贸n, tiene mucho sentido mantener una copia de los archivos de c贸digo fuente sin optimizar con un buen formato para la edici贸n y para generar una versi贸n optimizada para el despliegue que se oriente hacia la entrega. Eso es exactamente lo que una herramienta como la que recomendamos necesita. Eso hace que la aplicaci贸n de las optimizaciones como estas sean f谩ciles para sitios web completos.

Sustituir los valores de la entidad y de color, quitar meta etiquetas

Los buenos autores de p谩ginas web saben que hay m煤ltiples maneras de designar valores a una entidad y los valores de color en el c贸digo HTML y CSS. Algunos art铆culos de codificaci贸n manual en la optimizaci贸n sugieren el uso de la opci贸n m谩s corta para tu entidad y los colores. 驴Con qu茅 frecuencia cuentas (como desarrollador web) para investigar cada valor que agregas y determinar el m谩s corto? Es mucho trabajo y por lo general no vale la pena hacerlo. A menudo el software para creaci贸n de codigo HTML agrega estos valores sin necesidad de conocer los valores hexadecimales subyacentes de todos modos. Una vez que tu sitio web este completo tiene sentido optimizar todos estos valores con el valor m谩s corto. Estos seran los bytes libres disponibles para el ahorro.

Del mismo modo que el w3compiler elimina los comentarios de HTML, CSS y JavaScript, tambi茅n puede eliminar la informaci贸n de las etiquetas META que sean intrascendente. Aparte de las etiquetas META para las Keywords o “palabras clave” utilizadas, muchas seran eliminadas por w3compiler para optimizar.

Reasignaci贸n de los objetos incorporados de JavaScript

Los nombres de objetos de JavaScript son innecesariamente largos en un conjunto de p谩ginas web. Por dise帽o, estos nombres son descriptivos. Esto es lo que ayuda a que JavaScript sea un lenguaje f谩cil de leer y escribir. Sin embargo, no hay necesidad para un navegador de recibir m煤ltiples llamadas a un objeto con un nombre largo. Si el nombre del objeto aparece con cierta frecuencia, lo m谩s inteligente de hacer es almacenar una referencia al objeto en una variable nombrada lac贸nicamente.

Por ejemplo, si se llama al objeto en el documento m谩s de una vez, puede ser beneficioso almacenar el nombre del objeto en una sola letra designada para el nombre de la variable. En nuestro ejemplo, el objeto del documento se almacena en una variable denominada m. Esto hace que cualquier referencia al objeto en el documento sea significativamente m谩s corto.

Codigo original

if(document.gn_js){gn_writeLayers();}

Codigo optimizado

if(m.gn_js){hp();}

Esta es una t茅cnica que, cuando se hace correctamente, puede a帽adir un ahorro significativo, especialmente en archivos externos de JavaScript. Para hacerlo correctamente se necesita una vista de todo el sitio web el cual debe mantenerse para asegurar la consistencia a lo largo de tus l铆neas de JavaScript y los archivos JavaScript externos. El w3compiler que se utiliz贸 en este ejemplo no s贸lo gestiona la reasignaci贸n sino que mantiene un registro de todos los objetos JavaScript remapeados, haciendo de esta pr谩ctica algo sencilla y segura a trav茅s de un sitio web.

Minimizar la longitud de las funciones y los nombres de variable

Como referencias a los objetos de JavaScript que pueden ser remapeados, se puede realizar algo similar para las variables definidas por el usuario y los nombres de las funciones. Al igual que los nombres de los objetos, la funci贸n JavaScript y nombres de las variables son muchas veces mas descriptiva para que sean m谩s f谩ciles de leer en el c贸digo. Esto hace que sean innecesariamente largas. Desde que al navegador no le importa si la variable se llama gn_ChannelMenu o hj, convertir esos nombres largos a unos mas cortos puede a帽adir un ahorro sustancial.

Codigo original

if(document.gn_js){h_writeHighlights();}

Codigo optimizado

if(m.gn_js){hp();}

La misma advertencia que se aplica a la reasignaci贸n de objetos de JavaScript se aplica para el cambio de nombre de las funciones y de variables. Para hacer esto de manera segura, se necesita un mapa de los nombres de variables del sitio web que debe ser mantenida. Hacer esto manualmente requerir铆a un proceso laborioso que hacen la optimizaci贸n de sus p谩ginas web m谩s prohibitivos por la complejidad, y en estos casos los sitios complejos son los que obtienen m谩s beneficios . El w3compiler hace f谩cil esta tarea mediante el seguimiento de todas las instancias de las funciones y sus llamadas a trav茅s de tu sitio web.

Condensar JavaScript

Los ahorros adicionales tambi茅n se pueden realizar a trav茅s de un buen c贸digo a la antigua. Como cualquiera que est茅 familiarizado con los compiladores de C++ sabe, el c贸digo que escribas siempre estar谩 “optimizado” en el compilador. Esto significa que escribir algo como x = x +1 es perfectamente aceptable, pero el compilador va a cambiarlo a x++. Esto se debe a que las dos l铆neas logran la misma cosa, una s贸lo utiliza un par menos de caracteres.

En el JavaScript de ejemplo, las declaraciones var son innecesarias. Estas declaraciones est谩n fuera de la propia funci贸n, por lo que pueden ser reemplazadas con simplemente asignaciones sin var.

Codigo original

var gn_IE = 0; var gn_NS = 0; var gn_DHTML=0;

Codigo optimizado

cf=0;gy=0;cp=0;

Reasignaci贸n de los nombres de archivo

Desde que el w3compiler mantiene una visi贸n de todo el sitio de la aplicaci贸n, permite que la herramienta saque el m谩ximo provecho de la reasignaci贸n de archivos de im谩genes, scripts y formato de tu sitio de despliegue. Al igual que un navegador no le importa si el c贸digo fuente tiene espacios en blanco o si se elige un nombre descriptivo largo para la variable de JavaScript, no importa la forma en que las rutas de acceso a las im谩genes de las p谩ginas y los archivos de script externos est谩n expresados.

En el desarrollo de una p谩gina web, lo m谩s probable ser铆a crear un enlace de imagen de la siguiente manera :

img src=”/sites/nav/pix/solutions_off.gif”

En el ejemplo, se utiliza un directorio ubicado en /sites/nav/pix/ para guardar la imagen denominada solutions_off.gif. Sin embargo, el navegador le gusta la ruta de acceso de la siguiente manera:

img src=”/0/d.gif”

El w3compiler con la vista de todo tu sitio web, puede utilizar rutas de acceso y nombres de archivo como este sin el dolor de cabeza administrativo de tratar de mantenerlos en su entorno de desarrollo. w3compiler crea los directorios, cambia los nombres de los archivos y optimiza las rutas de las im谩genes para su despliegue. Se mantiene un control estricto sobre el cambio de nombre de la imagen y la ruta de reasignaci贸n, mientras que los archivos que edite y la estructura del sitio en el entorno de desarrollo siguen siendo los mismos.

Codigo original

img src=”/homepage/pix/04_35_business.gif”

Codigo optimizado

img src=”/0/g.gif”

Todo esto parece un largo camino que recorrer para ahorrar poco, cuenta el n煤mero de im谩genes que algunas de las p谩ginas web referencian y cu谩n larga es la ruta. Esta 谩rea de optimizaci贸n de las p谩ginas web rara vez se explora. Esto pasa sobretodo a causa de la pesadilla administrativa de tratar de mantener un conjunto de archivos de desarrollo editables y un conjunto de archivos de implementaci贸n. Con una herramienta como w3compiler para hacer esto por ti, estas libre para orientar tu desarrollo de archivos en conjunto con la edici贸n y luego dejar que w3compiler se ocupe agresivamente de realizar estas optimizaciones en tus archivos de implementaci贸n.

Estos son algunos ejemplos de los tipos de ahorros que se pueden lograr con la optimizacion en una p谩gina web. Con la herramienta de optimizaci贸n que se sugiere puedes tener f谩cilmente y con seguridad todo esto aplicado. Estas son algunas de las optimizaciones que las aplicaciones m谩s inteligentes en la web ya est谩n utilizando. Ahora, con las herramientas adecuadas, tu tambi茅n puedes.

Fuente original del art铆culo: Search Engine Land
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder