CSS'inizi optimize etmenin ve sitenizi hızlandırmanın 21 yolu

Sep 10, 2025
Nasıl Yapılır
Speed up your sites with optimised CSS

CSS, tıpkı HTML ve JavaScript gibi nispeten karmaşık bir boru hattından geçmelidir. Tarayıcı, dosyaları sunucudan indirmeli ve ardından ayrıştırmaya ve bunları DOM'ye uygulamak için devam etmelidir. Aşırı optimizasyon seviyeleri nedeniyle, bu işlem genellikle oldukça hızlıdır - daha küçük web projeleri için çerçevelere dayanmayan, CSS genellikle toplam kaynak tüketiminin sadece küçük bir parçasını oluşturur.

Çerçeveler bu dengeyi üzdü. JQuery UI gibi bir Javascript GUI yığını ve CSS, JS ve HTML boyutlarını izleyin. Genellikle, geliştiriciler genellikle tutamları en son hissederler - T3 internet ile güçlü bir sekiz çekirdekli iş istasyonunun arkasına otururken, kimse hızla ilgilenmez. Bu, gecikmeler veya CPU kısıtlı cihazlar olarak değişir.

  • 19 COOL CSS Animasyon Örnekleri Yeniden Olmak İçin

CSS optimizasyonu çok boyutlu bir yaklaşım gerektirir. Elle yazılmış kod çeşitli teknikler kullanılarak yıkılırken, elle çerçeve kodunun üstesinden gelince verimsizdir. Bu durumlarda, otomatik bir minimum cihazı kullanarak daha iyi sonuç verir.

Aşağıdaki adımlar bizi CSS optimizasyonu dünyasında bir yolculuğa çıkaracak. Her bir tek kişi doğrudan projeniz için geçerli olmayabilir, ancak onları aklınızda bulundurun. Daha basit bir şey ister misin? Deneyin Web Sitesi Oluşturucu .

01. Shorthand'ı kullanın

Speed up your sites with optimised CSS:

Shorthand, CSS dosyalarınızı daha küçük yapabilir

En hızlı CSS maddesi asla ayrıştırılamayan biridir. Aşağıda gösterilen marj bildirimi gibi Shorthand Clauses'u kullanarak, CSS dosyalarınızın boyutunu radikal olarak azaltır. Googling 'CSS Shorthand' tarafından çok fazla ek stenograf formu bulunabilir. 

 P {marj-top: 1px;
    Marj-sağ: 2px;
    Marj-alt: 3px;
    Marj-sol: 4px; }

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

02. Kullanılmayan CSS'yi bulun ve çıkarın

Speed up your sites with optimised CSS:

Eğer kod bir şey yapmıyorsa, ondan kurtulun

İşaretinizin gereksiz parçalarını ortadan kaldırmak, açıkça büyük hız kazanımlarına neden olur. Google'ın Chrome tarayıcısı bu işlevselliğe kutudan çıkar. Sadece View & Gt; Geliştirici ve GT; Geliştirici araçları ve kaynaklar sekmesini son sürümde açın ve komut menüsünü açın. Bundan sonra, mevcut web sayfasında kullanılmayan kodu vurgulayan kapsama analizi penceresinde kapsama alanı göster ve gözlerinizi şölen seçin.

03. Daha rahat bir şekilde yapın

Speed up your sites with optimised CSS:

Yedekli kodu kolayca düzeltmek için Web Performans Denetimini kullanın

Line-line analiz yoluyla gezinmek mutlaka rahat değildir. Chrome'un Web Performans Denetimi benzer bilgileri döndürür - sadece araç çubuğundan açın, görünüm ve GT; Geliştirici ve GT; Geliştirici Araçları & GT; Denetimler ve koşmasına izin verin. Yapıldığında, sorunlu elemanların bir listesi açılacaktır.

04. Sorunların farkında olun

Bir CSS'nin otomatize bir analizinin her zaman hatalara yol açabileceğini unutmayın. CSS dosyalarınızı haritalandırılmış olanlarla değiştirdikten sonra tüm web sitesinin tam bir testini yapın - Optimize Eden Optimize Edici'nin neler yapıldığını asla bilemez. Ve ileriye doğru ilerlemek, iyi ağ sağlayıcısı Sitenizdeki kırışıklıkları çıkarmanıza yardımcı olabilir.

05. Inline kritik CSS

Harici stil sayfalarının yüklenmesi Gecikme nedeniyle zamana mal oluyor - Herkes 'ninsiz içeriğin flaşını' hatırlıyor mu? Bu nedenle en kritik kod bitleri başlık etiketine girebilir. Bununla birlikte, abartmadığınızdan emin olun. Kodun bakım görevlerini gerçekleştiren insanlar tarafından da okunması gerektiğini unutmayın. 

 & lt; html & gt;
  & lt; head & gt;
    & lt; stil & gt;
      .blue {renk: mavi;}
    & lt; / stil & gt;
    / head & gt;
  & lt; vücut ve gt;
    & lt; div sınıf = "mavi" & gt;
      Selam Dünya!
    & lt; / div & gt;

06. Antiparalel ayrıştırma izni

@import, CSS kodunuza yapı ekler. Ne yazık ki, faydalar ücretsiz değildir: ithalat yuva yapabileceği gibi, paralel olarak ayrıştırılması mümkün değildir. Daha paralelleştirilebilir bir yol bir dizi kullanır LINK & GT; Tarayıcının bir kerede getirebileceği etiketler. 

 @Import URL ("A.CSS");
@IMPort URL ("B.CSS");
@IMPort URL ("C.CSS");
v. LINK REL = "Stylesheet" href = "A.CSS" & GT;
& link rel = "stylesheet" href = "b.csss" & gt;
& link rel = "stylesheet" href = "c.csss" & gt;

07. Görüntüleri CSS ile değiştirin

Yıllar önce, web siteleri üzerinde yarı saydam etki yaratan bir dizi yarı saydam PNGS yaygındı. Günümüzde, CSS filtreleri bir kaynak tasarrufu sağlayan bir alternatif sunar. Örnek olarak, bu adıma eşlik eden snippet, söz konusu resmin kendisinin gri tonlamalı bir versiyonu olarak görünmesini sağlar. 

 img {
    -WebKit-Filter: Gri tonlamalı (% 100); / * eski
Safari * /
    Filtre: gri tonlamalı (% 100);
}

08. Renk Kısayollarını Kullanın

Ortak bilgelik, altı basamaklı renk tanımlayıcıların renkleri ifade etmenin en etkili yolu olduğunu öğretir. Bu durum değil - bazı durumlarda, steno açıklamaları veya renk adları daha kısa olabilir. 

 Hedef {arka plan rengi: #ffffff; }
Hedef {arka plan: #fff; }

09. Gereksiz sıfırları ve birimleri ortadan kaldırın

CSS, çok çeşitli birimleri ve sayı formatlarını destekler. Optimizasyon için müteşekkir bir hedeftir - hem izleyen hem de aşağıdaki sıfırdan sonra sıfırdan çıkan sıfırlar çıkarılabilir. Ayrıca, bir sıfırın her zaman sıfır olduğunu unutmayın ve bir boyut eklenmesi, içerdiği bilgilere değer katmaz. 

 Dolgu: 0.2EM;
Marj: 20.0EM;
Avalue: 0px;
Dolgu: .2EM;
Marj: 20EM;
Avalue: 0;

10. Aşırı noktalı virgülleri ortadan kaldırın

Bu optimizasyon, kod değişikliklerini etkilediği için biraz kritiktir. CSS'nin özellikleri, bir mülk grubundaki son noktalı virgülleri atlamanızı sağlar. Bu optimizasyon yöntemi tarafından elde edilen tasarruflar asgari olduğundan, bunun çoğunlukla otomatik bir optimizatör üzerinde çalışanlar için bahsediyoruz. 

 P {
. . .
Yazı tipi boyutu: 1.33EM
}

11. Bir doku atlas kullanın

Birden fazla küçük sprite yüklenmesi, protokol genel giderleri nedeniyle verimsizdir. CSS Sprite, bir dizi küçük resimlerin bir dizi büyük png dosyasına birleştirir; bu daha sonra CSS kuralları aracılığıyla parçalanır. Gibi programlar TexturePacker Yaratılış işlemini büyük ölçüde basitleştirin. 

 .Download {
  Genişlik: 80px;
  Yükseklik: 31px;
  Arka plan-pozisyon: -160PX -160PX
}
.DOWNLOAD: Hover {
  Genişlik: 80px;
  Yükseklik: 32px;
  Arka Plan-Pozisyon: -80PX -160PX
}

12. PX'yi kovalayın

Performansı artırmanın temiz bir yolu, CSS standardının bir uzmanlığını kullanır. Ünitesiz sayısal değerler, piksel olduğu varsayılmaktadır - PX'i sökmek, her numara için iki bayt tasarruf sağlar. 

 H2 {dolgu: 0px; Marj: 0px;}
H2 {dolgu: 0; Marj: 0}

13. Pahalı özelliklerden kaçının

Analiz bazı etiketlerin diğerlerinden daha pahalı olduğunu göstermiştir. Bu adıma eşlik eden listenin özellikle performans aç olduğu kabul edilir - bunu yapma fırsatı verildiğinde onları önleyin. 

 Sınır Yarıçapı
    kutu gölge
    dönüştürmek
    filtrelemek
    : NTH-ÇOCUK
    Konum: Sabit;
    vs.

14. Boşlukları Kaldır

Boşluk - Düşünceler, satır başı ve boşluklar - Kodun okunmasını kolaylaştırır, ancak bir ayrıştırıcının bakış açısından az bir amaç sunar. Göndermeden önce onları ortadan kaldırın. Daha iyi bir yol, bu işi bir kabuk komut dosyasına veya benzeri bir cihaza devredilmeyi içerir.

15. Yorumları ortadan kaldırın

Yorumlar ayrıca derleyiciye hiçbir amaçlı değildir. Teslimattan önce onları kaldırmak için özel bir ayrıştırıcı oluşturun. Bu sadece bant genişliğini koru bile değil, aynı zamanda saldırganların ve klonların, eldeki kodun arkasındaki düşünceyi anlamalarını daha zor bir zaman geçirmelerini sağlar.

16. Otomatik sıkıştırma kullanın

Yahoo'nun kullanıcı deneyimi ekibi, birçok sıkıştırma görevini işleyen bir uygulamayı yarattı. Bir kavanoz dosyası olarak gönderilir, burada mevcut ve bir seçim olan bir JVM ile çalıştırılabilir. 

 java -jar yuicompressor-x.y.z.jar
Kullanım: java -jar yuicompressor-x.y.z.jar
 [Seçenekler] [Giriş Dosyası]
Küresel seçenekler
    -H, - help bunu görüntüler
 bilgi
    - Tipi ve JS | CSS & GT; Belirtir
 Giriş dosyasının türü

17. NPM'den çalıştırın

Ürünü node.js içine entegre etmeyi tercih ederseniz, ziyaret edin npmjs.com/package/Yuicompressor . Kötü bakımlı depo, bir Sarıcı Dosyası ve JavaScript API'sini içerir. 

 Var kompresörü = gerektirir ('YUICOMPRESSOR');
kompresör.compress ('/ Yolu / /
js ', {dosya veya dize.
// Kompresör seçenekleri:
Charset: 'utf8',
Tip: 'JS',

18. Sass ve ark'ı kontrol edin

Speed up your sites with optimised CSS:

Sass gereksiz yere karmaşık olabilir, bu yüzden yapabilirseniz optimize edebilirsiniz

CSS seçme performansı, bir yıllar önce olduğu gibi neredeyse hiç kritik değilken (kaynağa bakın), Sass gibi çerçeveler bazen aşırı karmaşık kod yayar. Çıktı dosyalarına zaman zaman bir göz atın ve sonuçları optimize etmenin yollarını düşünün. Bir takımla paylaşmak için sonuçlar var mı? Dosyaları paylaşılabilir olarak tutun Bulut depolama .

  • Sass nedir?

19. Önbellekleme Kurulumu

Eski bir atasözü, en hızlı dosyanın, kabloların üzerinden asla gönderilmeyen birinin olduğunu iddia ediyor. Tarayıcı önbellek isteklerini yapmak bunu verimli bir şekilde başarır. Ne yazık ki, önbellekleme başlıklarının kurulumu sunucuda gerçekleşmelidir. Ekran görüntülerinde gösterilen iki aletin iyi kullanımı yapın - değişikliklerinizin sonuçlarını analiz etmek için hızlı bir yol sağlar.

20. Önbelleği Büstü

Tasarımcılar, yaklaşmakta olan değişikliklerle ilgili sorunlardan dolayı önbelleğe almayı çok sevmiyorlar. Sorunun etrafında düzgün bir şekilde, dosya adıyla etiketleri dahil etmeyi içerir. Ne yazık ki, bu adıma eşlik eden kodda belirtilen şema, bazı proxy'lerin 'dinamik' yollarıyla dosyaları önbelleğe almayı reddettiği için her yerde çalışmıyor. 

 & LINK REL = "stylesheet" href = "style.csss? V = 1.2.3" & gt;

21. Temelleri unutma

CSS'yi optimize etmek, oyunun sadece bir parçasıdır. Sunucunuz HTTP / 2 ve GZIP sıkıştırma kullanmazsa, veri iletimi sırasında çok fazla zaman kaybolur. Neyse ki, bu iki problemi düzeltmek genellikle basittir. Örneğimiz, yaygın olarak kullanılan Apache sunucusuna birkaç tweaks gösterir. Kendinizi farklı bir sistemde bulursanız, sadece sunucu belgelerine danışın. 

 pico /etc/httpd/conf/httpd.conf
AddoutPutFilterbyType Metin / HTML'yi Deflat
AddoutPutFilterbyType Metin / CSS'yi Deflate

Bu makale başlangıçta yaratıcı web tasarım dergisinin 282 sayısında yayınlandı. Web tasarımcısı . Sayı 282 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

  • 10 İnanılmaz Yeni CSS Teknikleri
  • En iyi CSS ön işlemcisi hangisidir?
  • CSS Özel Özelliklerine Giriş

Nasıl Yapılır - En Popüler Makaleler

Sanatta kontrast gücünü çizin

Nasıl Yapılır Sep 10, 2025

Sanatta kontrast kullanmayı öğrenmek, projelerinizi ve çalışma şeklinizi değiştirecektir. Sanatta çalışmak için en sevdiğim yönüm kontrast. Bu genellikle renkle renk, doygunlu..

How to Photoshop someone into a picture

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Gelecek, Matt Smith) Photoshop'un fotoğrafa sokulacağını öğrenmek, edinmek için süper yara..

Sanatta foreshorting için gerekli kılavuz

Nasıl Yapılır Sep 10, 2025

(Resim Kredisi: Rob Lunn) Sanatta nehirlleştiğini merak ediyorsanız, yalnız olmadığınızdan eminiz. Umarım, b..

Mikro etkileşimler oluşturmak için Adobe XD'yi kullanın

Nasıl Yapılır Sep 10, 2025

(Resim Kredisi: Adobe) Adobe XD, tasarımcıların ve DEV ekiplerinin iş akışı bakımı ile geliştirilmesinde ge..

Grid ve FlexBox ile bir blog oluşturun

Nasıl Yapılır Sep 10, 2025

Son iki ila üç yıl Layout'un sıçramalarda ve sınırlarda ilerlemesini gördü. Artık bu modern tekniklerin modern tarayıc..

WebGL ile sıvı etkileri nasıl oluşturulur

Nasıl Yapılır Sep 10, 2025

Birçok web tasarımcısı, sitelerinin tasarımlarına büyük bir etki katmanın yollarını arar, böylece kullanıcılarını..

Gerçekçi bir dijital insan oluşturun

Nasıl Yapılır Sep 10, 2025

Biliyorsundur İnsanları nasıl çizilir , ancak bir fotoğraftan ayırt edilemeyen bir dijital portre oluşturma..

Illustrator'da yoğun bir şehir sahnesi oluşturun

Nasıl Yapılır Sep 10, 2025

En iyi şehir yoğun bir şehirdir, ancak bu yoğun bir atmosfer başarıyla yakalanması kolay bir şey değildir. Ancak bazı b..

Kategoriler