Prioriza el contenido visible en tu Blog. Mejora los tiempos de respuesta del servidor: "Prioritize visible content", "Reduce server response time"

Sugerencias de Page Speed analizadas paso a paso hasta el momento:

• Entrega I, mejora la velocidad de tu Blog con Google PageSpeed. 

• Entrega II, "Avoid Landing Page Redirect" 

• Entrega III, "Remove render-blocking JavaScript and CSS in above-the-fold content"-  

• Entrega IV - "Enable compression" y "Leverage browser caching" 

• Entrega V, Soluciones para cada sugerencia de PageSpeed paso a paso - "Minify CSS", "Minify HTML" y "Minify Javascript".  

• La guía de rendimiento para Bloggers - Entrega VI, Soluciones para cada sugerencia de PageSpeed paso a paso - "Optimize images".

• La guía de rendimiento para Bloggers - Entrega VII, Soluciones para cada sugerencia de PageSpeed paso a paso - "Prioritize visible content", "Reduce server response time".

Todos los cambios que se van a tratar en la guía son de eminente carácter técnico. Trato de explicarlo para hacerlo asequible a un público con escasos o nulos conocimientos en informática. No obstante, hay muchas de las reglas que este servicio ofrece que están dirigidas a usuarios expertos.
En caso de que dispongas de poca experiencia o conocimientos en materia web, si lo explicado en esta guía te resulta complejo, te recomiendo que realices estas otras guías simplificadas a tal efecto:

• Cómo solucionar los problemas de lentitud en mi Blog

• Mejora la velocidad de tu Blog II - Localiza aquello que ralentiza tu Blog para ponerle remedio

• Te recomiendo encarecidamente que antes de comenzar con esta entrada, aprendas a utilizar la medición de Page Speed  y sus resultados haciedo esta guía: La guía de rendimiento para Bloggers - Entrega I, mejora la velocidad de tu Blog con Google PageSpeed. 

• Page Speed una vez ha evaluado el rendimiento de tu sitio web o Blog te proporcionará una puntuación basada en la ponderación de los puntos enumerados en su análisis. Es muy importante entender que Page Speed sólo da sugerencias, ninguno de sus cambios es obligatorio. 

A continuación repasamos sin entrar en profundos detalles técnicos y buscando facilitar la compresión a los usuarios más noveles en cada concepto que utilizaremos en la guía. Si tienes conocimientos pero no comprendes bien estos conceptos te puede venir bien repasarlos en esta guía: ¿Qué es el Javascript?, ¿qué es el HTML?, ¿qué son las CSS?: conceptos previos para los no iniciados en informática.

1) Priorización de contenido visible: 

La "priorización" de recursos de una página web o Blog:   

• Es necesario entender llegados a este punto que hay una parte de código que se ejecuta "antes de que se cargue" la página y otra que se ejecuta "una vez se ha cargado la página". Debes establecer la prioridad de carga y la colocación de los recursos que componen tu página web o Blog pensando en cuáles corresponden a la carga inicial y cuáles se ejecutan o tienen sentido posteriormente a dicha carga.

• Siempre habrá un conjunto de componentes que deban cargarse primero y otro grupo que debería hacerlo después. Por ejemplo, los CSS Inline básicos para que la presentación del Blog se ejecute o los Javascript mínimos que cosiguen que funcionen algunos botones (por ejemplo el +1, los botones para compartir en redes sociales que Blogger integra, etc...). Todo es contenido básico desde priorizar su carga en tu web o Blog frente al contenido secundario: scripts externos de otros sitios web, botones para redes sociales de terceros que has agregado a tu Blog, la carga de Javascript que realiza validaciones de datos de la página una vez cargada... Todo esos recursos deben cargarse después del prioritario. 

• Si aseguras  una correcta distribución de qué componentes cargar primero y cuáles después, estás garantizando que tu página web no se vea penalizada por recursos que no vas a utilizar o no requieres utilizar en el inicio, estarás mejorando la "sensación" de velocidad en el dibujado de de la página e impedirás que componentes externos puedan producir "retardos" en la carga inicial.

2) Reducción del tiempo de respuesta del servidor:

• "El tiempo de respuesta del servidor mide el tiempo que tarda en cargar el código HTML necesario para comenzar la prestación de la página quitando la latencia de red entre Google y el servidor" afirma el famoso buscador en su web de soporte. 

•  El tiempo de respuesta del servidor es algo que no siempre se puede controlar directamente por los poseedores de las páginas web o blog sino más bien por los administradores de la máquina donde éstos se encuentran instalados. 

•  La utilización de la compresión (como ya hemos visto en otras entregas de la guía) o la reducción del tamaño de algunos recursos puede resolver parte del problema de una latencia excesiva en la respuesta del servidor que contiene nuestra página web. 

•  Evidentemente, con la infraestructura de Google y su enorme red de liberación de contenidos (CDN), tener problemas en Blogger con los tiempos de respuesta del servidor es prácticamente imposible. 

•  A veces estos retardos se deben a muchos factores que no podrás resolver directamente y que en gran medida deberás de indicar a tu administrador que solucione.

• Esta norma gana su máximo nivel de efectividad si se han realizado antes los siguientes pasos:

• "Remove render-blocking JavaScript and CSS in above-the-fold content": eliminación de llamadas externas a CSS y JS externos de pequeño tamaño. Inyección del código CSS y JS inline en la página acorde a la última actualización y sugerencia de Google en Page Speed. 

• "Enable compression": Por defecto Blogger tiene esta característica activa en sus servidores. No obstante, si tienes una página web no Blogger, la activación de la compresión mejora aún más la minimización de los CSS y Javascript.

• "Minify CSS", "Minify HTML" y "Minify Javascript": minimizar el contenido de los CSS, el Javascript o el HTML combinado con una buena reducción del tiempo de respuesta del servidor puede mejorar sensiblemente la carga de tu página web en el ordenador de tus usuarios.  

• "Optimize images": La optimización de imágenes con una compresión y tamaño adecuado impedirá que los tiempos de respuesta del servidor se vean expuestos negativamente. 

1) Las soluciones a aplicar para "Prioritize visible content": 

• Realiza siempre primero la carga de los CSS y Javascripts que necesitas para la carga inicial del Blog. 

•  Un script de "terceros", externo como por ejemplo uno para la carga de un botón para imprimir, jamás deberá cargarse antes que los javascripts de que se utilizan para los +1 (plusone.js). 

• Con los CSS sucede igual que con el Javascript, no cargues primero los estilos de contenidos añadidos o que se utilizan una vez cargado el blog. Debes cargar primero los CSS que permiten darle la presentación base a tu Blog. 

•  Depura tu CSS, antes incluso de minimizarlo debes asegurarte de que no está realizando cargas de imágenes que no son necesarias para el dibujado inicial de la página así como estilos que no corresponden igualmente a dicha carga inicial. 

•  Depura los Javascripts, determina aquellas funciones que deben cargarse antes del fin del /head (los iniciales que sirven para que se dibujen los componentes que se muestran al cargar la página). 

•  Por ejemplo, en Diarios de la nube se carga antes del fin de Head el javascript plusone.js y el apartado analytics. Ningún otro Javascript se ejecuta antes del cierre del </head>. Con los CSS hago lo mismo, primero los propios de Blogger y justo seguido mis cambios y personalizaciones. 

• Es fundamental que distingas entre el javascript que vas a utilizar para todo el blog y el que utilizarás en partes puntuales. NO sobrecargues el head con mucho javascript "inline". Si tienes un Javascript que se utiliza sólo en el <BODY> Trata de poner ese Javascript justo antes de la parte de código que lo vaya a utilizar. 

• Controla el excesivo uso de scripts externos:

Uno de los grandes enemigos del rendimiento son los "scripts". Esos aditivos que incorporamos en nuestros sitios buscando añadirle funcionalidades que no sabemos crear por código fuente nosotros mismos.

La utilización del script de impresión de sitios webs externos, la adición de capas para colocar botoneras no estándar (diferentes de las que ya trae Blogger por sí) para conectar con Facebook, Twitter y similares, utilización de calendarios, documentos incrustados provenientes de otros sitios web, etc... Constituyen un conjunto de "extras" a intentar evitar en la medida de lo posible. Cuantos menos scripts utilicemos en la página principal, menos tiempo de carga estaremos dándole a nuestro sitio web o Blog.

Tened en cuenta que retardan y "postergan" el dibujado de otras zonas de nuestro sitio sólo porque hay que esperar a que el servidor que nos los proporciona nos pase los datos necesarios para que estos funcionen.

• Controla la cantidad de "Gadgets" que utilizas:

Es necesario controlar la cantidad de "Gadgets" que estáis utilizando en la vista de diseño del Blog. Los Gadgets suelen llevar scripts asociados que los hace ser más lentos de lo normal. Probad a quitar o añadir aquellos que veáis innecesarios y pasad Google Page Speed Insight para comprobar si mejoráis la velocidad eliminado aquellos que habéis visto como prescindibles. 

2) Las soluciones a aplicar para "Reduce server responde time":  

•  Pagespeed ofrecerá esta sugerencia cuando detecte que los tiempos de respuesta del servidor son mayores o iguales a 200ms. 

•  Si sucede en reiteradas ocasiones que tu servidor ofrece bajos tiempos de respuesta, contacta con el administrador de la máquina para que monitorice el problema. Él podrá asignar más recursos de memoria o CPU en función de los problemas que identifique o te podrá decir si tienes algún problema en tu página web o Blog que está ocasionando estos tiempos de respuesta tan altos.