14 Steps - Importancia de las reglas YSlow

Rule Name	Rule Id	Default weight
Make fewer HTTP requests	ynumreq	8
Use a CDN	ycdn	6
Add an Expires header	yexpires	10
Compress components	ycompress	8
Put CSS at top	ycsstop	4
Put Javascript at the bottom	yjsbottom	4
Avoid CSS expression	yexpressions	3
Make JS and CSS external	yexternal	4
Reduce DNS lookups	ydns	3
Minify JS and CSS	yminify	4
Avoid redirects	yredirects	4
Remove duplicate JS and CSS	ydupes	4
Configure ETags	yetags	2
Make Ajax cacheable	yxhr	5
Use GET for AJAX requests	yxhrmethod	5
Reduce the Number of DOM elements	ymindom	5
No 404s	yno404	5
Reduce Cookie Size	ymincookie	5
Use Cookie-free Domains	ycookiefree	5
Avoid filters	ynofilter	5
Don't Scale Images in HTML	yimgnoscale	5
Make favicon Small and Cacheable	yfavicon	5

14 Steps - Hacer ajax cacheable

Hacer ajax cacheable consiste en que la información que le enviamos al cliente actualizada la pueda memorizar y si vuelve a pasar a esa información que no haga falta volver a descargarla desde nuestro servidor.

14 Steps - Configurar ETags

¿Qué son los ETags? Son un mecanismo que los servidores utilizan para validar si un componente está validado en el cliente. El problema aparece cuando tenemos servidores replicados. Este mecanismo está pensado para que nuestras peticiones se sirvan desde un solo servidor y no de dos o tres balanceados. En el caso de tener un solo servidor podemos configurar los ETags en caso contrario vale la pena desactivarlas.
FileETag none

14 Steps - Borrar Scripts duplicados

Hay que tener cuidado a la hora de añadir un script a nuestro código. En internet explorer se descarga dos veces el script. En internet explorer y firefox se evalúan los dos javascripts. Sabiendo lo mencionado en un post anterior, durante el tiempo de evaluación el navegador se mantiene bloqueado y no sigue descargando otros archivos.

14 Steps - Reducir Consultas DNS

Cada vez que accedemos a un dominio se hace una consulta dns. La información de esta consulta se guarda en el navegador. El tiempo de guardado de la información depende del navegador que usemos.
El inconveniente de realizar varias consultas dns es el tiempo de respuesta de los servidores de dns. Hasta que no se obtiene la ip, el navegador no sabrá donde pedir la página web.
Un subdominio también necesita una nueva consulta dns. Hay que tenerlo en cuenta si nuestro sistema de imágenes está en un subdominio.

14 Steps - CSS y js externos o internos

Es importante saber que los estilos CSS y los js internos, dentro de nuestro código son más rápidos que los de archivos externos. Pero también tenemos que tener en cuenta que son mucho más difíciles de depurar si están dispersos por todo nuestro código que tenerlos en un solo archivo. Es recomendable tener todos los estilos dentro de una sola hoja de estilos al igual que con nuestro código javascript para facilitar la reutilización y la actualización.

14 Steps - Evitar CSS expressions

¿Por qué evitar expresiones CSS? Debemos intentar evitar expresiones CSS del estilo cada vez que se mueva el ratón, cada vez que se presiona una tecla, cuando se redimensiona la pantalla del navegador, etc… Esto lo que hace es que se vuelvan a evaluar todas nuestras expresiones del CSS y provoquen que se haga más lenta nuestra página. Evitando expresiones regulares apoyamos a los estándares web y esto también significa un incremento del rendimiento y reduce el procesamiento por parte del navegador.

14 Steps - Poner scripts al final

¿Por qué poner los scripts al final? Muy sencillo, el comportamiento no es el mismo que el de un CSS. Los scripts son bloqueantes. Pueden dañar mucho la experiencia del usuario. ¿De qué forma? Si los scripts los ponemos al principio el usuario verá durante unos segundos una hoja en blanco ya que estará descargando el script y deja de descargar cualquier otra cosa. Por eso se recomienda que solo se haga la descarga de un solo javascript. Al bloquear se detiene cualquier descarga posible.

<script language=javascript src="script.js"></script>


14 Steps - Poner hojas de estilo al principio

¿Por qué poner las hojas de estilo al principio del html? Las hojas de estilo no son bloqueantes, es decir, el navegador no deja de descargar elementos mientras se descarga un css. Se recomienda ponerlas al principio y con la etiqueta <link> porque el navegador va renderizando poco a poco el html. En conclusión la página se va descargando y las cosas se van poniendo en su lugar y con su tamaño poco a poco.
Se recomienda ponerlas al principio porque la experiencia del usuario es mejor que si lo cargásemos al final.

<link rel="stylesheet" type="text/css" href="estilos.css" title="default"/>


14 Steps - Mod_deflate

Otra manera para ganar velocidad de transferencia es la compresión. Dicha compresión se realiza en el servidor y luego será descomprimida en el cliente. Útil cuando nuestra versión de apache es 2.x.

Activar la compression con mod_deflate:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/php

Comprimir todo menos imágenes
<Location />
# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>

Nivel de compresión:
DeflateCompressionLevel 3



14 Steps - Mod_gzip

Una manera sencilla pero útil para ganar velocidad de transferencia es que el servidor comprima los elementos que van a ser enviados. Mediante mod_gzip le podemos indicar al servidor que cosas queremos enviar comprimidas. El cliente se encargará de descomprimir la información enviada. Útil cuando nuestra versión de apache es la 1.3.

Para activar el modulo mod_gzip:

# Enable the module
mod_gzip_on yes

# Allow GZIP compression for all requests
mod_gzip_item_include mime .?

# By file extension
SetEnvIfNoCase request_uri \.mdb$ gzip=9
SetEnvIfNoCase request_uri \.bmp$ gzip cache-enable=mem
SetEnvIfNoCase request_uri \.(?:jpg|gif|png|swf|avi|rm)$ no-gzip

# By MIME type
SetEnvIfNoCase mime text/.* gzip=9 cache-enable=mem
SetEnvIfNoCase mime audio/wav gzip cache-enable=mem
SetEnvIfNoCase mime image/bmp gzip cache-enable=mem
SetEnvIfNoCase mime message/rfc822 gzip

SetEnvIfNoCase mime application/msword gzip
SetEnvIfNoCase mime application/postscript gzip
SetEnvIfNoCase mime application/vnd.ms-excel gzip
SetEnvIfNoCase mime application/vnd.ms-powerpoint gzip
SetEnvIfNoCase mime application/vnd.ms-works gzip
SetEnvIfNoCase mime application/x-javascript gzip cache-enable=mem
SetEnvIfNoCase mime application/x-msaccess gzip
SetEnvIfNoCase mime application/pdf gzip

# Exceptions for old browsers
#BrowserMatchNoCase \bOpera(?:\s5\.|/5) and mime application/.* no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bMozilla/4\.[67] and (mime application/.* or mime image/.*) no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bNetscape(?:6/6\.|/) and mime application/.* no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bFirefox/1 and mime application/pdf no-gzip vary-agent !cache-enable

SetEnvIfNoCase (mime text/css) or (mime image/jpeg) vary-agent
BrowserMatchNoCase \bMSIE\s[567]\. and (mime text/css or mime image/jpeg) no-gzip vary-agent !cache-enable

# Vary header should be properly set for caching
Header merge Vary User-Agent env=vary-agent

# Set expiry delta for static content.
# Dynamic pages should set expiry delta by oneself.
Header merge Cache-Control max-age=86400 env=cache-enable


14 Steps - Expires Headers

Otra forma de que el navegador cliente memorice nuestra información es mediante cabeceras de expiración. Con estas cabeceras podemos decir durante cuanto tiempo queremos que el navegador no nos vuelva a pedir un elemento.

Ejemplo 1:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>


Ejemplo 2:
<FilesMatch "^(bg-header|bg-div|calendar|boton)\.gif$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>


Ejemplo 3:
<FilesMatch "\.(js|css|pdf|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "\.(html|htm|txt)$">
Header set Cache-Control "max-age=600"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>


14 Steps - Mod_expires

Ahora lo que queremos conseguir es que el cliente memorice elementos de nuestra página. Mediante mod_expires podemos decir al navegador del cliente que elementos debe guardar en memoria y durante cuanto tiempo.

Ejemplo 1:
ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

Ejemplo2:
# enable expirations
ExpiresActive On

# expire GIF images after a month in the client's cache
ExpiresByType image/gif A2592000

# HTML documents are good for a week from the
# time they were changed
ExpiresByType text/html M604800

14 Steps - Componer CSS's y Javascripts

¿En qué consiste componer CSS’s o scripts? Componer un CSS consiste en coger todos los CSS que tenemos añadidos en una archivo html, php, etc… y juntarlos en unos sólo. La ganancia es mayor dependiendo del número de archivos que tengamos por separado. Lo que está claro es que podemos llegar a reducir el número de peticiones http a dos. Una para la hoja de estilos CSS y la otra para el javascript.
Un programa útil y sencillo de utilizar es el minify. Incluso nos quita los caracteres no útiles como retornos de carro o comentarios. Con este programa reducimos las peticiones http y encima reducimos el tamaño de los CSS y javascripts.

En esta url http://code.google.com/p/minify/ tenemos el código del proyecto minify que sirve para minimizar y unir css y js en un solo archivo.

14 Steps - Imágenes Inline

Otra opción para optimizar nuestro código es insertar directamente la información de la imagen. A continuación veremos una imagen en la que ponemos la información en el mismo src de la imagen. También mostraremos el código generado en base 64.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAgAElEQVR4Ae2dCZSdR3Xn7+t+S++b1OpWa21JlmQZyQvCNmAZYxvbmOWEeA42S5LDTDIzIWGSQDiTk4GTCWeWM3OYZAITcsbBCRgI24ADZjG2Yxtb3uRFkrVbu9RqtXpR73u/7vn/6r37+tOzVizpdXK6ur9X9dVX23fvrVu3bt2qL2Yz2O3evbuyra3tmnQ6/a6ioqLrJycnY/LjuoqmpqZiugia4nmLYn5isZgp3pRnilvicKSP+iEy8kM5pJGTl0mbTR8iCUefEc5mnywuLh5V/jHV+UgikXh8w4YNr2efzXgvB6CZ1NJnn3123tDQ0O+qTR9NJpMry8rKHMmhmULQBTdXCAuE4Rm5Px/n6ajTw9F8HiciMIhI7R4YHx9/Qun/9y233PJkNO1MDJ8fFC5jy59++uk7R0ZGvlxbW3vF4OCgbdq0yV577TXr6ekJRAAi6PFchLlwZwtHm+/po3EePtczkE0aRzq+XyUlJbZ8+XK7+eab7eqrr7be3t7xsbGxvxJX+Py73/3uEa9jpvkzigCefPLJ+wSwvxPySx977DG7//777dChQzkkO+DPBMRzPT9TvosRD2FAlKWlpXbHHXfYH//xH9ucOXOsq6vrewsXLvyt5ubmGUkEM4YAnn/++XcODw8/UlNTU/GNb3zDvvSlLwWWGo/HLwZ+LlsZEII4mF111VX2la98xRoaGqyzs/OLN91002cvWyMuoKKiC0h7yZJu3bq1fHR09Esg/5lnnrEvf/nLJmHK/rkhHwDBheACO3bssC984QsBZpJh/lByzc2XDIBvouAZQQDqMfdoDL1OwpM98MADp4yzb+LdCpoVInjqqads48aNNm/evLiE2c+IO8wYjuvAKTgBZIHysfLycnv99ddNUz8TsLx9/6x9yTOGLANXSKVSt73yyivLZtoLFXyA3b59+zyx+mth+YcPHzZJzoGFXixAMSZT5rkc6WgD07mL5SgLIXZiYsKqq6vLJRBeq7L3X6zyL0Y5BScA9ZImzZ/r6CUSAi/GO+XKAKlMz2699VZDl8C9zxTwmbfjc/Hs5ZdftiNHjlw0IqBchjVmB7RDBLE017gZEij4ECAgpQQYebHz6qkXAjd6/vXXX2+SwE1CJtrB0BvpkSCGOIhuYGDAqqqq7MMf/nB4fiF1nCstdUEAcANdledKf7...

14 Steps - CSS sprites

Ahora mostraremos como hacer sprites en CSS. La técnica consiste en coger una imagen y localizar una zona que la usaremos para mostrar un trozo de la imagen. Lo que conseguimos con los sprites es reducir las peticiones http de imágenes.

Lo que queremos es crear diferentes botones, con la imagen que mostramos a la izquierda. Lo que tendremos que hacer es ir al CSS y modificar el CSS e introducirle los backgrounds indicando que zona de la imagen debe poner en cada botón:







a.ejemplo {display:block; font-weigh:bold; padding:10px 10px 10px 10px; text-decoration:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF04zIki3Bcab-YWaA2vdMKl39a0f7aHp7ie3OMtg8Wb8HbtR2Yj6Zp57RBywuzsIBZ_vVoScV1-bcJfnHMV_Lz0zMuMcmLYHOs8IoZYfId9xajeW_AKG_n1dBdYeUWUNvBeWFyt7oCqo6/s400/botones.gif) 0px 0px;text-align:center;color:#fff}
a:hover .ejemplo {text-decoration:underline;}

Aquí vemos el ejemplo:

Botón

Claves para la optimización web (14 Steps)

A continuación veremos como mejorar el rendimiento de una web en entornos LAMP. Casi todas estas prácticas se pueden utilizar en otros entornos.

1. Hacer menos peticiones http
2. Usar CDN
3. Añadir Expires Headers
4. Gzip Componentes
5. Poner hojas de estilo al principio
6. Poner scripts al final
7. Evitar CSS expressions
8. CSS y Scripts externos
9. Reducir consultar DNS
10. Minimizar Javascripts
11. Evitar redirecciones
12. Borrar scripts duplicados
13. Configurar Etags
14. Hacer ajax cacheable

14 Steps - Mapas de imagen html

Ahora veremos cuando podemos utilizar un mapa de imágenes en nuestras web. Nos puede ser útiles en menús de inicio (home) y también cuando tenemos una imagen en la que tenemos diferentes zonas para hacer click.
Ahora mostraremos un ejemplo en el que podremos hacer click en cada uno de los primeros cuatro equipos que vemos en la imagen.

Este es el código necesario para realizar el ejemplo,

<img id="Image-Maps_5200911091044394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTyoTAsKCY46-ElZIMciydoe5ztYGR2R58OJ-Wa0vaprw9l2tYFXatSqQCSnfHnDqoChYMGri9cxFrKfG7UhyphenhyphenKkas9qqB977wCeN-p5wqY38CocTgNC5gAT6ahP5vYGfZBoWyKunGKulQ/" usemap="#equipo" />
<map name="equipo">
<area shape="rect" coords="15,0,73,72" href="http://www.almeriaunion.com/" alt="Almería" title="Almería">
<area shape="rect" coords="72,0,127,72" href="http://www.miathletic.com/" alt="Atlético de Bilbao" title="Atlético de Bilbao">
<area shape="rect" coords="127,0,182,72" href="http://www.colchonero.com/" alt="Atlético de Madrid" title="Atlético de Madrid">
<area shape="rect" coords="181,0,233,72" href="http://www.vamostenerife.com/" alt="Tenerife" title="Tenerife">
</map>


Trucos CSS (Tutorial parte 11) - Comprimir el CSS

En servidores como apache en el archivo .htaccess podemos escribir una directriz e indicar al servidor que cuando envie un archivo CSS lo comprima para que su peso sea menor. El cliente se encarga de descomprimir el archivo.

¿Cómo activar la compresión dentro del archivo .htaccess?

<IfModule mod_deflate.c>
AddType application/php .php
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>


«Anterior

Trucos CSS (Tutorial parte 11) - Comprimir el CSS

Trucos CSS (Tutorial parte 10) - Minimizar CSS

Para minimizar el CSS tenemos que utilizar programas o scripts de minimización. Estos programas eliminarán los caracteres no visibles y los comentarios. Incluso hay programas de minimización capaces de unir dos archivos en uno. Esto nos permite una mayor velocidad en la descarga del CSS.

Aquí tenemos un programa que se llama minify que hace lo mencionado antes. Descarga Minify

«Anterior

Trucos CSS Trucos CSS (Tutorial parte 10) - Minimizar CSS

Siguiente»

Trucos CSS (Tutorial parte 9) - Utilizar Sprites

¿Qué es un Sprite?
Un Sprite es coger un trozo de una imagen y colocarla en un lugar de la web. Todos pensamos que los sprites se utilizan sólo con icono, es decir imágenes pequeñas para ello veremos los sprites de www.softonic.com. que utilizan una imagen para colocar fondos de cabeceras y la imagen es de gran tamaño.

«Anterior

Trucos CSS Trucos CSS (Tutorial parte 9) - Utilizar Sprites

Siguiente»

Trucos CSS (Tutorial parte 8) - Abreviaturas de CSS

Aquí no quiero alargarme mucho porque lo que se tiene que explicar está todo en la Cheat Sheet de CSS. Ahí encontraremos el pdf que no explica como utilizar las abreviaturas de CSS.


• background-color, background-repeat, background-image, background-position, -> background
• Text-align, text-shadow, text-indent -> text
• Font-family, font-style, font-variant, font-weight, font-stretch, font-size -> font
• Border-left, border-right, border-top, border-bottom -> border

«Anterior

Trucos CSS Trucos CSS (Tutorial parte 8) - Abreviaturas de CSS

Siguiente»

Trucos CSS (Tutorial parte 7) - Los colores en CSS

Los navegadores nos permiten reducir el tamaño de un color específico abreviandolo. De esta manera reducimos el tamaño del CSS. La abreviación del color consiste en elegir un color que tenga dos cifras iguales; veamos el ejemplo:

#FFCC66 se puede abreviar en #FC6

Es verdad que no es una gran mejora, pero todo ayuda.

«Anterior

Trucos CSS (Tutorial parte 7) - Los colores en CSS

Siguiente»

Trucos CSS (Tutorial parte 6) - min-height en IE

La propiedad min-height la reconocen todos los navegadores menos Internet Explorer. Para emular este comportamiento en el navegador Internet Explorer debemos hacer lo siguiente:

Firefox, Opera, Chrome: min-height:100px;
IE: min-height:100px;height:auto !important; height:100px;

«Anterior

Trucos CSS (Tutorial parte 6) - min-height en IE

Siguiente»

Trucos CSS (Tutorial parte 5) - Usar clases aninadas

¿Cómo usar clases anidadas en CSS?
Para que nos entendamos, usar clases anidadas o identificadores anidados quiere decir poner varias propiedades dentro de los id ó class de css. Para ver cómo usar las clases anidadas, haremos un ejemplo y quedará explicado.
Primero debemos preparar las clases a anidar en css.

.blanco{color:#ffffff;}
.azul{color:#5c7999;}
.naranja{color:#eabd82;}

.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}

.fs10{font-size:10px}
.fs11{font-size:11px}
.fs12{font-size:12px}
.fs14{font-size:14px}
.fs15{font-size:15px}

.mt5{margin-top:5px}
.mr5{margin-right:5px}
.ml5{margin-left:5px}
.mb5{margin-bottom:5px}
.m5{margin:5px}

.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pl5{padding-left:5px}
.pb5{padding-bottom:5px}
.p5{padding:5px}

Una vez definidos nuestros estilos en el archivo CSS, vamos al archivo html y lo editamos. Si tenemos un texto que queremos que se alinee a la derecha, que tenga un margen derecho de 5 px, un padding derecho de 5 px, fuente 10 px y color naraja, lo podemos definir en el CSS de la siguiente forma:


.estilo_parrafo{text-align:right;padding-right:5px;margin-right:5px;color:#eabd82;font-size:10px}

<p class="estilo_parrafo">Este es el párrafo</p>

Con clases anidadas haríamos:

<p class="mr5 pb5 fs_10 naranja tar">Este es el párrafo</p>


«Anterior

Trucos CSS (Tutorial parte 5) - Usar clases anidadas

Siguiente»

Trucos CSS (Tutorial parte 4) - Hacks de Internet Explorer

Como todos sabemos Internet Explorer tiene siempre un comportamiento diferente de todos los standares. Por esto hay hacks que nos permiten introducir estilos o propiedades sólo para Internet Explorer.

Hacks: para Internet Explorer 6 tenemos el hack "_" y para Internet Explorer 6 y 7 tenemos el hack "#". A continuación mostraremos un ejemplo para ver como debemos utilizar estos hacks dentro de nuestra hoja de estilos.


//en todos los navegadores tendremos un margen de 10 pixeles
div img{width:100px;margin:10px;}

//en explorer 6 y 7 tendremos un margen de 15 pixeles
div img{width:100px;margin:10px;#margin:15px}

//en explorer 7 tendremos un margen de 15 pixeles y en explorer 6 un margen de 20 pixeles
div img{width:100px;margin:10px;#margin:15px;_margin:20px}


«Anterior

Trucos CSS (Tutorial parte 4) - Hacks de IE

Siguiente»

Trucos CSS (Tutorial parte 3) - Reset al CSS

¿Porqué hacer un reset del CSS?
La razón de hacer al principio del CSS un reset es igualar el comportamiento de todos los navegadores. Tenemos que tener en cuenta que no todos los navegadores tienen los mismos estilos por defecto.

Aquí es dónde nos encontramos con mayor diferencia. Internet Explorer funciona de diferente manera que el resto de navegadores como Firefox, Chrome, Opera, Safari, etc...

Al resetear el CSS facilitamos la maquetación de la página web. Empezamos a crear los estilos desde 0.

A continuación mostramos como hacer un reset de un CSS.
/****************************
*** RESET ***
****************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:??; }
abbr,acronym { border:0; }
form label { cursor:default }
a{outline:none;}
a img{border:0px}


«Anterior

Trucos CSS (Tutorial parte 3) - Reset al CSS

Siguiente»

Trucos CSS (Tutorial parte 2) - Dividir el CSS

Dividir el CSS en parte Pública y parte Privada, es decir, si nuestro portal tiene una parte que necesita identificar al usuario con login y password. En este caso vale la pena que creemos un CSS para la parte privada.
Ej: css_publico.css y css_privado.css

Con esta implementación mejoramos el tiempo de descarga del CSS. El navegadores renderizará más rápido los estilos y el usuario tendrá una mejor experiencia.

«Anterior

Trucos CSS (Tutorial parte 2) - Dividir el CSS

Siguiente»