El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no nos damos cuenta de los problemas que conlleva un incorrecto uso de las hojas de estilo.
Internet está lleno de páginas que no funcionan en navegadores antiguos o que tienen un exceso de "peso" asociado a un pobre rendimiento debido a la forma en cómo gestionan las hojas de estilo.
La depuración, limpieza y mejora de estos archivos nos servirá para incrementar nuestra compatibilidad con cualquier navegador, disminuir la cantidad de código sobrante y alcanzar un rendimiento mejorado. Sin duda uno de los puntos de optimmización de sitios web clave para cualquier proyecto profesional que se precie.
Conceptos previos:
Si estás familiarizado con la utilización de hojas de estilo puedes saltarte esta parte de la entrada y pasar directamente a la guía.
Las hojas de estilo (.css)
Con cualquier publicación web, las páginas web basan su presentación fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que integran dicha página.
Es decir, son archivos externos que le dicen a cada componente que utilizamos en nuestra página web (cajas de texto, títulos, comentarios, etc...) qué formato deben tener para darle un "estilo", una presentación.
Establecen, por citar ejemplos simples que puedan comprenderse al instante, el espaciado entre caracteres, el margen entre un marco y el texto, el color que se va a utilizar en las letras...
En cualquier publicación web se incluyen primero, antes del cierre de la etiqueta </head> para que luego el resto del código pueda referenciarlas.
Se pueden ver en el HTML de cualquier sitio web porque quedan declaradas de la siguiente forma: <link href='URL_A_LA_CSS' rel='stylesheet' type='text/css'/>.Donde URL_A_LA_CSS es la dirección donde se encuentra almacenada la hoja de estilos que estamos utilizando.
Las hojas de estilo en Blogger:
La Plantilla de Blogger, el XML y el HTML:
Es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas propias que al ser interpretadas por el servidor de Blogger conforman la presentación del blog. Al ser reutilizadas por todos los usuarios no podemos alterarlas sólo para nuestros intereses. Es por ello que cuando queremos "ir más allá" de lo que ofrecen a nivel básico, debemos reescribir algunos de los elementos que las componen. Entre esos elementos citados se encuentran las hojas de estilo, pilar básico del aspecto y formato de nuestras páginas en Blogger o en cualquier "publicación web".
Es decir, simplificando sin entrar en tecnicismos: la plantilla contiene el contenido del blog "resumido" en un lenguaje de etiquetas extendido (el XML) que luego, cuando se ejecuta en el ordenador de los usuarios, se interpreta en el lenguaje que sus navegadores entienden (el HTML).
Etiqueta <b:skin><![CDATA[TUS_ESTILOS]]></b:skin>:
En Blogger el contenido de las hojas de estilo en la plantilla se suelen indicar antes de que cierre la etiqueta "</head>". Entre medias de la etiqueta <b:skin> y </b:skin>, escribirás dentro de <![CDATA[ ]]> los estilos con los que trabaja la plantilla.
Antes de comenzar la guía ten en cuenta:
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 si realizas cambios a "CSS inline". 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 "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.
No me responsabilizo de los daños que puedas sufrir en tu Blog o sitio web por el uso incorrecto de estas soluciónes.
Realiza una copia de seguridad de tu página web o Blog. Salvaguarda tus datos antes de hacer cualquier cambio:
Es totalmente imprescindible que realices una copia de seguridad de tu Blog antes de continuar. Si bien el análisis de Page Speed no va a realizar ningún cambio en el mismo, las soluciones que vamos a proporcionar a cada advertencia informada por la utilidad sí requerirán alterar el código o realizar cambios. Realiza esta guía para no perder nada de tu valioso trabajo en caso de error: Realizar una copia de seguridad de tu Blog para prevenir. Recupera entradas perdidas por medio del buscador "in-extremis".
¿Qué vamos a hacer?:
- Vamos a dejar "perfectas" las hojas de estilo que manejemos en nuestra página web o Blog:
- Depuración: Vamos a depurarlas para eliminar código fuente innecesario y dejar libre mayor cantidad de memoria.
- Estandarización: Vamos a adaptarlas a los estándares de la industria (W3C) para ganar la mayor compatibilidad y rendimiento posibles.
- Optimización: Vamos a optimizar el espacio y el tamaño que ocupa en nuestro código HTML o servidor. Conseguiremos minimizar los tiempos de acceso e interpretación del código eliminando texto y caracteres innecesarios.
- Instalación: Pondremos de la mejor manera posible el código CSS perfectamente depurado y optimizado para el mejor funcionamiento posible en nuestro sitio web o Blog.
Paso a paso, limpiando, mejorando y optimizando nuestras hojas de estilo:
DEPURACIÓN: Vamos a depurarlas para eliminar código fuente innecesario y dejar libre mayor cantidad de memoria:
1) Utiliza el navegador Google Chrome para aprovechar las herramientas de depuración de código que éste proporciona:
- Pulsa en tu teclado la tecla F12, visualizarás en la parte inferior de la pantalla las herramientas de soporte a desarrolladores de Google Chrome
- Haz "clic" en la opción de menú de las herramientas llamada "Audits" (la séptima opción del menú. En la venta "Audits" te aparecerá un botón "RUN": púlsalo para auditar cada parte del código que utilizas. Asegúrate que tienes activadas las opciones "Network utilization" y "Web page performance". Mientras se ejecuta el análisis saldrá una barra de progreso verde como la que puedes ver en la pantalla inferior.
- Una vez finalizado el análisis podrás ver un resumen con la información que se muestra en la pantalla inferior (puedes aumentar de tamaño el área dedicada a las herramientas de soporte a desarrolladores de Google Chrome para ver más fácilmente la información que proporcionan):
- Para las CSS tendrás dos apartados especialmente interesantes: "Remove unused css rules" y "optimize the order of styles and scripts". Con estas indicaciones podrás eliminar de tu CSS aquellas clases que o están utilizando y podrás ordenar su colocación en el CSS por prioridad de utilización. Para eliminar el código sobrante, continúa con el paso siguiente.
- NOTA IMPORTANTE: La auditoría relalizada por Chrome es referente a la visualización de la página que se está ofreciendo en el navegador. Es posible que haya clases de tu css que NO se utilicen en la pantalla que estás utilizando para auditar y si se empleen en pantallas posteriores. Haz copias de seguridad del CSS con el que trabajes para luego poder recuperar cualquier clase que necesites.
2) Descárgate el archivo .css que utilizas en tu página web. Al hacer "clic" derecho sobre tu página web, en el menú contextual aparecerá la opción "ver código fuente"
- Al pulsar ver código fuente, el navegador te proporcionará el código html que conforma tu página web.
- Pulsa la teclas CONTROL y F y busca la palabra "stylesheet". Localizarás las hojas de estilo utilizadas en tu página web. Son aquellas que terminan en .css:
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/2220499320-widget_css_2_bundle.css' />
- Copia la dirección al CSS que estás utilizando y pégala en la barra de direcciones de tu navegador, de esa manera se descargará el código fuente del .css:
- Copia el contenido del .css, todo el texto que se ha descargado, en un editor de textos o de programación HTML.
3) Haz una copia de seguridad del CSS. ES MUY IMPORTANTE dado que si luego encuentras problemas al eliminar clases, siempre podrás ir la copia de seguridad para recuperarlas.
4) Elimina las clases del .css que no estás usando que te ha indicado la auditoría de Google Chrome:
En "Remove unused CSS rules (1465)" recorre cada "triángulo" y al desplegarlo te irá informando de las clases que debes quitar de tu .css:
Actúa con paciencia y tiempo. Ir depurando una .css más o menos grande puede tardarse bastante en hacer, esto es ir con paciencia y eliminando cada clase que no utilices mientras la guardias en la copia de seguridad por si luego en otras pantallas localizas que la necesitas.
ADAPTACIÓN A ESTÁNDARES W3C: vamos a adaptarlas a los estándares de la industria (W3C) para ganar la mayor compatibilidad y rendimiento posibles:
5) Una vez depurada tu .css, el archivo resultante será la verdadera hoja de estilo que deberías utilizar. Esto es porque la has depurado y has dejado que sólo quede en ella aquellas clases y atributos de tu presentación que realmente utilizas. Ahora vamos a adaptar a los estándares de la industria nuestro código, ganando en: compatibilidad con cualquier navegador y rendimiento.
5.1) Conéctate a http://jigsaw.w3.org/css-validator/, te aparecerá una pantalla como la que se muestra a continuación:
5.2) Introduce la URL de tu sitio web o Blog en la caja de texto con el literal "Dirección". A continuación te mostrará el listado de "Avisos" y "Errores" que tus CSS pueden tener:
Los Avisos, aunque de menor importancia que los errores, deben atenderse para alcanzar el mayor nivel de compatibilidad.
Los errores deben tratarse para evitar problemas de compatibilidad y mejorar la ejecución de tu código en el navegador.
5.3) Al final del informe encontrarás que te ha generado tu código CSS completo corregido (siempre que haya sido posible) en "Información CSS válida".
5.4) Copia el código CSS corregido por el validador de la W3C a tu archivo de hoja de estilo final. Este .css está optimizado a nivel de depuración (se han eliminado las clases que no se utilizaban) y a nivel de estándares W3C (hemos cogido el código válido resultante de la validación W3C).
5.5) Puedes volver a validar la .css hasta dejarla sin errores (si es que después de la validación y del código proporcionado por W3C siguen existiendo propiedades o atributos no correctos.OPTIMIZACIÓN: MINIMIZACIÓN DE TAMAÑO CSS: Vamos a optimizar el espacio y el tamaño que ocupa en nuestro código HTML o servidor. Conseguiremos minimizar los tiempos de acceso e interpretación del código eliminando texto y caracteres innecesarios:
Debemos "comprimir" el tamaño del .CSS que estamos utilizando, de manera que cuando el navegador tenga que interpretarlo, el código no cuente con espacios en blanco o comentarios (entre otros detalles) que pueda ralentizar su lectura e interpretación por parte edl navegador de nuestros usuarios.
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:
6.1) Para realizar la compresión con Blogger o cualquier página web, se puede copiar y pegar todo el código del CSS y soltarlo en HTML COMPRESSOR en la pestaña inicial "Source", donde pone "DRAG A FILE OR PASTE CODE".
6.2) En la parte superior derecha, abre el desplegable "Code type" y selecciona la opcion: CSS.
6.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 en tu archivo .css final.
INSTALACIÓN EN NUESTRA WEB O BLOG: Pondremos de la mejor manera posible el código CSS perfectamente depurado y optimizado para el mejor funcionamiento posible en nuestro sitio web o Blog:
7) Colocar la .CSS optimizada en nuestra publicación web o Blog depende de nuestras preferencias a la hora de lanzar el código en nuestras páginas web:
Podremos hacerlo de dos formas distintas: "inline" o "referenced".
7.1) Inline es como Google en su servicio Pagespeed está pidiendo tras la actualización del mismo en verano de 2013. Se trata de realizar lamenor cantidad de accesos al servidor posible. Para ello, cuando el navegador interpreta nuestra página web, si tiene que solicitarle al servidor que descargue un archivo .css de alguna URL, estamos "perdiendo" tiempo d ejecución hasta que se va a por el .css, se descarga y entonces se aplica. Con el CSS inline, el pcontenido del propio archivo .css se encuentra ya metido antes de la etiqueta </head> en el HTML de nuestra página. De esa manera, el navegador ya cuenta con el código que necesita sin realizar solicitudes de descarga al servidor.
¿Cómo se hace?:
- En lugar de realizar la llamada referenciada: <link href='URL_A_LA_CSS' rel='stylesheet' type='text/css'/>
- Se escribe directamente el contenido del .css en la propia HTML entre las etiquetas <style type='text/css'> y </style>.
Ventajas:
- Ejecución más rápida.
- Menor consumo de recursos en servidor.
Inconvenientes:
- Código más difícil de mantener.
- Problemas de reutilización, habrá que introducir el código necesario a cada página para que funcione correctamente.
- Obliga a una depuración exhaustiva para impedir un exceso de código en la página.
Instalación de tu CSS depurada y optimizada:
- Para instalar tu código CSS como INLINE en una página web estándar, simplemente introduce antes del </head> las etiquetas <style type='text/css'> y </style> con el código css en su interior:
<style type='text/css'>#ArchiveList .toggle{cursor:pointer;font-family:Arial,sans-serif}#ArchiveList .toggle-open{line-height:.6em}#ArchiveList{text-align:left}</style>
- Para instalar tu código CSS como INLINE en BLOGGER, ejecuta esta guía: Mejora la rendimiento de tu Blog optimizando los CSS y JavaScript: "Remove render-blocking JavaScript and CSS in above-the-fold content
7.2) Referenced es como hasta ahora siempre se ha hecho. Se referencia dentro de la HTML a un archivo .css que es el que contiene todas las clases y atributos de la presentación de los componentes que conforman la página web.
¿Cómo se hace?:
- Se indica la dirección al archivo .css antes de la etiqueta </head> de tu página HTML. Se hace de la siguiente manera: <link href='URL_A_LA_CSS' rel='stylesheet' type='text/css'/>
Ventajas:
- Mayor modularización del código.
- Mantenimiento más sencillo.
- Mejor reutilización en distintas páginas.
Inconvenientes:
- Rendimiento inferior al inline.
- Mayor número de peticiones al servidor.
- Tiende a utilizarse sin depurar.
Instalación de tu CSS depurada y optimizada:
Una vez ya tenéis el css listo para instalar, guárdalo. Acto seguido lo podemos subir a googledrive y lo ponemos como público. Anotad la URL que devuelve googledrive para acceder al .css con el que sobreescribo la hoja de estilos para título y descripción de mi blog.
En el código fuente de vuestro HTML añadid justo antes de la etiqueta "</head>" el enlace en Google Drive a vuestro .css con este código: <link href='URL_DE_GOOGLE_DRIVE' rel='stylesheet' type='text/css'/>. MUY IMPORTANTE: la URL de Google Drive debe quedar simplificada de esta manera "https://googledrive.com/host/0Bwgc28XHjPA2MWdCOXNadU0yVHM".
En mi caso el enlace quedaría así:
<link href='https://googledrive.com/host/0Bwgc28XHjPA2MWdCOXNadU0yVHM' rel='stylesheet' type='text/css'/>
Es muy importante que el código no se copie con retornos de carro o espacio en blanco inexistentes.
Trata de publicar el CSS en una CDN para que su descarga en el cliente sea lo más rápida posible.
¡Eso es todo!, has conseguido depurar tu hoja de estilos para sólo emplear las clases y atributos que realmente manejas. Optimizarla para que ocupe lo menos posible. Hacerla 100% comatible con los estándares de la industria (W3C) e instalarla en tu sitio web o Blog de la manera que prefieras (inline o referenced).
Hola, me he estancado en el paso 4 , no puedo borrar ni el primer error, ¿como lo hago? dime de cual de las páginas que he abierto y como hacerlo.Gracias.
ResponderEliminarEn la lista de errores te aparece por esta secuencia la información: "remove unused CSS rules" y dentro de esa cabecera despliegas y aparecerá el nombre del .css analizado y en su interior el conjunto de clases que no utilizas.
EliminarEste punto no es obligatorio, ten en cuenta que las reglas CSS que analiza Chrome en una hoja pueden no usarse donde las miras y luego si utilizarse despues. Por ello, mi recomendación es realizar los ajustes para compresión y W3C y esta depuración de código no utilizado realizarla con mucho tiempo y calma.
Como mucho puedes seguir en el paso 5, 6 y 7. Y recuerda hacer copia de seguridad pues todo esto es muy delicado.
Un saludo!
muchas gracias, espero no hacer nada mal , si lo hago te pedire ayuda, aún sin leer me escucharás. jajaj, gracias de verdad.
EliminarHola Miguel, yo estaba buscando la forma de eliminar la llamada al
ResponderEliminarhttp://www.blogger.com/static/v1/widgets/2220499320-widget_css_2_bundle.css
y al otro llamado
http://www.blogger.com/dyn-css/authorization.css?targetBlogID=7435441155350471201&zx=67a1ab1c-3cb9-40c5-8699-adfd03e4068e%22/%3E
Ya que tanto el Audit del Google Chrome como el PageSpeed me dicen que eso provoca bloqueo, y que preferiblemente lo agregue a la cabecera de la plantilla.
Encontré este artículo tuyo y es justo lo que necesitaba. He hecho los pasos y bueno no ha habido suerte, del W3C se me desconfiguraba todo el Blog, así que reestablecí la plantilla.
El caso es que pese a arreglar el CSS manualmente, con las horas que me ha tomado, la web sigue haciendo la llamada a ese CSS Bundle y yo lo que quiero es que no los llame, pienso ya que es cosa de Blogger.
Pensé que la llamada se realizaría también mediante la head así que eliminé todo
html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://opengraphprotocol.org/schema/'
y lo dejé así porque no me dejaba quitar el class
html b:version='2' class='v2'
En fin, el blog se me queda en 77 / 100, no sé si eso está bien o es demasiado lento, unos amigos me dicen que no tardan ni 10 segundos en cargar, mientras otro me dice que tarda como 40 segundos, y a mí me tarda 10 segundos, bueno ya no me comeré más la cabeza...
Me pondré otro día con ello si se me ocurre, solo te lo quería comentar :D
¡Gracias por tu atención y amabilidad!
Hay una forma de conseguirlo. Pero haz todos los pasos que indica, sobre todo copia de seguridad. Con eso vas a ganar muchísima puntuación pero a costa de hacer tu CSS inline. Deberás extraerlo de los archivos donde lo utilices para luego pegarlo. Como es una operación delicada inténtalo y cualquier problema me dices.
EliminarRecuerda 1) copia de seguridad para hacerlo 2) haz esta guía;)
http://diariosdelanube.blogspot.com.es/2013/09/la-guia-de-rendimiento-para-bloggers_10.html
Lo podrás hacer con el CSS y el javascript. Seguro que te va bien, prueba y me vas diciendo.
Un saludo!.
Hola Miguel, necesito consultarte algo, llegue al punto 5.4 donde dice pegarlo a la hoja final es a la plantilla hmtl o al CSS de avanzados? Mil gracias.
ResponderEliminarEn la plantilla, antes del Head. Lo mejor es hacerlo como CSS INLINE. Normalmente en el head.
EliminarUn saludo!
Hola Miguel ,
ResponderEliminarHe estado poniendo algún código css en mi plantilla simple de blogger, pero no me funcionan , mi pregunta es para poder utilizar este código tengo que hacer lo explicas en este post ? o no ?
Muchas gracias
Saludos
Hola!,
Eliminarpara aprender bien el uso de estilos te recomiendo este cursillo: http://www.diariosdelanube.com/2013/12/domina-blogger-sin-ser-un-experto-en.html el último capítulo es para las hojas de estilo.
Esta otra guía también te puede ayudar bastante: http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html
Esta entrada que estás viendo, donde me has escrito el comentario, está más pensada para optimizar las hojas de estilo una vez las tienes hechas, no para aprender a utilizarlas.
Has las anteriores y verás que es facilísimo.
Un saludo!
Muchas gracias Miguel , espero entenderlo bien todo y hacer que me funcione el CSS del blog.
EliminarSaludos
Montse
Paciencia y poco a poco, sin prisa. Al final sale. Un saludo!
Eliminar