google drive cdn estaticos

Hospedar arquivos estáticos CSS e JS no google drive

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

Acesse o [button color=”gray” size=”big” link=”https://drive.google.com” target=”blank” ]Google Drive[/button]

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:

<link rel=”stylesheet” href=”https://bddf397f277216d7e7242225b9a43d3e56ff7769.googledrive.com/host/0ByIPzwrslOUBcGFTMkFXTk91NTA/style.css” type=”text/css”>

<script src=”https://bddf397f277216d7e7242225b9a43d3e56ff7769.googledrive.com/host/0ByIPzwrslOUBcGFTMkFXTk91NTA/main.jstype=”text/javascript“></script>

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.

<script async defer src=”https://bddf397f277216d7e7242225b9a43d3e56ff7769.googledrive.com/host/0ByIPzwrslOUBcGFTMkFXTk91NTA/main.jstype=”text/javascript“></script>

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.



Entre no Grupo do telegram