Dicas para otimizar JavaScript, CSS e HTML no WordPress

Use o canivete suiço do WordPress a seu favor e aprenda a usar o minify de arquivos imediatamente! Confiras as dicas para otimizar JavaScript, CSS e HTML.

Dicas para otimizar JavaScript, CSS e HTML no WordPress. Que o WordPress é um canivete suíço todo mundo está cansado de saber. Porém, entretanto, todavia, do que adianta termos um CMS extremamente completo em mãos, se ele tende a ficar encalhado em águas rasas?

Bom, se você possui um site ou blog WordPress cuja velocidade está aquém do esperado, saiba que a solução pode ser mais simples do que você imagina. Inclusive, de fácil acesso até mesmos para aqueles que não entendem muito de códigos.

Nos dias atuais, ter um site rápido é sinônimo de melhor rankeamento na SERP e, consequentemente, melhor conversão. Ou seja, sites lentos tendem a perder posições nas buscas do Google. Diminuindo drasticamente seus níveis de tráfego orgânico.

Dicas para otimizar JavaScript, CSS e HTML no WordPress

Use códigos JavaScript da forma correta

A renderização de bloqueio do JavaScript é, sem dúvidas, um dos primeiros problemas a serem resolvidos. O navegador, ao carregar uma página web, carrega em primeiro plano todos os JavaScripts dispostos nela. Somente após este carregamento que os demais itens da página são devidamente carregados.

Para resolver este problema basta usar o carregamento assíncrono (atributo: async) em seus códigos. Ou adiar o carregamento JavaScript (atributo: defer) até que toda página seja exibida para o visitante. Ou simplesmente aplicar o código abaixo no arquivo functions.php do seu template WordPress:

/* =================================================== */
/* MAKE JAVASCRIPT DEFER
====================================================== */
add_filter( 'script_loader_tag', function ( $tag, $handle ) {    
    if( is_admin() ) {
        return $tag;
    }
    return str_replace( ' src', ' defer src', $tag );
}, 10, 2 );

Minify HTML: comprimindo e encolhendo os códigos

Assim como o JavaScript, otimizar o código HTML da página web também é altamente recomendado para reduzir o tempo de carregamento de um site. Se o seu site é baseado em WordPress, então basta usar o código abaixo no arquivo functions.php do seu template WordPress:

/* =================================================== */
/* MINIFY HTML
====================================================== */	
add_action('get_header', 'gkp_html_minify_start');
function gkp_html_minify_start()  {
    ob_start( 'gkp_html_minyfy_finish' );
}
function gkp_html_minyfy_finish( $html )  {
   // Suppression des commentaires HTML 
   $html = preg_replace('/<!--(?!s*(?:[if [^]]+]|!|>))(?:(?!-->).)*-->/s', '', $html);
   // Suppression des espaces vides
   $html = str_replace(array("\r\n", "\r", "\n", "\t"), '', $html);
   while ( stristr($html, '  ')) 
       $html = str_replace('  ', ' ', $html);
   return $html;
}

Otimizando a folha de estilo CSS

Outro item importante no processo de carregamento de um site é a folha de estilos CSS não otimizada. Assim como o JavaScript, o CSS também precisa ser usado de forma correta. Sendo assim, é de suma importância que ele esteja bem otimizado. Para isso recomendamos usar o CSS Minifier. Site onde basta você colar seu código CSS para que ele imediatamente entregue o código “minificado”, ou seja, comprimido/encolhido.

Minify de arquivos usando a Mônica para Clientes

Contudo, se mesmo com as opções de códigos descritas acima você sentir receio de editar o arquivo functions.php do seu template, não se preocupe! A nossa querida e amada Mônica para Clientes tem uma fórmula mágica para realizar o Minify de arquivos de forma simples, prática e totalmente automática.

Suporte Técnico

Enfim, se mesmo após estas várias dicas você não quiser otimizar com suas próprias mãos o template WordPress do seu site/blog, apenas relaxe e deixe isso conosco! Nosso Suporte Técnico está pronto para lhe atender imediatamente.

 

Quero ser cliente da PortoFácil!Contato

Avalie este conteúdo!

Avaliação média: 5
Total de Votos: 3
Dicas para otimizar JavaScript, CSS e HTML no WordPress

Compartilhe

Publicado por Celso Junior – 05 de setembro de 2019