Share
Todos sabemos que hay innumerables razones por las que los tiempos de carga de las páginas web se disparan, sin embargo, señalar el problema puede ser costoso tanto en tiempo como en dinero. Entonces, ¿por qué desperdiciar el esfuerzo cuando alguien más, o algo más, puede hacer todo el trabajo sucio por ti??
Reunirse YSlow de Yahoo, Un analizador de páginas web gratuito para Firefox..
YSlow tiene dos requisitos:
YLow se adapta a Firebug, por lo que deberá instalar los complementos en el orden indicado anteriormente antes de continuar..
Los diseñadores web, desarrolladores y redactores se esfuerzan por tener el contenido más único e interesante en comparación con sus competidores.
Es posible que haya pasado días perfeccionando su nueva publicación en el blog y casi se haya caído de la silla con entusiasmo al verla por primera vez. Pero, después de que un torrente de visitantes inunde su sitio web, observa que las cosas ya no funcionan correctamente. Bajo presión, su nuevo sitio web podría responder como un Commadore 64.
Las herramientas de análisis de sitios web generalmente se dividen en dos categorías:
YSlow encaja en este último. Utiliza conjuntos de reglas predefinidos para calificar el rendimiento de una página web y herramientas de terceros (como Smush.it y JS Minifiers) para ayudar a resolver cualquier problema..
Hay tres vistas:
YSlow incluye seis herramientas útiles: desde pruebas de código JavaScript hasta optimización de imagen a través de Smush.It (otra aplicación web gratuita de Yahoo). Toda la aplicación está dentro de la ventana emergente de Firebug, que se puede abrir y cerrar con un ícono en la barra de tareas del navegador..
Vamos a dar un vistazo más de cerca a la vista "Calificación".
Usando la página de inicio de Envato como ejemplo, que es un sitio de tráfico relativamente bajo, vemos que el puntaje general de desempeño está calificado en 74 de 100, con una calificación de "C" amarilla. Pero, ¿qué significa esto realmente? Después de todo, la página web se reproduce perfectamente en el navegador. Bueno, tenemos que echar un vistazo más de cerca a las reglas a la izquierda de la vista para resolver esto.
Las reglas se dividen en categorías: contenido, cookies, CSS, imágenes, JavaScript y servidor. Cuando YSlow inspeccionó los elementos del DOM, calificó cada uno de ellos en un conjunto de reglas predefinido (en este caso YSlow V2). Cuanto más cerca esté un elemento de las reglas, mayor será su puntuación. Después de que se recogieron todos los puntajes, se otorgó la calificación final.
En el caso de Envato, todas las reglas de la interfaz de usuario obtuvieron un puntaje alto, pero las reglas del servidor tuvieron un desempeño menos eficiente. Esto bajó la nota final..
Afortunadamente, cada regla explica dónde reside el problema y proporciona una explicación detallada sobre cómo resolver el problema. Esta característica proporcionará un gran alivio a cualquier persona nueva para optimizar los sitios web.
Para algunos, ciertas reglas son más importantes que otras. YSlow le proporciona un conjunto de reglas predeterminado, pero también le permite cambiar a 'clásico', 'pequeño sitio o blog' o crear el suyo propio. Si no le importa usar Content Delivery Networks, simplemente edite un conjunto de reglas y elimine esa función. Realmente no podría ser más fácil.
La vista de componentes enumera los elementos de un análisis en una tabla de datos ampliable y limpia.
Si bien esta sección proporciona un análisis más profundo, los datos, como la fecha de vencimiento del archivo o el tiempo de respuesta, pueden ser útiles para comprender las áreas problemáticas. Si tiene habilitada la compresión GZIP, puede ver la diferencia de tamaño de archivo aquí.
Todo el mundo ama una gráfica. YSlow también lo hace.
La página de estadísticas es una forma rápida y sencilla de comprender el peso total de sus solicitudes HTTP. En pocas palabras, hay dos gráficos: caché vacío y caché primado. Estos gráficos dividen su sitio web en HTML, JavaScript, imágenes, etc. Los tamaños de archivo de cada uno se muestran como segmentos circulares. Vaciar caché representa la primera visita de un navegador a la página web. Prime Cache indica qué componentes estarían o no en la caché del navegador al volver a visitar. Limpio, claro y eficaz..
Finalmente, tenemos herramientas. Inmediatamente, notará una falta de especificidad hacia la página web analizada, pero no se deje engañar. Cada herramienta es un poderoso ahorro de tiempo cuando se trata de reducir, minimizar y comprimir su contenido. Si está familiarizado con el concepto de optimización, es posible que haya encontrado herramientas similares antes.
Al reducir los tiempos de carga de la página, es importante eliminar los espacios en blanco y los comentarios de sus documentos, y optimizar sus imágenes.
Afortunadamente, estas herramientas realizan todo el trabajo duro para ti, porque hacerlo a mano sin duda te llevará a lo más profundo de la noche. Ninguna cantidad de bebidas energéticas evitará que te vuelvas loco después de eliminar una función de JavaScript por accidente por centésima vez.
Hay ocho herramientas en total; Cubrir todos ellos tomaría un par de artículos. Entonces, me concentraré en Yahoo! Smush.it como ejemplo.
Yahoo! Smush.it es una aplicación web pequeña, que se puede usar con YSlow o directamente desde su navegador.
Sencillamente, Smush.it es un optimizador de imágenes sin pérdida. YSlow carga las imágenes por usted, que se 'borran' y se presentan en una tabla donde puede ver la nueva imagen, el tamaño y el porcentaje de ahorro de compresión.
Incluso puede mantener los archivos en la misma estructura de directorio y descargarlos todos como un práctico archivo zip..
Hay muchas aplicaciones gratuitas con herramientas similares, pero las que vienen con YSlow son una adición bienvenida..
Como mencioné anteriormente, el puntaje de desempeño de Envato en YSlow es 74 con una calificación de C. Tomemos un tiempo para analizar los resultados de YSlow y qué se podría hacer para mejorar el puntaje final.
Aquí están sus mejoras sugeridas, comenzando desde la parte superior:
Esta regla continúa explicando que hay seis scripts de JavaScript externos y 17 imágenes de fondo externas. Su sugerencia es combinar los archivos y usar sprites CSS para resolver el problema..
Lo primero que debe hacer es echar un vistazo a la vista de componentes y, en particular, a los archivos JS.
Como muestran las URL, solo un archivo JavaScript está alojado en el mismo servidor que la página analizada, esto contiene JavaScript personalizado para WordPress. Se requieren dos para JQuery y Google Analytics, y los tres últimos son de formspring.com.
Si los archivos de JavaScript fueran míos, podría considerar la combinación de las aplicaciones personalizadas.js y los archivos JS de formspring en uno y alojarlos localmente. Sin embargo, solo el archivo application.js parece ser personalizado. Entonces, realmente no quiero estar jugando con el trabajo de otra persona. Sobre todo porque algunos de esos archivos carecen de información de licencia / copyright.
Usar el alojamiento de Google para jQuery también se considera una buena práctica, sin embargo, deben actualizarse a la versión más reciente de jQuery: 1.4.2.
Por lo tanto, en este caso, probablemente sea mejor ignorar esta regla, ya que cualquier modificación de los métodos actuales podría ocasionar algunos problemas más adelante. Mi única preocupación real es el tiempo de respuesta de dos de los archivos de FormStack; en este momento, cada uno habla más de 360 ms para responder. Si esto continúa, puede valer la pena encontrar un método para alojarlos localmente.
A continuación repasamos las imágenes; todos están alojados localmente, responden dentro de 40 ms y son de tamaño bastante pequeño. Esto nos dice que individualmente, estos archivos ya están optimizados para esta página. YSlow sugiere que combinemos estas imágenes y usemos sprites CSS para mejorar nuestra calificación.
Si no está familiarizado con los sprites de CSS, puede hacer clic en el enlace "Leer más", que lo llevará a las mejores prácticas de Yahoo! Para acelerar su página web..
En este caso, al utilizar una imagen optimizada, deberíamos ver una mejora en el tiempo de respuesta de la imagen. Los sprites CSS funcionan al combinar sus imágenes de fondo en una y luego usar CSS para alinear esa imagen con la imagen de fondo y la posición de fondo. No hay nada especial en el CSS utilizado, por lo que debe ser compatible con todos los principales navegadores.
Muchos sitios web tendrán una calificación de F para esta regla, debido al hecho de que la instalación requiere un poco de trabajo; Sin embargo, los beneficios valen más que el costo del tiempo. Además, servicios como Amazon ofrecen alojamiento sorprendentemente barato. Si bien Envato absolutamente utiliza CDN para sus sitios de alto tráfico, como Nettuts +, pueden haber decidido que no es necesario para un sitio de menor tráfico..
De nuevo, nos enfrentamos a una regla relacionada con las solicitudes HTTP. Los encabezados caducados son comunes porque permiten que los componentes se puedan almacenar en caché. Los componentes en caché (imágenes, JavaScript, etc.) ahorran tiempo y ancho de banda para visitas repetidas a una página web. Así que vale la pena implementar fechas de caducidad para tu contenido..
YSlow encontró 55 componentes "sin una fecha de vencimiento a largo plazo" después de analizar Envato.com. La mayoría de los componentes son imágenes de fondo. Sabemos por la primera sugerencia, "Hacer menos solicitudes HTTP", que podemos usar sprites CSS para reducir la cantidad de imágenes de fondo, mejorando automáticamente esta calificación..
La configuración de encabezados "Expires" es generalmente un proceso simple, y normalmente solo requiere una adición rápida a su archivo .htaccess. Una vez aplicados, todos los componentes deben tener encabezados de caducidad adecuados sin ninguna manipulación o modificación adicional del archivo. Para poder obtener una visión completa de cómo trabajar con su archivo .htaccess y los encabezados se requiere un artículo en sí mismo. En lugar de entrar en detalles aquí, he incluido un conjunto de enlaces útiles para leer más:
YSlow encontró una hoja de estilo fuera del elemento Head para Envato. Afortunadamente, esta es la regla más simple para rectificar. Al mantener las hojas de estilo en la parte superior de su página web, aumenta automáticamente la velocidad a la que se cargará su página web. Una vez movido, YSlow debe informar un grado A para esta regla.
La eliminación del espacio en blanco no utilizado en sus documentos reduce el tamaño del documento y, por lo tanto, aumenta la velocidad a la que se descarga el archivo. Como mencioné anteriormente, YSlow nos proporciona una herramienta de minificación, por lo que todo el trabajo duro se puede hacer por nosotros.
Dirígete a la vista Herramientas y selecciona Compresor CSS YUI. En un abrir y cerrar de ojos, sus archivos CSS están reducidos y están disponibles para descargar. Rápido, limpio y sencillo..
Los ETags proporcionan una forma de validar una versión específica de un componente de página web (imágenes, JavaScript, etc.). Trabajan con el servidor web para hacer coincidir el contenido almacenado en caché del navegador con el contenido del servidor web. Desafortunadamente, YSlow detectó dos ETags faltantes para los archivos alojados en formspring.com. Debido a esto, podría ser mejor seguir la sugerencia de YSlow y eliminar los ETags por completo. Esto se puede hacer agregando "FileETag ninguno"a su archivo de configuración de Apache. Ahora debería ver una mejora en este grado de reglas.
Hay muchas alternativas cuando se trata de análisis de sitios web, y no me sorprendería si tuviera sus favoritos. Junto con YSlow, uso otros cuatro analizadores gratuitos. Como es de esperar, cada uno ofrece características únicas y, solo por este motivo, creo que es importante recordar que ninguna herramienta puede proporcionar un informe absoluto a prueba de balas..
Para brindarle una idea de lo diferente que cada uno de estos genera un resultado final, he incluido una breve descripción y la puntuación otorgada al sitio web de Envato..
Proporcionada por AOL, esta aplicación agrega una variedad de configuraciones a su análisis. Puede simular la versión del navegador, la velocidad de conexión y realizar comparaciones visuales con otras URL. Es una gran característica si desea iniciar la prueba A / B.
Puntuación: N / A. Proporciona una lista de verificación de optimización y tiempos de carga.
PageSpeed es otro complemento para Firefox y Firebug. Esto incluso aparece en el mismo menú que YSlow y proporciona un análisis similar. Al igual que YSlow, usa reglas e informes sobre el desempeño de cada componente. Incluso optimizará y minimizará tu contenido..
Puntuación: 76/100
Aún en versión beta, esta aplicación web gratuita verificará su contenido, ranking de Alexa, tráfico, optimización de motores de búsqueda, metadatos geográficos y más. Una vez más, se añaden sugerencias útiles con cada análisis. Incluso puede agregar un widget a su sitio web, mostrando su 'puntaje de woorank'.
Puntuación: 65.8 / 100
Grader es otra aplicación web gratuita, también disponible para iPhone. Esta herramienta es bastante similar a WooRank, con una interfaz limpia y detallada. Incluso hay una herramienta dedicada para analizar blogs: una característica única de las cinco enumeradas en este artículo.
Puntuación: 99/100
Aplicaciones como YSlow ofrecen un análisis rápido y efectivo de las páginas web. Pueden generar informes detallados a partir de la información que recopilan, proporcionar sugerencias o herramientas para resolver problemas y pueden terminar enseñándole algo en el camino. Pero YSlow y sus alternativas siempre tendrán competencia: un desarrollador web o analista SEO dedicado, experimentado y calificado..
Nada supera el conocimiento y la práctica; Como vimos, varias herramientas de análisis siempre presentarán varios informes diferentes..
No existe una única solución verdadera cuando se trata de la optimización de motores de búsqueda o el aumento de los tiempos de carga de las páginas web. Sin embargo, una mano de ayuda como YSlow puede aliviar su carga de trabajo y ahorrarle a usted oa su cliente mucho tiempo y, lo que es más importante, dinero, a largo plazo.
Accentsconagua