Entradas etiquetadas ‘velocidad

Todos estamos de acuerdo en que uno de los mayores problemas a los que nos enfrentamos habitualmente los desarrolladores es lograr una rápida carga de nuestro sitio web, en cuanto vamos añadiendo funcionalidades nos vamos encontrando con ralentizaciones en la carga del sitio por lo que debemos encontrar el equilibrio entre las funcionalidades y la velocidad de carga del sitio.

Hay diversos estudios que han demostrado que una buena velocidad del sitio web nos lleva a un aumento de la actividad y retención de usuario, ademas que nos permite una reducción de costes en todos los sentidos.

Algunos consejos para aumentar la velocidad de un sitio web

  1. Realiza pocas peticiones HTTP
  2. Haz uso de CDN (Content Delivery Network)
  3. Añade una etiqueta para hacer expirar tus cabeceras, Expires header
  4. Habilita la compresión por Gzip
  5. Pon el CSS al principio de todo
  6. Pasa los archivos JS al final
  7. Evita los comentarios CSS
  8. Pon tu CSS y tus archivos JS en archivos externo
  9. Reduce las consultas DNS
  10. Optimiza y minimiza el código de tus archivos JS
  11. Evita las redirecciones
  12. Elimina los scripts duplicados
  13. Configurar los ETags

A todos estos consejos tenemos que añadir que sin duda es necesario en primer lugar un servidor rápido, el servidor es la pieza clave para que un sitio web cargue rápido sin duda lo mejor será conseguir un hosting pago que te ofrece mayor velocidad y soporte, pero en caso de no tener dinero suficiente, y tengas que alojarte en uno gratuito, prueba muchos y decídete por el que más rápido te parezca.

Herramientas para acelerar nuestro sitio web

Herramientas de Google Webmaster

Google Webmaster ha lanzamo recienteme una funcionalidad llamada: Rendimiento del sitio, una función experimental en las Herramientas para webmasters que te muestra información sobre la velocidad de tu sitio y sugerencias para hacerlo más rápido.

Encontrarás datos sobre la rapidez de carga de las páginas, así como de su evolución en el tiempo; una comparación entre el tiempo de carga de tu sitio y de otros sitios; ejemplos de páginas concretas con sus tiempos de carga reales; y sugerencias de Page Speed, que pueden ayudar a reducir la latencia que perciben tus usuarios.

Page Speed

Google lanzó hace un tiempo Pagespeed, una herramienta que llevan desarrollando muchos años y que utilizan ellos mismos para optimizar sus sitios, es más o menos una competencia a YSlow de Yahoo! del que hablamos en el siguiente punto.

Al instalarlo se integra a Firebug y al ejecutarlo, Pagespeed nos dará diversos consejos y parámetros que podemos tomar en cuenta para mejorar el desempeño de carga de nuestro sitio, y de lo más interesante incluso genera versiones optimizadas de las imágenes que tengamos para que las reemplacemos y utilicemos para reducir así también la carga.

La documentación es excelente y merece la pena instalarla para experimentar.

Ambas noticias agregan mucho valor de parte de Google a la web, y ya las veo como opciones imprescindibles en un futuro.

YSlow, analizador de rendimiento web

Si quieres poner en práctica estos consejos y ver como poco a poco vas consiguiendo agilizar la carga de tu sitio no dudes en instalarte YSlow.

Este plugin de Yahoo llamado YSlow para Firebug (en Firefox) es sin duda una herramienta que todo webmaster debería tener funcionando en su navegador.

Para acceder a todas sus posibilidades hay que instalar primero Firebug y luego YSlow. Una vez instalado, se capturan todos los datos relativos a las páginas y sus elementos. Hay información sobre Rendimiento, Estadísticas y Componentes.

Para los que aún no conozcan Firebug decir que es una extensión que te ayudará a desarrollar, evaluar y depurar sitios web, controlando el CSS y HTML en tiempo real, midiendo el tiempo de carga para optimizar la página o corrigiendo los posibles errores Javascript.

La importancia de !important en CSS

9 de junio de 2007

en: Sin categoría

Este es el mismo título utilizado en YellowJug para describir una entrada que explica las funciones de esta palabra clave de las CSS.

!important funciona como una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ahora veamos unos ejemplos para poder entenderlo bien:
Cuando tenemos una misma propiedad aplicada dos veces, el navegador hará caso a la última:

#main {
width:600px;
width:800px;
}

Por lo tanto en este ejemplo el navegador asignará 800 píxeles.

La declaración !important puede ser usada para dar prioridad a diferentes parámetros:

#main {
width:600px !important;
width:800px;
}

Ahora en este ejemplo se aplicará un ancho de 600 píxeles.

Esta es una de las mejores recopilaciones de trucos para búsquedas de Google que he visto ultimamente y es que ya que tenemos que utilizar Google todos los días queramos o no por diferentes razones pues nos servirá de ayuda conocer esos pequeños trucos que sin duda marcan la diferencia.

Los usuarios suelen tipear su consulta y si el resultado no es el deseado comienzan a pasar páginas de resultados hasta dar con el resultado deseado, pero hay muchos pequeños trucos que nos ayudan a hacer nuestras consultas mucho mas eficientes.

Algunos de estos trucos son muy obvios pero sin embargo otros son desconocidos por una gran mayoria, lee estos trucos y verás como tu próxima búsqueda será más eficiente:

Utiliza el símbolo |

A menudo queremos encontrar resultados de diferentes palabras pero que no están relacionadas entre sí, para ello por ejemplo si queremos encontrar cosas relacionadas con el baloncesto ponemos [baloncesto basket] esto no es del todo correcto deberíamos aprender a utilizar el símbolo | de este modo el buscador entenderá que tenemos una consulta con dos palabras claves diferentes [baloncesto | basket].

Las comillas

El problema que tenemos es muy parecido al anterior, cuando buscamos coincidencias exactas nos olvidamos del uso de las comillas (“”) por lo que tipeamos por ejemplo [Jorge Perez] por lo que esta consulta nos devuelve todos los resultados relacionados con la primera y la segunda palabra indistintamente de que coincidan por ello recuerda que si escribes la consulta entre comillas, sólo obtendrás los resultados que coincidan exactamente con los términos especificados y cuyo orden sea idéntico al de la frase utilizada como palabra clave ["Jorge Perez"].

La importancia de !important en CSS

7 de junio de 2007

en: Sin categoría

Este es el mismo título utilizado en YellowJug para describir una entrada que explica las funciones de esta palabra clave de las CSS.

!important funciona como una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ahora veamos unos ejemplos para poder entenderlo bien:
Cuando tenemos una misma propiedad aplicada dos veces, el navegador hará caso a la última:

Sintetizadores de voz

15 de mayo de 2007

en: Sin categoría

Seguro que alguna vez has visto escritas las siglas TTS (Text to Speech) ó lo que es lo mismo sintetizador de voz, esto es cómo se le llama al proceso de convertir el texto en voz.

Sintetizador de voz: Loquendo

Prueba este sintetizador de voz para hacerte una idea de lo que está tecnología puede llegar a hacer.

Está actualmente disponible en inglés británico y americano, español y catalán, italiano, alemán, francés, griego, sueco, portugués brasileño y europeo, español argentino, mexicano y chileno, y holandés.

Puede decir cualquier frase en varios idiomas y sexos, y permite descargarse lo que dice el intérprete, más de uno advertrá que este tema está ya muy visto pero no se trata de que se conozca o no los sintetizadores de voz sino lo que se está evolucionando en esta tecnología en gran medida gracias a la técnica concatenativa “Unit Selection” (Selección de unidades).

El funcionamiento se basa en el uso de una base de datos de voz grabada que se organiza en diferentes unidades (fonemas, sílabas, palabras, frases) y se crea un índice en la base de datos basada en parámetros como la frecuencia fundamental, el pitch, la duración, la posición en la sílaba y los fonemas.

Tux ASCII

4 de mayo de 2007

en: Sin categoría

Lo primero que te puede venir a la cabeza al escuchar esto de “ASCII” es la poca utilidad que puede tener hoy en día el arte ASCII cuando esta a la orden del día la creación de gráficos cada vez más sorprendentes pero lo que a mí me llama la atención es cuanto se puede hacer con pocos recursos y mucho ingenio y voluntad, cosa que hoy en día gracias a los recursos no es tan necesaria.

En este caso se ha representado a TUX que como todos sabeis es el nombre de la mascota oficial del Kernel de Linux, puedes encontrar más información en la Wikipedia.

TUX ASCII

Aprovecho para decir que esta manera de arte nacio por la necesidad de crear gráficos cuando el mundo de la informática comenzó a tomar importancia a pesar de las limitaciones técnicas, los usuarios pronto se pusieron a dibujar con sus ordenadores usando letras y símbolos para plasmar en pantalla o en papel diferentes dibujos.

El arte ASCII ha sido tambien ha sido necesario cuando la transmisión o impresión de imágenes no es posible en equipos con configuraciones muy limitadas (consolas y terminales) que no cuentan con tarjetas de proceso gráfico.

El arte ASCII ha servido como lenguaje fuente para representar logos de compañías y productos, para crear diagramas y del mismo modo en el diseño de los primeros videojuegos.