Archivos externos

Muchos sitios usan archivos externos como archivos de imágenes, CSS y JavaScript. Estos tienden a estar ubicados en dominios de terceros. Esto puede ser útil ya que proporcionan soluciones listas para usar que se adaptan a tu sitio.

CSS significa Hojas de Estilo en Cascada. CSS se utiliza para estilizar páginas HTML. Proporciona atractivo visual a la página web.

Con CSS, puedes:

  • Determinar la ubicación de los elementos en la página;
  • Indicar la distancia entre elementos;
  • Establecer el tipo, color y tamaño de la fuente;
  • Establecer colores de fondo y agregar imágenes de fondo.

La forma más común de implementar CSS es mediante el uso de una hoja de estilo .css externa. El enlace al archivo se coloca en la sección <head> de la página.

Además, a menudo se utilizan archivos CSS separados para diferentes tipos de páginas.

Un ejemplo de archivos CSS externos en el código HTML de la página:

Archivos externos

JavaScript ayuda a hacer la página interactiva y funcional. Usar JavaScript permite al webmaster hacer la página dinámica para el usuario, lo que significa que los elementos pueden actualizarse cuando un usuario completa una acción. JavaScript se puede usar para crear:

  • Formularios de retroalimentación emergentes,
  • Efectos de animación,
  • Mapas interactivos,
  • Carritos en tiendas en línea,
  • Sitios con contenido que se actualiza frecuentemente (informes meteorológicos, tasas de cambio),
  • Y también cargar contenido cuando la página se desplaza infinitamente, etc.

Un ejemplo de un archivo JavaScript externo en el HTML de una página:

Archivos externos

Problemas asociados con archivos externos

  • Problemas al cargar imágenes o archivos CSS pueden estropear el componente visual de los recursos web ya que sus elementos pueden mostrarse incorrectamente o estar ausentes por completo.
  • Si los archivos JavaScript no se cargan, esto resultará en que parte del contenido de la página no se muestre correctamente después del procesamiento de JavaScript. El rendimiento de varias funciones puede verse interrumpido. Por ejemplo; realizar pedidos, cargar el carrito, funciones del menú, etc.
  • Descargar fuentes o contadores JavaScript de recursos web de buena reputación es completamente seguro. Sin embargo, existen riesgos serios asociados con el uso de archivos externos con imágenes, CSS y JS alojados en sitios menos conocidos.
  • Cuando un recurso de terceros elimina un archivo que se está utilizando en tu sitio, dejará de funcionar o de mostrarse correctamente. Un ejemplo que hemos visto anteriormente es una empresa que publicó todas las imágenes a través de un recurso web externo que aceleraba la velocidad de carga de sus imágenes. Un año después, este recurso dejó de existir y todas las imágenes en su tienda en línea, blog, etc., desaparecieron. Como resultado, las posiciones del sitio cayeron drásticamente y tomó mucho tiempo encontrar nuevas imágenes y restaurar la posición del sitio en el SERP.
  • Configurar archivos CSS o JS externos por la fuente para redirigirlos a otros archivos también puede afectar negativamente la visualización y el funcionamiento de tu sitio.
  • Si no tienes acceso al servidor que aloja los archivos CSS y JS, no podrás configurar su compresión y caché y depurar errores 5XX (errores internos del servidor).
  • Si el sitio (la fuente de los archivos externos), es hackeado, puede aparecer código malicioso en ellos, lo que comprometerá tu sitio y causará una disminución en sus factores de confianza. Por ejemplo, si tu sitio acepta datos de tarjetas de usuario (sin redirigirlos a sistemas de pago), los hackers pueden inyectar JavaScript que reemplazará el formulario de pago y robará estos datos.

Contenido del informe "Archivos externos"

El informe muestra archivos de imágenes externos, CSS y JavaScript que se están utilizando en tu sitio.

Archivos externos

  1. Al resaltar la casilla de verificación, puedes seleccionar los tipos de archivos que se mostrarán en el informe.
  2. La URL del archivo externo.
  3. El dominio donde se encuentra el archivo que se está utilizando.
  4. Tipo de archivo externo (imagen, CSS o JavaScript).
  5. Páginas de tu sitio que contienen este archivo. La lista de páginas se abre cuando haces clic en el botón "Mostrar".

Recomendaciones

Puedes usar portales más grandes para alojar tus archivos externos. Los archivos de fuentes cuestionables deben transferirse y guardarse en tu sitio.

Archivos externos

Si no puedes dejar de usar imágenes, CSS o archivos JS de terceros, usa los datos del informe de Labrika para rastrear su estado.

Por ejemplo, si el archivo fue redirigido a una URL diferente, necesitas actualizar el enlace correspondiente en el código del sitio.

Es importante monitorear imágenes rotas, archivos JavaScript y CSS que devuelvan un código de respuesta 404. Tal respuesta indica que el archivo solicitado no existe, por lo que necesitas reemplazarlo.

También es vital verificar los archivos externos en busca de código malicioso que pueda robar datos de usuarios, etc.

¿Cómo solucionar el problema?

Esto enumera todos los archivos externos, como imágenes, CSS y JS que se están utilizando en tu sitio, desde dominios externos. Esto puede darte una comprensión más clara de qué archivos de terceros se están utilizando en tu sitio.

Este informe se puede usar para verificar el estado de estos diferentes archivos y para verificar que todavía estén funcionando correctamente. Si hay algún error como 404 - página no encontrada, puedes corregir la URL, o si se está utilizando código malicioso, puedes eliminarlo de tu sitio.