CSS Optimizasyonu - Web Sitenizi Hızlandırmanın 21 Yolu

Yazdır · Время на чтение: 8min · tarafından · Yayınlanan · Güncellenmiş

çoğaltmakmakaleyi dinle

Performans için CSS nasıl optimize edilir?

css gibi nispeten karmaşık bir boru hattından geçmelidir. HTML ve JavaScript. tarayıcı gerekir sunucudan dosya indirve ardından bunları ayrıştırmaya ve DOM'a uygulamaya devam edin. Aşırı optimizasyon seviyeleri nedeniyle, bu süreç genellikle oldukça hızlıdır - çerçevelere dayalı olmayan küçük web projeleri için, CSS genellikle toplam kaynak tüketiminin yalnızca küçük bir bölümünü oluşturur.

Çerçeveler bu dengeyi bozar. jQuery UI gibi bir JavaScript GUI yığını ekleyin ve CSS, JS ve HTML'nizin katlanarak büyümesini izleyin. Çoğu zaman, geliştiriciler kötü hissetmezler - T3 İnternet ile güçlü bir sekiz çekirdekli iş istasyonunda oturduklarında, hız kimsenin umurunda değildir. Bu, gecikmeler veya CPU sınırlamaları olan cihazlar devreye girdikçe değişir.

CSS optimizasyonu çok boyutlu bir yaklaşım gerektirir. El yazısı kod çeşitli yöntemler kullanılarak azaltılabilirken, çerçeve kodunu elle yinelemek verimsizdir. Bu durumlarda, otomatik simge durumuna küçültücünün kullanılması daha iyi sonuçlar verir.
Aşağıdaki adımlar, CSS'nizi optimize etmenize yardımcı olacaktır. Hepsi projeniz için doğrudan geçerli olmayabilir, bunu aklınızda bulundurun.

Kısayol CSS Önerilerini Kullanın

Hızlı sayfa yükleme için CSS optimizasyonu.

En hızlı CSS cümlesi, asla ayrıştırılmayan cümledir. Aşağıda gösterilen alan bildirimi gibi kestirme önerilerin kullanılması, CSS dosyalarınızın boyutunu büyük ölçüde azaltacaktır. Google'da "CSS Shorthand" araması yapılarak birçok ek steno bulunabilir.

İşte bir örnek:

p { kenar boşluğu: 1 piksel;
    sağ kenar boşluğu: 2 piksel;
    kenar boşluğu:  3 piksel;
    sol kenar boşluğu: 4 piksel; }

p { marj: 1 piksel 2 piksel 3 piksel 4 piksel; }

Kullanılmayan CSS kodunu kaldırın

İşaretlemenizin gereksiz kısımlarını ortadan kaldırmak, açıkça hızda büyük bir artışla sonuçlanır. Google Chrome tarayıcısı bu özelliğe kutudan çıkar çıkmaz sahiptir.

Görünüm > Geliştirici > Geliştirici Araçları'na gidin, en son sürümde Kaynaklar sekmesini açın ve komut menüsünü açın. Bundan sonra, "Kapsamı Göster"i seçin ve geçerli web sayfasında kullanılmayan kodu vurgulayan kapsam analizi penceresine hayran kalın.

CSS ile daha uygun bir şekilde çalışın

Satır satır analiz yoluyla gezinme mutlaka uygun değildir. Chrome Web Performansı Denetimi benzer bilgileri döndürür; araç çubuğundan açıp Görünüm > Geliştirici > Geliştirici Araçları > Denetle'yi seçip çalıştırmanız yeterlidir. Bu yapıldığında, sorunlu öğelerin bir listesi görünecektir.

Stillerinizle ilgili sorunların her zaman farkında olun

Otomatik CSS ayrıştırmasının her zaman hatalara yol açabileceğini unutmayın. CSS dosyalarını küçültülmüş olanlarla değiştirdikten sonra tüm web sitesini kapsamlı bir şekilde test edin - optimize edicinin hangi hataları yaptığını asla bilemezsiniz. Ve ileriye dönük olarak, iyi bir web barındırıcısı sitenizdeki kırışıklıkları düzeltmenize yardımcı olabilir.

Satır İçi Kritik CSS

Harici stil sayfalarının yüklenmesi gecikme nedeniyle zaman alıyor - "stillendirilmemiş içeriğin flaşını" hatırlayan var mı? Bu şekilde, en önemli kod parçaları başlık etiketine yerleştirilebilir.

Ancak, aşırıya kaçmamaya çalışın. Kodun bakım görevlerini yapan kişiler tarafından da okunması gerektiğini unutmayın.

İşte bir örnek:

<html>
  <kafa>
    <stil>
      .mavi{renk:mavi;}
    </stil>
    </kafa>
  <gövde>
    <div sınıf="mavi">
      Selam Dünya!
    </div>

 

Paralel Olmayan Analiz

@içe aktarmak CSS kodunuza yapı ekler. Ne yazık ki, avantajlar ücretsiz değildir: içe aktarmalar iç içe yapılabildiğinden, paralel olarak ayrıştırılamazlar. Daha paralel yol, tarayıcının aynı anda alabileceği bir dizi etiketi kullanır.

Örnek vermek:

@içe aktarmak url("acss");
@içe aktarmak url("b.css");
@içe aktarmak url(c.css);
v <link rel="stil sayfası" href="acss"> <link rel="stil sayfası" href="b.css"> <link rel="stil sayfası" href=c.css>

 

Resimlerinizi CSS ile değiştirin

Birkaç yıl önce, web sitelerinde yarı saydam efektler oluşturmak için bir dizi yarı saydam PNG dosyası yaygındı. Şu anda, CSS filtreleri kaynak tasarrufu sağlayan bir alternatiftir. Örneğin, bu adıma eşlik eden snippet, söz konusu görüntünün kendisinin gri tonlamalı bir versiyonu olarak görüntülenmesini sağlar.

Örnek vermek:

img { -webkit-filter: gri tonlamalı(100%); /* eski safari */ filtre: gri tonlamalı(100%); }

 

Renk kombinasyonlarını kullanın

Sağduyu, altı basamaklı renk tanımlayıcılarının renkleri ifade etmenin en etkili yolu olduğunu belirtir. Durum böyle değil - bazı durumlarda kısaltılmış açıklamalar veya renk adları daha kısa olabilir.

hedef { arka plan rengi: #ffffff; }
hedef { arka fon: #ff; }

 

Gereksiz sıfırları ve birleri kaldırın

CSS, çok çeşitli birimleri ve sayı biçimlerini destekler. Bunlar, optimizasyon için hoş bir hedeftir - aşağıdaki kod parçacığında gösterildiği gibi, hem sondaki hem de sondaki sıfırlar kaldırılabilir. Ayrıca, sıfırın her zaman sıfır olduğunu ve boyut eklemenin içerdiği bilgilerin değerini artırmadığını unutmayın.

dolgu malzemesi: 0.2em;
marj: 20.0em;
değer: 0 piksel;
dolgu malzemesi: .2em;
marj: 20em;
değer: 0;

 

Fazladan noktalı virgülleri kaldır

Bu optimizasyon, kod değişikliklerini etkilediği için biraz kritiktir. CSS belirtimi, bir özellik grubundaki son noktalı virgülü çıkarmanıza izin verir. Bu optimizasyon yöntemiyle elde edilen tasarruf minimum düzeyde olduğundan, bundan esas olarak otomatik optimize edici ile çalışanlar için söz ediyoruz.

p {
. . .
yazı Boyutu: 1.33em
}

 

Doku karakterlerini kullanın

Protokol ek yükü nedeniyle birden fazla küçük karakter yüklemek verimsizdir. CSS sprite'ları, bir dizi küçük görüntüyü tek bir büyük PNG dosyasında birleştirir ve daha sonra CSS kuralları kullanılarak parçalara ayrılır. gibi programlar doku paketleyici , oluşturma sürecini büyük ölçüde basitleştirir.

.indirmek {
  Genişlik:80 piksel; 
  boy uzunluğu:31 piksel; 
  arka plan konumu: -160 piksel -160 piksel
}
.indir: üzerine gelin {
  Genişlik:80 piksel; 
  boy uzunluğu:32 piksel; 
  arka plan konumu: -80 piksel -160 piksel
}

 

İstenmeyen pikseli sil

Performansı artırmanın şık bir yolu, CSS standardının bir özelliğidir. Birimsiz sayısal değerlerin piksel olduğu varsayılır - piksellerin kaldırılması her sayı için iki bayt tasarruf sağlar.

h2 {dolgu malzemesi:0 piksel; marj:0 piksel;}
h2 {dolgu malzemesi:0; marj:0}

 

Zorlu oranlardan kaçının

Analiz, bazı etiketlerin diğerlerinden daha pahalı olduğunu gösterdi. Bu adıma eşlik eden liste, özellikle performans açısından zorlu kabul edilir - fırsat verildiğinde bundan kaçının.

kenarlık yarıçapı kutu gölge dönüşümü
    filtre
    :nth-çocuk
    konum: sabit;
    vb.

 

Gereksiz boşlukları kaldırın

Boşluklar -düşünme sekmeleri, satır başları ve boşluklar- kodun okunmasını kolaylaştırır, ancak ayrıştırıcının bakış açısından fazla bir şey yapmaz. Göndermeden önce bunları ortadan kaldırın. Daha da iyisi, bu işi bir kabuk komut dosyasına veya benzer bir cihaza devredin.

İstenmeyen yorumları kaldırın

Yorumlar ayrıca derleyici için yararsızdır. Teslimattan önce bunları kaldırmak için kendi ayrıştırıcınızı oluşturun. Bu yalnızca bant genişliğinden tasarruf etmekle kalmaz, aynı zamanda saldırganların ve klonlayıcıların kodun arkasında ne olduğunu bulmasını zorlaştırır.

Otomatik sıkıştırma kullan

Yahoo'nun UI ekibi, çok fazla sıkıştırma işi yapan bir uygulama yarattı. Bir JAR dosyası olarak gelir ve seçtiğiniz JVM ile çalıştırılabilir.

java -jar yuicompressor-xyzjar
Kullanım: java -jar yuicompressor-xyzjar [seçenekler] [giriş dosyası] Genel Seçenekler -h, --help Bu bilgiyi görüntüler --type Giriş dosyasının türünü belirtir

 

NPM'den çalıştır

Ürünü Node.JS'ye entegre etmeyi tercih ederseniz, lütfen şu adresi ziyaret edin: npmjs.com/package/yuicompressor . Bakımı iyi yapılmayan depo, bir dizi sarmalayıcı dosya ve bir JavaScript API içerir.

değişken kompresör = gerekmek("yuikompresör");
 kompresör.kompres('/path/to/ file veya JS Dizesi', {
    //Kompresör Seçenekleri:
    karakter kümesi: "utf8",
    tip: "js",

 

Sass ve diğerlerini kontrol altında tutun

CSS seçici performansı birkaç yıl önceki kadar kritik olmasa da (kaynağa bakın), Sass gibi çerçeveler bazen son derece karmaşık kodlar üretir. Çıktı dosyalarını zaman zaman gözden geçirin ve sonuçları nasıl optimize edeceğinizi düşünün. Ekiple paylaşacak sonuçlarınız mı var? Dosyaları genel bulut depolama alanında depolayın.

önbelleğe almayı ayarla

Eski bir deyiş, en hızlı dosyanın asla kabloyu aşmayan dosya olduğunu söyler. Tarayıcının önbelleğini sorgulamak bunu verimli bir şekilde gerçekleştirir. Ne yazık ki, önbelleğe alma başlıklarının ayarlanması sunucuda yapılmalıdır. Ekran görüntülerinde gösterilen iki aracı iyi kullanın, bunlar yaptığınız değişikliklerin sonuçlarını hızlı bir şekilde analiz etmenizi sağlar.

önbelleği temizle

Tasarımcılar genellikle yaklaşan değişikliklerle ilgili sorunlardan korktukları için önbelleğe almayı sevmezler. Bu sorunu çözmenin temiz bir yolu, dosya adına sahip etiketleri dahil etmeyi içerir. Ne yazık ki, bazı proxy'ler dosyaları "dinamik" yollarla önbelleğe almayı reddettiği için, bu adıma eşlik eden kodda açıklanan şema her yerde çalışmaz.

<bağlantı rel="stil sayfası" href="style.css?v=1.2.3">

 

Temel Bilgileri Unutmayın

CSS optimizasyonu, optimizasyon çabasının yalnızca bir parçasıdır. Sunucunuz HTTP/2 ve gzip sıkıştırması kullanmıyorsa, veri aktarımı sırasında çok zaman kaybedilir. Neyse ki, bu iki sorunu çözmek oldukça basittir. Örneğim, bir .htaccess dosyası kullanan yaygın olarak kullanılan bir Apache sunucusu için çeşitli ayarları gösteriyor. Kendinizi farklı bir sistemde bulursanız, sunucunun belgelerine bakın.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE metin/html AddOutputFilterByType DEFLATE metin/css

Bu makale sizin için yararlı olursa çok sevinirim. Pekala, bu konuyla ilgili yeni materyaller eklemeye devam edeceğim.

Nicola Top'u okuduğunuz için teşekkür ederiz.

Gönderi ne kadar yararlı?

Derecelendirmek için ifadeye tıklayın!

Ortalama puanı 4.9 / 5. Derecelendirme sayısı: 8

Henüz derecelendirme yok. Önce derecelendirin.

Şunlar da hoşunuza gidebilir...

1 Yanıt

  1. Илья dedi ki:

    Projenizi uzun zamandır takip ediyorum. İyileşmeye bakıyorum, daha iyiye doğru değişiklikleri görmek çok güzel. Tasarımınızı ve düzeninizi beğendim. Kalite konusunda çalıştığınız görülüyor, emeğiniz için teşekkür ederiz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

16 + dört =