CSS'yi küçültün

Demián Renzulli
Demián Renzulli
X GitHub Arıza

CSS dosyaları yorum, boşluk ve girinti gibi gereksiz karakterler içerebilir. Üretimde bu karakterler, tarayıcının stilleri işleme şeklini etkilemeden dosya boyutunu küçültmek için güvenli bir şekilde kaldırılabilir. Bu tekniğe küçültme denir.

Küçültülmüş CSS yükleniyor

Aşağıdaki CSS bloğuna göz atın:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

Gereksizden daha büyük bir dosya oluşturmak pahasına bu içeriğin kolay okunması:

  • Girintileme amacıyla boşluk kullanır ve tarayıcı tarafından yoksayılan yorumları içerir. Böylece kaldırılabilirler.
  • <h1> ve <h2> öğeleri aynı stillere sahip: Bunları ayrı ayrı tanımlamak yerine: "h1 {...} h2 {...}" "h1, h2{...}" olarak ifade edilebilir.
  • background-color, #000000 yalnızca #000 olarak ifade edilebilir.

Bu değişiklikleri yaptıktan sonra, aynı stillerin daha kompakt bir sürümünü elde edersiniz:

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Muhtemelen CSS'yi bu şekilde yazmak istemezsiniz. Bunun yerine, her zamanki gibi CSS yazabilir ve derleme sürecinize bir küçültme adımı ekleyebilirsiniz. Bu kılavuzda, popüler bir derleme aracı olan webpack'i kullanarak bunu nasıl yapacağınızı öğreneceksiniz.

Ölçüm

CSS küçültme işlemini, diğer kılavuzlarda kullanılmış olan bir siteye uygularsınız: Favori Kitler. Sitenin bu sürümü, kullanıcılar bir kedi için oy verdiğinde farklı sayfa öğelerine animasyon eklemek üzere havalı bir CSS kitaplığı (animate.css) kullanıyor. 😺.

İlk adım olarak, bu dosyayı küçülttükten sonra fırsatın ne olacağını anlamanız gerekir:

  1. Ölçüm sayfasını açın.
  2. Şu URL'yi girin: https://fav-kitties-animated.glitch.me ve Denetimi Çalıştır'ı tıklayın.
  3. Raporu görüntüle'yi tıklayın.
  4. Performans'ı tıklayın ve Fırsatlar bölümüne gidin.

Elde edilen raporda animate.css dosyasından 16 KB'a kadar kayıt kaydedilebileceği gösterilmektedir:

Lighthouse: CSS fırsatlarını küçültün.

Şimdi CSS'nin içeriğini inceleyin:

  1. Chrome'da Favori Kitler sitesini açın. (Glitch sunucularının ilk seferde yanıt vermesi biraz zaman alabilir.)
  2. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  3. Ağ sekmesini tıklayın.
  4. CSS filtresini tıklayın.
  5. Önbelleği devre dışı bırak onay kutusunu seçin.
  6. Uygulamayı yeniden yükleyin.

Geliştirici Araçları CSS optimize edilmemiş izleme

Sayfa, sırasıyla 1,9 KB ve 76,2 KB boyutunda iki CSS dosyası istiyor.

  1. animate.css'i tıklayın.
  2. Dosya içeriğini görmek için Yanıt sekmesini tıklayın.

Stil sayfasının boşluklar ve girintiler için karakterler içerdiğini unutmayın:

Geliştirici Araçları CSS optimize edilmemiş yanıtı

Sonra, bu dosyaları küçültmek için derleme işleminize bazı web paketi eklentileri ekleyeceksiniz.

Webpack ile CSS Küçültme

Optimizasyonlara başlamadan önce, Fav Kitities sitesi için derleme sürecinin nasıl işlediğini anlayın:

Varsayılan olarak, web paketinin oluşturduğu JS paketi, satır içi CSS dosyalarının içeriğini içerir. Ayrı CSS dosyaları tutmak istediğimiz için tamamlayıcı iki eklenti kullanıyoruz:

  • mini-css-extract-plugin, derleme işleminin adımlarından biri olarak her stil sayfasını kendi dosyasına çıkarır.
  • webpack-fix-style-only-entries, webpack-config.js içinde listelenen her CSS dosyası için ek bir JS dosyası oluşturmayı önlemek amacıyla Wepback 4'teki bir sorunu düzeltmek için kullanılır.

Şimdi projede bazı değişiklikler yapacaksınız:

  1. Glitch'te Fav Kitities projesini açın.
  2. Kaynağı görüntülemek için Kaynağı Görüntüle'ye basın.
  3. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
  4. Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).

Oluşturulan CSS'yi küçültmek için optimize-css-assets-webpack-plugin'i kullanırsınız:

  1. Glitch Console'da npm install --save-dev optimize-css-assets-webpack-plugin komutunu çalıştırın.
  2. Değişikliklerin Glitch düzenleyicisiyle senkronize edilmesi için refresh komutunu çalıştırın.

Ardından, Glitch düzenleyicisine dönün, webpack.config.js dosyasını açın ve aşağıdaki değişiklikleri yapın:

Dosyanın başında modülü yükleyin: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");.

Ardından, eklentinin bir örneğini plugins dizisine iletin: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] Değişiklikler yapıldıktan sonra projenin yeniden derlemesi tetiklenir. Elde edilen webpack.config.js aşağıdaki gibi görünür:

Daha sonra, bu optimizasyonun sonucunu performans araçlarıyla kontrol edeceksiniz.

Doğrula

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.

Önceki herhangi bir adımda kaybolduysanız şuraya tıklayabilirsiniz: burada, optimize edilmiş bir sürümünü kullanabilirsiniz.

Dosyaların boyutunu ve içeriğini incelemek için:

  1. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  2. Ağ sekmesini tıklayın.
  3. CSS filtresini tıklayın.
  4. Zaten işaretli değilse Önbelleği devre dışı bırak onay kutusunu işaretleyin.
  5. Uygulamayı yeniden yükleyin.

Geliştirici Araçları CSS optimize edilmemiş yanıtı

Bu dosyaları inceleyip yeni sürümlerin boşluk içermediğinden emin olun. Her iki dosya da çok daha küçük. Özellikle de animate.css dosyası ~%26 küçültüldü ve yaklaşık 20 KB tasarruf edildi!

Son adım olarak:

  1. Ölçüm sayfasını açın.
  2. Optimize edilmiş sitenin URL'sini girin.
  3. Raporu görüntüle'yi tıklayın.
  4. Performans'ı tıklayın ve Fırsatlar bölümünü bulun.

Raporda "CSS'yi küçült" ifadesi gösterilmiyor "Opportunity" (Fırsat) olarak ve "Başarılı Denetimler" bölümüne taşındı. bölüm:

Optimize edilmiş sayfa için Lighthouse Denetimlerinden geçti.

CSS dosyaları oluşturmayı engelleyen kaynaklar olduğundan, büyük CSS dosyaları kullanan sitelere küçültme uygularsanız First Contentful Paint gibi metriklerde iyileştirmeler görebilirsiniz.

Sonraki adımlar ve kaynaklar

Bu kılavuzda, webpack ile CSS Küçültme konusunu işlemiştik. Ancak aynı yaklaşım, Gulp için gulp-clean-css gibi diğer derleme araçlarıyla da uygulanabilir. Grunt için grunt-contrib-cssmin

Küçültme diğer dosya türlerine de uygulanabilir. JS'yi küçülten araçlar ve sıkıştırma gibi bazı tamamlayıcı teknikler hakkında daha fazla bilgi edinmek için Ağ yüklerini küçültme ve sıkıştırma rehberine göz atın.