TecnoRetales » Navegadores http://www.tecnoretales.com La experiencia no se olvida Mon, 13 Sep 2010 21:37:21 +0000 http://wordpress.org/?v=2.8.5 en hourly 1
Cómo optimizar tus aplicaciones Web http://www.tecnoretales.com/programacion/como-optimizar-tus-aplicaciones-php/ http://www.tecnoretales.com/programacion/como-optimizar-tus-aplicaciones-php/#comments Fri, 02 Oct 2009 16:57:21 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=685

Optimizar aplicaciones PHPManuel Aguilar publicó una magnífica presentación sobre cómo optimizar aplicaciones Web dada en la PHP Barcelona Conference 2008 y he considerado interesante recopilar a modo de resumen las ideas más importantes de ese artículo, en cualquier caso, recomiendo la lectura del mismo para recoger toda su esencia y ampliar información.

Partiendo de un estudio de Yahoo! que dice que el 80% del tiempo de carga de una web corresponde al lado del cliente, podemos seguir una serie de reglas que aumentarán significativamente la percepción de velocidad del usuario.

1. Aumentar el tiempo de expiración de los elementos cacheados que no varían como CSS o JavaScript: Para forzar la carga de los mismos cuando haya cambios, podemos añadir el md5 del contenido del fichero como parámetro, así el navegador lo recargará cuando cambie el hash. Ej: style.css?hash=f9d35dcf65d8f67e288ae2f12fc069f7

2. No colocar código JavaScript o estilos inline: es mejor colocarlos como ficheros externos fácilmente cacheables, de este modo evitaremos descargar todo el html por un cambio de estilo.

3. Reducir el número de ficheros externos: Los navegadores sólo pueden aceptar dos descargas simultaneas de un mismo dominio, si unimos nuestras librerías JavaScript y nuestros CSS en un único archivo evitaremos dilatar innecesariamente el tiempo de descarga.

Firebug Net

4. Usar subdominios diferentes para las imágenes y para los elementos estáticos: Conseguiremos así descargar 8 elementos de manera simultánea y reducir la carga de la web. Si además podemos optimizar un apache aparte para servir las imágenes, conseguiremos un mejor rendimiento al servirlas.

5. Compactar los ficheros JavaScript: Existen programas gratuitos como YUI Compressor que comprimen los archivos JavaScript consiguiendo resultados de hasta el 50%.

6. Utilizar compresión en el servidor: Los servidores modernos como Apache son capaces de comprimir la información antes de servirla, posteriormente los navegadores actuales como Explorer o Firefox la descomprimen de manera transparente al usuario.

7. Fomentar el uso de imágenes con muchos sprites: Estas son imágenes grandes que contienen muchas imágenes pequeñas. Según lo comentado en el punto 3 tardaremos mucho menos en descargar una imágen con 50 sprites que 50 sprites de manera individual. Posteriormente utilizaremos CSS para definir la sección de imágen que se mostrará.

Sprites

8. Mover los CSS al <head>: Navegadores como Explorer no renderizan la web hasta que no tienen todos los CSS, si los colocas en la cabecera podrá empezar antes a mostrar la web.

9. Mover los JavaScript al final de la página: Hasta que un fichero JavaScript no se ha leido completamente el navegador no continua con la carga. Si los movemos al final de la página este se estará cargando cuando el usuario ya está navegando por la web.

10. Evitar llamadas duplicadas a JavaScript y CSS: Si el navegador encuentra un fichero JavaScript para la carga hasta que este se ha leido completamente, si posteriormente vuelve a encontrar una llamada al mismo JS, volverá a parar la carga hasta que se haya leido.

Vía | Optimización aplicaciones PHP

]]> http://www.tecnoretales.com/programacion/como-optimizar-tus-aplicaciones-php/feed/ 2 Cómo capturar una web en una imágen con Firefox? http://www.tecnoretales.com/navegadores/como-capturar-una-web-en-una-imagen-con-firefox/ http://www.tecnoretales.com/navegadores/como-capturar-una-web-en-una-imagen-con-firefox/#comments Fri, 17 Jul 2009 06:51:38 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=547

FirefoxGracias a los fantásticos Add-ons de Firefox podemos dotar a nuestro navegador de nuevas funcionalidades como por ejemplo la que he encontrado esta mañana.

Necesitaba realizar un screenshot de toda una web y googleando un poco, he encontrado Page Saver, un fantástico plugin que permite realizar este tipo de capturas almacenando además las imágenes flash contenidas en la página.

Para instalarlo es bien sencillo, click aquí para ir a la ficha del plugin y click en el botón “Añadir a Firefox”.

Podeis buscar otros plugins para vuestro navegador en la página de Addons de Firefox. Aquí os dejo una pequeña lista con los plugins más interesantes y/o útiles que me he encontrado:

  • Web Developer: ¿Eres programador web? En ese caso ya conoces este plugin, sino es así, instalalo y disfruta ;)
  • Firebug: Completo paquete de utilidades con el que se puede analizar (revisar velocidad de carga, estructura DOM), editar, monitorizar y depurar el código fuente, CSS, HTML y JavaScript de una página web de manera instantánea e inline. Junto con Web Developer, uno de los plugins más útiles para un programador web.
  • Selenium IDE: Set de herramientas que permiten desarrollar scripts para pruebas de aplicaciones Web.
  • ColorZilla: Con este Addon podemos seleccionar cualquier color de cualquier elemento contenido en una web y obtener su valor en hexadecimal.
  • Live HTTP headers: Con él podrás controlar todas las cabeceras enviadas y recibidas al navegar por una web.
  • SeoQuake: Completa herramienta de diagnóstico SEO de una web.
  • Tamper Data: Permite modificar los datos enviados en un POST a una página.
]]> http://www.tecnoretales.com/navegadores/como-capturar-una-web-en-una-imagen-con-firefox/feed/ 0