En la sexta clase flash del curso de Google PageSpeed vamos a eliminar el JavaScript y el CSS del contenido de la mitad superior de la página.
6 - JavaScript y CSS "above the fold"
En esta clase "flash" vamos a ver cómo reducir el tiempo de respuesta del servidor para solucionar este mensaje que nos puede aparecer en los resultados de PageSpeed Insights:
Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Tu página tiene "x" recursos de secuencias de comandos y "x" recursos CSS que provocan un bloqueo. Ello causa un retraso en el procesamiento de la página.
¿Qué demonios quiere decir esto? Bien, pues por una parte que tenemos "secuencias de comandos" (o sea, JavaScript), y por otra parte "recursos CSS", (o sea, estilos) que cargan antes que el contenido de la página.
Eso quiere decir que hasta que no han cargado, no se ve la página. ¿Solución? Cargar primero la página, y luego los recursos. Así el usuario "ya ve algo" mientras se carga el resto de forma asíncrona.
Dicho así suena muy difícil de resolver, pero en realidad no lo es tanto. Vamos a ver cómo hacerlo:
¡Ya lo veis! Fácil, simple y rápido. Ya hemos ganado de 5 a 8 puntos extra para puntuar mejor en Google y para mejorar la experiencia de nuestros usuarios. Si tenéis alguna duda, podéis contactar a través del formulario de soporte de la Intranet.
En la próxima clase flash empezaremos a optimizar la versión móvil de nuestra web, para que no sólo sea rápida, sino además usable :) Hasta entonces... ¡Muy buenos días!
Todos los capítulos de este curso:
- Curso de PageSpeed #1: Compresión
- Curso de PageSpeed #2: Caché
- Curso de PageSpeed #3: Minimizar JS y CSS
- Curso de PageSpeed #4: Optimizar imágenes
- Curso de PageSpeed #5: Reducir el tiempo de respuesta del servidor
- Curso de PageSpeed #6: JavaScript y CSS que bloquean la visualización
- Curso de PageSpeed #7: Páginas AMP
- Curso de PageSpeed #8: Cosas que NO hacer
- Curso de PageSpeed #9: Google Analytics
- Curso de PageSpeed #10: Alternativas