Mejora el rendimiento de tu web optimizando sus hojas de estilo css



Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web.
Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web.
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.
En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix.
GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de botella" que afecten a su rendimiento. Entre las pruebas que realiza para comprobar la velocidad de carga de una web se encuentra la conocida Google Pagespeed y Yahoo YSlow.
Veamos punto por punto, qué mejoras debes implementar en tu web para conseguir un buen rendimiento con las hojas de estilo.
Optimiza el rendimiento de tu web paso a paso con GTMetrix: Google Pagespeed y YSlow:

Este artículo es parte de una guía que te ayudará a optimizar al completo el rendimiento neto de tu web, mejorando así su ejecución en cualquier dispositivo (móviles, tabletas, ordenadores) y permitiéndote una mejora en tu posicionamiento en buscadores.
La guía consta de los siguientes capítulos:
Analiza el rendimiento integral de tu web con GTMetrix.
Mejora el rendimiento de tu web aplazando la ejecución de javascript
Mejora el rendimiento de tu web optimizando sus imágenes
[El que estás viendo] Mejora el rendimiento de tu web optimizando sus hojas de estilo.
Puedes ejecutar cada entrega por separado, es recomendable seguir el orden planteado para una mejor comprensión.Comprueba el rendimiento de tu web con GTMetrix


Lo primero es realizar el análisis de rendimiento de GTMetrix para poder visualizar si tenemos algún aviso que nos indique la necesidad de optimizar las hojas de estilo en nuestra web.
Así pues, ejecuta primero esta guía que te explica cómo analizar el rendimiento de tu web con GTMetrix.


Si en el resultado del análisis de tu página te aparecen los siguientes avisos: "Inline small CSS", "Minify CSS", "Put CSS in the document head", "avoid using @import css" o "use css sprites" lo mejor es que ejecutes los siguientes pasos que explico a continuación para mejorar el rendimiento de tu web.Cómo localizar las hojas de estilo que no están optimizadas en tu web
Gracias a GTMetrix, en el análisis de Google Pagespeed, podréis ver los avisos de las hojas de estilo que requieren optimización y qué clase de actuación requieren al respecto para mejorarlas.


De esta manera, puedes ver dentro del código de tus páginas, qué hojas de estilo están afectando al rendimiento de la misma. A continuación te explico cómo solucionar cada problema.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.
Optimización de las hojas de estilo:
Los siguientes pasos que a continuación se enumeran son obligatorios dada su importancia para mejorar el rendimiento neto de una página web.

1) Escribir "Inline" la hoja de estilo CSS pequeña:


Inline se trata de realizar la menor 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 contenido del propio archivo .css se encuentra ya metido antes de la etiqueta </head> en el código 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>.
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>
2) Minimizar las hojas de estilo:

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:2.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".


2.2) En la parte superior derecha, abre el desplegable "Code type" y selecciona la opcion: CSS.


2.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.

El código "minimizado" o "comprimido" lo puedes ya copiar y pegar directamente e el código fuente de tu web. Es especialmente importante minimizar el tamaño del código cuando éste se aplica "inline" en el HTML.
3) Minimizar las hojas de estilo:

Evita en líneas generales la utilización de la sentencia @import para cargar hojas de estilo en las páginas de tu web.
Si utilizas imágenes que van seguidas, en forma de iconos, utiliza css sprites.
No utilices código css en el <BODY> de tu páginas web, trata de que siempre esté por encima de la etiqueta </head>.

Con estos pasos realizados por cada hoja de estilo afectada, verás que el rendimiento neto de tu web mejora notablemente, la nota media de la misma en GTMetrix verás que se incrementará y optarás a una ligera mejora en el posicionamiento.
Cualquier duda me tienes en los comentarios.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: rendimiento

Recomendamos

Relacionado

rendimiento

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix. GTMetrix es un servicio de análisis rendimiento de l ...

rendimiento

Optimizar las imágenes, en términos de rendimiento web consiste en hacer que, sin perder su calidad, ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible. Analizaremos varias formas de optimización de imágenes. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio we ...

rendimiento

En Diarios de la nube vamos a ir ayudándote a resolver cada respuesta que GTMetrix pueda devolverte al analizar tu web. GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de bot ...

general

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

general css css3 ...

Selectores CSS: Fundamentos Hoy inicio una nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Les comparto un este post muy interesante y bien explicado sobre Selectores CSS:Fundamentos. Todos los creditos del post son de Maria Kovacs de quien les compartiré más información al final de esta traducci ...

Linux

Este artículo forma parte de la serie Guía del servidor Apache : Securing Apache on Ubuntu – Part 1 Securing Apache on Ubuntu – Part 2 Optimización del rendimiento de Apache – Parte 1 Optimizando el rendimiento de Apache – Parte 2 Setting Up Name-Based Virtualhost Apache Configuración de IP y Port-Based Virtualhost en Apache Cómo configurar el directorio web de protecc ...

CSS: Nivel B2

Hacia mucho que quería escribir este artículo, ya que es un tema del que puedes encontrar muy poca información en internet. Se trata de las listas. Ese elemento que utilizamos tanto en nuestros artículos pero que tan poquito sabemos estilizar. Y es que no tenemos que utilizar los puntos y los números obligatoriamente, podemos utilizar desde cuadrados hasta iconos pasando por números romanos o el a ...

HTML: Nivel A1

Si sigues por aquí es porque todavía tengo oportunidad de hacer que te guste el mundo del diseño web, por ello hoy vamos a dedicar la entrada a ver los errores de principiante en HTML5, el idioma que pone la estructura de nuestra web. El lenguaje HTML fue creado por Tim Berners Lee, el padre de la web. Este lenguaje permite que los archivos que dan estructura a una web estén formados únicamente de ...

propuestas

Google ha incorporado interesantes novedades para la presentación de nuestras Webs y Blogs en su navegador Chrome para móviles y tabletas. Podemos cambiar el color de todo el navegador para móviles y adaptarlo a la presentación de nuestra web, dándole un toque mucho más fresco e innovador. En general estos cambios dotan de una presentación mucho más profesional a nuestros contenidos para vestirlos ...

propuestas

Al navegar por Internet con nuestro móvil, muchas veces nos encontramos con pequeños bloqueos, interrupciones en el dibujado de la página porque se están cargando anuncios, o imágenes... en diversas ocasiones percibimos la navegación como algo poco fluido o inmediato. La iniciativa de código abierto AMP (Accelerated Mobile Pages) viene a crear un nuevo "ecosistema" de programación que pe ...