Cada semana, un superhéroe te explicará una nueva característica de la nueva versión de OnPage.org – ¡Estos son nuestros OnPage’s Eleven! En nuestra sexta entrada te mostraremos cómo puedes optimizar y mejorar tu página web con ayuda del informe “archivos” (contenido estático).
Nuestro superhéroe Stephan te mostró en el último artículo qué son los informes y recuentos personalizados y cómo utilizarlos de manera eficiente.
En este artículo te presentamos el informe “Archivos – contenido estático” donde visualizarás los errores más comunes y cómo identificarlos fácilmente.
En general, en una página web encontramos contenido estático y dinámico. Mientras que el contenido dinámico se genera vía script desde servidores web (p. ej. PHP), el contenido estático está almacenado en el servidor como un archivo. En el contenido estático se incluyen, por ejemplo, imágenes, javascript y CSS.
De los archivos estáticos depende básicamente la visualización y la funcionalidad de una página web. Por ejemplo: un usuario accede a una lista detallada de productos. Después de un largo tiempo de carga siguen sin mostrarse las imágenes de los productos.
Aquí se juntan dos factores, ambos relacionados con el contenido estático: el tiempo de carga y la aparición de imágenes de la página web. Ambos factores envían señales potencialmente negativas a los motores de búsqueda y pueden influir negativamente en la experiencia de usuario.
Por tanto, es importante integrar completamente los archivos de imagen, javascript y CSS en la página web y controlar permanentemente su funcionamiento.
El informe sobre contenido estático lo encontrarás en OnPage.org Zoom en el apartado “archivos (contenido estático)” donde podrás evaluar tus imágenes, archivos javascript y CSS.
La visualización correcta de las imágenes de tu sitio web genera un impacto en la experiencia de tus usuarios. Si las imágenes no se cargan, la impresión que da el sitio web es de poca profesionalidad. Es más, con tan solo una imagen defectuosa podrías empeorar tu tasa de conversión. Un ejemplo clásico es cuando un visitante está buscando un producto concreto y la imagen del producto no aparece.
El código de respuesta de las imágenes es determinante: todas las imágenes deberían mostrar un código de respuesta 200. Contrólalos regularmente para evitar errores de visualización en tus imágenes.
Otro elemento importante es el atributo ALT de tus imágenes, ya que aparece como texto descriptivo cuando las imágenes no se visualizan. El atributo ALT resulta útil para los usuarios invidentes, pues podrán escuchar qué muestra la imagen gracias a dicho atributo.
No obstante, existen errores comunes relacionados con las imágenes y que debes evitar:
Código de estado 404: Comprueba con el informe del código de estado si todas las imágenes se muestran correctamente. Las imágenes que presentan un código de estado 404 deben corregirse cuanto antes.
A menudo para cada imagen solo se establece un atributo ALT. Esto está bien mientras la imagen está integrada en la página web. No obstante, a menudo una imagen se utiliza en varias páginas web. Entonces cada página web debe incluir el atributo ALT correspondiente para la imagen. En el caso ideal, para cada imagen siempre utiliza un atributo ALT idéntico.
Con los siguientes pasos podrás identificar fácilmente los atributos ALT ausentes:
Allí verás un listado de todas las imágenes, en qué URL se utilizan y qué texto ALT poseen.
Imagen 1: añadir filtros – Todas las imágenes que no cuentan con textos ALT
Solo se mostrarán las imágenes que no posean ningún texto ALT.
Imagen 2: evaluación de todas las imágenes sin texto ALT
La URL en la columna izquierda te muestra además en qué página se utiliza la imagen con el texto ALT ausente.
JavaScript puede incluirse de muchas maneras en una página web y es muy valioso para los usuarios, pues ofrece elementos de interacción. Una implementación errónea, archivos JavaScript erróneos o en demasía pueden influir negativamente en la funcionalidad de la página web y su tiempo de carga. Una página web que, por ejemplo, tiene problemas en mostrar el cesto de la compra, puede causar una mala experiencia para el usuario.
Por ello, ten en cuenta la visualización de los JavaScripts de tu página web y evita problemas en la tasa de conversión.
Los informes “JavaScript Status Codes” y “Utilización de JavaScript” te ayudan a no perder de vista el estado de tu página. Intenta evitar estos errores:
1. Código de estado 404: En los archivos JavaScript también hay que tener en cuenta que se pueda a acceder a ellos con éxito. Evita códigos de estado 404 para garantizar la funcionalidad de los elementos interactivos establecidos por el JavaScript.
2. Sobreutilización: Si incluyes demasiados archivos JavaScript en una página, el tamaño del archivo de cada página será mayor. Esto influirá en el tiempo de rastreo web para los bots, y entre otros, también puede aumentar el tiempo de carga para los usuarios.
Por ello, te recomendamos poner un límite razonable a los archivos JavaScript por página. Te recomendamos utilizar menos de cuatro archivos JavaScript por página.
En el informe “Utilización JavaScript” puedes ajustar la tabla por medio del símbolo de la rueda dentada y añadir la columna “Tiempo de carga (grupos)”.
Imagen 3: añadir columna “tiempo de carga” en la tabla
Este ejemplo te muestra cómo influye el número de archivos JavaScript en el tiempo de carga de la página.
Imagen 4: evaluación del número de archivos JavaScript y el tiempo de carga
A menudo, es posible que compense comprimir o agrupar los JavaScripts. Para la agrupación son aptos sobre todo los scripts que se utilizan para todas las páginas. Un archivo JavaScript que solo se utiliza en una página en concreto no debe agruparse con otros archivos JavaScript.
Como lengua de estilo los archivos CSS actúan como la representación gráfica de la página web. Puesto que el diseño de la página es lo primero que ve el usuario, los archivos CSS que se utilicen deben estar completamente integrados.
Con el informe CSS puedes comprobar tanto el código de estado como la utilización de los archivos CSS para evitar los siguientes errores frecuentes.
1. Código de estado 404: Los archivos CSS erróneos no pasan desapercibidos para el usuario y provocan una experiencia negativa para él. Comprueba por ello el código de estado de los archivos CSS con el informe “código de estado CSS” y corrige inmediatamente los archivos CSS con el código de estado 4xx.
2. Sobreutilización: al igual que ocurre con los archivos JavaScript, la utilización de demasiados archivos CSS puede influir negativamente en el tiempo de carga.
En los archivos CSS se debe tener en cuenta, sobre todo, que no se solapen entre sí. Por tanto, a la hora de realizar un Copy-Paste de archivos CSS en un determinado código fuente, hay que prestar la máxima atención para no sobreescribir otros archivos ya existentes. Por este motivo te recomendamos utilizar como máximo cuatro archivos CSS por página.
En el informe “Performance” > “Tamaño del archivo” > “Tamaño del archivo agregado” encontrarás el tamaño del archivo de la URL junto con todos los archivos estáticos. El tamaño del archivo agregado se calcula a partir del documento HTML correspondiente + imágenes + archivos CSS + Javascripts de la URL.
En el informe se pueden añadir más columnas en la tabla utilizando la rueda dentada. En este punto son especialmente interesantes las columnas “Tiempo de carga (grupos)”, “Número de archivos CSS”, “Número de archivos JavaScript” y “Imágenes enlazadas (contadores)”.
Imagen 5: tamaños de archivo agregado y utilización de contenido estático
La evaluación del rastreo que se muestra en el informe “Archivos (contenido estático)” son los resultados de un análisis puntual y están vinculados al estado de la página web en el momento del último rastreo. Ya que los contenidos pueden variar sin que tú lo sepas, deberías realizar rastreos periódicos de la página web para estar al tanto del estado de la misma. Cada paquete, excepto las cuentas gratuitas, cuenta con la posibilidad de realizar todos los rastreos como quieras por mes. Además, en la configuración del rastreo también puedes definir un rastreo automático con intervalos definidos.
Imagen 6: establecer rastreos automáticos
Después de cada rastreo, comprueba si el contenido estático ha cambiado. Podrás ver los cambios en la caja de color debajo de los KPI. Una flecha verde hacia arriba significa que has mejorado, mientras que una flecha roja hacia abajo señaliza que esa área ha empeorado.
En el panel de control encontrarás los siguientes KPI relacionados con el contenido estático:
Imagen 7: comprobar KPI para contenido estático en el panel de control
Google y los visitantes web valoran mucho un funcionamiento y una visualización de la página sin errores. Por tanto piensa siempre en mantener un control constante en tu página. El informe “Archivos” en OnPage.org Zoom y un rastreo frecuente te ayudarán a mejorar aún más tu página.
¡Feliz Optimización!
Traducido por Alicia Gramage
Escrito el 08.03.2016 por Christian Müller.
Christian B. Müller is a front-end developer in the Ryte development team. Christian, who was born in Würzburg, is the designer of the tool’s interface and is also a big fan of JavaScript, Netflix, and rocket science. His motto: “In principle, it is all quite easy!”
Optimice su sitio web con Ryte
Demo gratuita