2010-07-04 5 views
5

En el contexto de la mejora rendimiento general sitio (la descarga y la velocidad de renderizado) parece que hay una contradicción entre las dos siguientes mejores prácticas:Mejores prácticas: ¿solo descarga CSS que necesita o utiliza un proceso de minificación?

  1. Sólo derribar el CSS que usted necesita para el bienestar página visto. (Debido a que demasiadas reglas de CSS causan renderización lenta)

  2. Siempre minimice CSS y combínelo en un solo archivo. (Debido a que más solicitudes significa más lenta carga de la página)

Ahora dicen que decido seguir la regla 1.

Los siguientes problemas surgen:

Qué si 2 páginas comparten 1 juego de reglas CSS ?

En este caso, necesito poner esas reglas en un archivo separado y hacer referencia a ese archivo desde ambas páginas.

Sin embargo, si empiezan a tener una gran cantidad de estas "reglas comunes", podría terminar referencia a una gran cantidad de archivos separados de cada página, y por lo tanto, infringir la regla 2.

Por ejemplo, la página A puede depender de CSS 1 y 2, mientras que las páginas B y C dependen de CSS 2 y la página D depende de CSS 1.

En este escenario, es imposible tener exactamente un CSS por página o incluso múltiples CSS por página. ya que algunas páginas necesitarán compartir algunos archivos CSS con otras páginas.

¿Pero no podemos resolver este problema combinando todos los CSS de cada página en un archivo CSS por página separado?

Podríamos, pero esto crearía otros problemas.

Si dos páginas comparten un fragmento de CSS, incluso si lo comprimimos a la perfección, todavía vamos a descargar ese fragmento repetidamente, cada vez que solicitamos una página cuyo CSS contiene ese fragmento.

Debido a que hemos comprimido el CSS por la página, hemos permitido que se produzcan redundancias cuando dos o más páginas comparten un fragmento de CSS.

El almacenamiento en caché del navegador no nos sirve de nada aquí porque para el navegador, cada archivo CSS tiene un nombre de archivo diferente y, por lo tanto, es un archivo independiente, aunque algunos contengan el mismo contenido.

Entonces, ¿qué regla deberíamos romper?

la que había tachar es:

1. Sólo se debe reducir el CSS que se necesita para la página que se está viendo.

creo que es mucho más simple y más práctico minify/combinar la mierda de todo el CSS para mi sitio, y bajarla en una vez.

En cuanto a los problemas de rendimiento que esto podría crear, creo que son disminuidos por los siguientes hechos:

  • navegadores modernos son cada vez más rápido en el procesamiento de reglas CSS, por lo que muy pronto ya no importará si tienes muchas reglas en la memoria que no están siendo usadas.

  • Tener toda su caché CSS mejorará la velocidad mucho más que cualquier mejora que ganaría dejando fuera de las reglas innecesarias, que van a conseguir cargado todos modos, cuando el usuario navega en las páginas que requieren esas reglas .

¿Estoy aquí?

+1

Respondería totalmente a esto, pero es muy tarde y es una novela para leer. Definitivamente debe minimizar su CSS y también debe combinar tanto como sea posible en un solo archivo. El cliente bajará el archivo una vez y lo almacenará en caché para usarlo en el futuro. Es mucho mejor que múltiples solicitudes HTTP. –

+0

Sí, irónicamente, mi pregunta podría quizás utilizar alguna minificación :) – Jonathan

Respuesta

2

1. Debe utilizar gzip

alt text http://shup.com/Shup/376348/1106472221-My-Desktop.png

http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method

http://paulstamatiou.com/how-to-optimize-your-css-even-more

Para asp.net

http://web2asp.net/2009/01/introduction-one-of-big-complaints.html

Editar:

2. y escribir selectores CSS eficiente

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

https://developer.mozilla.org/en/Writing_Efficient_CSS

3. Y la combinación de

http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html

RewriteEngine On 
RewriteBase/
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1 
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1 

4. Leer sugerencia de respuestas de esta pregunta CSS Performance issues


No me gusta tener varios archivos CSS para cada página . 4-5 archivos css es suficiente.

1. Common.css (with reset and common layout and typography and Form styling) 
2. pagespecific.css (css of home and other landing pages) 
3. print.css 
<---- ie only css --- > 
4. ie6.css 
5. ie7.css 
<--- > 

Y pelar el espacio en blanco de CSS hará que la edición sea difícil a través de FTP.

Aquí es un buen artículo sobre uno o css css múltiples http://css-tricks.com/unique-pages-unique-css-files/

+0

Creo que la cantidad de archivos CSS que tiene debe basarse en lo que tiene sentido para usted el desarrollador, y ¿cuál es la manera más fácil de mantener el código limpio, organizado y modular. No debería ser impulsado por preocupaciones de rendimiento. El rendimiento es importante, pero las mejoras de rendimiento deben separarse del diseño/diseño de CSS. – Jonathan

+0

@jonathanconway - a la derecha. Escribo css así que guardo 4-5 css siempre y estos son suficientes para mantener Code clean, organizado y modular. Este tema es persona dependiente por persona, una regla no puede ser adecuada para todos. –

+0

@ metal-gear-solid gzipping o no, la pregunta es acerca de la velocidad del 'renderizado de página' y no de la transferencia de datos – Frankie

0

Siempre hay compensaciones. Si te encuentras haciendo muchos archivos CSS y hay demasiadas dependencias tales que el seguimiento de qué archivo CSS se vuelve difícil, sería mejor crear uno (o como máximo dos) archivos CSS y minimizarlos.Afortunadamente sus archivos CSS no son locos.

+0

Personalmente, quiero minimizar la influencia de las preocupaciones sobre el rendimiento sobre el diseño/diseño de CSS. Quiero que el CSS sea agradable, limpio, modular, fácil de usar, etc. Quiero un proceso separado de compresión/minificación para encargarme de las preocupaciones de rendimiento/velocidad. Debido a lo anterior, estoy a favor de romper la primera regla, y simplemente minificar * todo * en * un * archivo, ya que esto me permite dividir mis archivos CSS de una manera que tenga sentido y sea fácil trabajar con el desempeño y preocuparse por él. luego. – Jonathan

1

Ésta es una vista muy agradable Mr.Jonathaxxx ..

sí estoy de acuerdo con usted, lo anterior, tanto el punto que traer son los principales puntos. Mi único comentario acerca de su primer punto que es ..

  1. Sólo se deberá reducir el CSS que se necesita para la página que se está ver. (Porque demasiadas reglas de CSS ralentizan la representación).

Creo que podemos lograr esto también.

En la aplicación web tendríamos un esqueleto común para todas las vistas de las aplicaciones. Podemos decirlo página Maestra. Todas nuestras diferentes páginas/vistas están adoptando desde allí. Entonces, hay una apariencia común entre todas las páginas. En ese caso, por qué no podemos crear una hoja de estilo solo para eso. Por lo tanto, se puede compartir entre todas las páginas/vistas. Esto puede ser un archivo de diseño.

Este es un archivo CSS.

A continuación, podemos generar otro CSS para los controles en la página o podemos vincular los estilos del control también en el archivo CSS de diseño.

Después de cualquier estilo que puedan tener las diferentes páginas, podemos tener un archivo diferente para ellas. Esto no aumentará la cantidad de archivos CSS para una sola página. Máximo una página obtendrá 2 o 3 hojas de estilo que son completamente relevantes. archivo CSS

[EDIT]

por defecto que siempre se almacena en caché y se utilizaría entre todas las páginas/Vistas de la aplicación.

6

Como siempre ambos casos son válidos.

Su solución tiene que ir con evaluación comparativa de sus clientes.

Pero probablemente me aferraría a solo un archivo CSS durante el tiempo que fuera posible. Y si su sitio crece hasta un tamaño tan extravagante si necesita dos archivos diferentes, intente utilizarlos en dos secciones de sitio muy diferentes, por ejemplo, site_general y logged_in.

Sin embargo, algunas cosas pueden ayudarle a:

  • compresa css con YUI Compressor (me da los mejores resultados)
  • tienen Apache (o lo que sea) deflate sus archivos CSS
  • y el más importante de todos, ¡asegúrese de que el archivo esté en la memoria caché por el usuario!


Mantenga Limpia CSS

Una cosa que usted puede encontrar útil después de tener varias carreras en desarrollo en un sitio es Dust-Me Selectors una extensión para Firefox que cubre su sitio para los selectores no utilizados.


Uso de selectores sabiamente (render velocidad!)

Probablemente todos los motores de selectores van de derecha a izquierda haciendo .parent div.myclass más rápido que div.parent .myclass. Al escribir su CSS tenga esto en cuenta. También recuerde que ID # es mucho más rápido que las clases. Aparte de eso, es lo habitual, evite los selectores universales, no desplace sobre elementos que no sean de enlace, ... Google has a great article en él.

Además de esa ejecución Firefox's Extension - Page Speed que le da una información muy detallada sobre los selectores lentos y mucho, mucho más.


Apache desinflado Ejemplodeflating is smaller than gzipping como Jeff puso tan amablemente para nosotros en su blog.

LoadModule deflate_module modules/mod_deflate.so 
<FilesMatch "\.(js|css|html|htm|php|xml)$"> 
    SetOutputFilter DEFLATE 
</FilesMatch> 

Apache almacenamiento en caché Ejemplo

# Set up caching on media files for 1 month as recommended by page speed 
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$"> 
    ExpiresDefault A2629744 
    Header append Cache-Control "public, proxy-revalidate" 
    Header append Vary "Accept-Encoding: *" 
</FilesMatch> 


Espero que ayude!

+0

Gracias Frankie, buenos consejos allí. Creo que dividir CSS comprimido por * sección de sitio * podría ser una buena idea, aunque incluso así, tendrás ese problema molesto de qué hacer con CSS que se comparte en ambas secciones. – Jonathan

+0

@jonathanconway usa un sistema de 3 archivos (general, secA, secB). – Frankie

+0

Otra respuesta útil, excepto que, desde mi punto de vista, la velocidad de representación no es tan importante. Simplemente evito usar el selector universal (estrella '*') esp. solo para el restablecimiento bruto '* {margen: 0; relleno: 0; } 'y eso está bien. Sin embargo, la optimización de imágenes y JS es importante, pero el efecto del CSS mal escrito no es tan importante desde un punto de vista de desempeño. – FelipeAls