Brotli ile ağ yüklerini küçültün ve sıkıştırın

Michael DiBlasio

İpucu: Bu codelab'i takip etmek için ikinci bir sekmede bu Glitch demosunu açın.

Not: Bu codelab'de Chrome Geliştirici Araçları kullanılır. Henüz yapmadıysanız Chrome'u indirin.

Bu codelab, Ağ yüklerini küçültme ve sıkıştırma codelab'inin bir uzantısıdır ve sıkıştırmayla ilgili temel kavramları bildiğinizi varsayar. Bu codelab'de, gzip gibi diğer sıkıştırma algoritmalarına kıyasla Brotli sıkıştırmanın (br) sıkıştırma oranlarını ve uygulamanızın genel boyutunu nasıl daha da azaltabileceği incelenmektedir.

Ölçüm

Not: Bu uygulamada webpack kullanıldığından, kodda yapılan değişiklikler yeni bir derlemeyi tetikler. Bu işlem birkaç saniye sürebilir. İşlem tamamlandığında, değişikliklerinizin uygulamaya yansıtıldığını görürsünüz.

Optimizasyon eklemeye başlamadan önce uygulamanın mevcut durumunu analiz etmek her zaman iyi bir fikirdir.

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiksle'yi tıklayın.
2. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a basın.

Önceki Ağ yüklerini küçültme ve sıkıştırma codelab'inde, main.js boyutunu 225 KB'tan 61,6 KB'a düşürmüştük. Bu codelab'de, Brotli sıkıştırmanın bu paket boyutunu nasıl daha da küçültebileceğini keşfedeceksiniz.

Brotli sıkıştırması

Uyarı: Birçok barındırma platformu, CDN ve ters proxy sunucusu, öğeleri varsayılan olarak sıkıştırma ile kodlar veya daha az çabayla yapılandırmanıza olanak tanır. Barındırma platformunuz Brotli'yi destekliyorsa sunucunuzu, öğelerinizi Brotli ile sıkıştıracak şekilde ayarlamanız gerekmeyebilir.

Brotli, gzip'den daha iyi metin sıkıştırma sonuçları sağlayabilen daha yeni bir sıkıştırma algoritmasıdır. CertSimple'a göre Brotli performansı:

• JavaScript için gzip değerinden %14 daha küçük
• HTML için gzip değerinden %21 daha küçük
• gzip için CSS'den %17 daha küçük

Brotli'yi kullanmak için sunucunuzun HTTPS'yi desteklemesi gerekir. Brotli, tüm modern tarayıcılarda desteklenir. Brotli'yi destekleyen tarayıcılar, Accept-Encoding üstbilgilerine br ekler:

Accept-Encoding: gzip, deflate, br

Chrome Geliştirici Araçları Ağ sekmesindeki Content-Encoding alanını kullanarak hangi sıkıştırma algoritmasının kullanıldığını belirleyebilirsiniz (Command+Option+I veya Ctrl+Alt+I):

Brotli'yi etkinleştirme

Brotli ile kodlanmış kaynakları göndermek için bir web sunucusunu nasıl ayarlayacağınız, bunları nasıl kodlamayı planladığınıza bağlıdır. Kaynakları istek sırasında Brotli ile dinamik olarak sıkıştırabilir (dinamik) veya kullanıcılar istekte bulunmadan önce sıkıştırılmış olmaları için önceden kodlayabilirsiniz (statik).

Dinamik sıkıştırma

Dinamik sıkıştırma, öğelerin tarayıcı tarafından istendiği anda sıkıştırılmasını içerir.

Avantajları

• Öğelerin kaydedilmiş sıkıştırılmış sürümlerini oluşturmanız ve güncellemeniz gerekmez.
• Anında sıkıştırma, özellikle dinamik olarak oluşturulan web sayfalarında iyi sonuç verir.

Dezavantajları

• Daha iyi sıkıştırma oranları elde etmek için dosyaları daha yüksek seviyelerde sıkıştırmak daha uzun sürer. Kullanıcı, öğelerin sunucu tarafından gönderilmeden önce sıkıştırılmasını beklediği için bu durum performansı olumsuz etkileyebilir.

Node ve Express ile dinamik sıkıştırma

server.js dosyası, uygulamayı barındıran Node sunucusunu ayarlamak için kullanılır.

const express = require('express');
const app = express();
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

Bu kod, express modülünü içe aktarır ve public/directory dizinindeki tüm statik HTML, JS ve CSS dosyalarını yüklemek için express.static ara katman yazılımını kullanır (bu dosyalar her derlemede webpack tarafından oluşturulur).

Tüm öğelerin her istendiğinde brotli kullanılarak sıkıştırıldığından emin olmak için shrink-ray modülü kullanılabilir. package.json içinde devDependency olarak ekleyerek başlayın:

"devDependencies": {
  // ...
  "shrink-ray": "^0.1.3"
},

Ardından, server.js sunucu dosyasına aktarın:

const express = require('express');
const shrinkRay = require('shrink-ray');

Ardından, express.static bağlanmadan önce ara katman yazılımı olarak ekleyin:

// ...
const app = express();

// Compress all requests
app.use(shrinkRay());
app.use(express.static('public'));

Şimdi uygulamayı yeniden yükleyin ve Ağ panelindeki paket boyutuna bakın:

Artık Content-Encoding başlığında brotli politikasının bz tarafından uygulandığını görebilirsiniz. main.bundle.js, 225 KB'tan 53,1 KB'a düşürüldü. Bu, gzip (61,6 KB) ile karşılaştırıldığında yaklaşık %14 daha küçüktür.

Not: Brotli'nin 0 (sıkıştırma yok) ile 9 (maksimum sıkıştırma) arasında on bir kalite düzeyi vardır. 1 kalitesi çok hızlıdır ancak daha az etkilidir. 11 kalite ayarı ise çok yavaştır ancak dosya boyutunda büyük tasarruf sağlar. Varsayılan olarak 11 kalitesini kullanan standart brotli kitaplığının aksine, shrink-ray'nin varsayılan olarak 4 kalitesini kullandığını ve bunun genellikle dinamik içerikler için daha uygun olduğunu unutmayın. shrinkRay([options]) için options parametreleri ileterek brotli algoritmasının parametrelerini ayarlayabilirsiniz.

Statik sıkıştırma

Statik sıkıştırmanın amacı, öğelerin önceden sıkıştırılıp kaydedilmesidir.

Avantajları

• Yüksek sıkıştırma seviyeleri nedeniyle gecikme artık sorun olmaktan çıkmıştır. Dosyalar artık doğrudan getirilebildiğinden, sıkıştırma işlemi anında yapılmak zorunda değildir.

Dezavantajları

• Öğelerin her derlemede sıkıştırılması gerekir. Yüksek sıkıştırma seviyeleri kullanıldığında derleme süreleri önemli ölçüde artabilir.

Webpack ile Node ve Express kullanarak statik sıkıştırma

Statik sıkıştırma, dosyaların önceden sıkıştırılmasını içerdiğinden webpack ayarları, öğeleri derleme adımının bir parçası olarak sıkıştıracak şekilde değiştirilebilir. Bunun için brotli-webpack-plugin kullanılabilir.

package.json içinde devDependency olarak ekleyerek başlayın:

"devDependencies": {
  // ...
 "brotli-webpack-plugin": "^1.1.0"
},

Diğer webpack eklentileri gibi yapılandırma dosyasına aktarın, webpack.config.js:

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

Ardından, eklentiler dizisine ekleyin:

module.exports = {
  // ...
  plugins: [
    // ...
    new BrotliPlugin({
      asset: '[file].br',
      test: /\.(js)$/
    })
  ]
},

Eklenti dizisi aşağıdaki bağımsız değişkenleri kullanır:

• asset: Hedef öğe adı.
• [file], orijinal öğe dosya adıyla değiştirilir.
• test: Bu normal ifadeyle eşleşen tüm öğeler (yani .js ile biten JavaScript öğeleri) işlenir.

Örneğin, main.js, main.js.br olarak yeniden adlandırılır.

Uygulama yeniden yüklenip yeniden derlendiğinde ana paketin sıkıştırılmış bir sürümü oluşturulur. Glitch Console'u açarak Node sunucusu tarafından sunulan final public/ dizininin içeriğine göz atın.

1. Araçlar düğmesini tıklayın.
2. Console (Konsol) düğmesini tıklayın.
3. Konsolda aşağıdaki komutları çalıştırarak public dizinine geçin ve tüm dosyalarını görüntüleyin:

cd public
ls -lh

Paketin Brotli ile sıkıştırılmış sürümü olan main.bundle.js.br, buraya da kaydedildi ve main.bundle.js sürümüne kıyasla yaklaşık %76 daha küçük (225 KB yerine 53 KB).

Ardından, sunucuya orijinal JS sürümleri istendiğinde bu brotli ile sıkıştırılmış dosyaları göndermesini söyleyin. Bunu yapmak için dosyalar express.static ile sunulmadan önce server.js içinde yeni bir rota tanımlayabilirsiniz.

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.br';
  res.set('Content-Encoding', 'br');
  res.set('Content-Type', 'application/javascript; charset=UTF-8');
  next();
});

app.use(express.static('public'));

app.get, sunucuya belirli bir uç nokta için GET isteğine nasıl yanıt vereceğini söylemek amacıyla kullanılır. Ardından, bu isteğin nasıl işleneceğini tanımlamak için bir geri çağırma işlevi kullanılır. Rota şu şekilde çalışır:

• İlk bağımsız değişken olarak '*.js' belirtildiğinde, bu işlev bir JS dosyasını getirmek için tetiklenen her uç nokta için çalışır.
• Geri çağırma içinde, .br isteğin URL'sine eklenir ve Content-Encoding yanıt başlığı br olarak ayarlanır.
• MIME türünü belirtmek için Content-Type üstbilgisi application/javascript; charset=UTF-8 olarak ayarlanır.
• Son olarak, next(), sıranın bir sonraki geri çağırmayla devam etmesini sağlar.

Bazı tarayıcılar brotli sıkıştırmayı desteklemeyebilir. Bu nedenle, brotli ile sıkıştırılmış dosyayı döndürmeden önce Accept-Encoding istek başlığının br değerini içerdiğini kontrol ederek brotli'nin desteklendiğini doğrulayın:

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  if (req.header('Accept-Encoding').includes('br')) {
    req.url = req.url + '.br';
    console.log(req.header('Accept-Encoding'));
    res.set('Content-Encoding', 'br');
    res.set('Content-Type', 'application/javascript; charset=UTF-8');
  }

  next();
});

app.use(express.static('public'));

Uygulama yeniden yüklendikten sonra Ağ paneline bir kez daha bakın.

Başarılı aktarım Öğelerinizi daha fazla sıkıştırmak için Brotli sıkıştırmasını kullandınız.

Sonuç

Bu codelab'de, brotli özelliğinin uygulamanızın genel boyutunu nasıl daha da küçültebileceği gösterilmiştir. Desteklendiği durumlarda brotli, gzip algoritmasından daha güçlü bir sıkıştırma algoritmasıdır.

Uyarı: Manuel olarak uygulamadan önce CDN'nizin brotli protokolünü destekleyip desteklemediğini kontrol etmeyi unutmayın. brotli algoritmasını manuel olarak uygulamanız gerekiyorsa (bu codelab'de açıklandığı gibi) ancak gzip gibi diğer sıkıştırma algoritmaları için CDN desteğiniz varsa brotli algoritmasının avantajlarını, uygulama için gereken çabayla karşılaştırmanız önerilir.