{"id":1090,"date":"2024-07-08T10:30:00","date_gmt":"2024-07-08T13:30:00","guid":{"rendered":"https:\/\/kangaroo.host\/blog\/como-minificar-html-css-js\/"},"modified":"2025-07-14T16:39:05","modified_gmt":"2025-07-14T19:39:05","slug":"como-minificar-html-css-js","status":"publish","type":"post","link":"https:\/\/kangaroo.host\/blog\/como-minificar-html-css-js\/","title":{"rendered":"Como minificar HTML, JS, CSS?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Fala, Kangaroozinho. Como vai? Minificar o c\u00f3digo de recursos utilizados no site (como HTML, CSS e JS) \u00e9 uma pr\u00e1tica bastante recorrente por usu\u00e1rios que querem obter m\u00e1xima performance em seus sites, podendo ajudar um pouco tanto na melhoria da nota de velocidade em mecanismos de testes quanto em um singelo ganho de velocidade. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, vamos explicar hoje porqu\u00ea de voc\u00ea come\u00e7ar a fazer essa otimiza\u00e7\u00e3o e como hoje pode ser feito. Bora?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sum\u00e1rio<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Para que serve?<\/li>\n\n\n\n<li>Como minificar no WordPress<\/li>\n\n\n\n<li>Como fazer em sites n\u00e3o WordPress?<\/li>\n\n\n\n<li>Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Para que serve a minifica\u00e7\u00e3o de recursos?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/07\/Kangaroo-com-ajustes-para-minificar-recursos-htm-css-js-dosite.jpeg\" alt=\"Kangaroo com ajustes para minificar recursos htm css js do site\" class=\"wp-image-8759\"\/><figcaption class=\"wp-element-caption\">Imagem gerada por IA<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A minifica\u00e7\u00e3o consiste em reduzir o c\u00f3digo fonte de um determinado recursos, para deixar o arquivo final menor, permitindo um carregamento mais r\u00e1pido. De maneira geral, essa n\u00e3o \u00e9 uma estrat\u00e9gia que causa alto impacto, ou seja, ela n\u00e3o resulta em grandes ganhos de performance ou velocidade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contudo, essa \u00e9 uma pr\u00e1tica de desenvolvimento e tamb\u00e9m de  SEO bastante recomendada, j\u00e1 que em um mar de tantos sites, toda forma de destaque sempre \u00e9 mais que bem vinda, n\u00e9?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Normalmente, essa redu\u00e7\u00e3o \u00e9 feita ao remover coment\u00e1rios e linhas em branco do c\u00f3digo final, gerando algo que mais parece um bloco \u00fanico de c\u00f3digo em baralhado, j\u00e1 que as quebras de linhas tamb\u00e9m s\u00e3o revertidas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na maioria dos casos, isso gera uma redu\u00e7\u00e3o de alguns KBs nos arquivos otimizados, o que n\u00e3o \u00e9 muito individualmente, mas que pode trazer um ganho mais acentuado quando lembramos que s\u00e3o abertos mais arquivos na execu\u00e7\u00e3o de um site, o que significa que quantos mais arquivos s\u00e3o otimizados, maior tende a ser o ganho vindo dessa pr\u00e1tica.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como minificar HTML, CSS, JS no WordPress?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A minifica\u00e7\u00e3o de recursos dentro do <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> pode ser feita pela grande maioria dos plugins de otimiza\u00e7\u00e3o de site para ganho de performance, como o <a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\" target=\"_blank\" rel=\"noopener\">LiteSpeed Cache,<\/a> <a href=\"https:\/\/wordpress.org\/plugins\/wp-fastest-cache\/\" target=\"_blank\" rel=\"noopener\">WP Fastest Cache<\/a> e <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener\">WP Rocket<\/a>, por exemplo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esses plugins, assim como algumas outras op\u00e7\u00f5es, contam com o recurso de minifica\u00e7\u00e3o j\u00e1 integrada, permitindo fazer isso de forma extremamente simples e at\u00e9 mesmo com um \u00fanico bot\u00e3o, automatizando todo o processo diretamente atrav\u00e9s do plugin, sem que voc\u00ea precise interagir com uma \u00fanica linha de c\u00f3digo sequer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">E para sites n\u00e3o WordPress?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se o seu site n\u00e3o \u00e9 baseado em WordPress, e utiliza qualquer outra plataforma (ou n\u00e3o utiliza plataforma alguma), h\u00e1 uma forma universal para todos os sites que \u00e9 minificar manualmente os arquivos, sendo necess\u00e1rio coletar cada um dos arquivos que ser\u00e1 minificado e aplicar os ajustes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para tornar esse processo mais simples, existem ferramentas como o Code Beautify, que conta com v\u00e1rias ferramentas de minifica\u00e7\u00e3o que podem ser encontradas ao <a href=\"https:\/\/codebeautify.org\/minifier-tools\" target=\"_blank\" rel=\"noopener\">clicar aqui<\/a>. Essas ferramentas podem minificar diveros tipos de linguagens, podendo ser aplicadas em diversas funcionalidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lembre-se de, ap\u00f3s seguir com a minifica\u00e7\u00e3o, atualizar os seus arquivos em produ\u00e7\u00e3o usando as vers\u00f5es minificadas. Tamb\u00e9m pode ser necess\u00e1rio fazer uma limpeza de cache para garantir o funcionamento dos novos arquivos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Com essa nova t\u00e9cnica, seu site com certeza estar\u00e1 mais adequado \u00e0s melhores pr\u00e1ticas, podendo tamb\u00e9m j\u00e1 ter resultados na melhoria da velocidade de carregamento. O processo em si \u00e9 simples, mas o apoio de seu programador pode ser necess\u00e1rio para que o ajuste seja feito em todos os arquivos otimiz\u00e1veis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea gostou da dica, n\u00e3o deixe de continuar acompanhando <a href=\"\/blog\">nosso blog<\/a> para encontrar mais conte\u00fado como esse, e nos vemos na pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fala, Kangaroozinho. Como vai? Minificar o c\u00f3digo de recursos utilizados no site (como HTML, CSS e JS) \u00e9 uma pr\u00e1tica bastante recorrente por usu\u00e1rios que querem obter m\u00e1xima performance em seus sites, podendo ajudar um pouco tanto na melhoria da nota de velocidade em mecanismos de testes quanto em um singelo ganho de velocidade. Por [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1092,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78],"tags":[300,268,301,302,52,46,47,32,20],"class_list":["post-1090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","tag-css","tag-js","tag-minificacao","tag-minificar","tag-otimizacao","tag-performance","tag-recursos","tag-site","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/comments?post=1090"}],"version-history":[{"count":1,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1090\/revisions"}],"predecessor-version":[{"id":2593,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1090\/revisions\/2593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media\/1092"}],"wp:attachment":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media?parent=1090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/categories?post=1090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/tags?post=1090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}