{"id":5014,"date":"2017-05-15T11:36:28","date_gmt":"2017-05-15T14:36:28","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=5014"},"modified":"2025-05-23T15:58:00","modified_gmt":"2025-05-23T18:58:00","slug":"melhorando-a-performace-minifying-css-html-e-javascript","status":"publish","type":"post","link":"\/br\/tutoriais\/melhorando-a-performace-minifying-css-html-e-javascript\/","title":{"rendered":"Melhorando o desempenho do site &#8211; minify CSS, HTML e JavaScript"},"content":{"rendered":"<p>Antes de tudo, voc&ecirc; sabe o que &eacute; Minify? Minify &eacute; um termo de programa&ccedil;&atilde;o que se refere a um processo de remo&ccedil;&atilde;o de caracteres desnecess&aacute;rios para que o c&oacute;digo seja executado. Minificando o c&oacute;digo, acelera o carregamento da p&aacute;gina e resulta em visitantes felizes. Em resumo, este processo ir&aacute; remover caracteres de espa&ccedil;o em branco desnecess&aacute;rios, novos caracteres de linha, coment&aacute;rios e delimitadores de bloco do seu c&oacute;digo. Esses tipos de caracteres s&atilde;o usados para fins de legibilidade e visual, mas eles n&atilde;o s&atilde;o necess&aacute;rios para o c&oacute;digo executar corretamente. No resultado final, a minifica&ccedil;&atilde;o acelerar&aacute; o download, a an&aacute;lise e o tempo de execu&ccedil;&atilde;o.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-30339\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-o-que-voce-precisa\"><strong>O que voc&ecirc; precisa?<\/strong><\/h2><p>Antes de come&ccedil;ar este guia, voc&ecirc; precisar&aacute; do seguinte:<\/p><ul class=\"wp-block-list\">\n<li>Acesso FTP.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-passo-1-localizando-arquivos-css-html-javascript-nao-minificados\"><strong>Passo 1 &ndash; Localizando arquivos CSS, HTML, JavaScript n&atilde;o-minificados.<\/strong><\/h2><p>Para esta etapa, recomendamos usar <u><a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GTMetrix<\/a><\/u>. &nbsp;Analisamos um WordPress j&aacute; criado e recebemos uma lista de arquivos que podem ser minificados.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/minify-css-1.png\" alt=\"minify css 1\"><\/figure><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/minify-js-1.png\" alt=\"minify js 1\"><\/figure><h2 class=\"wp-block-heading\" id=\"h-passo-2-substituindo-arquivos-nao-minificados\"><strong>Passo 2 &ndash; Substituindo arquivos n&atilde;o-minificados<\/strong><\/h2><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                IMPORTANTE! Seguran&ccedil;a sempre vem em primeiro lugar. Antes de fazer qualquer altera&ccedil;&atilde;o adicional, certifique-se de executar um backup do seu site WordPress atual ou um backup dos arquivos separados que ser&atilde;o substitu&iacute;dos.\n            <\/p><\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-opcao-1-substituicao-manual\"><strong>Op&ccedil;&atilde;o 1. Substitui&ccedil;&atilde;o manual<\/strong><\/h4><p>O mais&nbsp;fant&aacute;stico sobre o <u><a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GTMetrix<\/a><\/u>&nbsp;&eacute; que voc&ecirc; pode ver imediatamente a vers&atilde;o otimizada de arquivos CSS, JS e HTML pressionando o bot&atilde;o <strong>Ver vers&atilde;o otimizada<\/strong>&nbsp;ao lado do nome do arquivo. Depois disso, o arquivo otimizado ser&aacute; baixado ou aberto no navegador. Usando qualquer cliente FTP, substitua os arquivos antigos pelo <strong>mesmo nome<\/strong>&nbsp;de arquivo que antes ou copie e substitua o pr&oacute;prio c&oacute;digo.<\/p><h4 class=\"wp-block-heading\" id=\"h-opcao-2-plug-ins-do-cms\"><strong>Op&ccedil;&atilde;o 2. Plug-ins do CMS<\/strong><\/h4><p>Os usu&aacute;rios do WordPress podem usar plugins como <u><a href=\"https:\/\/wordpress.org\/plugins\/bwp-minify\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Better WordPress Minify<\/a><\/u>&nbsp;ou <u><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3 Total Cache<\/a><\/u>&nbsp;para alcan&ccedil;ar o mesmo objetivo.\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-opcao-3-cloudflare\"><strong>Op&ccedil;&atilde;o 3. CloudFlare<\/strong><\/h4><p>CloudFlare &ndash; um servi&ccedil;o gratuito que acelera e protege o seu site por ser um proxy entre os visitantes e o servidor de hosts do site. Ele oferece prote&ccedil;&atilde;o contra ataques DDoS e, o melhor de tudo, &eacute; gratuito. Uma das caracter&iacute;sticas que o plano livre inclui &eacute; uma ferramenta para minify CSS, HTML e JS. Voc&ecirc; pode ativar a minifica&ccedil;&atilde;o de recursos atrav&eacute;s da se&ccedil;&atilde;o <strong>Desempenho -&gt; Auto-Minify<\/strong>:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/cloudflare-minify-1.png\" alt=\"cloudflare minify 1\"><\/figure><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/cloudflare-minify-2.png\" alt=\"cloudflare minify 2\"><\/figure><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                IMPORTANTE! N&atilde;o &eacute; recomendado usar o Auto Minify do CloudFlare se voc&ecirc; j&aacute; estiver usando um plugin de minifica&ccedil;&atilde;o, como o <u><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">W3 Total Cache<\/a><\/u>. Al&eacute;m disso, CloudFlare n&atilde;o minifica scripts de terceiros e links (Facebook, Twitter).\n            <\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-passo-3-testando-as-alteracoes\"><strong>Passo 3 &ndash; Testando as altera&ccedil;&otilde;es<\/strong><\/h2><p>Depois de substituir os arquivos\/c&oacute;digo com a vers&atilde;o minified, a &uacute;ltima coisa a fazer &eacute; testar. Isso pode ser feito executando outra an&aacute;lise com o <u><a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GTMetrix<\/a><\/u>. Para compara&ccedil;&atilde;o, aqui est&atilde;o os resultados depois de substituir arquivos antigos com os minificado:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/minify-css-2.png\" alt=\"minify css 2\"><\/figure><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/minify-js-2.png\" alt=\"minify js 2\"><\/figure><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Neste breve guia, aprendemos como melhorar&nbsp;o desempenho do seu site minificando CSS, JavaScript e HTML. Caso tenha alguma d&uacute;vida sobre esse tutorial, entre em contato conosco atrav&eacute;s dos coment&aacute;rios ou com a nossa equipe de suporte.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.hostinger.com\/br\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"164\" height=\"40\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/button_fale-conosco.png\/public\" alt=\"Fale-conosco\" class=\"wp-image-6309\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/button_fale-conosco.png\/w=164,fit=scale-down 164w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/button_fale-conosco.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 164px) 100vw, 164px\" \/><\/a><\/figure>\n<\/div><p>Guias relacionados:<\/p><p><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-o-desempenho-aproveitando-o-cache-do-navegador\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Melhorar o desempenho do site: alavancando o cache do navegador<\/u><\/a><\/p><p><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-o-desempenho-do-site-compressao-gzip\/\" target=\"_blank\" rel=\"noopener\"><u>Melhorando o desempenho do site: compress&atilde;o gzip<\/u><\/a><\/p><p><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-o-desempenho-do-site-servidor-imagens-escalas\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Melhorando o desempenho do site: exibindo imagens em escala<\/u><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes de tudo, voc&ecirc; sabe o que &eacute; Minify? Minify &eacute; um termo de programa&ccedil;&atilde;o que se refere a um processo de remo&ccedil;&atilde;o de caracteres desnecess&aacute;rios para que o c&oacute;digo seja executado. Minificando o c&oacute;digo, acelera o carregamento da p&aacute;gina e resulta em visitantes felizes. Em resumo, este processo ir&aacute; remover caracteres de espa&ccedil;o em [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/melhorando-a-performace-minifying-css-html-e-javascript\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":74,"featured_media":5605,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Minify \u00e9 um termo de programa\u00e7\u00e3o referente a um processo de remo\u00e7\u00e3o de caracteres que n\u00e3o s\u00e3o necess\u00e1rios para que o c\u00f3digo seja executado.","rank_math_focus_keyword":"Minify","footnotes":""},"categories":[4941],"tags":[4812,4809,4793,4811],"class_list":["post-5014","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web","tag-css","tag-html","tag-javascript","tag-minify"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-minify-css","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-a-performace-minifying-css-html-e-javascript","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-minificar-html-css-javascript","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/meningkatkan-performa-website-minify-css-html-dan-javascript","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-minify-css","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/melhorando-a-performace-minifying-css-html-e-javascript","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-minify-css","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-minify-css","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-minify-css","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-minify-css","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-minificar-html-css-javascript","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-minificar-html-css-javascript","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-minificar-html-css-javascript","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-minify-css","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-minify-css","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/5014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=5014"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/5014\/revisions"}],"predecessor-version":[{"id":50137,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/5014\/revisions\/50137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/5605"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=5014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=5014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=5014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}