Qué es el cross-browser y cómo conseguirlo

Hay varias docenas de navegadores populares, todos ellos basados en motores diferentes y que difieren tanto en su interfaz como en la gama de funciones disponibles. En general, cuanto más "ligero" es un navegador, más rápido se ejecuta y menos recursos del sistema consume. Por ello, muchos desarrolladores intentan optimizar al máximo sus productos, haciéndolos lo más ligeros y elegantes posible.

La velocidad de carga de un sitio web depende de muchos factores:

• la cantidad y el peso del contenido en la página: las imágenes de alta resolución, los vídeos incrustados y los elementos dinámicos son especialmente influyentes;
• tipo y capacidades del motor del sitio, número de plug-ins, extensiones y scripts instalados;
• la complejidad técnica del sitio, la calidad del diseño;
• rendimiento del ordenador que envía una solicitud al servidor, obtiene una respuesta de éste y carga la página web
• velocidad de la conexión a Internet;
• el tipo de navegador: con qué motor funciona, qué grado de optimización tiene su código, qué complementos admite, etc;
• el rendimiento del propio servidor.

El tipo de alojamiento también influye. Por ejemplo, los servidores dedicados y los VPS, que no experimentan sobrecargas, son capaces de proporcionar una mayor velocidad de carga del sitio - simplemente debido al hecho de que tienen suficientes recursos de hardware para manejar todas las solicitudes entrantes. Por lo tanto, es importante garantizar que, incluso en los picos de carga, el servidor tenga un 20-30% de capacidad libre en términos de CPU y RAM.

¿Qué es un sitio web de navegación cruzada?

Se refiere a la corrección del aspecto visual de un sitio web en todos los navegadores. Se implementa utilizando el diseño HTML y CSS, así como una serie de herramientas adicionales o plug-ins. Para que un sitio web se muestre correctamente en todos los navegadores populares, como Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge y Vivaldi, el desarrollador debe escribir algunos "hacks", es decir, código manuscrito, selectores o reglas que un determinado navegador entiende.

La implementación más fácil entre navegadores es para los navegadores basados en un solo motor - por ejemplo, Chromium. En este caso, los "hacks" requerirán una adaptación mínima, ahorrando tiempo y esfuerzo. El problema es el número de navegadores existentes, y no siempre es posible escribir un "hack" independiente para cada uno de ellos, ya que es un proceso caro y que requiere mucho tiempo. Por lo tanto, los desarrolladores suelen aplicar un truco: simplemente trabajan manualmente con aquellos elementos que no se muestran correctamente en determinados navegadores tras la disposición del código HTML.

Herramientas de prueba entre navegadores

Hay muchas herramientas para este tipo de pruebas, por lo que no las veremos todas, sino que nos centraremos en las tres más populares y avanzadas en términos de funcionalidad.

CrossBrowserTesting

Esta plataforma en línea permite realizar pruebas en profundidad con la mayoría de los navegadores existentes y sus versiones. El proceso de prueba es totalmente autónomo y no requiere intervención humana, y el resultado evaluará el rendimiento del sitio en relación con los navegadores de escritorio y móviles en todos los sistemas operativos existentes.

Merece la pena mencionar la función de pruebas en vivo: con la ayuda del servicio en línea se puede estimar visualmente el aspecto del sitio web en diferentes navegadores. Las pruebas son las que se realizan en directo, es decir, se puede comprobar el funcionamiento de todos los elementos interactivos, los hipervínculos y los formularios de respuesta.

CrossBrowserTesting es una de las mejores herramientas, pero tiene la desventaja de ser cara. Sin embargo, puede probar un periodo de prueba de 14 días antes de suscribirse sin tener que dejar los datos de tu tarjeta de crédito.

Browsershots

Una herramienta que permite ver capturas de pantalla de la presentación visual de un sitio web tomadas de varias docenas de navegadores. La plataforma es actualmente compatible con más de 60 versiones diferentes de navegadores. Todo lo que tiene que hacer es introducir la URL del sitio en un campo especial y seleccionar todos los navegadores que le interesan de la lista que aparece a continuación. Si es necesario, también puede especificar una resolución de pantalla concreta y ajustar otros parámetros visuales.

Aquí no hay pruebas "en vivo", por lo que cualquier interactividad está descartada. Pero es posible evaluar la presentación puramente visual: ver si el logotipo, los banners publicitarios, las listas de menús, etc., están dispuestos correctamente.

LambdaTest

Permite probar el sitio web en más de 2.000 dispositivos virtuales diferentes con todos los navegadores y sistemas operativos habituales. El proyecto se ejecuta en la nube, por lo que no es necesario instalar ningún software en el ordenador, lo que aumenta la seguridad y elimina la necesidad de abarrotar el ordenador con software temporal. El servicio interactúa bien con los scripts de Selenium integrados, lo cual es una gran ventaja.

LambdaTest permite tres opciones de prueba:

• prueba en tiempo real;
• prueba automatizada;
• prueba de las aplicaciones móviles en la infraestructura de la nube para que sean compatibles con todos los smartphones y otros dispositivos actuales.

Para las pruebas entre navegadores, los dos primeros modos son adecuados. Puede seleccionar el tipo de navegador, su versión, luego especificar el sistema operativo y seleccionar la resolución de la pantalla. El sitio especificado en la barra de direcciones se probará en unos segundos, y podrá ver el resultado visualmente, con la posibilidad de interactuar con todos los elementos interactivos de la pantalla.

De hecho, el servicio es gratuito, pero las funciones avanzadas sólo están disponibles para los abonados. La suscripción en sí es mucho más barata que la de CrossBrowserTesting - para LambdaTest tendrá que pagar sólo 15 dólares al mes si tiene 1 hilo de prueba disponible. Si necesitas más, no hay problema, sólo que cada nuevo "paralelo" costará otros 15 dólares. De este modo, puedes ver hasta 25 sitios web y navegadores en tiempo real en un formato totalmente interactivo.

Optimización de un sitio web para varios navegadores

Los codificadores de HTML tienen varias formas de conseguir que un sitio web se muestre correctamente, y aquí están algunas de las más populares:

1. Utilizar prefijos en los nombres de las propiedades CSS para navegadores específicos. Algunas propiedades están escritas para un navegador específico y, por razones de optimización, no están incluidas en la lista estándar de propiedades, por lo que hay que escribirlas manualmente.
2. Hojas de cálculo CSS. Se utilizan para escribir propiedades especiales para el sitio, que serán entendidas sólo por navegadores específicos.
3. Separación de estilos. Anteriormente se utilizaba para apoyar a Internet Explorer. Como el navegador está ahora "muerto", el método ya no es relevante.
4. Utilizando la disposición de los elementos universales del sitio, que funcionan igualmente bien y se muestran correctamente en todos los navegadores. Este enfoque también es bueno porque elimina la necesidad de escalar los volúmenes de código; en consecuencia, el sitio será menos engorroso y más rápido.

Al crear un sitio web basado en un CMS popular como WordPress, la navegación cruzada será el menor de sus problemas, porque los desarrolladores del motor se han ocupado de esto por adelantado.

Conclusión

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestros especialistas en los números que aparecen en el sitio web. Podemos ayudarle a elegir el VPS más rápido para su sitio, así como responder a cualquier otra pregunta relevante.