CSS Optimizasyonu - Web Sitenizi Hızlandırmanın 21 Yolu
· Время на чтение: 8min · tarafından
·
Yayınlanan
· Güncellenmiş
Bu makaleyi dinle
css tıpkı HTML ve JavaScript gibi nispeten karmaşık bir boru hattından geçmelidir. Tarayıcı, dosyaları sunucudan indirmeli ve ardından bunları ayrıştırmalı ve DOM'a uygulamalıdır. 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. Genellikle geliştiriciler kendilerini kötü hissetmezler - T3 İnternet ile sekiz çekirdekli güçlü bir iş istasyonunda oturduklarında, hız kimsenin umurunda değildir. Gecikmeler veya CPU sınırlamaları olan cihazlar devreye girdikçe bu değişiyor.
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.
Makalenin içeriği:
- Kısayol CSS Önerilerini Kullanın
- Kullanılmayan CSS kodunu kaldırın
- CSS ile daha uygun bir şekilde çalışın
- Stillerinizle ilgili sorunların her zaman farkında olun
- Satır İçi Kritik CSS
- Paralel Olmayan Analiz
- Resimlerinizi CSS ile değiştirin
- Renk kombinasyonlarını kullanın
- Gereksiz sıfırları ve birleri kaldırın
- Fazladan noktalı virgülleri kaldır
- Doku karakterlerini kullanın
- İstenmeyen pikseli sil
- Zorlu oranlardan kaçının
- Gereksiz boşlukları kaldırın
- İstenmeyen yorumları kaldırın
- Otomatik sıkıştırma kullan
- NPM'den çalıştır
- Sass ve diğerlerini kontrol altında tutun
- önbelleğe almayı ayarla
- önbelleği temizle
- Temel Bilgileri Unutmayın
Kısayol CSS Önerilerini Kullanın
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: 2px; kenar boşluğu: 3px; sol kenar boşluğu: 4 piksel; } p { kenar boşluğu: 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>
<head>
<style> .blue{color:blue;} </style>
</head>
<body>
<div class="blue"> 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:
@import url("a.css"); @import url("b.css"); @import url("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 plan: #fff; }
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: 0.2em marj: 20.0em değer: 0 piksel; dolgu: .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ı tipi 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.
.indir {genişlik:80 piksel; yükseklik:31 piksel; arka plan konumu: -160px -160px; } .download:hover {genişlik:80px; yükseklik:32px; arka plan konumu: -80px -160px; }
İ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 {doldurma:0px; kenar boşluğu:0px;} h2 {doldurma: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üştürme filtresi: nth-child konumu: sabit; vesaire.
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 --tip 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.
var kompresör = gerekli('yuicompressor'); kompresör.compress('/path/to/ file or String of JS', { //Compressor Options: charset: 'utf8', type: '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.
<link rel="stylesheet" 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.
Bu makaleyi okumak:
- .htaccess dosyasında 301 yönlendirmesi nasıl yapılır - detaylı örnekler
- Web sayfası performans optimizasyonu
Okuduğunuz için teşekkürler: SEO YARDIMI | NICOLA.ÜST
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.