12 sept 2013

Minimiza los CSS, Javascript y el HTML de tu Blog: "Minify CSS", "Minify HTML" y "Minify Javascript".

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.

En esta ocasión vamos a repasar las tres reglas de "minimización" de recursos: CSS, HTML y Javascript. Conseguiremos una interesante mejora del rendimiento al disminuir el tamaño de los recursos utilizados en la página.


Además, para los usuarios más expertos, vamos a conseguir la máxima optimización de los recursos de la página porque combinaremos la compresión de página y la minimización de CSS, HTML/Javascript, con las últimas sugerencias de mejora de rendimiento de los CSS y Javascript ofrecidas por Google con Page Speed.


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.  
La "minimización" de recursos de una página web o Blog: 
Llamamos recursos de una página web o Blog a aquellos componentes que permiten la correcta presentación de los mismos en el navegador de nuestros usuarios.  
Cada recurso que utilizamos en nuestra página web ocupa un "espacio". Ese "espacio" se traduce en tamaño, cuanto mayor espacio ocupan los recursos utilizados para el dibujado de una página web, mayor tamaño y mayor tiempo se emplea en la descarga de la página desde el servidor a los navegadores de los usuarios. Page Speed separa tres grandes recursos que pueden "minimizarse": las CSS, el HTML y el Javascript.  


MUY IMPORTANTE: Recomendaciones y omisión de responsabilidad:

Si eres un usuario con nulos conocimientos en HTML, CSS y JavaScript, este cambio no te
merece la pena realizarlo. Me explico, para poder solucionar esta sugerencia, se alcanza el máximo grado de efectividad si has hecho tu CSS y Javascript inline y si tienes activada la compresión a nivel de servidor de web (acorde a las novedades establecidas por Google en Page Speed). La tarea de CSS y Javascript inline requiere conocimietos de ambos recursos, su combinación con la "minimización" de los mismos es compleja porque deja prácticamente ilegible el código que vas a utilizar en tu Blog o página web.

  • Si se comete cualquier error al tocar el CSS o los JavaScript que por defecto lleva tu plantilla, tu Blog puede quedar parcial o totalmente inutilizado.
  • Si hay actualizaciones sobre tu plantilla por parte de Blogger, éstas no se reflejarán en la tuya al haber alterado el código fuente original de la misma.
  • No podrás seguir utilizando algunos asistentes como el de formato de personalización del Blog por medio de Blogger. A partir del momento en que emplees esta solución, todas las modificaciones que desees realizar en este sentido deberán de ser programadas directamente por ti.
  • La puntuación de mejora final, aún siendo un cambio de los que mejor puntúa, te va a permitir si aplicas el resto de soluciones que explicaremos en todas las entregas, llegar hasta los 88-90 puntos. Puntuación suficiente como para contar con una ejecución "estándar" o "normal" para un Blog. 
  • La "minimización" del contenido del XML de la plantilla Blogger deja "ilegible" al usuario sin experiencia la plantilla, lo que dificulta que pueda mantenerla adecuadamente si con el tiempo desea realizar cambios.
  • Es por ello que se hace fundamental conocer qué se está cambiando y qué consecuencias puede tener en caso de no disponerse de los conocimientos adecuados. Los usuarios más experimentados siempre pueden disponer de la herramienta de copia de seguridad del Blog para en caso de problemas poder volver a la situación inicial.
  • Sólo debes realizar estos cambios si PageSpeed te informa de que tienes recursos CSS o Javascript sin minimizar.
 No me responsabilizo de los daños que puedas sufrir en tu Blog por el uso de esta solución.



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 ha realizado antes de la "minimización" 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.


    El problema y su detalle: 
    • El XML de Blogger NO está minimizado. Está "ampliado" para que sea legible y comprensible por el usuario de Blogger. La minimización consiste en la eliminación de información superflua para la interpretación que el navegador hacer de los recursos de una página web. 
    • Consiste en quitar espacios en blanco entre caracteres donde "sintácticamente" el navegador comprende el código sin necesidad de dichos espacios en blanco.  
    • Eliminación de retornos de carro o saltos de línea donde el navegador comprende el código sin necesidad de dichos retornos de carro. 
    •  Depuración de código para la eliminación de comentarios, sentencias duplicadas, variables o datos redundantes que innecesariamente están ocupando espacio en nuestro código. 
    • Con todo esto consigues que una página web que pudiera ocupar 800 líneas de texto y 1MB de espacio quede reducida a 200 líneas de texto y unos 620KB de espacio. De esta manera, su descarga será realmente rápida. 
    • El uso de CSS o Javascript Inline hace prácticamente "obligatorio" el uso de la minimización, ya que al inyectar el código del CSS o Javascript en la página, estamos ocupando una cantidad de líneas enorme y un espacio mayor que cuando se le llamaba en ficheros externos. Para cumplir con todas las nuevas sugerencias de Google en Page Speed, es conveniente que si metemos el código de CSS o Javascript en nuestra página este sea también minimizado.
    La solución y detalles para la máxima optimización posible:
    • Al utilizar Blogger un XML para la plantilla que luego es interpretado para terminar enviando HTML al navegador del usuario, NO vas a poder minimizar DIRECTAMENTE el HTML porque NO tienes acceso a él.
    • Lo bueno es que SÍ podrás minimizar el XML de la plantilla, el CSS y el Javascript haciendo que así, cuando se interprete el HTML éste quede reducido INDIRECTAMENTE.
    •  En Internet existen múltiples compresores o minimizadores de recursos para CSS, Javascript o HTML. El que yo he utilizado para mi Blog es http://htmlcompressor.com/compressor/. Excelente por su facilidad de uso, su efectividad, eficiencia y enorme facilidad de uso:

    •  0)  Vuelvo a recordarte que hagas copia de seguridad. Así mismo, te recomiendo que guardes el código de la plantilla antes de ser "minimizado"/"comprimido" en un editor de texto para que cada vez que desees realizar cambios en él, puedas recurrir a esa copia. Con la compresión que vamos a realizar del código de tu plantilla, una "máquina" (el navegador del usuario) podrá leerlo aún mejor, pero para ti puede quedar difícilmente legible.
    • 1) Para realizar la compresión con Blogger se puede copiar y pegar todo el código fuente de la plantilla y soltarlo en HTML COMPRESSOR en la pestaña inicial "Source", donde pone "DRAG A FILE OR PASTE CODE". 
    NOTA MUY IMPORTANTE: mucho mejor la realización de este paso 1) si primero hiciste la guía "Remove render-blocking JavaScript and CSS in above-the-fold content". Esto es porque podrás minimizar directamente tu CSS y Javascript INLINE junto al resto de la plantilla de Blogger consiguiendo el mejor resultado posible.  


    • 2) En la parte superior derecha, abre el desplegable "Code type" y selecciona la última opcion: Blogger.


    •  3) Ya sólo queda que pulses el botón verde "COMPRESS" de la parte inferior de la pantalla del HTML COMPRESSOR y tendrás listo para copiar: tu plantilla Blogger, con las CSS inline y el Javascript inline totalmente comprimidos. Copia el código resultante (estará en la pestaña "compressed" aunque automáticamente te dirigirá a ella al finalizar la compresión) y lo pones en Blogger. 
    • Blogger en su pantalla para guardar los datos comprimidos te dirá que ha guardado y luego cuando cierres el naveagdor te indicará que NO has guardado. No pasa nada, lo ha guardado y cambiado. Simplemente deja que termine el guardar una vez le hayas dado al botón y quedará guardado. 
    • Blogger después volverá a poner el código fuente a su manera, aunque quede comprimido por completo, notarás que al volver al editor de plantilla continúa siendo más pequeño pero Blogger ha metido separaciones en algunos puntos para que se mantenga su estructura base. Esto no afectará en exceso a la minimización/compresión realizada.


      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.

      6comentarios:

      1. Este comentario ha sido eliminado por un administrador del blog.

        ResponderEliminar
        Respuestas
        1. Félix, vuelve a mandarme el comentario que he tenido un problema con el sistema de publicación y lo perdí. Un saludo y disculpa las molestias.

          Eliminar
        2. Está en la Caché de Google. No te preocupes... Lo copia otra vez:

          Hola Miguel.

          He hecho los pasos que indicas para minificar el CSS de mi plantilla de Blogger. Y todo bien, pero hay un problema en la versión móvil del blog.

          Es decir, después de comprimir el CSS e inyectarlo, la versión móvil que la tengo personlizada se pierde, Esto significa que la plantilla personalizada no sale adaptada a la pantalla.

          En cambio si aplico, una versión móvil pretederminada, filigrana, eterea, etc. ahí si va bien, pero Blogger vuelve a cargar los CSS.

          Esto me obliga a no poder poner la plantilla personalizada en Blogger y como consiguiente RichSnippets me señala los errores comunes en la versión móvil:

          Optimizar la entrega de CSS de estas URL:
          https://www.blogger.com/…409279300-widget_css_mobile_2_bundle.css
          https://www.blogger.com/…&zx=23191880-b672-4afb-b3b1-c58110a6c8f0

          ¿Qué debería hacer? ¿Por que piensas que se pierde la plantilla móvil personalizada al anular (resumir) el tag ?

          Una última cosa. La plantilla con la que trabajo en mi blog, que es una sencilla de Blogger sin modificar de fábrica tiene un código CSS al final que no he minificado ni inyectado. ¿Puede ser este el problema? Te copia el código css con algunos tags que lo rodean.

          lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/3904812905-lightbox_bundle.css'}, 'displayModeFull'));

          Lo que quiero decir es que yo solo minifiqué e inyecté los 2 que dijiste externos "<link rel="stylesheet" href="NOMBRE_DE_TU.css" mas el que ya venía en la plantilla.

          Pero como te digo, hay un tercer CSS externo que te acabo de indicar.

          Un cordial saludo y muy buenos trucos los que aportas.

          Eliminar
        3. Hola Félix,
          me sucede lo mismo, Blogger es un sandbox duro. Cuando activas la visualización móvil, él carga los css de otro lado y eso et va a producir css render blocking y cosas por el estilo.

          Cuando quitas por completo los css de la zona "skin" de tu Blog te quita el problema, prueba todo esto: http://www.diariosdelanube.com/2013/09/la-guia-de-rendimiento-para-bloggers_10.html

          ¿Te quitaste el aviso pagespeed de bloqueo por css y ajavascript?. Es posible que si no lo has quitado te de problemas.

          Otra cosa importante, si pones el modo personalizado tirará de los .css de tu plantilla y si no tienes estilos que cubran los div de la parte móvil, se dibujará sin estilos. Si pones que utilice una de las plantillas predeterminadas de Blogger, te metera el css de Blogger (aunque creo que eso pueda quedar paliado haciendo el artículo que te he pasado).

          To lo que hago siempre es arreglar todo el problema de bloqueos javascript y css y luego utilizar mi la plantilla propia en el modo móvil.

          Si hay algo que no hayas entendido pregunta lo que necesites.

          Un saludo,

          Eliminar
      2. Gracias. Te mando un e-mail personal. Un abrazo

        ResponderEliminar
      3. Muchas gracias por compartir. La minificación es un proceso que le ayuda a reducir el tamaño del código hasta un 90%. Eso da como resultado una mejor velocidad de carga de la página, lo que le ayuda a obtener un mejor ranking SEO.
        Aqui hay unos cuantos enlaces
        Yo tambien quiero compartir
        Para compresión HTML
        url-decode.com/tool/minifyhtml
        minifyhtml.org/
        Para compresión CSS
        https://url-decode.com/tool/css-minifier
        Para compresión JS
        minifycode.com/javascript-minifier

        ResponderEliminar

       

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