NGinx - Otimizando Recursos Externos Automaticamente

coleplx

Breve artigo explicando a importância de otimizar recursos externos (third-party resources) em um site e como fazê-lo automaticamente, com exemplos práticos e prontos para o uso.

[ Hits: 6.101 ]

Por: Paulo Paracatu em 15/12/2019 | Blog: https://medium.com/@pauloparacatu

9 0

Denuncie Favoritos Indicar Impressora

Exemplo com o Google Fonts

Com o Google Fonts nós precisamos criar dois blocos de localização, já que o Google fornece o CSS por um domínio e as fontes por outro:

sub_filter 'https://fonts.googleapis.com' '$scheme://$host/cloudez.fonts.googleapis.com';
sub_filter '//fonts.googleapis.com' '$scheme://$host/cloudez.fonts.googleapis.com';

# Google Fonts

location ^~ /cloudez.fonts.gstatic.com/ {
proxy_pass https://fonts.gstatic.com/;
proxy_http_version 1.1;
proxy_set_header Accept-Encoding "";
proxy_cache externalresources;
proxy_cache_valid 200 304 206 24h;
proxy_cache_revalidate on;
proxy_cache_key "$host$request_uri$args";
}

Esse host, nós não vamos cachear, pois é ele quem gera o CSS personalizado das fontes e esse CSS pode mudar de acordo com o browser que o requisita. Note que dentro dele, nós inserimos outro sub_filter para reescrever a resposta entregando as fontes pelo nosso domínio:

location ^~ /cloudez.fonts.googleapis.com/ {
proxy_pass https://fonts.googleapis.com/;
proxy_http_version 1.1;
proxy_set_header Accept-Encoding "";
sub_filter_types application/javascript text/css;
sub_filter 'https://fonts.gstatic.com' '$scheme://$host/cloudez.fonts.gstatic.com';
sub_filter_once off;
}

E novamente, pronto! Não precisa se preocupar mais. Quer um exemplo de site utilizando essa técnica? O PodCaster.

É um site simples em Wordpress, porém extremamente rápido. Em sites mais complexos e com várias dependências externas, nós conseguimos reduzir o tempo de carregamento de 8 segundos (!!!) para em torno de 1 segundo, apenas fazendo isso com o Google Fonts! Massa, né? :D

Página anterior

Páginas do artigo

   1. Introdução
   2. Exemplo com o Google Analytics
   3. Exemplo com o Google Fonts

Outros artigos deste autor

Nenhum artigo encontrado.

Leitura recomendada

Servidor VPN PPTP com autenticação de usuários no Active Directory

Gerenciamento de pacotes RPM (parte 1)

Criando uma imagem de instalação do Ubuntu

Boot gráfico no ArchLinux

Fazendo o kernel 2.6 resolver o problema da montagem de discos USB

Comentários

[1] Comentário enviado por fabio em 15/12/2019 - 17:59h

Não conhecia esse módulo do NGinx, interessante demais. Parabéns pelo artigo e obrigado por compartilhar a informação.

3 0

[2] Comentário enviado por Ragen em 18/12/2019 - 16:11h

Nice trick! Já peguei alguns sites engargalados no Google Fonts e analytics realmente faz todo sentido entregar o conteúdo sem depender da rota deles estar funcionando, pq se a requisição não chegar ao site tá tudo fora mesmo.

2 0