Estou construindo um site Drupal 7. Estes são alguns dos módulos que eu uso: Adaptivetheme (tema), Exibições e painéis de conteúdo, Painéis, Mini painéis, Painéis em todos os lugares, Gerenciador de páginas, Superfish para menus, Addthis, Escolhido (suspenso).
Para melhorar o desempenho do meu site e lidar com os arquivos CSS e JS, estou usando o módulo Advagg .
Ao executar o teste do Google Pagespeed, estou recebendo o seguinte erro como "Deve corrigir":
Eliminar JavaScript e CSS de bloqueio de renderização no
conteúdo acima da borda Sua página tem 6 recursos de script de bloqueio e 8 recursos de CSS de bloqueio. Isso causa um atraso na renderização da sua página.
Nenhum conteúdo acima da dobra em sua página pôde ser renderizado sem aguardar o carregamento dos seguintes recursos. Tente adiar ou carregar de forma assíncrona os recursos de bloqueio ou embutir as partes críticas desses recursos diretamente no HTML.
Esta é a informação que o Google fornece:
Existe uma maneira de alterar as configurações do módulo Advagg ou do núcleo do Drupal e resolver esse problema?
Existe outra maneira de alcançar esse objetivo?
Atualização - após implementar as alterações de acordo com a resposta mikeytown2 , recebi a seguinte mensagem no teste Pagespeed do Google:
Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda
Sua página tem 6 recursos de script de bloqueio e 4 recursos de CSS de bloqueio. Isso causa um atraso na renderização da sua página.
Nenhum conteúdo acima da dobra em sua página pôde ser renderizado sem aguardar o carregamento dos seguintes recursos. Tente adiar ou carregar de forma assíncrona os recursos de bloqueio ou embutir as partes críticas desses recursos diretamente no HTML.
fonte
asyncnão seja suportado por navegadores antigos. Por exemplo, a agregação padrão do Drupal inclui<link>tags para todos os seus css. Se o CSS ou JS do seu site for muito complexo, você sempre terá esse problema. Se você criar seu site corretamente, poderá agregar arquivos com segurança. Sem informações sobre as dependências do arquivo, os detalhes da pergunta são muito amplos - um módulo nunca pode resolver seu problema; é tudo sobre como o CSS e JS são escritos e sua ordem e complexidade de inclusão. ele nunca disse que queria não bloquear, você assume que é isso que ele quer.Respostas:
O README possui um guia sobre como fazer isso usando a versão 7.x-2.31 + atual do AdvAgg . Veja também esta página wiki no grupo Alto desempenho . A maioria dos sites pode alcançar uma pontuação perfeita de 100/100 em https://developers.google.com/speed/pagespeed/insights/ . Instruções sobre como alcançá-lo para uma nova instalação do AdvAgg abaixo.
Verifique o site após cada seção para garantir que a alteração não atrapalhe o site. As alterações no AdvAgg Modifier geralmente são as mais problemáticas, mas oferecem as maiores melhorias.
Agregação avançada de CSS / JSVamos para
admin/config/development/performance/advagg- Selecione "Usar configurações recomendadas (otimizadas)"
AdvAgg Compactar JavascriptInstale o AdvAgg Compact Javascript se não estiver ativado e vá para
admin/config/development/performance/advagg/js-compress- Selecione JSMin, se disponível; caso contrário, selecione JSMin +
- Selecione Remover tudo (arquivos menores)
- Clique no link de compactação em lote para processar esses arquivos
Carregador de fontes AdvAgg AsyncInstale o AdvAgg Async Font Loader se não estiver ativado e vá para
admin/config/development/performance/advagg/font- Selecione Arquivo local incluído no agregado (versão: XXX). Se essa opção não estiver disponível, siga as instruções logo abaixo das opções de instalação.
- Marque "Use localStorage para que o flash de texto sem estilo (FOUT) aconteça apenas uma vez".
- Marque "Definir um cookie para que o flash de texto sem estilo (FOUT) aconteça apenas uma vez".
AdvAgg BundlerInstale o AdvAgg Bundler se não estiver ativado e vá para
admin/config/development/performance/advagg/bundlerConfigurações HTTP / 2.0
Configurações HTTP / 1.1 (padrão)
25 pacotes vs 2 e 5 tem a ver com o cache do navegador. Mais arquivos é igual a uma chance maior de o navegador ter essa combinação em seu cache, mas mais arquivos significa que mais conexões sejam estabelecidas e abertas no HTTP 1.1. Use 2 para CSS, pois esse número não espera por novas conexões; JS é 5, pois a maioria dos navegadores tem um limite de conexões simultâneas de 6. Esse número de pacotes configuráveis foi escolhido após muitos testes. No HTTP 2.0, há uma conexão de streaming e a penalidade para vários arquivos CSS e JS é quase inexistente; otimizar para o cache do navegador é a melhor opção; portanto, 25 devem ser usados para CSS e JS ao servir HTTP / 2.0.
Mudança de AdvAggInstale o AdvAgg Relocate se não estiver ativado e vá para
admin/config/development/performance/advagg/relocate- Selecione "Usar configurações recomendadas (otimizadas)"
Modificador AdvAggInstale o AdvAgg Modifier se não estiver ativado e vá para
admin/config/development/performance/advagg/mod- Selecione "Usar configurações recomendadas (otimizadas)"
Gerando arquivos CSS críticosAcesse https://www.sitelocity.com/critical-path-css-generator e insira quantas páginas de destino forem necessárias para css críticos; o top 10 é geralmente um bom começo. Se você possui o Google Analytics, mostrará como encontrar as principais páginas de destino https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages ou no Piwik https: //piwik.org/faq/how-to/faq_160/ . Se você não souber em qual página começar, faça a página inicial do seu site. Você também pode nos gerar este arquivo https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=pt-BR
Os nomes de arquivos e caminhos de exemplo abaixo são para o tema "bootstrap"; todos eles começam com
sites/all/themes/bootstrap/critical-css/; no seu tema, crie ocritical-css/diretório O próximo diretório é baseado no usuário;anonymous/,,all/ouauthenticated/pode ser usado.O próximo diretório pode ser
urls/outype/. Olhando paraurls/; front é um caso especial para a página inicial, todos os outros caminhos usam current_path () como o diretório e o nome do arquivo.cssadicionados ao final; Consulte https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.xObservando
type/isso, é um caso especial para tipos de nós. Use o nome da máquina e adicione.cssaté o final. Qualquer nó desse tipo terá esse arquivo css crítico aplicado e embutido. Abaixo estão alguns exemplos mostrando como isso funciona.localizações válidas de arquivos de exemplo para a página "frontal":
sites/all/themes/bootstrap/critical-css/anonymous/urls/front.csslocais de arquivo de exemplo válidos para a página "node / 1" current_path ():
sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.csslocais de arquivo de exemplo válidos para o tipo de nó de "página":
sites/all/themes/bootstrap/critical-css/anonymous/type/page.cssSe você deseja algum tipo de maneira automatizada de gerar esses arquivos css, o fourkitchens possui um excelente artigo sobre como configurar isso: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-theme
fonte
advagg/modpágina E / OU você não moveu Todas as JS para o rodapé. Além disso, se eu pudesse ver a fonte completa das páginas, que geralmente ajuda com recomendações (basta acessar o site).Você nunca obterá pontuações verdadeiramente altas com os módulos drupal pré-criados, a única maneira de conseguir isso é participando e analisando cuidadosamente cada uma das sugestões feitas pela ferramenta de velocidade do Google , abordando cada uma delas independentemente.
Algumas coisas que eu fiz para atingir 95 em um site de notícias muito ativo , que no momento em que eu escrevi isto, marcou melhor do que nytimes (Agora isso não acontece):
fonte