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.416 ]

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

Como instalar o driver da placa de vídeo SiS 771/671 no Ubuntu 18.04

Funtoo + bspwm + Polybar + Rofi - Instalação e Configuração

Slackware + Gentoo - Dual-boot sem live-CD/USB

Assistindo TV usando a placa VideoHighway Xtreme (ou outra baseada no bttv)

DHCP - Configurando-o de forma simples e eficiente

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