7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Acelerar Sitios Web Con YSlow

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Todos conocemos las innumerables razones por las qué los tiempos de carga de una página web aumentan considerablemente, sin embargo, localizar el problema puede ser costoso en tiempo y dinero. Así que ¿por qué perder el esfuerzo cuando alguien, o algo, puede hacer todo este trabajo sucio por ti?

Descubre YSlow de Yahoo, un analizador de páginas web gratuito para Firefox.


Para Empezar

YSlow tiene dos requisitos:

YSlow se combina con Firebug, necesitarás instalar la extensión en el orden indicado en el anterior listado antes de continuar.


El Problema

Los diseñadores web, los programadores y los redactores se esfuerzan en conseguir un contenido único e interesante en que aventaje a sus competidores.

Puede que hayas estado durante días perfeccionando tu nuevo blog y te que casi te hayas caído de tu silla de la emoción al verlo por primera vez. Pero, después, cuando tu sitio web se inunde dcon un torrente de visitas, te darás cuenta que las cosas no funcionando sin problemas. Bajo presión, tu nuevo sitio web podría responder como un Commadore 64.


La Solución: YSlow para Firefox

Yahoo's YSlow for FirefoxYahoo's YSlow for FirefoxYahoo's YSlow for Firefox

Las herramientas de análisis de páginas web se dividen generalmente en dos categorías:

  1. Posicionamiento en Motores de Búsqueda
  2. Análisis del rendimiento de "Document Object Model" (DOM).

YSlow encaja en éste último apartado. Utiliza conjuntos de reglas predefinidas para calificar el rendimiento de una página web, y herramientas de terceros (como Smush.it y JS Minifiers) para ayudar en la resolución de cualquier problema.

Existen tres puntos de vista:

  1. Grado
  2. Componentes
  3. Estadísticas

YSlow incluye seis útiles herramientas: entre éstas encontramos desde comprobaciones para el código JavaScript, hasta la optimización de imágenes a través de Smush.It (otra aplicación gratuita de Yahoo). Toda la aplicación se integra dentro de la ventana de Firebug, que puede abrirse y cerrarse a través de un práctico icono situado en la barra del navegador.

Echemos directamente ahora un vistazo a la sección 'Grado'.


1. Ficha Grado

Yahoo! YSlow's Grade ViewYahoo! YSlow's Grade ViewYahoo! YSlow's Grade View

Utilizando la página de inicio de Envato como ejemplo, que es un sitio con relativamente poco tráfico, vemos que la puntuación general relativa al rendimiento nos da un resultado de 74 sobre 100, con un Grado "C" de color amarillo. Pero, ¿qué significa realmente esto? Después de todo, la página web se ve perfectamente en el navegador. Bien, tenemos que echar un vistazo a las reglas de la izquierda de esta sección para descubrirlo.

Las reglas se dividen en categorías: contenido, cookies, CSS, imágenes, JavaScript y el servidor. Como YSlow ha inspeccionado los elementos del DOM, califica a cada uno según un conjunto de reglas predefinidas (en este caso YSlow V2). Cuanto más conforme a las reglas esté el elemento, más puntos positivos se anotará. Cuando se hayan recogido todas las calificaciones, se obtiene la valoración final.

En el caso de Envato, todas las reglas relativas a la interfaz de usuario puntuaron alto, pero las reglas sobre el servidor fueron menos satisfactorias. Y esto bajo el grado o nota final.

Afortunadamente cada regla explica dónde reside el problema y ofrece una explicación detallada sobre cómo resolverlo. Esta característica proporciona un gran alivio a alguien nuevo en el área de la optimización de sitios Web.


Conjuntos de Reglas

Para algunos, ciertas reglas serán más importantes que otras. YSlow, te proporciona un conjunto de reglas predeterminadas, pero también te permite cambiar a modo 'clásico', 'pequeño sitio o blog' o crear las tuyas propias. Si no te preocupa el uso de Redes de Distribución de Contenido conocidas como CDNs (Content Delivery Networks), simplemente edita un conjunto de reglas y elimina esa función. Realmente no podría ser más fácil.


Ficha Componentes

Yahoo YSlow's Components ViewYahoo YSlow's Components ViewYahoo YSlow's Components View

La sección de componentes muestra los elementos resultantes de un análisis en una tabla de datos clara y ampliable.

Aunque esta sección te proporciona un análisis más detallado, con datos como la fecha de expiración de un archivo o el tiempo de respuesta, la vista general puede ser útil para entender rápidamente las áreas más problemáticas. Si tienes habilitada la compresión GZIP, podrás ver desde aquí la diferencia de tamaño del archivo tras la compresión.


Ficha Estadísticas

YSlow statistics view showing graph dataYSlow statistics view showing graph dataYSlow statistics view showing graph data

Todo el mundo ama los gráficos. YSlow también los crea.

La página de estadísticas es una manera rápida y sencilla para comprender el peso total originado por tus peticiones HTTP. Simplificando, hay dos gráficos: vaciar la caché y caché de primer nivel. Estos gráficos diseccionan tu web según tipo de archivo, así encontraremos HTML, JavaScript, imágenes, etc. El tamaño de los archivos de cada uno se muestra como segmentos de un gráfico circular. Empty Cache representa la primera visita de un navegador a la página web. “Primed cache” indica qué componentes se almacenarían o no en la caché del navegador al visitar la web por segunda vez. Limpio, claro y eficaz.


Herramientas

Por último, disponemos de algunas herramientas. Inmediatamente, notarás una falta de especificidad hacia la página web analizada, pero no te dejes engañar. Cada herramienta te ahorrará un montón de tiempo en lo que respecta a la reducción, minificado y compresión de tu contenido. Si estás familiarizado con el concepto de optimización, entonces puede que te hayas topado ya con herramientas similares.

Para reducir los tiempos de carga de la página, es importante que elimines los espacios en blanco y los comentarios en los documentos y optimices tus imágenes.

Afortunadamente estas herramientas hacen todo este duro trabajo por ti, porque hacerlo a mano, sin duda, te obligaría a pasar la noche en vela. Ninguna cantidad de bebidas energéticas te evitarían volverte loco después de haber borrado una función JavaScript por accidente por enésima vez.

En total hay ocho herramientas; explicarlas todas ellas nos llevaría un par de artículos. Por tanto, me voy a concentrar en Smush.it como ejemplo.

YSlow will automatically upload images for compressionYSlow will automatically upload images for compressionYSlow will automatically upload images for compression

Smush.it es una pequeña aplicación web, que puede usarse junto a YSlow o directamente desde tu navegador.

Sencillamente, Smush.it es un optimizador de imágenes sin pérdida. YSlow carga las imágenes por ti, las 'aplasta' y las presenta en una tabla donde se pueden ver sus nuevas versiones, el nuevo tamaño y el porcentaje de ahorro tras la compresión.

Incluso podrás guardar los archivos con la misma estructura de directorios y descargarlas en un práctico archivo zip.

Existen un montón de aplicaciones gratuitas con herramientas similares, pero las empaquetadas en YSlow son excelentes.


Mejorar el Grado de Envato en YSlow

Como he mencionado anteriormente, el rendimiento de Envato según YSlow es de 74 con una grado C. Vamos a tomarnos algún tiempo para analizar los resultados de YSlow, y ver qué podríamos hacer para mejorar el resultado final.

Aquí están las sugerencias de mejora, empezando por la parte superior:

Disminuir el número de peticiones HTTP: Grado E

Esta regla nos indica en los detalles que tenemos seis scripts externos JavaScript y 17 imágenes de fondo externas. Nos sugiere que combinemos los archivos y utilicemos sprites CSS de imágenes para resolver estas cuestiones.

Lo primero que hay que hacer es echar un vistazo a la sección componentes, y en particular, a los archivos JS.

Como muestra la URL, sólo un archivo JavaScript se encuentra en el mismo servidor que la página analizada, y contiene JavaScript personalizado para WordPress. Son requeridos dos más, para JQuery y para Google Analytics, y los tres finales proceden de formspring.com.

Si los archivos JavaScript fueran míos, consideraría combinar los archivos personalizados applications.js y formspring JS en uno y alojarlos localmente. Sin embargo, sólo el archivo application.js parece estar modificado para propósitos personales. Y yo realmente no quiero jugar con el trabajo de otra persona. Sobre todo porque algunos de esos archivos carecen de información sobre la licencia o los derechos de autor.

Usar el alojamiento de Google para jQuery también se considera una buena práctica, sin embargo, deberían actualizar a la versión más reciente de jQuery: 1.4.2.

Así que en este caso, es mejor ignorar esta regla ya que cualquier modificación de los métodos actuales podría darnos problemas más adelante. Mi única preocupación es el tiempo de respuesta de dos de los archivos de FormStack, en este momento, cada uno de ellos tarda más de 360 ms en responder. Si esto continúa, merecería la pena encontrar un método para hospedarlos localmente.

Imágenes

A continuación repasamos las imágenes; todas están alojadas localmente, responden dentro del margen de 40 ms y son muy pequeñas en tamaño. Esto nos indica que individualmente, estos archivos ya han sido optimizados para esta página. YSlow nos sugiere que combinemos estas imágenes y utilicemos sprites CSS para mejorar nuestro grado.

Si estás familiarizado con los sprites CSS, puedes hacer clic en el enlace "Leer más", que te llevará a las mejores prácticas para acelerar tu sitio web.

En este caso, mediante el uso de una imagen optimizada deberíamos ver una mejora en el tiempo de respuesta de imagen. Los Sprites CSS funcionan combinando tus imágenes de fondo en una sola y usando después CSS para alinear esta mediante background-image y background-position dependiendo de la porción que quieras mostrar de la misma en cada momento. No hay nada especial en el CSS empleado, por lo que debería ser compatible con todos los navegadores principales.

Usar un Content Delivery Network (CDN) o Red de Distribución de Contenidos: Grado F

Muchos sitios web tendrán un grado de F en esta regla, debido a que la instalación de un CDN conlleva algún esfuerzo; sin embargo, los beneficios compensan en gran medida el esfuerzo y el tiempo. Además, servicios como Amazon te ofrecen un alojamiento sorprendentemente barato. Aunque Envato utiliza un CDN para sus sitios de alto tráfico, como Tuts+, podrían haber decidido que no es necesario para sus sitio de menor tráfico.

Añadir un Tiempo de Expiración a los Headers: Grado F

Una vez más, nos encontramos ante una regla que hace referencia a las solicitudes HTTP. Hacer que los encabezados o headers expiren es muy común, ya que permite que los componentes puedan ser almacenados en caché. Los componentes cacheados (imágenes, JavaScript, etcétera) ahorran tiempo y ancho de banda cuando una página web es visitada por segunda y sucesivas veces. Así que vale la pena implementar fechas de caducidad para el contenido.

YSlow encontró 55 componentes "sin fecha de vencimiento lejano o futuro" tras analizar Envato.com. La mayoría de estos componentes son imágenes de fondo. Sabemos gracias a la primera sugerencia, que podemos "Hacer menos peticiones HTTP," podemos utilizar sprites CSS para reducir el número de imágenes de fondo, y así mejorar automáticamente este grado.

Configurar "Expires" para los headers es, por los general, un proceso simple y normalmente sólo requiere una incorporación rápida en tu archivo .htaccess. Una vez aplicado, todos tus componentes tendrán headers con fechas de expiración apropiadas, sin tener que manipular o modificar ningún otro archivo. Conocer en profundidad y saber cómo trabajar con tu archivo .htaccess y los 'headers' requeriría un artículo completo en sí. En lugar de entrar en detalle aquí, he incluido un grupo de útiles enlaces para ampliar tus lecturas:

Colocar el CSS en la Parte Superior: Grado B

YSlow encontró una hoja de estilos fuera del elemento Head en la página de Envato. Afortunadamente, ésta es la regla más sencilla de corregir. Al mantener las hojas de estilo en la parte superior de tu página web, aumentas automáticamente la velocidad a la que ésta se carga. Una vez que la cambiamos de lugar, YSlow nos mostró un grado A para esta regla.

Minificar JavaScript y CSS: Grado D

Quitar los espacios en blanco no utilizados en los documentos reduce el tamaño del documento y por consiguiente aumentará la velocidad a con la que se descargue el archivo. Como he mencionado anteriormente, YSlow nos proporciona una herramienta para minificar, es decir, puede hacer todo este duro trabajo por nosotros.

Dirígete a la vista de herramientas y selecciona Compresor CSS de YUI. En un abrir y cerrar de ojos, tus archivos CSS estarán minimizados y disponibles para su descarga. Rápido, limpio y simple.

Configurar etiquetas de entidad (ETags): Grado C

Los ETags proporcionan un medio para validar una versión específica de un componente de la página web (imágenes, JavaScript, etcetera). Trabajan con el servidor web para que el contenido almacenado en la caché del navegador coincida con el contenido del servidor web Por desgracia, YSlow ha detectado que faltan hasta dos ETags de archivos alojados en formspring.com. Debido a esto, sería mejor seguir la sugerencia de YSlow y quitar el conjunto de ETags. Esto puede hacerse mediante la adición de "FileETag none" a tu fichero de configuración de Apache. Ahora deberías ver una mejora en las reglas de este grado.


Alternativas

Hay muchas alternativas para analizar una página web, y no me sorprendería que tuvieras tus favoritas. Yo uso, junto con YSlow, otras cuatro herramientas gratuitas de análisis. Como era de esperar, cada una ofrece características únicas y, por este motivo, es importante recordar que no hay una herramienta que pueda proporcionar un informe con un resultado absoluto a prueba de bala.

Para darte una idea de las diferencias entre los resultados finales que generan algunas de ellas, he incluido una breve descripción y la puntuación que nos proporcionan para la Página Web de Envato.

Web Page Test

Proporcionada por AOL, esta aplicación añade varios ajustes a tu análisis. Puedes emular la versión del navegador, la velocidad de conexión y realizar comparativas visuales respecto a otras URLs. Es una gran característica si deseas empezar ha hacer Pruebas A/B.

Puntuación: N/A. Proporciona un listado de comprobaciones sobre la optimización y los tiempos carga.

PageSpeed

PageSpeed es otra extensión para Firefox y Firebug. Éstas incluso se muestran en el mismo menú que YSlow y proporcionan un análisis similar. Al igual que YSlow, utiliza reglas e informa sobre el rendimiento de cada uno de los componentes. También optimiza y minimiza tu contenido.

Puntuación: 76/100

WooRank

Todavía está en fase beta, esta aplicación web gratuita revisará tu contenido, el ranking de Alexa, el tráfico, tu posicionamiento en buscadores, metadatos geográficos y mucho más. Añadide útiles consejos en cada análisis. Incluso puedes añadir un widget a tu sitio web que mostrará tu 'score woorank' o puntuación en woorank.

Puntuación: 65.8/100

Website Grader

Grader es otra aplicación web gratuita, disponible también para el iPhone. Esta herramienta es muy similar a WooRank, con una interfaz limpia y detallada. Existe incluso una herramienta especializada para el análisis de blogs: una característica única dentro de las cinco herramientas que hemos enumerado en este artículo.

Puntación: 99/100


Pros of YSlow

  • Incluye una opción para realizar análisis automáticos de páginas web.
  • No cuesta nada y está libre de publicidad.
  • Los conjuntos de reglas son personalizables. Por ejemplo, si no estás interesado en las redes de distribución de contenido (CDNs), simplemente podrías desactivar esta opción.
  • Carga automáticamente todas las imágenes desde las páginas web cuando trabajas con Smush.it. Esto solo ya de por sí aporta un gran ahorro de tiempo.
  • Todas las reglas están respaldadas con una extensa documentación y ofrecen indicaciones para la mejora.

Desventajas de YSlow

  • YSlow sólo funciona con páginas web alojadas en un servidor. Tratar de analizar un documento HTML ubicado en tu equipo a menudo te dará resultados e información falsos.
  • Los errores de JavaScript o en el HTML podrían provocar que YSlow se cuelgue. Aunque es raro y desagradable, si lo cierras y abres de nuevo funcionará bien.
  • En YSlow no puedes añadir tus propias reglas en la prueba. A mí me gustaría añadir algunos grupos de reglas personalizadas, como el Ranking de Alexa o Google Page Rank.
  • Sólo disponible para Firefox, Firebug, Chrome, Safari y Opera. Si no te gustan éstos, podría ser un problema.

Resumen

Aplicaciones como YSlow ofrecen un análisis rápido y eficaz para las páginas web. Pueden generar informes detallados a partir de la información que recogen, y ofrecen sugerencias o herramientas para resolver problemas, y en consecuencia te enseñan algo durante el proceso. Pero YSlow y sus alternativas siempre tendrán competencia: un programador web experimentado y cualificado o un analista SEO.

No hay nada mejor que el conocimiento y la práctica; como vimos, diferentes herramientas de análisis siempre nos darán informes diferentes.

No hay una única solución en lo que respecta a la optimización para los motores de búsqueda o la reducción de los tiempos de carga de una página web. Sin embargo, la ayuda que nos ofrecen herramientas como YSlow pueden aliviar el peso de tu trabajo y ahorrarte a ti o a tu cliente mucho tiempo y, lo que es más importante aún, dinero, a largo plazo.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.