NGinx - Otimizando Recursos Externos Automaticamente

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

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


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

Exherbo Linux: sacrificando a cabra

Criando um tema de apresentação no Mandriva

Acessando remotamente máquina Windows dentro de uma VPN através do Ubuntu

Como instalar o SVN no Slackware 10.2 utilizando o Apache2 como servidor

Driver Nvidia atual + Ubuntu + Beryl

  
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.

[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.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts