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: 5.115 ]

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

9 0

Denuncie Favoritos Indicar Impressora

Exemplo com o Google Analytics

Dentro da configuração do seu site no NGinx, criamos uma zona de cache para nossos recursos externos, assim não precisaremos ficar baixando toda hora do servidor oficial do recurso, melhorando ainda mais a performance:

proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=externalresources:8m max_size=1g inactive=7d;
proxy_temp_path /var/cache/nginx/temp;

Primeiro, definimos qual DNS o NGinx deve utilizar. Minha preferência é por sempre utilizar o DNS do Google e do CloudFlare, respectivamente. Em seguida, a parte responsável por reescrever automaticamente o HTML do nosso site, substituindo o script original pela versão que queremos entregar localmente

resolver 8.8.8.8 1.1.1.1 ipv6=off;
sub_filter 'https://www.google-analytics.com/analytics.js' '$scheme://$host/cloudez.www.google-analytics.com/analytics.js';
sub_filter 'https://www.googletagmanager.com/gtag/' '$scheme://$host/cloudez.www.googletagmanager.com/gtag/';
sub_filter_types application/javascript text/css;
sub_filter_once off;

Aqui fazemos uma proxy da nossa requisição para o destino original, cacheando na nossa zona de cache o arquivo por 20 minutos, que é o tempo de expiração definido pelo Google no Analytics. Normalmente, após esses 20 minutos, nosso servidor precisaria baixar novamente o arquivo original, mas com a diretiva "proxy_cache_revalidate on", nós conseguimos renovar o arquivo por mais 20 minutos automaticamente, caso não haja alterações no original.

Também não faremos nenhuma alteração nas headers do arquivo, nem mesmo para corrigir o "Levarage browser caching", que o PageSpeed sempre reclama, pois isso poderia novamente acarretar todos os problemas de dados errados no Analytics.

location ^~ /cloudez.www.google-analytics.com/analytics.js {
proxy_pass https://www.google-analytics.com/analytics.js;
proxy_http_version 1.1;
proxy_set_header Accept-Encoding "";
proxy_cache externalresources;
proxy_cache_valid 200 304 206 20m;
proxy_cache_revalidate on;
proxy_cache_key "$host$request_uri$args";
}

location ^~ /cloudez.www.googletagmanager.com/gtag/ {
proxy_pass https://www.googletagmanager.com/gtag/;
proxy_http_version 1.1;
proxy_set_header Accept-Encoding "";
proxy_cache externalresources;
proxy_cache_valid 200 304 206 20m;
proxy_cache_revalidate on;
proxy_cache_key "$host$request_uri$args";
}

E pronto. É só isso. Você pode só colocar o código do Analytics no site e o NGinx vai interceptar seu HTML e alterar a requisição para vir do seu domínio, ou até mesmo da sua CDN.

E claro, isso não para por aí. No momento, meus clientes estão utilizando essa técnica para os seguintes serviços:

Gravatar
Facebook Connect
Google Fonts
Google Hosted Libraries
Twitter

E sempre requisitam que mais algo seja adicionado. Minha recomendação é que você faça algo semelhante, pelo menos com o Google Fonts, pois apesar de prático, ele é extremamente lento e vai matar sua nota do PageSpeed!

Página anterior Próxima página

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

Converter uma distribuição Linux para rodar no coLinux

Instalando o Zabbix no CentOS

Boot gráfico no ArchLinux

Balanceamento de links no OpenBSD 4.3

Atualização do Motorola Milestone para Android 2.2 (Froyo) - O Pulo do Gato

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