cómo combinar widget webapp framework con archivos CSS y JS compatibles con SEO

Question

Estoy escribiendo una aplicación web usando Zend framework y un sistema de widgets homebrew. Cada widget tiene un controlador y puede elegir representar una de muchas vistas si lo desea. Esto realmente nos ayuda a modularizar, reconfigurar y reutilizar los widgets en cualquier parte del sitio.

El problema es que las vistas de cada widget contienen su propio código JS y CSS, lo que conduce a un código HTML muy desordenado cuando se junta toda la página. Obtiene bolsillos de etiquetas de estilo y guiones en todas partes. Esto es malo por muchas razones diferentes, estoy seguro de que lo sabes, pero también tiene un profundo efecto en nuestro SEO.

varias soluciones que he sido capaz de llegar a:

1. independiente de la CSS y JS de cada vista de cada control dentro de su propio archivo - esto tiene serios inconvenientes para los tiempos de carga (muchos más recursos tienen que cargarse por separado) y hace que la codificación sea muy difícil ya que ahora tienes que tener 3-4 archivos abiertos solo para editar un widget.

2. combina todo el widget CSS en un solo archivo (lo mismo con JS) - también daría lugar a una carga masiva cuando alguien ingresa al sitio, mezcla el CSS y el JS para todos los widgets por lo que es más difícil realizar un seguimiento de ellos, y otros problemas que estoy seguro que se les ocurre.

3. Cree un sistema que use el método 1 (CSS y JS separados para cada artilugio), al entregar la página, sutura todos los CSS y JS juntos. Esto, obviamente, necesita más tiempo de procesamiento y, por supuesto, la creación de un sistema de este tipo, etc.

Mi pregunta es lo que ustedes piensan de estas soluciones o si hay soluciones preexistentes, que usted sepa (o cualquier técnico que pueda ayudar) a resolver este problema. ¡Realmente aprecio todos tus pensamientos y comentarios!

Gracias chicos,

Ali

Answer 1

Sin duda para el tercer método. Obtiene la flexibilidad de separación descrita en el primer método, pero obtiene la capacidad de ajustar el rendimiento de su aplicación (como señala Pointy ..).

Todo lo que necesita es un sistema de registro central (una clase) que utilice para realizar un seguimiento de las hojas de estilo que deben cargarse.

Styles::add_sheet('widget_1.css'); 

Además, puede agregar un disparador (un método) para esta clase de manera que el código que maneja el almacenamiento en caché puede realizar un seguimiento de si la hoja de estilo concatenado debe ser reconstruir.

if (Styles::cache_needs_update()) { 
    // rebuild (concatenate) stylesheet and save in cache 
} 

ir aún más lejos, también se podría concatenar hojas de estilo por módulo o algún otro tipo de agrupación criterio. Cuando hay muchas hojas de estilo (o archivos js), estos grupos concatenados de hojas de estilo se pueden almacenar en caché por separado.

Los ejemplos de código anteriores se convertirían en algo así como

Styles::add_sheet('widget_1.css','group_name'); 

if (Styles::cache_needs_update('group_name')) { 
    // rebuild (concatenate) stylesheet for this 'group_name' and save in cache 
} 

Answer 2

Con el método 2, usted será capaz de tomar ventaja de almacenamiento en caché del navegador. Si corresponde, si el sitio tiene una página de entrada con "puerta de entrada" con navegación, etc. y no necesita la biblioteca de widgets, puede precargar el CSS y JS para las otras páginas después de cargando la página de destino.

Si ejecuta su JS a través de algo así como YUICompressor y luego se asegura de que el servidor gzips los archivos JS y CSS, realmente no está hablando de tantas cosas a menos que su código sea realmente flojo. Si aprovecha una biblioteca alojada en un sitio confiable como el repositorio API de Google, entonces probablemente pueda mantener su propio código más pequeño. (No sé nada de Zend, por lo que puede o no ser relevante.)

Answer 3

No estoy seguro si esto es posible en PHP, pero si puede diferir la transferencia de la página hasta que la página se haya procesado;

• tienen cada widget registrar su inclusión en la página utilizando algún método estático
• lugar un gancho en el canal de renderizado que lee y concatena todos los recursos necesarios para los widgets incluidos
• modificar la respuesta para incluir el
recursos
• envían la respuesta al cliente