16 sept. 2013

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


Conceptos previos imprescindibles para comprender la guía:

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


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



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

    Escrito por Miguel García Sánchez - Colomer

    Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

    5comentarios:

    1. Hola, analizando la velocidad de mi web http://mascomunico.com aparece que "Prioriza el contenido visible que se necesita para visualizar el contenido de la mitad superior de la página incluyéndolo directamente en la respuesta HTML.

      Solo se ha podido procesar cerca de un 58% del contenido final de la mitad superior de la página con la respuesta de HTML completa" Cómo puedo hacerlo?? Gracias por tu ayuda.

      ResponderEliminar
      Respuestas
      1. Hola, esa sugerencia de Pagespeed se debe a que tienes mucho código en la zona del HEAD de tu web y eso ralentiza la ejecución completa. Normalmente la solución óptima es:

        - No utilizar javascript en la parte superior del código del Blog que pueda moverse a sitios donde se utilice en medio de la página.Por ejemplo, yo moví javascript justo antes del /body que no necesito en el resto de la página (Analytics y otros .js que no necesito en el head).
        - Mueve Javascript que no sea necesario en la cabecera a las zonas del cuerpo donde realmente se vayan a utilizar (por ejemplo, a mí me sucede con ADDTHIS o con código javascript utilizado para post relacionados).

        Se trada de hacer copia de seguridad e ir probando para encontrar la mejor colocación de tu código para no sobrecargar la cabecera de tu página o la parte superior de tu código en exceso.

        Cualquier duda pregunta. Es que he intentado acceder a la web que me has pasado para verla pero no logro conectarme para hacerte indicaciones más precisas.

        Un saludo!,

        Eliminar
    2. Este comentario ha sido eliminado por un administrador del blog.

      ResponderEliminar
    3. esto es lo que me sale a mi.. como lo corrio?

      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 2 recursos CSS que provocan un bloqueo. Ello causa un retraso en el procesamiento de la página.
      No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos. Intenta aplazar o cargar de forma asíncrona los recursos que bloquean la visualización, o bien inserta porciones críticas de dichos recursos directamente en el HTML.
      Optimizar la entrega de CSS de estas URL:

      https://www.blogger.com/…widgets/3841957138-widget_css_bundle.css
      https://www.blogger.com/…&zx=970fb245-caff-4b06-8961-7ef45090f3b4
      esos 2 archivos siempre me muestran error..

      es en esta web http://www.graphicsonline.org/

      ResponderEliminar
      Respuestas
      1. Hola!,
        para solucionar este problema hazte esta guía: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_10.html Con eso solucionas el problema.

        Un saludo!

        Eliminar

     

    © 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.