GoCache
  • Produtos
    • CDN
    • WAF – Web Application Firewall
    • Rate Limit
    • Lithio – Otimizador de Imagens
    • Role Based Access Control
    • Plugin WordPress e Magento
    • API Pública
    • Certificado SSL
  • Soluções
    • E-Commerce
    • Portais de Conteúdo e Notícias
    • Educação / Edtech
    • Startup
    • Outros
  • Planos
  • Parceiros
    • Parceiros de Tecnologia
  • Cases
  • Ajuda
    • Central de Ajuda – FAQ
    • Documentação Técnica
    • Documentação da API
  • Contato
  • Login
  • CADASTRE-SE
  • Menu Menu

Como Otimizar meu Site? Otimizando seus Scripts…

22 de setembro de 2017/em CDN, SEO

Por que otimizar meu site?

Sabemos que o tempo que seu site leva para ser carregado é muito importante, tanto para os mescanismos de busca (SEO), como o Google, como para a experiência do usuário na sua webpage. Uma pagina rápida é mais agradável e gera maior engajamaneto de seus visitantes, podendo levá-los a ficar mais tempo em seu site e até mesmo efetuar mais compras em um e-commerce.

Mas quais são os pontos mais importantes para Otimizar o seu site? Veja abaixo uma checklist dos itens que você sempre deve olhar. Iremos trabalhar cada um deles em diferentes artigos:

1) Otimizar Imagens (artigo anterior)

2) Otimizar Scripts (neste artigo)

3) Otimizar Hospedagem (próximos artigos)

Otimizando Scripts e Folhas de Estilo:

Com o advento de novas tecnologias como AJAX, o uso de scripts (Javascript) nos sites tem aumentado muito. Desde o uso de bibliotecas conhecidas, como o JQuery, até scripts feito especificamente para seu site. Existem também as famosas folhas de estilo, os arquivos .CSS, com informações sobre a aparência do seu site.

O uso destas tecnologias podem melhora muito a experiência de uso do site, mas é importante entender que, se mal utilizado, podem ter um efeito contrário, deixando muito lento o carregamento da página, a ponto do usuário desistir de navegar pelo site.

1) Juntar vários Scripts (.js) ou folhas de estilo (.css) em apenas um:

Cada arquivo que o seu navegador precisa carregar para exibir um site significa, ao menos, mais uma requisição de dados ao servidor. Essas requisições, particularmente no protocolo HTTP, são muito lentas. Portanto, quanto menos requisições, mais rápido seu site fica.

Uma dica muito simples é: se em uma página você carrega vários arquivos de script, como “arquivo_A.js”, “arquivo_B.js”, “arquivo_C.js”, você deve juntá-los todos em um único arquivo, como “tudo.js”.

Mas tome cuidado para não juntar muitos arquivos que vc quase nunca usa, colocando tudo em um único arquivo. Este arquivo poderá ficar muito grande, por conter coisas desnecessária, e acabará tendo um efeito contrário.

Lembrando que você pode fazer o mesmo com seus arquivos de estilo, arquivo .css

 

2) Hospedagem JQuery e de outras bibliotecas públicas:

É muito comum utilizarmos bibliotecas de scripts públicas, como JQuery ou até mesmo templates de sites como Bootstrap. Esses arquivos podem ser hospedados em seu servidor, mas recomendamos utilizar um servidor externo, na verdade, uma CDN, para armazená-los.

As bibliotecas mais usadas possuem CDNs gratuitas, que você pode utilizar à vontade, acelerando e otimizando o carregamento do seu site, além de economizar banda em sua hospedagem.

Vejamos por exemplo o uso de uma CDN Jquery. Existe quase uma dezena de CDNs Jquery gratuitas para você escolher: GoCache, MaxCDN, Google, CDNJS e a própria CDN do projeto JQuery.

Neste caso, para hospedagem JQuery no Brasil, nós recomendamos a utilização da CDN Gratuita da GoCache, pois ela possui servidores espalhados por todo território brasileiro. Já as outras CDNs possuem apenas um ou dois servidores no país. Pra entender porque mais servidores na CDN deixam mais rápido o site para seus clientes, leia este artigo: CDN JQuery

 

3) Minificar ou Minimizar seus scripts (Minify):

Você pode reduzir muito o tamanhos dos scripts que estarão hospedados em seu site utilizando “minifiers”. São softwares, normalmente gratuitos, que reprocessam seus scripts e folhas de estilo, gerando uma versão de difícil leitura pra humanos, mas muito menor e mais rápida para ser carregada pelos navegadores.

Você pode usar sites como https://javascript-minifier.com ou https://jscompress.com para minificar seus scripts e folhas de estilo.

 

4) Comprimir os arquivos:

Você deve habilitar a compressão de arquivos estáticos em seu servidor de hospedagem, assim eles serão compridos automaticamente, ficando menores e sendo transferidos muito mais rápido. Essa compressão traz ganhos até mesmo para os arquivos já minimizados, portanto é sempre importante estar ligada.

Vários sites te permitem testar se seu site está comprimindo os arquivos. Basta acessar, por exemplo, esse aqui http://www.whatsmyip.org/http-compression-test/ . Veja um exemplo abaixo, onde a compressão está reduzindo em 77% o tempo para transferência dos dados da página.

Vale lembrar que se você estiver usando uma CDN em seu site, esta compressão já estará automaticamente ligada e você não precisará se preocupar com isso.

5) Habilitar a cache dos scripts e folhas de estilo

Ao habilitar a cache dos arquivos do seu site você estará dizendo para o navegador memorizá-los, armazenando-os em disco. Desta forma, a próxima vez que seu usuário visitar seu site o navegador não precisará baixar novamente todos os scripts.

Veja o exemplo abaixo, o site MinhaConexão está usando uma CDN para, entre outras coisas, habilitar a cache dos seus arquivos. Note nesta análise, feita utilizando o Firefox, que nenhum segundo foi perdido para carregar os scripts, pois eles já tinham sido baixados em uma visita anterior ao site.

Você pode habilitar a cache de seus arquivos utilizando uma CDN (como o site acima fez) ou você pode alterar a configuração de seu servidor web para isto. Se estiver utilizando Apache, você pode colocar o seguinte código no arquivo httpd.conf ou no arquivo .htaccess

<filesMatch "\.(txt|html|js|css|htm)$">

ExpiresDefault A7200

Header append Cache-Control "proxy-revalidate"

</filesMatch>



6) Carregar scripts de forma não bloqueante

O que significa “carregar scripts de forma não bloqueante”? Basicamente significa que a página de seu site será exibida mesmo que seus scripts estejam demorando para carregar. Caso contrário, sua página poderá ficar sem exibir nada, por vários segundos, até que todos os scripts sejam carregados. Isto não é nada bom, pois seus usuários ficarão impacientes, com a impressão de que seu site está travado.

Duas dicas simples para conseguir isso:

  1. Coloque os Scripts menos importantes mais no final do seu arquivo HTML, assim seu site já exibirá algo aos seus usuários antes de começar a baixar os scripts.
  2. Tente usar a flag Async ao carregar os scripts, assim o navegador irá carregá-lo em paralelo com outras coisas de sua página. Exemplo:  <script src=”demo_async.js” async></script>

Mas atenção, apesar de simples, essas dicas podem fazer sua página parar de funcionar, caso você as utilize de forma errada, quebrando alguma dependência na execução dos códigos.

Por exemplo, se você tentar executar uma função que está dentro do arquivo “demo_async.js”, antes que este arquivo seja carregado pelo nevegador, isto causará um erro de execução.



Tags: Otimizar CSS, Otimizar JS, Otimizar Scripts, Page Speed, SEO
Share this entry
  • Share on Facebook
  • Share on Twitter
  • Share on WhatsApp
  • Share on LinkedIn
  • Share on Tumblr
  • Share by Mail
https://www.gocache.com.br/wp-content/uploads/2021/11/gocache-nova-preta.png 0 0 Go Cache https://www.gocache.com.br/wp-content/uploads/2021/11/gocache-nova-preta.png Go Cache2017-09-22 21:19:542020-10-22 11:47:49Como Otimizar meu Site? Otimizando seus Scripts…

Baixe nosso Ebook

Procurar

Últimas publicações

  • Insufficient Logging & Monitoring – O que é? 23 de maio de 2022
  • Improper Assets Management – O que é? 23 de maio de 2022
  • Injection – O que é? 23 de maio de 2022
  • Security Misconfiguration – O que é? 23 de maio de 2022
  • Mass Assignment – O que é? 23 de maio de 2022

Produtos

  • Content Delivery Network
  • SSL
  • Web Application Firewall - WAF
  • Rate Limit
  • Lithio - Otimizador de Imagens
  • Role Based Access Control
  • Plugin para WordPress e Magento

Soluções por vertical

  • Portais de conteúdo e notícias
  • E-Commerce
  • Educação / Edtech
  • Plataformas de E-Commerce
  • Startup
  • Outros

Empresa

  • Central de Ajuda
  • Carreiras
  • Parceiros
  • Blog
  • Contato
  • Planos
  • Cases de Sucesso
  • Datasheet GoCache

Documentação

  • Termos de Uso e Politica de Privacidade
  • API Pública da GoCache
  • Documentação Painel

Acompanhe nosso Blog!

  • Insufficient Logging & Monitoring – O que é?
  • Improper Assets Management – O que é?
  • Injection – O que é?
  • Security Misconfiguration – O que é?
  • Mass Assignment – O que é?
  • Broken Function Level Authorization (BFLA) – O que é?
  • Lack of Resources & Rate Limiting – O que é?
  • Excessive Data Exposure – O que é?
Firewall Global na GoCache – proteção simples e eficiente para seus... 21 Dicas de Segurança pra Proteger seu site WordPress
Scroll to top

Este site utiliza cookies para aprimorar sua navegação. Na GoCache o uso de cookies é feito apenas para reconhecer um visitante constante e melhorar a experiência no uso dos Serviços. Os cookies são pequenos arquivos de dados transferidos de um site da web para o disco do seu computador, e não armazenam dados pessoais. Se preferir, você pode apagar os cookies existentes em seu computador através do browser utilizado.

AceitarRecusarTermo de uso

Cookie and Privacy Settings



How we use cookies

We may request cookies to be set on your device. We use cookies to let us know when you visit our websites, how you interact with us, to enrich your user experience, and to customize your relationship with our website.

Click on the different category headings to find out more. You can also change some of your preferences. Note that blocking some types of cookies may impact your experience on our websites and the services we are able to offer.

Essential Website Cookies

These cookies are strictly necessary to provide you with services available through our website and to use some of its features.

Because these cookies are strictly necessary to deliver the website, refusing them will have impact how our site functions. You always can block or delete cookies by changing your browser settings and force blocking all cookies on this website. But this will always prompt you to accept/refuse cookies when revisiting our site.

We fully respect if you want to refuse cookies but to avoid asking you again and again kindly allow us to store a cookie for that. You are free to opt out any time or opt in for other cookies to get a better experience. If you refuse cookies we will remove all set cookies in our domain.

We provide you with a list of stored cookies on your computer in our domain so you can check what we stored. Due to security reasons we are not able to show or modify cookies from other domains. You can check these in your browser security settings.

Google Analytics Cookies

These cookies collect information that is used either in aggregate form to help us understand how our website is being used or how effective our marketing campaigns are, or to help us customize our website and application for you in order to enhance your experience.

If you do not want that we track your visit to our site you can disable tracking in your browser here:

Other external services

We also use different external services like Google Webfonts, Google Maps, and external Video providers. Since these providers may collect personal data like your IP address we allow you to block them here. Please be aware that this might heavily reduce the functionality and appearance of our site. Changes will take effect once you reload the page.

Google Webfont Settings:

Google Map Settings:

Google reCaptcha Settings:

Vimeo and Youtube video embeds:

Other cookies

The following cookies are also needed - You can choose if you want to allow them:

Privacy Policy

You can read about our cookies and privacy settings in detail on our Privacy Policy Page.

Termos de Uso e Política de Privacidade – GoCache CDN
Accept settingsHide notification only