Minificação de CSS e JS | Hummingbird – WordPress (Plugin)

Descrição Beija-flor

A velocidade de carregamento é um fator decisivo para melhorar a experiência do usuário e a classificação de um site nas páginas dos buscadores (SERP), especialmente no Google.

O Hummingbird é um plug-in que possui ótimos recursos que você pode aproveitar para melhorar a velocidade de carregamento do seu site WordPress para obter melhor desempenho e uma pontuação mais alta no Google Page Speed.

O que é o plug-in Hummingbird?

Hummingbird é um plug-in desenvolvido pela WPMU DEV para ajudar os usuários do WordPress a melhorar a velocidade de carregamento de seu site.

A ferramenta é um plug-in de cache, mas também possui outros recursos de otimização que você pode usar para melhorar o desempenho geral do seu site.

Entre esses recursos de otimização, podemos citar:

• Cache
• A capacidade de adiar folhas de estilo CSS e scripts JS
• Minificação de códigos CSS e JavaScript
• A integração do Lazy Loading
• Compressão de arquivo
• etc.

Milhões de arquivos são compactados todos os dias com mais de 100.000 downloads da versão gratuita do plug-in.

Hummingbird : Comment installer le plugin ?

A instalação do Hummingbird depende da versão do plugin que você deseja usar:

1. Instale a versão gratuita do Hummingbird do WordPress

A instalação do Hummingbird permanece bastante simples como qualquer outro plugin do WordPress.

• Para começar, vá para o painel do WordPress
• Na barra de menu à esquerda, clique em “Plugins” e depois em “Adicionar novo”
• Em seguida, procure por “Hummingbird” e clique no botão “Instalar agora”.
• Quando o download estiver concluído, clique em “Ativar”.

O Hummingbird acabou de ser instalado, você poderá acessar todos os recursos do plug-in diretamente no painel do WordPress.

2. Instalador Hummingbird Pro

Para quem deseja instalar a versão Pro do plug-in, você tem a plataforma WPMU DEV Hub com uma interface de gerenciamento tudo-em-um.

Essa opção facilita o gerenciamento de atualizações e a instalação de plug-ins e temas por meio de um único espaço de trabalho.

Beija-flor: As principais características do plugin

Aqui está uma lista das principais tarefas que você pode fazer com o plugin Hummingbird:

Configurar cache

Para configurar o cache com o Hummingbird:

• Vá para o painel do WordPress
• Clique em WP-Admin » Hummingbird » Caching
• Em seguida, clique em “Ativar” para ativar o módulo de cache do Hummingbird

Após ativar o módulo, você tem uma lista de parâmetros para configurar o cache do seu site como:

Pré-carregamento de cache: Por padrão, os arquivos de uma página são armazenados no cache somente após um primeiro internauta tentar acessar esta página. O recurso de pré-carregamento do cache permite simular uma primeira visita às suas páginas para acionar o processo de cache. Isso melhora a velocidade de carregamento de suas páginas imediatamente a partir do primeiro visitante real.

Cache móvel:Esse recurso permite que você decida se deseja ou não habilitar o cache para seus visitantes que usam dispositivos móveis.

Exclusões:O Hummingbird também oferece a opção de excluir especificamente determinados cookies, páginas ou URLs para evitar conflitos com programas de terceiros. Você também tem os botões de alternância para decidir facilmente qual conteúdo deseja ou não que seja considerado para armazenamento em cache.

Existem vários outros recursos que você pode descobrir noDocumentação oficial do colibri.

GGeralmente, na maioria dos casos, não será necessariamente necessário usar todos esses recursos. Você pode ativar o cache e deixar o restante das configurações padrão.

Mas se você estiver particularmente interessado em um recurso, pode ativá-lo, ir ao rodapé e clicar em “Salvar configurações”.

Combine e minifique arquivos

Combinar e reduzir arquivos é uma das melhores práticas para melhorar a velocidade de carregamento de um site. Este também é um recurso disponível no plugin Hummingbird.

Para ativá-lo:

• Vá para a seção “wp-admin” e clique em “Hummingbird” e “Otimização de ativos”.
• Em seguida, clique em “Ativar” para ativar o módulo de minificação e combinação de arquivos.

O plug-in executará uma verificação completa do seu site para identificar todos os arquivos que precisam ser otimizados.

Terminada a fase de análise, o Hummingbird exibe na tela a quantidade de arquivos identificados.

Você pode então decidir continuar com a fase de otimização do arquivo. uma vez issoAo final desta fase, a ferramenta exibe o número de arquivos otimizados, bem como o tamanhototal de arquivo que pode ser reduzido.

Os assinantesHummingbird Pro tera possibilidade de ativar adicionalmente o WPMU DEV CDN para maior desempenho com uma tabela de arquivos composta por 5 ícones, a saber:

• Minimizar:Para reduzir o tamanho do arquivo selecionado. Se for um arquivo já minificado, o ícone Minify » ficará esmaecido.
• Combinador:Este ícone é usado para combinar ou concatenar todas as suas folhas de estilo em um único arquivo CSS e todos os seus scripts em um único arquivo JavaScript. Isso torna o navegador mais leve, reduzindo o número de solicitações enviadas a ele. Assim, o navegador fica menos ocupado e as páginas carregam mais rápido.
• Mover scripts para o rodapé: esta é uma técnica que impede o bloqueio de renderizadores JavaScript e CSS.
• CSS embutido:Com este ícone, você pode mover o arquivo CSS selecionado e torná-lo diretamente acessível online.
• Não faça upload do arquivo:Como o nome já sugere, esse recurso permite bloquear o carregamento do arquivo selecionado. Pode ser útil caso você não precise necessariamente de um determinado script em seu site.

É verdade que comHummingbird, você tem a opção de habilitar a concatenação em massa de scripts. No entanto, recomenda-se proceder da seguinte forma para maior eficiência:

Combine arquivos JavaScript um por um:Para a concatenação de seus arquivos de script, seria mais criterioso passar pela lista de scriptis (identificados porBeija Flor)e concatenar manualmente um script por vez e salvar suas alterações. Em seguida, teste seu código de front-end para garantir que tudo esteja funcionando corretamente.

Se nenhum problema for encontrado, pule a concatenação do próximo script até que todos os scripts que você está direcionando sejam combinados. Isso diminuirá o número total de solicitações enviadas ao navegador e suas páginas carregarão mais rapidamente.

Minimize os arquivos JavaScript um por um:A minificação também é uma prática que contribui muito para melhorar a velocidade de carregamento do seu site. Porém, para maior eficiência, é recomendável reduzir cada arquivo de script separadamente. Para isso, o princípio permanece o mesmo com a concatenação.

Você navega na lista de scripts para minificar identificados automaticamente porbeija Flor, reduza um script por vez e salve suas alterações. Então teste seu ffront-end para garantir que tudo esteja funcionando perfeitamente.

Depois de configurar todos os elementos apresentados anteriormente, você deve notar que seu site está carregando mais rápido.

Beija-flor: preços

O plugin existe em duas versões:

• Versão Beija-flor gratuita 
• Versão paga do Hummingbird Pro a partir de $ 7,5 por mês com um período de teste gratuito de 7 dias para testar a ferramenta antes de assinar