¿Te gusta esto?... Entonces que no se te olvide compartirlo ;)

Comprime el c贸digo HTML de tu blog

Para ir m谩s all谩 de lo usual y lo cotidiano sobre las recomendaciones para un blog creado en Blogger el d铆a de hoy quiero hablar acerca de la compresi贸n del c贸digo HTML, CSS y Javascript. Aunque la mayor铆a de los blogs en Internet no cuentan con una compresi贸n de sus c贸digos esto no esta dem谩s ya que la misma influye de manera directa en el posicionamiento de un blog, ahora t煤 me preguntaras porque sucede esto; la respuesta es muy sencilla a menor l铆neas de c贸digo HTML m谩s r谩pida ser谩 la carga lo que se convierte en un factor fundamental para superar a otros blogs y sitios web logrando una mejor posici贸n en todos los buscadores no solo en Google.

El lenguaje en el que se basa Blogger es XML lo que permite que todos los blogs creados en esta plataforma aporten un formato f谩cil de entender para los robots aunque un poco antiguo, ante esta situaci贸n es muy importante facilitarle las cosas a los robots de b煤squeda, en otras palabras comprimir el c贸digo para que en pocas l铆neas aparezca todo lo necesario. No es lo mismo leer 2500 l铆neas e instancias de HTML y CSS que solo tener cincuenta o cien, primero que nada los bots solo leen las primeras l铆neas del HTML de un blog para saber su contenido, ya que all铆 se encuentran las etiquetas meta y seguidamente ven la publicaci贸n que debe estar ordenada correctamente en base a los encabezados “heading tags”.

Un blog puede tener una excelente optimizaci贸n interna y puede llegar a posicionarse bien sin necesidad de comprimir sus contenidos, pero por factores de tiempo y de una indexaci贸n f谩cil es mejor que todo este minificado al m谩ximo para as铆 ahorrar la cantidad de tiempo en la que el sitio carga y muestra todo el contenido insertado en la plantilla. Si te fijas bien este blog como todos los dem谩s que tengo posee un c贸digo HTML comprimido permiti茅ndome que los contenidos carguen m谩s r谩pido, esta velocidad se expresa en milisegundos y si observas bien ver谩s que los estilos y todos los dem谩s contenidos no se ven afectados; se muestran correctamente y no sufren ning煤n desperfecto, la plantilla se ve limpia y f谩cil de entender tanto por las personas debido a su usabilidad y por los robots de los motores de b煤squeda gracias a la minificaci贸n de todo.

¿C贸mo se puede comprimir el c贸digo HTML, CSS y Javascript del blog?


Comprimir todos los c贸digos del blog para algunas personas es una tarea sencilla y para otros no lo es tanto, se debe resaltar que existen algunos script que no se puede comprimir totalmente ya que si todo el c贸digo se ubica en una sola l铆nea eso puede hacer que el mismo deje de funcionar, por ese motivo antes de intentar minificar el XML del blog se deben tener conocimientos previos.

Si tu blog esta creado en Wordpress puedes utilizar Sublime text en su versi贸n dos o tres para comprimir el HTML pero si utilizas Blogger es necesario que uses una herramienta online para evitar que tengas un error con los script externos e internos que utilices en el blog, por ejemplo en este blog utilizo dos scripts internos, estos me permiten deshabilitar el clic derecho y la selecci贸n del texto, si ambas funciones las colocara en una sola l铆nea estas dejar铆an de funcionar, pero gracias a la herramienta online que utilizo para minificar los c贸digos no tengo ning煤n error.

Ahora bien la herramienta para comprimir todo se llama HTML Compressor, con ella se puede minificar totalmente cualquier tipo de c贸digo ya sea que se quiera realizar por separado como por ejemplo comprimir el HTML separado del CSS o minificar ambos estando juntos, la compresi贸n por separado es muy sencilla por lo que no la explicare, en esta entrada solo me centrare en explicar c贸mo se minifican los c贸digos estando todos juntos en una misma plantilla:

  1. Primero que nada una vez que hayas ingresado a la p谩gina de HTML Compressor, debes ir a Blogger y en el apartado de “Tema” debes dar clic en “editar HTML”, una vez que ingreses en el c贸digo fuente de toda la plantilla tendr谩s que copiar todo el c贸digo de principio a fin y pegarlo en el editor de texto de la herramienta de minificaci贸n.
  2. En donde dice “Code type:” tienes que desplegar el men煤 y seleccionar “Blogger”.
  3. Despu茅s debes ir a la opci贸n “Show Options” y all铆 har谩s algunos cambios para que la plantilla quede perfectamente en orden.
  4. En “Drag and Drop Charset:” tienes que desplegar el men煤 y marcar “Unicode (UTF-8)”.
  5. Luego en “HTML Tags and Spaces:”, desplegaras un men煤 nuevamente para seleccionar “Aggressive minimization”, las tres casilla de: “Minimize CSS inside style attributes”, “Minimize JavaScript events in html tags” y “Minimize JavaScript in href=javascript” las dejaras marcadas tal cual como est谩n de forma nativa.
  6. En la parte de abajo donde dice “Comments, CSS and JavaScript:” marcaras la casilla “Preserve all x/html comments”, despu茅s las tres casilla que siguen a continuaci贸n de esa las dejaras marcadas, esto es con el fin de preservar todo el c贸digo y minimizar lo m谩s que se pueda.
  7. En “JavaScript Minimization options:” tienes que desplegar el men煤 para seleccionar “Google Closure Compiler”, despu茅s m谩s abajo activaras “Advanced optimizations (Experts only)” seguidamente marcaras las casillas “Single line output” y “Verbose output”. La de “Use JSMin as failback engine” la dejaras marcada tal cual y como se encuentra.
  8. En “JavaScript with S.S.C. options:” desplegaras el men煤 y seleccionaras “JSMin”.
  9. Por ultimo en “Misc Options:” las dos casillas que est谩n seleccionadas por defecto no las debes tocar.
  10. Ya lo que te queda es dar clic en el bot贸n “Compress” y todo el c贸digo XML de la plantilla de tu blog se comprimir谩, despu茅s debes ir a Blogger y remplazar el XML que esta all铆 por el mismo pero comprimido.

Para evitar que tengas cualquier error te dejare en la siguiente imagen como te deben quedar marcadas todas las opciones en la herramienta de minificaci贸n:

Comprime el c贸digo HTML de tu blog

¿Comprimir el c贸digo me garantiza un buen posicionamiento en los motores de b煤squeda?


D茅jame decirte que comprimir todo el c贸digo de tu blog no te va a garantizar un buen posicionamiento al corto plazo, pero te ayudara a que los buscadores te indexen m谩s r谩pido porque podr谩n leer todo el contenido f谩cilmente. Recuerda que m谩s all谩 del SEO lo que vale hoy en d铆a es el contenido original, obviamente es necesario optimizar bien el blog pero una cosa no puede estar sin la otra, as铆 que ya sabes.

Por otra parte al largo plazo despu茅s que tu blog tenga cierto tiempo y disponga de contenido original ten por seguro que si tienes el HTML minificado podr谩s tener un mejor posicionamiento que otros sitios, la compresi贸n aumenta la velocidad de carga en milisegundos pero puede que el blog a煤n se encuentre lento si usas muchos c贸digos externos, solo utiliza los necesarios y as铆 evitaras que la carga sea lenta, si puedes ser铆a bueno que tambi茅n crees tus propias hojas de estilos de cascada CSS para que evites usar las que trae Blogger por defecto ya que como se encuentran alojadas en servidores de terceras partes ponen lento el blog. Por otra parte antes de realizar la minificaci贸n primero debes de ordenar los encabezados de las publicaciones, para esa tarea te recomiendo hacer la siguiente gu铆a en la cual podr谩s aprender a utilizar las heading tags para mejorar el SEO del blog. No hago una publicaci贸n de heading tags en esta bit谩cora porque estar铆a repitiendo otra vez lo que ya hice, por ese motivo deje un enlace a otro de mis blogs en donde se encuentra la entrada y all铆 aprender谩s a mejorar los encabezados para favorecer el SEO de tu blog.

Las herramientas de an谩lisis de SEO recomiendan minificar el c贸digo HTML de un blog en todo momento


Las herramientas para analizar la velocidad y el SEO recomiendan en todo momento minificar el c贸digo HTML de los blogs, por esta raz贸n es importante tomar en consideraci贸n aplicar lo que he dicho en esta entrada. Incluso Pagespeed insight de Google recomienda minificar todos los c贸digos para facilitarle a sus robots leer los contenidos y disminuir el tiempo que tarda en cargar completo un blog.

Bueno ya todo lo referente al tema de la minificaci贸n para un blog de Blogger lo he dicho aqu铆, ahora solo te queda aplicar los cambios en tu web, espero que este post te haya sido de ayuda, hasta la pr贸xima.
Usamos cookies propias y de terceros que recogen datos sobre sus h谩bitos de navegaci贸n. Si contin煤a navegando se considerar谩 que acepta su uso. OK M谩s informaci贸n aqu铆