Precarga y renderizado de páginas y recursos para mejorar el rendimiento de navegación

Existen multitud de técnicas para mejorar el rendimiento de las páginas web y conseguir mejores tiempos de respuesta, aunque la mayor parte de estas mejoras se deben realizar en el servidor. Sin embargo existen algunas cosas que podemos hacer desde el propio código HTML, en el Front-End y sin la intervención del servidor, para mejorar la velocidad de carga de las páginas siguientes a la actual y que creo que no son muy conocidas por la comunidad de desarrolladores.

Imagina la siguiente situación: tienes una presentación basada en HTML en la que el usuario se va moviendo hacia adelante para ir visualizando una serie de recursos. Cada pulsación del botón “adelante” hace que se cargue un nuevo recurso. El caso típico es un carrusel de imágenes en el que, cada vez que pulsas en el botón de “adelante” se carga la siguiente imagen que haya en la lista. Si las imágenes son grandes, con mucha resolución, no están muy optimizadas o simplemente la conexión es lenta, es posible que tarden en cargar y por lo tanto no se visualicen correctamente durante unos instantes, o quizá se vayan cargando progresivamente de arriba a abajo, con un efecto muy feo. Seguro que lo has sufrido alguna vez.

HTML dispone de una característica muy interesante para casos así denominada Prefetch, o carga previa de recursos.

Esta carga previa sirve para situaciones como la descrita: cuando sabemos de antemano que es muy probable que el usuario vaya a necesitar uno o varios recursos (páginas, imágenes, fuentes, scripts…) justo a continuación de haber visitado la página actual, podemos avisar al navegador de este hecho y conseguir que los vaya pre-cargando para ahorrar tiempo.

SIGUE LEYENDO para descubrir:

  • Cómo podemos precargar en segundo plano cualquier conjunto de recursos sin tener que programar.
  • Cómo podemos pre-renderizar páginas completas
  • Qué navegadores soportan estas técnicas.
  • Cuáles son los posibles problemas

HTML y CSS: El "extraño" comportamiento de las cajas anidadas

Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página.

Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias.

Un caso “extraño” se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros.

Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo <div>, uno dentro de otro:

<div id="Uno">
    <div id="Dos">
        Lorem ipsum...
    </div>
</div>

Y les aplicamos los siguientes estilos:

html, body{
    width: 100%;
    height: 100%;
    margin:0px;
    padding:0px;
}

#Uno{
    background-color: aqua;
}

#Dos{
    background-color: blue;
    padding: 20px;
    margin: 30px;
    height: 200px;
    width: 200px;
}

Fíjate en que el div exterior (‘Uno’) no incluye ningún tipo de dimensión ni otras propiedades. Es un elemento de bloque (display:block) porque es su comportamiento por defecto, pero nada más.

Este fragmento tan sencillo se visualiza de la siguiente manera:

CSS-Anidados-01

Es decir, si nos fijamos, la caja exterior ocupa todo el ancho disponible en la página extendiéndose hacia la derecha, se respeta el margen horizontal de 30px de la caja interior (por eso está desplazada hacia dentro, a la derecha) pero aparentemente no se respeta el margen vertical que se ha indicado (también de 30px). Además la caja exterior no está pegada al borde superior de la página a pesar de tener un margen y un relleno de 0 (son sus valores por defecto).

Es decir, en este caso se dan dos comportamientos extraños, en apariencia independientes, que son los que he marcado en negrita en el párrafo anterior que vamos a analizar a continuación.

SIGUE LEYENDO para aprender:

  • Cómo funciona el derrumbe de márgenes en elementos adyacentes
  • De qué manera diferente funciona cuando los elementos están anidados
  • Cómo podemos prevenir el derrumbe de márgenes
  • Cómo afecta la propiedad overflow sobre la visualización de márgenes
  • Qué es un contexto de formato de bloque
  • Cómo afectan otras propiedades sobre la visualización de márgenes

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Front-endSupongamos que tienes un elemento en tu página como este:

<div class="rojo">

que quieres localizar y cambiar la clase que tiene aplicada para que pase a ser “verde”, o sea, equivalente a esto:

<div class="verde">

Nota: Dejemos de lado el hecho de que el nombre de la clase no es el más apropiado pues no es reutilizable y está atado al aspecto físico concreto. Este no es un artículo de buenas prácticas de CSS.

Para realizar ese cambio de clase, la gente que utiliza jQuery está muy acostumbrada a escribir código como este:

$('.rojo').removeClass("rojo").addClass("verde");

Este fragmento es muy sencillo y lo que hace es, primero localizar todos los elementos que tienen aplicada la clase “rojo”, a éstos se la retira con removeClass y luego le añade la clase “verde” usando el método addClass de jQuery.

La verdad es que es muy fácil, pero ¿realmente merece la pena añadir una dependencia a jQuery (y todo su peso y procesamiento) a nuestra página para hacer algo tan sencillo?

La respuesta es que, desde luego solo para este tipo de cosas, no: no merece la pena.

Los navegadores actuales son capaces de hacer exactamente lo mismo con JavaScript puro sin necesidad de recurrir a bibliotecas externas, y además es casi igual de sencillo conseguirlo.

Vamos a ver cómo podemos lograr lo mismo sin jQuery, solo con lo que nos ofrece el navegador…

SIGUE LEYENDO para aprender:

  • Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
  • Cómo quitar clases
  • Cómo añadir clases
  • Cómo alternar clases
  • Cómo comprobar si un elemento tiene aplicada o no una determinada clase
  • Cómo dar soporte a navegadores muy antiguos

Detectar la aparición y desaparición de un elemento: evento "inViewport"

Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario.

Aparecer-Desaparecer

Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos,  podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo de nuevo cuando vuelva a aparecer. Cosas por el estilo.

Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.

El problema es que no existe ningún evento como este en HTML/JavaScript.

No nos queda más remedio que buscarnos la vida para poder disponer de una funcionalidad similar a esta.

En este artículo vamos a desarrollar desde cero la funcionalidad necesaria para conseguir tener un evento como este, listo para utilizar en cualquier página.

La funcionalidad la vamos a dividir en varios pasos individuales que, en conjunto, nos permitirán obtener lo que necesitamos.

SEGUIR LEYENDO para leer el artículo completo y obtener el código.

TRUCO: Reproducir automáticamente un vídeo HTML5 desde un determinado punto

flat-video-player

Para reproducir un vídeo (o audio) de forma nativa desde una página Web lo único que tenemos que hacer es usar una etiqueta <video>, y si el elemento multimedia está en un formato apropiado se reproducirá sin problemas:

<video src="miVideo.mp4" autoplay controls>
</video>

Esto es solo rascar la superficie, pero lo pongo solo para situarnos.

Si necesitamos reproducir el archivo, no desde el principio sino desde una posición posterior, normalmente deberíamos recurrir a un poco de código JavaScript para establecer el punto actual con la propiedad currentTime del objeto correspondiente.

Lo que ya no es tan conocido es que en la mayor parte de los navegadores (todos excepto Internet Explorer), es posible conseguir ese efecto simplemente añadiendo un parámetro a la URL que indica dónde está almacenado el vídeo. Este parámetro es #t=.

Por ejemplo, si el vídeo anterior lo incluimos de esta manera:

<video src="miVideo.mp4#t=90" autoplay controls>
</video>

El vídeo empezará a reproducirse automáticamente a partir del segundo 90, saltándose por tanto, de entrada, el primer minuto y medio. Si no le hubiésemos puesto el atributo autoplay no se reproduciría automáticamente, pero quedaría ya cargado directamente en ese punto, de modo que al darle al botón de "play" comenzaría a reproducir desde allí.

Podemos indicar también el otro extremo del intervalo, es decir, dónde queremos que se detenga automáticamente, usando el mismo parámetro:

<video src="miVideo.mp4#t=90,130" autoplay controls>
</video>

De esta manera se reproducirá desde el segundo 90 y se detendrá automáticamente al llegar al segundo 130 (2 minutos y 10 segundos del inicio).

Si omitimos el primer parámetro (es decir, ponemos una coma y luego un número) el vídeo o el audio se empezará a reproducir desde el principio y se detendrá automáticamente al llegar al tiempo indicado:

<video src="miVideo.mp4#t=,130" autoplay controls>
</video>

En este ejemplo se pararía a loas 130 segundo.

Es posible especificar valores decimales para finar más:

<video src="miVideo.mp4#t=10.25,130.5" autoplay controls>
</video>

Y también expresiones en formato de hora (hh:mm:ss):

<video src="miVideo.mp4#t=00:00:10.25,00:02:10.5" autoplay controls>
</video>

Que sería equivalente al ejemplo anterior, pero en este caso el segundo tiempo (el de detención) es más fácil de leer.

Recuerda que esto funcionará sin problema en Chrome, Firefox y Opera, pero Internet Explorer hará caso omiso. En ese caso lo reproducirá de la forma normal. Si es importante que funcione en todos los navegadores entonces deberás usar JavaScript. Si simplemente es una cuestión de asistir un poco al usuario y no es tan importante que empiece justo donde decimos, esta solución te valdrá perfectamente pues funcionará para un % muy alto de los navegadores del mercado. Y te evita programar 🙂

¡Espero que te sea útil!