{"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\/public\" 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><p class=\"important\">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.<\/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><p class=\"important\">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).<\/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\/public\" 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><\/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-UK","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}]}}