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