Aprenda hospedar arquivos estáticos CSS e JS no google drive, ganhe velocidade e estabilidade colocando os arquivos estáticos no google drive, principalmente CSS e JS.

Ganhe velocidade utilizando o google drive como CDN, economize tráfego e requisições do seu servidor como esse método de hospedagem grátis para arquivos estáticos.

Hospedagem custa caro e essa é uma ótima maneira de economizar hospedagem e além disso aplicar as boas práticas separando os arquivos estáticos em um domínio diferente.

Atenção esse tutorial não funciona mais, veja como hospedar no GitHub

Ver como usaR GITHUB

1. Crie uma pasta para armazenar os arquivos, nesse exemplo eu chamei a pasta de CDN.

2. Clique com o botão direito do mouse e selecione compartilhar.

google drive static css js

3. Clique na opção avançado

google drive cdn css js

4. Na parte “Quem pode acessar” clique em alterar, e marque a opção “Ativado: público na Web”

google drive host css js

5. Entre na pasta criada e selecione o código no final da URL da pasta, como está selecionado na foto abaixo.

google drive host static files

6. para acessar o arquivo diretamente pelo browser é preciso colocar https://googledrive.com/host/ID\_da\_pasta/Nome\_do\_Arquivo

Veja como ficou o link direto para os 2 arquivos que coloquei na pasta…

https://googledrive.com/host/0ByIPzwrslOUBcGFTMkFXTk91NTA/main.js

https://googledrive.com/host/0ByIPzwrslOUBcGFTMkFXTk91NTA/style.css

google drive arquivos estaticos

O google vai gerar um outro URL como link direto para o arquivo, utilize esse link direto para integrar no código

Veja como fica um exemplo de integração dos arquivos CSS e javascript:

O recomendado para javascript é carregar ele de forma assíncrona, para isso adicione async e defer para ter compatibilidade em um maior número de browsers.

Outra recomendação de performance é não hospedar mais de 6 arquivos na mesma pasta do google drive, isso porque os browsers abrem 6 conexões simultâneas de download para cada domínio ou subdomínio, então se for hospedar mais de 6 CSS ou JS, faça esse procedimento em diferentes pastas para gerar diferentes subdomínios e paralelizar o download de mais arquivos ao mesmo tempo.

Lembrando também que podem ser hospedados outros arquivos estáticos, como imagens e até mesmo html, não é um processo muito rápido para hospedar todas as imagens do seu site, mas pelo menos as imagens que aparecem em todas as páginas, como imagens de background, logo, banners, etc.

É bom lembrar também que uma rede de entrega de conteúdo (CDN) funciona de forma a solicitar os arquivos do servidor mais próximo da requisição e isso não acontece nesse caso, portanto não é correto chamar a hospedagem desse arquivo como CDN.