Elimine JavaScript y CSS que bloquean el procesamiento en el contenido de la mitad superior de la página

30

Estoy construyendo un sitio Drupal 7. Estos son algunos de los módulos que uso: Adaptivetheme (tema), Vistas y paneles de contenido, Paneles, Mini paneles, Paneles en todas partes, Administrador de páginas, Superfish para menús, Addthis, Elegido (desplegable).

Para mejorar el rendimiento de mi sitio y tratar con los archivos CSS y JS, estoy usando el módulo Advagg .

Cuando ejecuto la prueba de Google Pagespeed, recibo el siguiente error como "Debería solucionarlo":

Elimine JavaScript y CSS que bloquean el procesamiento en el
contenido de la mitad superior de la página. Su página tiene 6 recursos de script de bloqueo y 8 recursos de CSS de bloqueo. Esto provoca un retraso en el procesamiento de su página.
Ninguno de los contenidos de la mitad superior de la página puede mostrarse sin esperar a que se carguen los siguientes recursos. Intente diferir o cargar asincrónicamente los recursos de bloqueo, o alinear las partes críticas de esos recursos directamente en el HTML.

Esta es la información que proporciona Google:

¿Hay alguna forma de cambiar la configuración del módulo Advagg o del núcleo de Drupal y resolver este problema?

¿Hay alguna otra forma de lograr este objetivo?

Actualización : después de implementar los cambios de acuerdo con la respuesta de mikeytown2 , recibí el siguiente mensaje en la prueba de Google Pagespeed:

Elimine JavaScript y CSS que bloquean el procesamiento en el contenido de la mitad superior de la
página. Su página tiene 6 recursos de script de bloqueo y 4 recursos de CSS de bloqueo. Esto provoca un retraso en el procesamiento de su página.
Ninguno de los contenidos de la página anterior puede mostrarse sin esperar a que se carguen los siguientes recursos. Intente diferir o cargar asincrónicamente los recursos de bloqueo, o alinear las partes críticas de esos recursos directamente en el HTML.

7 theming javascript performance EB84
fuente
No estoy seguro acerca de advagg, pero para el núcleo es no ir, no hay configuraciones como esta. Para Advagg no pude verlos, pero de todos modos me detuve a usarlo muy pronto. Tal vez hay configuraciones como esta ahora. Personalmente, publicaría una solicitud de soporte en su cola de problemas, preguntando sobre esto, y si el responsable de mantenimiento dijera que no están disponibles, cambiaría a la solicitud de función.
Mołot
Tu pregunta es demasiado amplia. Su sitio usa CSS y JS, al igual que cualquier otro sitio en Internet. Mientras se mantenga el orden en cascada de CSS, hay pocas razones por las que no puede agregar todo su CSS en 1 archivo. Mientras su JS esté bien encapsulado, no hay razón para que no pueda fusionarse en 1 archivo (como un ejemplo extremo). Si puede proporcionar detalles sobre qué archivos / recursos CSS y JS requiere la página; Es posible que pueda obtener respuestas más informadas.
Tenken
@tenken ¿cómo es demasiado amplio? Tiene CSS y JS vinculados de forma que bloquean el renderizado y los quiere de forma no bloqueante. Estas formas se explican bastante ( por Google, por ejemplo, ya que OP se refiere a las recomendaciones de Google Pagespeed). Su comentario no tiene nada que ver con el problema que solicitó OP.
Mołot
todos los archivos css y js vinculados se bloquean a menos que su código en línea o uso asyncno sea compatible con los navegadores antiguos Por ejemplo, la agregación predeterminada de Drupal incluye <link>etiquetas para todos sus CSS. Si su sitio CSS o JS es demasiado complejo, siempre tendrá este problema. Si construye su sitio correctamente, puede agregar archivos de forma segura. Sin información sobre las dependencias del archivo, los detalles de la pregunta son demasiado amplios: un módulo nunca puede solucionar su problema; Se trata de cómo se escribe el CSS y JS y su orden de inclusión y complejidad. nunca dijo que quería no bloquear, suponiendo que eso es lo que quiere.
tenken
@tenken Actualicé mi pregunta y di más información sobre los módulos. Espero que esto te ayude a entender qué CSS y JS uso.
EB84

Respuestas:

42

El archivo README tiene una guía sobre cómo hacerlo utilizando la versión actual 7.x-2.31 + de AdvAgg . Consulte también esta página wiki en el grupo de alto rendimiento . La mayoría de los sitios pueden lograr una puntuación perfecta de 100/100 en https://developers.google.com/speed/pagespeed/insights/ . Instrucciones sobre cómo lograrlo para una nueva instalación de AdvAgg a continuación.

Asegúrese de revisar el sitio después de cada sección para asegurarse de que el cambio no estropeó su sitio. Los cambios en AdvAgg Modifier suelen ser los más problemáticos, pero ofrecen las mayores mejoras.

Agregación avanzada de CSS / JS

Ir admin/config/development/performance/advagg

  • Seleccione "Usar configuración recomendada (optimizada)"
AdvAgg Compress Javascript

Instale AdvAgg Compress Javascript si no está habilitado y vaya a admin/config/development/performance/advagg/js-compress

  • Seleccione JSMin si está disponible; de lo contrario, seleccione JSMin +
  • Seleccione Strip todo (archivos más pequeños)
  • Haga clic en el enlace de compresión por lotes para procesar estos archivos
AdvAgg Async Font Loader

Instale AdvAgg Async Font Loader si no está habilitado y vaya a admin/config/development/performance/advagg/font

  • Seleccione Archivo local incluido en el agregado (versión: XXX). Si esta opción no está disponible, siga las instrucciones justo debajo de las opciones sobre cómo instalarla.
  • Marque "Usar localStorage para que el destello de texto sin estilo (FOUT) solo ocurra una vez".
  • Marque "Establecer una cookie para que el destello de texto sin estilo (FOUT) solo ocurra una vez".
AdvAgg Bundler

Instale AdvAgg Bundler si no está habilitado y vaya a admin/config/development/performance/advagg/bundler

Configuraciones HTTP / 2.0

  • En "Número objetivo de paquetes CSS por página", seleccione 25
  • En "Número objetivo de paquetes JS por página", seleccione 25
  • En "Lógica de agrupación", seleccione "Tamaño de archivo"

Configuración HTTP / 1.1 (predeterminado)

  • En "Número objetivo de paquetes CSS por página", seleccione 2
  • En "Número objetivo de paquetes JS por página", seleccione 5
  • En "Lógica de agrupación", seleccione "Tamaño de archivo"

25 paquetes contra 2 y 5 tienen que ver con el almacenamiento en caché del navegador. Más archivos equivale a una mejor oportunidad de que el navegador tenga ese combo en su caché, pero más archivos significa que se establecen y abren más conexiones en HTTP 1.1. Use 2 para CSS ya que este número no espera ninguna conexión nueva; JS es 5 ya que la mayoría de los navegadores tienen un límite de conexiones simultáneas de 6. Este número para paquetes se seleccionó después de muchas pruebas. En HTTP 2.0 hay una conexión de transmisión y la penalización por múltiples archivos CSS y JS es casi inexistente; Por lo tanto, la optimización para el caché del navegador es la mejor opción; por lo tanto, 25 debe usarse para CSS y JS cuando se sirve HTTP / 2.0.

AdvAgg Relocate

Instale AdvAgg Relocate si no está habilitado y vaya a admin/config/development/performance/advagg/relocate

  • Seleccione "Usar configuración recomendada (optimizada)"
Modificador AdvAgg

Instale AdvAgg Modifier si no está habilitado y vaya a admin/config/development/performance/advagg/mod

  • Seleccione "Usar configuración recomendada (optimizada)"
Generando archivos CSS críticos

Vaya a https://www.sitelocity.com/critical-path-css-generator e ingrese tantas páginas de destino como sea necesario para css crítico; el top 10 suele ser un buen comienzo. Si tiene Google Analytics, esto le mostrará cómo encontrar sus principales páginas de destino https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages o para Piwik https: //piwik.org/faq/how-to/faq_160/ . Si no sabe con qué página comenzar, haga la página de inicio de su sitio. También puedes usar esto para generar css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=en

Ejemplos de nombres de archivo y rutas a continuación son para el tema "bootstrap"; todos comienzan con sites/all/themes/bootstrap/critical-css/; en tu tema crea el critical-css/directorio. El siguiente directorio se basa en el usuario; anonymous/, all/O authenticated/puede ser utilizado.

El siguiente directorio puede ser urls/o type/. Mirando urls/; front es un caso especial para la portada, todas las demás rutas usan current_path () como el directorio y el nombre de archivo con .cssagregado al final; Ver https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

Ver type/esto es un caso especial para los tipos de nodos. Use el nombre de la máquina y agregue .cssal final. Cualquier nodo de este tipo tendrá este archivo css crítico aplicado y en línea. A continuación hay algunos ejemplos que muestran cómo funciona esto.

ubicaciones válidas de archivos de ejemplo para la página "frontal": sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

ubicaciones de archivo de ejemplo válidas para la página "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

ubicaciones válidas de archivos de ejemplo para el tipo de nodo de "página": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Si desea algún tipo de forma automatizada para generar estos archivos css, fourkitchens tiene un excelente artículo sobre cómo configurarlo: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-theme

mikeytown2
fuente
¡Esta es una gran descripción de cómo usar AdvAgg! Gracias. Tal vez este texto podría ser el comienzo de una página de "documentación" vinculada a la página de su proyecto :)
tenken
Ya lo hice :) drupal.org/node/2189523#comment-8594829
mikeytown2
@ mikeytown2 gracias por la gran respuesta. Implementé todos los cambios y actualicé la pregunta. Obtuve un puntaje un poco más alto, ¡gracias!
EB84
Al observar el resultado, parece que no ha marcado todas las casillas en Optimizar JavaScript Ordering en la advagg/modpágina Y / O no ha movido Todos los JS al pie de página. Además, si pudiera ver la fuente completa de las páginas que generalmente ayuda con las recomendaciones (solo enlace a su sitio).
mikeytown2
Gracias por proporcionar esa información. Si desea menos archivos css en la página, vaya a advagg / bundler y cambie el valor css de 4 a 1. Eso le dará una mejor puntuación, pero tenga en cuenta los comentarios que hice anteriormente sobre hacerlo. Parece que el tema adaptativo usa drupal_add_html_head () para agregar js condicionales del navegador, tendré que verificar que es lo que está sucediendo; significa que más de 1 tema necesita drupal.org/node/2217451 . También he creado este problema para abordar el bloqueo de render css drupal.org/node/2223267
mikeytown2
2

Nunca obtendrá puntajes verdaderamente altos con los módulos drupal preconstruidos, la única forma de lograr esto es asistiendo y analizando cuidadosamente cada una de las sugerencias hechas por la herramienta de velocidad de Google , abordando cada una de ellas de forma independiente.

Algunas cosas que hice para lograr 95 en un sitio de noticias muy activo , que para cuando escribí esto, obtuvieron mejores puntajes que nytimes (ahora no lo hace):

  • [secuencias de comandos de bloqueo] Retrasar la ejecución de secuencias de comandos de terceros como sharethis, widgets de Facebook, google plus, etc., para que se ejecuten solo después de que la página se haya procesado por completo. Esto requirió algunos reemplazos de cadena simples en la salida de html.tpl.php para capturar esos scripts y ponerlos en cola para su posterior ejecución.
  • [secuencias de comandos de bloqueo] Almacene la variable $ scripts de html.tpl.php (con json_encode) en una variable javascript para ponerlas en cola para que se ejecuten después de la primera carga de la página. Esto no es natural, pero es necesario. Algunos problemas específicos del navegador tuvieron que resolverse.
  • [bloqueo de CSS] Implementado algo similar a la técnica de Keith Clark , pero con rel = "prefetch". Esto introduce la necesidad de resolver la FOUC .
  • [Minificación y compresión] Externalice la compresión y la minificación a un servidor de distribución donde pueda usar imagemagic, yui-compressor, pngoptim y más cosas para superar esas reglas, sin convertir la instalación de drupal en un desastre inmanejable.
jacmkno
fuente