Recomendaciones para una web más rápida

ByLuis

Cal Henderson, desarrollador jefe de Flickr, nos hace una serie de recomendaciones para agilizar nuestra web. Iré explicándolas e intentando aportar mi propio punto de vista sobre ellas, de todas formas, es algo muy recomendable para leer.


Aunque las normas nos dicen que dividamos los javascript según su funcionalidad, es más efectivo tenerlo todo en un único javascript. Si tenemos 10 javascripts de 5k, se necesitarán más conexiones y enviar más cabeceras que si mandaramos solo 1 javascript de 50k.
A parte, IE y Firefox, según la especificación HTTP 1.1, solo se bajan dos recursos simultáneamente, por lo que mientras se baja dos scripts, el usuario no verá como se bajan las imágenes (lo cual le puede “desesperar”).
Aunque si juntamos todo, el usuario tendrá que bajárselo todo, cuando quizás no fuera necesitarlo porque no acceda a ciertos contenidos. Si hacemos que la página inicial sea lenta en descargar para conseguir que las páginas siguientes sean más rápidas, podemos hacer que el usuario se canse y no siga viendo el resto.
Pero el gran inconveniente de unir todos los archivos en uno es que si en nuestra aplicación se hace un pequeño cambio, todos los usuarios deberán volver a bajarse el archivo completo cambiado, en vez de bajarse solo la parte afectada. Claro, que esto no tiene mucho sentido en el caso de las CSS y los Javascript, porque a no ser que nos encontremos en beta, estos archivos no suelen sufrir muchas modificaciones.
El problema de dividir nuestras CSS y Javascripts, es que también tenemos que dividir nuestra aplicación para respetar el diseño estructurado. Si disponemos de un entorno de desarrollo y un entorno de producción, la solución es sencilla, cuando estamos desarrollando accedemos a todas las js (por ejemplo) y cuando pasamos producción, antes juntamos las js y tan solo es necesario acceder a una de ellas. Eso sí, el lío que podemos armar es gordo, lo digo por experiencias que he tenido en las subidas a real. Se podría hacer mediante PHP o como dice el autor con Smarty, pero o se hace con cuidado, o se puede liar una buena.
De igual manera se puede hacer con los scripts PHP, juntarlos para que en producción sea más rápida su descarga o ejecución. Y rizando el rizo, analizar que scripts, js o CSS son las que más se sirven y juntarlas y el resto dejarlas tal como están. Desgraciadamente, esto a veces suele ser obligatoriamente necesario.
Para CSS lo mejor es crear una hoja de estilos que sea general para la aplicación y luego otras para según que partes de la aplicación, así el usuario solo tendrá que bajarse un par de CSS.
Otra forma de ganar velocidad es mediante la compresión de lo que mandamos. Para ello pensamos en el módulo de Apache mod_gzip, pero Cal nos avisa que tengamos mucho cuidado con este módulo, porque a parte de necesitarse más CPU en el cliente y en el servidor, para comprimir/descomprimir, también tiene como inconveniente que el módulo usa el disco duro para crear un archivo temporal que será lo que se envie al cliente. Si se trata de muchas visitas, habrá un uso excesivo de disco, lo cual puede ser perjudicial.
Puede haber otras posibilidades, como el módulo mod_deflate, pero la mejor solución es cuánto menos envies mejor, y para ello es bueno eliminar tabulaciones, espacios, comentarios y demás cosas que hacen nuestro código legible, pero que aumentan el tamaño de lo que enviamos.
Algo difícil e importante es jugar con la caché, la cual nos puede resultar una enemiga, al evitar que páginas dinámicas se refresquen o recargando constantemente páginas que realmente no cambian con la frecuencia que son solicitadas.
Por último nos habla del problema de renombrar manualmente imágenes o archivos, y las consecuencias que nos puede acarrear, pero tampoco creo que vaya a ser un problema con el que nos vayamos a encontrar la mayoría, sobre todo cuando habla de versiones y los nombres renombrados, existiendo gestores de versiones disponibles para todos.
Serving JavaScript Fast
Vía / Digg

Similar Posts

Laboratorio: índice lateral con jQuery

ByLuis

Algo que me gusta bastante de algunos editores tipo Netbeans es que cuando hay algún error en una línea aparece un enlace en el lateral en la posición relativa de la línea respecto al alto del editor.

Algo parecido se me ha ocurrido hacer con jQuery, obtener los elementos cabecera (H1..H6) y crear un índice, y mediante estilos y jQuery repartirlos por el lateral de la ventana.

indice_lateral.png

El código es sencillito, recupero los elementos h1..h6, calculo su posición X y luego ordeno el array por esta posición, creo una lista ordenada y anidada con OLs y LIs y con CSS y Javascript coloco los elementos donde corresponde.

		  $(document).ready(function() {
var ids = 0;
var haches = new Array();
for (var i=1; i<7; i++) {
$('#content h'+i).each(function () {
if (!this.id) this.id = 'haches_'+ids++;
if ($(this).css('display') != 'none') {
haches.push(new Array($(this).offset().top, $(this).text(), this.id, i));
}
});
}
haches.sort(function(a,b){return a[0]>b[0];});
var ant = 1;
var html = '<ol class="indice">\n'
for(var i=0; i<haches.length; i++) {
if (haches[i][3] > ant) {
html += '\n<ol>';
} else if (haches[i][3] < ant) {
html += '\n</ol>';
}
html += '<li id="haches'+i+'" class="indice'+haches[i][3]+'"><span><a href="#'+haches[i][2]+'">'+haches[i][1]+'</a></span></li>\n';
ant = haches[i][3];
}
html += '</ol>\n';
$(document.body).prepend(html);
$('#indice').css('position: absolute; top: 0px');
var alto = $(window).height();
var max = $(document).height();
for(var i=0; i<haches.length; i++) {
console.log(parseInt(alto*haches[i][0]/max));
$('#haches'+i).css('top', parseInt(alto*haches[i][0]/max)+"px");
$('#haches'+i).css('left', ($(window).width()-50)+"px");
}
});

Ni que decir tiene que le faltan cosas por hacer, como por ejemplo moverlo según se mueve el scroll, pero para hacerlo en un rato no está tampoco muy mal. Los distintos tipos de enlaces a cabecera tienen sus estilos propios (feos pero propios) y cuando te pones sobre uno de ellos aparece el título enlazando al elemento en cuestión (esto también habría que refinarlo).

Ejemplo

SoundManager 2: controla el sonido desde Javascript

ByLuis

SoundManager 2 es un API de Javascript que permite controlar el sonido ofrecido por un control Flash. Disponible para la mayoría de los navegadores, es necesario tener instalado el plugin para Flash (logicamente) y no intrusivo.

Un ejemplo de uso sería:

soundManager.createSound({
id: 'mySound',
url: '/path/to/some.mp3',
autoPlay: true,
pan: -75,
volume: 50
});

La verdad es que los ejemplos que ofrecen son increíbles:

SoundManager 2

10 cosas que probablemente no sepas de PHP

ByLuis

Cuando aprendemos un lenguaje (en este caso PHP) de forma autodidacta o parcialmente (un curso en la empresa), hay veces que usamos lo que conocemos porque con eso nos basta, pero no profundizamos más y nos encontramos con que hay cosas que desconocemos y que nos serían de utilidad. Por eso, el artículo que paso a traducir, nos puede ser de gran ayuda.

  • Usa ip2long() y long2ip() para guardar/recuperar las direcciones IP en la base de datos en vez de un string. Un string de 15 posiciones ocupa más espacio, cuanto menos llenemos la BD mejor que mejor.
  • Valida parcialmente la dirección de email con la función checkdnsrr(). Esta función comprueba que el dominio se corresponde a una dirección IP, así evitamos que se hayan enviado direcciones de correo con servidores erróneos. En el caso de que la validación de la existencia del email sea necesario.
  • Si usas PHP5 utiliza las funciones para acceso a MySQL mysqli_* en lugar de mysql_*, ya que están optimizadas.
  • Aprende lo que te ofrece el operador ternario (?:), te facilitará mucho el desarrollo y la comprensión del código una vez creado.
  • No reinventes la rueda, antes de meterte a hacer lo que ya está hecho, mira si existe en las librerías PEAR.
  • Usa highlight_file() cuando quieras formatear un texto como código PHP.
  • Deshabilita los logs de errores con error_reporting(0), a parte de ganar en rendimiento, evitas mostrar querys o paths de scripts. Yo personalmente recomendaría que te crearas un buen gestor de errores.
  • Usa gzcompress() y gzuncompress() para comprimir strings grandes para que no ocupen demasiado tamaño en la BD, por ejemplo en un campo BLOB.
  • Usa parámetros por referencia (&$param) para poder conseguir que la función te devuelva más valores a parte de que devuelve return.
  • Intenta comprender completamente las “magic quotes” para evitar que te ataquen mediante SQL Injection.

10 things you (probably) didn’t know about PHP.

Vía / dzone

gotApi: colección de APIs

ByLuis

gotapi.pngYa hace tiempo hablamos de una web de referencias para programadores, y como cuanta más variedad de servicios parecidos tengamos, mejor que mejor. En esta ocasión os mostramos un directorio de APIs, que accediendo a las páginas originales, nos muestran las referencias que necesitamos.
Dentro de las distintas APIs encontramos referencias sobre HTML, Javascript (Prototype incluida), CSS, XML, C++, PHP, bases de datos, Java, Apache, ActionScript y mucho más que va creciendo poco a poco.
Lo que más me gusta es poder elegir el origen de referencia del API, por ejemplo para HTML puedes mirar en w3.org o en msdn.microsoft.com, aunque me hubiera gustado que se pudiera buscar también en xulplanet.com.
gotAPI.com
Vía / dzone

Añadir estilos y scripts a la administración de plugins en WordPress

ByLuis

Cuando estamos desarrollando un plugin para WordPress y queremos que la administración del plugin tenga estilos y scripts propios, ya sea para darle cierta interactividad o diseño, o bien podremos incluir los estilos o librerías a pelo en la página del plugin, o bien podremos hacer que WordPress añada lo estilos y los scripts en el head del HTML. Para realizar esto, deberemos utilizar las acciones admin_print_styles y admin_print_scripts:

add_action('admin_print_styles', 'incluir_css');
add_action('admin_print_scripts', 'incluir_script');

function incluir_css() {
  echo '';
}

function incluir_script() {
  echo '';
}

Así de sencillo.

|

Ben Goodger explica el uso elevado de memoria en Firefox 1.5

ByLuis

Ben Goodger, el jefe de desarrolladores de Firefox, explica el uso de memoria en Firefox. Comenta que la gente confunde entre el uso de memoria y las pérdidas de memoria. En el caso de Firefox 1.5 se trata de uso elevado de memoria, ya que almacena en caché las páginas que se visitan para un mejor funcionamiento del historial de navegación.

El uso excesivo de memoria se puede solucionar cambiando el valor de la propiedad browser.sessionhistory.max_total_viewers a 8, para ello escribe about:config en la caja de navegación de Firefox, busca la propiedad y cambia el valor.

About the Firefox “memory leak”

Vía / mozillaZine