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.
3. Clique na opção avançado
4. Na parte “Quem pode acessar” clique em alterar, e marque a opção “Ativado: público na Web”
5. Entre na pasta criada e selecione o código no final da URL da pasta, como está selecionado na foto abaixo.
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
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.js” type=”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.js” type=”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
