22 abr. 2017

Deshabilitar la Carga CSS de Widgets por Defecto en Blogger

Hace muy poco, todo era felicidad, pero, después de las nuevas plantillas de blogger, algo me llamo la atención, ¿que fue? ¿los nuevos diseños? no, lo que me sorprendió fue que el blog me estaba cargando un poco lento, y no se si algunos de los blogueros que me siguen lo habrán notado, soy critico con el tema de la velocidad de mi blog, mas que el diseño del mismo, me enfoco mas en cuanto tarda en cargar, pues no me gusta poner a esperar a mis lectores.

eliminate render-blocking javascript and css in above-the-fold content



El otro día en el que me di cuenta que el blog se demoraba un poco en cargar, decidí ver que era lo que estaba pasando con ayuda de Google Page Speed, Vaya! que sorpresa!, el blog tenia un puntare de 70 en móviles y 82 en computador, ¿que paso? pues muy simple, no se porque carajos uno de los enlaces que blogger coloca en cada blog para cargar los estilos de los gadgets que trae por defecto, los cuales yo no necesito, estaba siendo cargado, cuando yo los había deshabilitado, me preguntaras: ¿Pero, no habíamos bloqueado la carga de esos estilos en Eliminar el JavaScript que bloquea la visualización y el CSS? y la respuesta es Si, ya los habíamos bloqueado, pero como ya dije, después de la nuevas plantillas, no se porque razón al equipo de blogger le dio por asignar el "lugar" donde este enlace se ubica en la plantilla en otro lado, haciendo que el truco solo funcione para el otro enlace. Si no entiende de que hablo mejor date una vuelta por la entrada que enlace mas arriba.

El enlace del que hablo tiene una forma asi:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=xxxxxxxxxxxx&amp;xxxxxxxxxxxxxxxxxxxxxx' />


Resumiendo: cada plantilla preterminada de blogger o diseñada, debe contener las lineas <b:skin><![CDATA[]]></b:skin> estas lineas manejan los CSS del blog o los códigos que se encargan de dar estilo al sitio, el interpretador de blogger cuando convierte el XML a HTML como tal, en ese código que maneja los estilos, incluye 2 enlaces externos que cargan los CSS de los gadgets y algunas partes del blog, esto no lo podemos quitar directamente en la plantilla, pero con el truco que vimos en la entrada enlazada, nos permitía deshabilitar su carga, lo que paso fue que uno de los enlaces ya no se incluye en el </b:skin> si no que el interpretador o yo que se lo que incluya esas lineas, ahora lo muestra antes del </head>, haciendo que se escape del truco para bloquearlo y nos genere esa demora en la carga de la pagina. Dejando la cháchara, aquí esta la solución.

Si es la primera vez que haces un proceso como este o, te recomiendo leer la entrada que enlace mas arriba alli explico mucho mejor como hacer este truco, si crees que vamos un poco rápido te recomiendo leer esta guía para mejorar la velocidad del blog

A partir del código usado en la entrada enlazada, pude crear este nuevo para este enlace que intento escapar al truco.
  1. Entra a la plantilla y busca </head>
  2. Reemplazalo por este código:

    &lt;!--</head>--&gt;&lt;/head&gt;

  3. Y listo eso es todo, Lo que hace el código es inhabilitar lo que se cargue por defecto antes del </head> (que es el lugar donde se esta ubicando ese enlace).
Para confirmar, mira el código fuente de tu blog, en la parte del head deberás ver algo como esto:

eliminate render-blocking javascript and css in above-the-fold content


4 comentarios:

  1. Esneider muy buen post, yo diseño los estilos de mis blogs y también tenia este problema pero gracias a ti arregle ese fallo, sin embargo tengo otro problema ligado a la velocidad, cuando mis blogs no tiene imágenes, ni publicidad de Google AdSense tienen una velocidad de 98/100 pero cuando les colo publicidad y les agrego imágenes a los post esto bajan a 91/100. Yo veo que tienes imágenes, publicidad y hasta efecto rotatorios y tu velocidad sigue siendo 98/100, xfavor explícame como hacerlo o has un post acerca de esto amigo. Xq si es por la publicidad aunque sea debería alentar tu carga y no lo hace.

    ResponderEliminar
    Respuestas
    1. Hola Leonardo, acabo de revisar tu blog y ya note cual es el problema, es obra blogger y sus dichosos cambios, a mi también me afecta, las entradas que aun no tiene comentarios están cargando un archivo externo extra (Comentarios de Blogger), en comparación con las entradas que ya tiene comentarios las cuales ya no cargan dicho archivo, te invito a que analices alguna de tus publicaciones con algún comentario y luego me dices, mientras yo intentare hallar alguna forma de arreglar esto, saludos

      Eliminar
    2. Ok Esneider yo cualquier cosa te aviso, por cierto existe un error que no has tomado en cuenta para explicarlo en Inovablog, dicho error tiene que ver con el marcado de datos Shema, hice un test de tu blog y solo tienes el marcador hatom y el de person, en pocas palabras tu marcador de datos esta perfecto pero si te das cuenta en mis blog el marcador de datos tiene uno llamado BlogPosting, no sabes cuanto he intentado quitarlo del blog porque me gusta la perfección casi en todo el tema relacionado al blogging pero no he tenido éxito para hacerlo, Por lo que veo tu y otros blogueros si han tenido éxito en quitarlo, quisiera que explicaras en uno de tus post como hacerlo por favor.

      Eliminar
    3. A tu pregunta, la solución esta en la tercera entrada nueva de mi blog

      Eliminar

2017 © Inovablog