Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

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.

7 theming javascript performance

— EB84
fonte

Não tenho certeza sobre o advagg, mas para o núcleo não é necessário, não há configurações como essa. Para advagg, não os vi, mas parei para usá-lo em breve. Talvez haja configurações como essa agora. Pessoalmente, eu postaria uma solicitação de suporte na fila de problemas, perguntando sobre isso e, se o mantenedor disser que não está disponível, mudaria para solicitação de recurso.

— Mołot 20/03

Sua pergunta é muito ampla. Seu site usa CSS e JS - assim como todos os outros sites da Internet. Desde que a ordem em cascata do CSS seja mantida, há poucas razões para você não poder agregar todo o seu CSS em um arquivo. Enquanto seu JS estiver encapsulado, ok, não há razão para que ele não possa ser mesclado em 1 arquivo (como um exemplo extremo). Se você pode fornecer detalhes sobre quais arquivos / recursos CSS e JS são necessários pela página; você poderá obter respostas mais informadas.

— Tenken

@tenken como é muito amplo? Ele tem CSS e JS vinculados de maneira bloqueadora de renderizações e os deseja de maneira não bloqueadora. Essas maneiras são bem explicadas ( pelo Google, por exemplo, como OP refere-se às recomendações do Google Pagespeed). Seu comentário não tem nada a ver com o problema solicitado pelo OP.

— Mołot 20/03

todos os arquivos css e js vinculados são bloqueados, a menos que seu código embutido ou uso 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.

— Tenken #

@tenken Atualizei minha pergunta e dei mais informações sobre os módulos - espero que ajude você a entender quais CSS e JS eu uso.

— EB84

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 / JS

Vamos para admin/config/development/performance/advagg

Selecione "Usar configurações recomendadas (otimizadas)"

AdvAgg Compactar Javascript

Instale 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 Async

Instale 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 Bundler

Instale o AdvAgg Bundler se não estiver ativado e vá para admin/config/development/performance/advagg/bundler

Configurações HTTP / 2.0

Em "Número alvo de pacotes CSS por página", selecione 25
Em "Número de destino de pacotes JS por página", selecione 25
Em "Lógica de agrupamento", selecione "Tamanho do arquivo"

Configurações HTTP / 1.1 (padrão)

Em "Número alvo de pacotes CSS por página", selecione 2
Em "Número de destino de pacotes JS por página", selecione 5
Em "Lógica de agrupamento", selecione "Tamanho do arquivo"

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 AdvAgg

Instale o AdvAgg Relocate se não estiver ativado e vá para admin/config/development/performance/advagg/relocate

Selecione "Usar configurações recomendadas (otimizadas)"

Modificador AdvAgg

Instale 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íticos

Acesse 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 o critical-css/diretório O próximo diretório é baseado no usuário; anonymous/,, all/ou authenticated/pode ser usado.

O próximo diretório pode ser urls/ou type/. Olhando para urls/; 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.x

Observando 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.css

locais de arquivo de exemplo válidos para a página "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

locais de arquivo de exemplo válidos para o tipo de nó de "página": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Se 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

— mikeytown2
fonte

Esta é uma ótima visão geral de como usar o AdvAgg! Obrigado. Talvez este texto pode ser que início de uma página vinculada "documentação" para sua página do projeto :)

— Tenken

Já fizemos isso :) drupal.org/node/2189523#comment-8594829

— mikeytown2

@ mikeytown2 obrigado pela ótima resposta. Eu implementei todas as alterações e atualizei a pergunta. Eu consegui uma pontuação um pouco maior - obrigado!

— EB84 21/03/14

Observando a saída, parece que você não marcou todas as caixas em Otimizar pedido de JavaScript na 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).

— precisa saber é o seguinte

Obrigado por fornecer essa informação. Se você quiser menos arquivos css na página, vá para advagg / bundler e altere o valor css de 4 para 1. Isso fornecerá uma pontuação melhor, mas lembre-se dos comentários que fiz acima. Parece que o tema adaptável usa drupal_add_html_head () para adicionar js condicionais do navegador. Precisarei verificar se é isso que está acontecendo; significa que mais de um tema precisa de drupal.org/node/2217451 . Também criei esta questão para resolver a tornar bloqueando css drupal.org/node/2223267

— mikeytown2

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):

[scripts de bloqueio] Atraso na execução de scripts de terceiros, como sharethis, widgets do facebook, google plus, etc., para serem executados somente após a página ter sido totalmente renderizada. Isso exigiu algumas substituições simples de string na saída do html.tpl.php para capturar esses scripts e colocá-los na fila para execução posterior.
[scripts de bloqueio] Armazene a variável $ scripts de html.tpl.php (com json_encode) em uma variável javascript para enfileirá-las para execução após o carregamento da primeira página. Isso não é natural, mas necessário. Alguns problemas específicos do navegador tiveram que ser resolvidos.
[blocking css] Implementou algo semelhante à técnica de Keith Clark , mas com rel = "prefetch". Isso introduz a necessidade de resolver o FOUC .
[Minificação e compactação] Externalize a compactação e a minificação para um servidor de distribuição onde eu possa usar imagemagic, yui-compressor, pngoptim e mais outras coisas para superar essas regras, sem transformar a instalação drupal em uma bagunça incontrolável.

— jacmkno
fonte