{"id":396,"date":"2018-03-14T16:23:07","date_gmt":"2018-03-14T19:23:07","guid":{"rendered":"https:\/\/programathor.com.br\/blog\/?p=396"},"modified":"2021-07-20T13:01:31","modified_gmt":"2021-07-20T16:01:31","slug":"como-otimizar-um-site","status":"publish","type":"post","link":"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/","title":{"rendered":"5 dicas para otimizar um site"},"content":{"rendered":"

O principal objetivo de um desenvolvedor<\/a> , \u00e9 otimizar um site o m\u00e1ximo poss\u00edvel, para atingir cada vez mais notoriedade. Apesar de muitos saberem que o site deve ser r\u00e1pido e eficaz, poucos sabem como otimiz\u00e1-lo da maneira simples e correta.<\/p>\n

Otimizar o seu site n\u00e3o faz apenas com que os seus visitantes fiquem mais satisfeitos, mas acaba tornando o seu tempo de visita maior e consequentemente o seu posicionamento nas pesquisas do Google melhoram muito. Com um site recomend\u00e1vel e bem posicionado no Google, as visitas aumentar\u00e3o consideravelmente.<\/p>\n

Nesse artigo, n\u00e3o farei um guia detalhado e muito t\u00e9cnico sobre otimiza\u00e7\u00e3o de sites, mas passarei algumas dicas que, se seguidas da forma correta, podem te proporcionar \u00f3timos resultados. Para medir o avan\u00e7o da otimiza\u00e7\u00e3o, usaremos uma ferramenta do Google chamada PageSpeed Insights<\/a>.<\/p>\n

<\/p>\n

1- Imagens<\/h2>\n

\"otimizar<\/p>\n

Sites lotados de fotografias de qualidade impec\u00e1vel tornam a apar\u00eancia da p\u00e1gina muito mais profissional e atraente, por\u00e9m, lembre-se que essas imagens podem e v\u00e3o aumentar consideravelmente o tempo de carga do seu site.<\/p>\n

Para otimizar suas imagens da melhor forma, voc\u00ea ter\u00e1 que comprimi-las.<\/p>\n

Um \u00f3timo servi\u00e7o para comprimir fotos \u00e9 o Optimizilla<\/a>, um site simples onde voc\u00ea seleciona a imagem, escolhe os n\u00edveis de compress\u00e3o e baixa a imagem comprimida. As imagens podem reduzir em at\u00e9 70%, o que pode valer muito para aumentar a velocidade de carregamento do seu site.<\/p>\n

Al\u00e9m disso, voc\u00ea tamb\u00e9m pode consultar o formato de seus arquivos. De um modo geral, o jpg ser\u00e1 mais leve do que o png. A principal diferen\u00e7a est\u00e1 na transpar\u00eancia por tr\u00e1s da imagem: se for necess\u00e1ria transpar\u00eancia, o melhor \u00e9 png, caso contr\u00e1rio, escolha o jpg.<\/p>\n

Pode parecer muito \u00f3bvio para a maioria dos leitores, mas fique atento a otimiza\u00e7\u00e3o de imagens e coloque em pr\u00e1tica para atingir \u00f3timos resultados logo de cara.<\/p>\n

2- V\u00eddeo<\/h2>\n

\"otimiza\u00e7\u00e3o<\/p>\n

Quando se trata de videos, o mais recomendado \u00e9 deixar o trabalho para especialistas, mas existem algumas ferramentas que podem te ajudar bastante com a otimiza\u00e7\u00e3o dos mesmos.<\/p>\n

O servi\u00e7o Vimeo <\/a>oferece uma excelente plataforma para hospedar v\u00eddeos onde seus eles ser\u00e3o adequados para conex\u00f5es mais lentas e comprimidos para um melhor desempenho do site.<\/p>\n

Outra boa op\u00e7\u00e3o \u00e9 publicar o seu v\u00eddeo no Youtube e usar o youtube-dl<\/a> para baix\u00e1-los novamente com a op\u00e7\u00e3o de configura\u00e7\u00e3o adequada para o seu site.<\/p>\n

3- Minimiza\u00e7\u00e3o<\/h2>\n

\"minimiza\u00e7\u00e3o<\/p>\n

Em muitas ocasi\u00f5es, enquanto codificamos, deixamos muitos elementos que n\u00e3o s\u00e3o funcionais como: espa\u00e7os em branco, caracteres de nova linha e assim por diante. Isso acaba tornando o arquivo mais denso e dif\u00edcil de ser carregado.<\/p>\n

A minimiza\u00e7\u00e3o se trata da remo\u00e7\u00e3o de caracteres desnecess\u00e1rios do c\u00f3digo sem afetar sua funcionalidade, tornando o seu arquivo mais leve e dificultando a visibilidade de pontos fracos nos seus c\u00f3digos.<\/p>\n

O mais comum \u00e9 utilizar Webpack ou Gulp como parte do processo de compila\u00e7\u00e3o, por\u00e9m,  pode necessitar um pouco de estudo para utiliz\u00e1-los da forma correta.  Se voc\u00ea estiver procurando por alternativas mais f\u00e1ceis, o Google recomenda HTML-Minifier para HTML<\/a> , CSSNano para CSS e UglifyJS para Javascript<\/a> .<\/p>\n

4- Content Delivery Network<\/h2>\n

\"dicas<\/p>\n

A CDN ou “Rede de Distribui\u00e7\u00e3o de Conte\u00fado”, \u00e9 uma rede de servidores que tem como objetivo fazer com que pessoas de lugares distantes consigam acessar o seu conte\u00fado reduzindo a lat\u00eancia. Um CDN permite que voc\u00ea aproveite servidores proxy localizados em todo o mundo, tornando o carregamento do seu conte\u00fado mais r\u00e1pido.<\/p>\n

Por exemplo: Se um morador dos Estados Unidos estiver abrindo uma imagem de um site cujo servidor \u00e9 brasileiro, o tempo de carregamento \u00e9 maior sem o uso do CDN.<\/p>\n

Muitos podem achar sua utiliza\u00e7\u00e3o desnecess\u00e1ria, mas essa ferramenta pode trazer bons resultados para otimizar um site.<\/p>\n

Os CDN mais populares s\u00e3o: CloudFront<\/a> e CloudFlare<\/a>.<\/p>\n

5- Gzip<\/h2>\n

\"otimizar<\/p>\n

O gzip \u00e9 um software de compacta\u00e7\u00e3o de arquivos que a maioria dos navegadores aceita e que pode ser executado sem exigir que o usu\u00e1rio saiba que est\u00e1 acontecendo. Existem pacotes para adicionar compacta\u00e7\u00e3o em seu c\u00f3digo do servidor, o que permite que voc\u00ea adquira os benef\u00edcios do gzipping, utilizando apenas algumas linhas de c\u00f3digo.<\/p>\n

Voc\u00ea deve saber se o seu servi\u00e7o de hospedagem oferece uma op\u00e7\u00e3o gzip. Se n\u00e3o for oferecido, veja como adicionar gzipping ao seu c\u00f3digo server-side.<\/div>\n
<\/div>\n

6- Browser-Caching<\/h2>\n

\"otimizar<\/p>\n

Muitas vezes pode acontecer de alguns recursos do seu site n\u00e3o estarem sendo armazenados em cache devido \u00e0 falta de cabe\u00e7alho na resposta HTTP que est\u00e1 sendo enviado do seu servidor. Armazenar arquivos est\u00e1ticos no cache do navegador \u00e9 uma maneira muito eficiente de otimizar um site.<\/p>\n

Tudo o que deve ser feito \u00e9 adicionar um cabe\u00e7alho de controle de cache \u00e0 sua resposta, dizendo que, ap\u00f3s uma semana os recursos devem ser baixados novamente. Se voc\u00ea atualizar esses arquivos com mais freq\u00fc\u00eancia, uma idade m\u00e1xima mais curta pode ser uma boa ideia.<\/p>\n

Exemplo (Express \/ Node):<\/p>\n

\n
res.append(\"Cache-Control\", \"max-age=604800000\");<\/pre>\n
res.status(200).json(response);<\/pre>\n<\/blockquote>\n
Se voc\u00ea \u00e9 um desenvolvedor e est\u00e1 em busca de novas oportunidades, acesse a ProgramaThor<\/a>, uma plataforma focada no recrutamento de programadores e se candidate \u00e0s vagas que forem compat\u00edveis com voc\u00ea.<\/p>\n
VAGAS PARA PROGRAMADORES<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
O principal objetivo de um desenvolvedor , \u00e9 otimizar um site o m\u00e1ximo poss\u00edvel, para atingir cada vez mais notoriedade. Apesar de muitos saberem que o site deve ser r\u00e1pido e eficaz, poucos sabem como otimiz\u00e1-lo da maneira simples e correta. Otimizar o seu site n\u00e3o faz apenas com que os seus visitantes fiquem mais […]<\/p>\n","protected":false},"author":3,"featured_media":409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,1],"tags":[13,20,18,38],"yoast_head":"\nComo otimizar um site? - Blog da ProgramaThor<\/title>\n<meta name=\"description\" content=\"Voc\u00ea sabe como otimizar um site? Poucos d\u00e3o import\u00e2ncia para otimiza\u00e7\u00e3o, mas ela pode tornar o seu site muito mais eficiente e visitado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como otimizar um site? - Blog da ProgramaThor\" \/>\n<meta property=\"og:description\" content=\"Voc\u00ea sabe como otimizar um site? Poucos d\u00e3o import\u00e2ncia para otimiza\u00e7\u00e3o, mas ela pode tornar o seu site muito mais eficiente e visitado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog ProgramaThor\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ProgramaThorBr\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pedro.lucinio.94\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-14T19:23:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-20T16:01:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/programathor.com.br\/blog\/wp-content\/uploads\/2018\/03\/pexels-photo-577210.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"940\" \/>\n\t<meta property=\"og:image:height\" content=\"623\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pedro Lucinio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pedrolucinio27\" \/>\n<meta name=\"twitter:site\" content=\"@ProgramaThor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pedro Lucinio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como otimizar um site? - Blog da ProgramaThor","description":"Voc\u00ea sabe como otimizar um site? Poucos d\u00e3o import\u00e2ncia para otimiza\u00e7\u00e3o, mas ela pode tornar o seu site muito mais eficiente e visitado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/","og_locale":"pt_PT","og_type":"article","og_title":"Como otimizar um site? - Blog da ProgramaThor","og_description":"Voc\u00ea sabe como otimizar um site? Poucos d\u00e3o import\u00e2ncia para otimiza\u00e7\u00e3o, mas ela pode tornar o seu site muito mais eficiente e visitado.","og_url":"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/","og_site_name":"Blog ProgramaThor","article_publisher":"https:\/\/www.facebook.com\/ProgramaThorBr\/","article_author":"https:\/\/www.facebook.com\/pedro.lucinio.94","article_published_time":"2018-03-14T19:23:07+00:00","article_modified_time":"2021-07-20T16:01:31+00:00","og_image":[{"width":940,"height":623,"url":"https:\/\/programathor.com.br\/blog\/wp-content\/uploads\/2018\/03\/pexels-photo-577210.jpeg","type":"image\/jpeg"}],"author":"Pedro Lucinio","twitter_card":"summary_large_image","twitter_creator":"@pedrolucinio27","twitter_site":"@ProgramaThor","twitter_misc":{"Escrito por":"Pedro Lucinio","Tempo estimado de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/","url":"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/","name":"Como otimizar um site? - Blog da ProgramaThor","isPartOf":{"@id":"https:\/\/programathor.com.br\/blog\/#website"},"datePublished":"2018-03-14T19:23:07+00:00","dateModified":"2021-07-20T16:01:31+00:00","author":{"@id":"https:\/\/programathor.com.br\/blog\/#\/schema\/person\/0d0da03131226876dd51a85cdbe26458"},"description":"Voc\u00ea sabe como otimizar um site? Poucos d\u00e3o import\u00e2ncia para otimiza\u00e7\u00e3o, mas ela pode tornar o seu site muito mais eficiente e visitado.","breadcrumb":{"@id":"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/programathor.com.br\/blog\/como-otimizar-um-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/programathor.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Uncategorized","item":"https:\/\/programathor.com.br\/blog\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"5 dicas para otimizar um site"}]},{"@type":"WebSite","@id":"https:\/\/programathor.com.br\/blog\/#website","url":"https:\/\/programathor.com.br\/blog\/","name":"Blog ProgramaThor","description":"A plataforma de recrutamento  para programadores pensada por programadores. Entenda melhor o mundo da programa\u00e7\u00e3o, a cria\u00e7\u00e3o de uma vaga eficiente, dicas de entrevista, as linguagens do momento, o mercado de desenvolvimento e muito mais!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/programathor.com.br\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-PT"},{"@type":"Person","@id":"https:\/\/programathor.com.br\/blog\/#\/schema\/person\/0d0da03131226876dd51a85cdbe26458","name":"Pedro Lucinio","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/programathor.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/programathor.com.br\/blog\/wp-content\/litespeed\/avatar\/c57a1d2b28234277049c88e675e47e45.jpg?ver=1780238778","contentUrl":"https:\/\/programathor.com.br\/blog\/wp-content\/litespeed\/avatar\/c57a1d2b28234277049c88e675e47e45.jpg?ver=1780238778","caption":"Pedro Lucinio"},"description":"Apaixonado por tecnologia e entusiasta da literatura !","sameAs":["http:\/\/www.programathor.com.br","https:\/\/www.facebook.com\/pedro.lucinio.94","https:\/\/twitter.com\/pedrolucinio27"],"url":"https:\/\/programathor.com.br\/blog\/author\/pedro\/"}]}},"_links":{"self":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts\/396"}],"collection":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":16,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"predecessor-version":[{"id":2572,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts\/396\/revisions\/2572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/media\/409"}],"wp:attachment":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/media?parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}