PHP CSS - más rápido / buenas prácticas para cargar un archivo externo o eco en la cabeza?

StackOverflow https://stackoverflow.com/questions/4687525

Pregunta

Me gustaría saber si es mejor a

A) incluyen archivos CSS externos utilizando <link> o

B) de eco / ras / imprimir el CSS directamente en el <head>.

En lo personal, me gusta la opción B, ya que permite

  • eliminación de los comentarios / minifying
  • usando css colocado por encima del directorio raíz
  • compresión de varios ficheros css = menos HTTP solicita

Antes de poner esto en práctica, es que hay una gran razón por la que debe (no)?

¿Fue útil?

Solución

Una opción le dará una solicitud HTTP extra, pero el navegador guarda el archivo CSS en una memoria caché así que no es un gran problema.

Por otra parte, incluso si la opción B se ahorrará una petición HTTP, la página HTML será considerablemente más grande y el navegador no será capaz de almacenar en caché de la página HTML si hay cambios frecuentes en él. Por lo que el servidor tendrá que manejar más la transferencia de datos.

Para páginas donde el contenido se modifica muy raramente, utilice la opción B. De lo contrario, utilice la opción A.

Otros consejos

Si usted está planeando un sitio web muy alto tráfico, y luego ir por B (como se ha comentado más adelante, no es una buena idea a menos que su html casi nunca cambio, como Google portada). A mi personalmente me gusta, ya que le permite mantener el estilo lejos de su html y le permite utilizar hojas de estilo específicas para diferentes medios de comunicación o incluso cambiar de uno a otro con facilidad. También es fácil de mantener (con versiones) y se extienden.

Si usted es preocuparse por las solicitudes, a continuación, trabajar en las imágenes. Puede añadir todas sus imágenes como base 64 en su css y prevenir muchas peticiones con la imagen que el uso o la técnica de lavado de varios iconos.

También puede minify su línea de CSS y poner todas sus hojas de estilo CSS en un archivo usando un lado de la escritura o el servidor de codificación.

mis 5cents.

Lo mejor es ir con la opción (A) para almacenar en caché los propósitos, pero no miedo, puede obtener los beneficios de la opción B, así! Simplemente el nombre de su archivo css con una extensión php y luego incluirlo en la etiqueta de enlace. PHP continuación, analizar este archivo antes de enviarlo al navegador para que pueda eliminar los comentarios / minify o incluir un archivo CSS que está en cualquier lugar en el servidor. En cuanto a su tercer punto, si el navegador almacena en caché, entonces es 2 solicita la primera vez, pero entonces sólo 1 solicitud del segundo tiempo por lo general se obtiene menos solicitudes.

Usted será mucho mejor en el largo plazo la carga de una hoja de estilo externa a través de una etiqueta en el encabezado del documento. Esto permite que el navegador almacena en caché la hoja de estilo una vez que se ha cargado y usted no tendrá que descargarlo en cada petición.

Si usted está preocupado por minifying la hoja de estilo se puede hacer eso con una serie de herramientas - Ver ¿Alguna recomendación para un Minifier CSS? para un montón de recomendaciones.

respuesta corta es que no se debe utilizar el método B. Se puede leer a continuación por qué creo que no debería hacerlo de esa manera.

Se debe mantener el tamaño de archivo del archivo HTML principal lo más pequeño posible porque no se puede almacenar en caché el archivo (la mayoría de las veces debido a la naturaleza dinámica de eso).

No debe hacer la optimización prematura cuando se prueba de forma local. Pero cuando se implementa el código que debe minify CSS y combinar todos los archivos en un solo archivo. Asimismo, no se olvide de dar un archivo CSS futuro lejano caduca encabezado (almacenamiento en caché es muy importante).

Yahoo! 'S mejores prácticas para acelerar su sitio web también le da mucha de la información (una gran parte de mi respuesta se basa en que la lectura) la forma de acelerar su sitio web y es una muy buena lectura.

La respuesta correcta depende de la finalidad de la página y cómo se estructura el estilo.

En el sitio de trabajo que en adelante tenemos algunas páginas clave en las que la velocidad de la página es un factor clave (la página de destino donde la gente puede descargar nuestro software, por ejemplo), pero también queremos almacenar en caché nuestra CSS para los visitantes que ven más de una página o pueden volver a aparecer en el futuro próximo.

También rara vez tienen un solo archivo CSS, una configuración común podría ser: un archivo CSS reset template.css un archivo con el estilo general del sitio compartido por todas las páginas un archivo CSS por página definir reglas específicas para la página que no es necesario el almacenamiento en caché un archivo css IEFix para la compatibilidad de Internet Explorer

el restablecimiento CSS, archivos y template.css IRfix son buenos candidatos para la minimización como un único archivo externo que se almacena en caché.

El archivo CSS por página es un buen candidato para su inclusión en una etiqueta, ya que no está destinado a ser reutilizado y el costo de una petición HTTP suele ser mayor que el costo del tiempo de bytes transferidos.

Si usted tiene páginas con el estilo de una específica no se comparte a través del sitio, en línea todo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top