Tenho visto o nome KeyCDN há anos, principalmente como um serviço gratuito de rede de distribuição de conteúdo (CDN) para muitas estruturas JavaScript de código aberto e, apenas com base nisso, sempre tive uma boa opinião sobre eles. KeyCDN recentemente me pediu para verificar um de seus recursos mais recentes: Suporte ao Brotli. Vamos dar uma olhada na compactação Brotli, como o KeyCDN suporta Brotli e como o senhor pode começar a tornar seu site muito mais rápido em questão de minutos!
Resultados rápidos
- KeyCDN oferece um teste gratuito de 30 dias
- O KeyCDN fornece seus ativos da Web de forma rápida e segura
- O KeyCDN adicionou suporte ao Brotli, permitindo um download ainda mais rápido de ativos com menos uso de largura de banda
- O suporte ao Brotli do KeyCDN é gratuito – foi adicionado de graça!
- O KeyCDN permite configurar zonas para que diferentes seções do seu site possam ter diferentes configurações de entrega
- O KeyCDN fornece um Ferramenta de teste Brotli para garantir que seu servidor seja compatível com o Brotli
O que é Brotli?
Brotli, um algoritmo de compactação mais recente criado pelo Google, permite uma melhor compactação de arquivos e, portanto, menos uso de largura de banda e velocidades de download mais rápidas. O Brotli se gaba de ter uma compactação melhor que a do gzip. O Brotli é compatível com todos os principais navegadores, incluindo recentemente o Safari, e com uma variedade de suporte de softwares de servidor populares, como Apache, nginx, IIS e Node.js (via shrink-ray). A codificação de conteúdo para o fluxo do Brotli é bre, como muitos novos recursos da Web, o Brotli só está disponível em HTTPS.
Criação de recursos do Brotli com o Gulp ou o Webpack
Os executores de tarefas populares, como webpack e gulp, têm bibliotecas de código aberto para gerar ativos estáticos do Brotli. Vamos usar o gulp-brotli para gerar ativos compactados do Brotli para um site:
var gulp = require('gulp');
var gulpBrotli = require('gulp-brotli');
return gulp.src('./src/**/*.{css,js,html}'')
.pipe(gulpBrotli.compress({
quality: 11, // Your quality setting
extension: 'br'
}))
.pipe(gulp.dest('./dist'));
O código acima localiza todos os ativos CSS, HTML e JavaScript e gera arquivos compactados do mesmo modo que o Brotli em um determinado diretório de saída. Se o senhor preferir usar o webpack, brotli-webpackplugin é o seu bilhete:
var BrotliPlugin = require('brotli-webpack-plugin');
module.exports = {
plugins: [
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8
})
]
}
Criar seus ativos estáticos compactados no Brotli é apenas um pequeno ajuste no código de compilação existente!
Como ativar o Brotli no KeyCDN
O KeyCDN é compatível com o incrível formato de compactação Brotli, mas ele não está ativado por padrão, portanto, o senhor precisará reservar um momento para ativar o recurso. Clique em qualquer zona existente ou nova no painel do KeyCDN e defina a configuração “Cache Brotli” como “ativada”:
Isso é tudo o que o senhor precisa fazer no painel do KeyCDN. Um requisito da sua parte é que o servidor de origem seja compatível com o Brotli – isso garante que o senhor possa definir a configuração de qualidade dos ativos do Brotli. Documentação do mod_brotli do Apache fornece vários exemplos curtos de diretivas para ativar o suporte ao Brotli:
<IfModule mod_headers.c>
# Serve brotli compressed CSS and JS files if they exist
# and the client accepts brotli.
RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
RewriteRule "^(.*)\.(js|css)" "$1\.$2\.br" [QSA]
# Serve correct content types, and prevent double compression.
RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli:1]
RewriteRule "\.js\.br$" "-" [T=text/javascript,E=no-brotli:1]
<FilesMatch "(\.js\.br|\.css\.br)$">
# Serve correct encoding type.
Header append Content-Encoding br
# Force proxies to cache brotli &
# non-brotli css/js files separately.
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>
A configuração do Brotli no servidor é bastante simples em todas as plataformas de servidor. O KeyCDN também oferece um Utilitário de teste do Brotli para garantir que seu servidor tenha o Brotli configurado corretamente.
Ver resultados
Para garantir que seus ativos codificados pelo Brotli estejam sendo servidos adequadamente, abra qualquer solicitação de ativo nas ferramentas de desenvolvimento do navegador e inspecione o cabeçalho; você deverá ver o content-encoding definido como br:
O curto tempo necessário para configurar o módulo Brotli do seu servidor e, em seguida, ativar o Brotli no KeyCDN terá um impacto imediato para seus usuários, tanto em dispositivos móveis quanto em desktops.
Oferta do KeyCDN!
A KeyCDN quer provar o quanto é incrível: está oferecendo duas contas de 1 TB aos leitores do David Walsh Blog para que experimentem! Quer participar? Na seção de comentários abaixo, fale-me sobre seu recurso de CDN favorito. Seja o Brotli, servidores geolocalizados ou outro recurso, fale sobre ele e o senhor concorrerá ao prêmio!
Os desenvolvedores recorrem às CDNs para tornar seus sites mais rápidos, por isso é ótimo ver o KeyCDN oferecendo técnicas de compactação novas e avançadas com configuração mínima do desenvolvedor e sem custo. O senhor sabe o quanto um serviço se importa quando ele se esforça para tornar seu site melhor usando recursos de ponta com pouca configuração e custo, e o Brotli é apenas um dos principais recursos fornecidos pelo KeyCDN. Se o senhor estiver procurando uma CDN, dê uma olhada em KeyCDN!