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

Page Speed controla múltiples parámetros que analizan una página web  para evaluar su rendimiento y ofrecer un conjunto de sugerencias que pueden ayudar a mejorarlo. Para ello utiliza un conjunto de reglas que estamos analizando en cada entrega de esta guía de rendimiento para Bloggers.

Vamos a repasar las reglas de priorización de contenido visible ("Prioritize visible content") y de reducción del tiempo de respuesta del servidor ("Reduce server response time").

La carga priorizada de recursos en una web, permitirá evitar que la parte principal de ésta tarde en dibujarse excesivamente.

Gran parte de la sensación de velocidad que recibe el usuario se produce en los primeros instantes en que la página ha llegado interpretada por el navegador hasta sus ojos. Asegurar que los recursos base mínimos se carguen los primeros mejorará sensiblemente la sensación de velocidad y la experiencia de usuario.

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".

Aviso para principiantes, diversidad de temáticas adaptada a niveles de conocimiento en la materia:

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

Conceptos previos imprescindibles para comprender la guía:

• 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. 

Conceptos previos para los no iniciados en informática o programación de páginas web:

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:

1) Priorización de contenido visible: 

¿En qué consiste la priorización de contenidos visibles ?, ¿cómo funcionan en mi Blog o página web?:

Vamos a llamar recursos de tu página web a aquellos objetos, complementos y funciones que permiten que ésta se dibuje en el navegador del usuario. Entre los recursos fundamentales encontramos:

• La Plantilla de Blogger, el XML y el HTML:

• Es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas propias que al ser interpretadas por el servidor de Blogger conforman la presentación del blog. Al ser reutilizadas por todos los usuarios no podemos alterarlas sólo para nuestros intereses. Es por ello que cuando queremos "ir más allá" de lo que ofrecen a nivel básico, debemos reescribir algunos de los elementos que las componen. Entre esos elementos citados se encuentran las hojas de estilo, pilar básico del aspecto y formato de nuestras páginas en Blogger o en cualquier "publicación web".  

• Es decir, simplificando sin entrar en tecnicismos: la plantilla contiene el contenido del blog "resumido" en un lenguaje de etiquetas extendido (el XML) que luego, cuando se ejecuta en el ordenador de los usuarios, se interpreta en el lenguaje que sus navegadores entienden (el HTML).  

Las hojas de estilo (.css)

• Con Blogger (y con cualquier publicación web) las plantillas basan su presentación fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que integran dicha página.  

• Es decir, son archivos externos que le dicen a cada componente que utilizamos en nuestro Blog (cajas de texto, títulos, comentarios, etc...) qué formato deben tener para darle un "estilo", una presentación a nuestras páginas web. Establecen, por citar ejemplos simples que puedan comprenderse al instante, el espaciado entre caracteres, el margen entre un marco y el texto, el color que se va a utilizar en las letras...

El JavaScript

• La Wikipedia lo define como: "JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,³ basado en prototipos, imperativo, débilmente tipado y dinámico.

• Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas⁴ aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo."   

• Simplificando técnicamente una vez más: es un lenguaje de programación que enriquece con funcionalidad a los componentes que componen nuestro Blog. Esta funcionalidad es muy variada, por ejemplos sencillos: con JavaScript se puede calcular el número de visitas, se pueden validar campos de un formulario para saber si tienen la longitud adecuada, podemos hacer que un botón una vez pulsado ejecute una determinada tarea... permite a nuestros componentes de la página seguir un guión, "programar" "qué van a hacer" cuando se les utilice. 

Las imágenes:

• Uno de los contenidos más típicos de cualquier publicación web. Las imágenes son uno de los recursos más "pesados" pero también más útiles para proporcionar información.

Los scripts externos:  

•  Aquellos "añadidos" (también llamados "widgets" o "gadgets") que has incorporado a tu sitio web o Blog y que provienen de otros sitios web externos al tuyo.  

• Scripts para imprimir la página, integrar redes sociales por medio de algún tipo de componente que nos deje ver su contenido desde nuestro Blog, scripts de botones o componentes que provienen de otro sitio web y que hemos utilizado en el nuestro para atender a algún tipo de necesidad.  

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.

Realiza una copia de seguridad de tu página web o Blog. Salvaguarda tus datos antes de hacer cualquier cambio:

• Es totalmente imprescindible que realices una copia de seguridad de tu Blog antes de continuar. Si bien el análisis de Page Speed no va a realizar ningún cambio en el mismo, las soluciones que vamos a proporcionar a cada advertencia informada por la utilidad sí requerirán alterar el código o realizar cambios. Realiza esta guía para no perder nada de tu valioso trabajo en caso de error: Realizar una copia de seguridad de tu Blog para prevenir. Recupera entradas perdidas por medio del buscador "in-extremis". 

Analizando cada Punto de los resultados que Page Speed puede devolverte y aplicando soluciones Paso a paso:

• 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.

• 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.