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.
Contenidos del post:
¿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:
- 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.
- En donde dice “Code type:” tienes que desplegar el menú y seleccionar “Blogger”.
- Después debes ir a la opción “Show Options” y allí harás algunos cambios para que la plantilla quede perfectamente en orden.
- En “Drag and Drop Charset:” tienes que desplegar el menú y marcar “Unicode (UTF-8)”.
- 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.
- 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.
- 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.
- En “JavaScript with S.S.C. options:” desplegaras el menú y seleccionaras “JSMin”.
- Por ultimo en “Misc Options:” las dos casillas que están seleccionadas por defecto no las debes tocar.
- 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:
¿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.
