CSS Teslimatını Optimize Etme – 7 Basit Adım

css optimizasyon vektör görüntüTasarım uzmanlarının ve endüstri lideri blog yazarlarının 30 kilobaytı aşmayan web sayfaları oluşturmayı önerdikleri günler geride kaldı …


O zamanlar bu “sınır” ın HTML, JavaScript, resimler, CSS ve Flash ile başa çıkması bekleniyordu. Dürüst olalım, 30 kb’yi tamamen aşmak fazla zaman almıyor.

JavaScript ve CSS popülerlik kazandıkça, yalnızca CSS’nin 30 KB tavanı aşması yaygınlaştı. Bu özellikle büyük web siteleri için geçerlidir.

Ancak, web siteniz için sayfalar oluştururken ve tasarlarken “kilobayt sayımınıza” fazla odaklanmamalısınız. Sayfalarınızı saklamak önemlidir optimize ve CSS’nizi yazarken sıkı.

Optimizasyon sadece dosyalarınızın boyutunu en aza indirmekle ilgili değildir. Sayfalarınızı dağınıklıktan ve şişkinlikten uzak tutmak, mümkün olduğunca düzenli ve verimli hale getirmekle ilgilidir. CSS optimizasyonu en iyi uygulamaları hakkında daha fazla bilgi edindikçe, otomatik olarak daha küçük dosya boyutları oluşturduğunuzu göreceksiniz..

İşte CSS’nizi şu anda optimize etmek için yapabileceğiniz 5 basit şey:.

CSS Teslimatını Tam Olarak Optimize Etme

1. Steno Kullan

Kısaca yazmak çok yaygın bir uygulama haline gelmiştir. Bu, kodunuzu azaltmanın ve kodlamanın ne kadar sürdüğünün en basit yoludur. Bunu henüz yapmıyorsanız, şimdiki zaman gibi bir zaman yok.

css font özelliği

Kısayol için kullanabileceğiniz çok sayıda öğe vardır, ancak en yaygın olanları şunlardır:

  • kenar
  • Dolgu malzemesi
  • Yazı tipi
  • taslak
  • sınır
  • Arka fon
  • Liste biçimi

stenografi yapılandırma değerleriDeğerleri steno kullanarak da birleştirebilirsiniz. Farklı değerler belirterek, tarayıcı kuralları yorumlamak için temel olarak belirli bir yöntem kullanır..

Herhangi bir stenografi kullanma genel kodunuzu çok daha özlü hale getirin. Hem karakterleri hem de satırları kaydediyorsunuz.

Mümkün olan her alanda stenografi kullanırsanız, bu, genel dosya boyutunu önemli ölçüde azaltabilir.

2. Hack’lerden kurtulun

yani css kuralıIE’ye özgü CSS kurallarını sunmak için koşullu CSS kesmek kullanmak size daha küçük ve daha temiz bir varsayılan CSS dosyası sunma avantajı sağlar.

Daha standartlara uygun tarayıcılara yardımcı olur. Ancak, ek sayfa ağırlığı yalnızca bunu gerektiren tarayıcılar tarafından indirilir.

Bir saldırı kullanmanız gerekiyorsa, kullandığınız kodun odaklandığınız Internet Explorer sürümüne özgü olması gerekir..

Kendiniz yazmak istemiyorsanız, hack olarak hizmet veren çok sayıda önceden yazılmış kod vardır. Önceden yazılmış koda gerçekten bakmak için zaman ayırın ve doğru olduğundan emin olun yoksa bu daha da fazla soruna yol açabilir.

Şimdi, istediğiniz sonuçları almak için CSS’yi kullanabiliyorsanız, bunu herhangi bir hack olmadan yapın. Tabii ki, bu diğer şeylerin eşit olmasına bağlıdır. Sitenizde daha az saldırı kullandığınızda genel kodunuz çok daha hafif ve daha basit olacaktır.

3. Boşluk Kullanımı Hakkında Akıllı Olun

CSS kodunuz için, boşluk zorunludur okunabilirlik için.

Boşluk, sekmeler, boşluklar ve ekstra satır sonları gibi öğeler içerir. Elimine edebileceğiniz her boşluk, bir karakteri elemeye benzer.

boş satırları kaldırAncak, daha küçük bir dosya uğruna boşluk bırakılması önerilmez. Web sayfalarınızda hala en iyi okunabilirliği korumanız gerekir.

Boşluk biçimlendirme için önemlidir, bu nedenle bir denge bulmak istersiniz. Bazı boşlukları ortadan kaldırmak için metne büyük bloklar halinde yazarsanız, İnternetteki okuyucuların kısa ilgi alanı, onları tıklatacak.

Hem daha küçük bir dosya boyutu hem de okunabilirlik sağlamanın bir yolu sekmeleri kaldırmak ve paragraflar arasına yalnızca tek bir satır koymaktır. Bu, okunabilirlik açısından yeterli boşluk sağlar, ancak gerekli olmayan boşlukların bir kısmını da ortadan kaldırır.

Şimdi, CSS dosyanızın üretim sürümü için boşlukları kaldırabilirsiniz. Hala çalışma dosyanızda mevcut olacak.

Bu, hem daha küçük dosyalarınıza hem de okunabilir biçimlendirmeye sahip olmanız için ödün vermenin başka bir yoludur.

4. Sıfırlama Sıfırlama ve Çerçeveleri

Bir CSS çerçevesi kullanırken, belgeleri gözden geçirmeniz zorunludur.

CSS dosyanızdaki her bir satıra bakmak da aynı derecede önemlidir. Çerçevede mevcut projeniz için istemediğiniz bazı kurallar olduğunu keşfedeceğiniz zamanlar vardır. Bunlar kaldırılabilir.

kullanılmayan css kuralları kaldırıldı

Sunum detaylarını daha özlü ve zarif bir şekilde elde edebileceğinizi görebilirsiniz …

Bu genellikle kullandığınız şey olmayabilir, ancak çalışırsa daha temiz bir çerçeveye izin verebilir. Bunları bildiğinizde, kural kümelerinin istemeden çoğaltılmasını önlemenize de yardımcı olur..

Aynı bilgiler sıfırlamalar için de geçerlidir. Sıfırlamaları kullandığınızda, tarayıcının varsayılan stilini etkisiz hale getirmeye yardımcı olurlar. Şimdi, oluşturduğunuz web sitesini biliyorsanız, ihtiyacınız olmayacağını bildiğiniz belirli bildirimleri bulmak nadir değildir..

Örneğin, genel bir blogda, muhtemelen bunları kullanmayacaksınız. Yaptığınız site için ihtiyacınız olmayan şeylerden kurtulun. Yapabilirsin bir dizi kural kullandığınızda daha iyi optimize edilmiş çalışma sağlayın sıfırlama veya çerçeve ile ilgili.

Ancak, varsayılan durumlarında kabul edilmemelidir. CSS dosyalarınızı okunabilir ve yalın tutmak için her bildirime ayrı ayrı bakın ve gereksiz olanları kesin.

5. CSS’nizi Geleceğe Hazırlayın

Css sözdizimi

Başka bir yararlı CSS optimizasyon seçeneği: kurallarınızın çoğunu düzene özgü bildirimlerinizden ayırın.

Mümkünse mizanpajı kendi ayrı dosyasına atayın. Değilse, en azından kendi bölümünü vermek faydalı olabilir.

Nihayetinde, CSS kullanan mevcut yöntemler olan konumlandırma ve şamandıralar – mizanpaj aracı olarak kullanılmak üzere tasarlanmamıştı.

Bazıları, bunların aslında yerleşim korsanlarına benzediğini söyleyebilir. Şu anda geçerli bir alternatif yoktur ve umarım, yerleşim standartları üzerinde anlaşmaya varıldığında, tarayıcılardan destek almaya başlarlar..

Bu destek gerçekleştikten sonra, mizanpaj amaçlı olanlar için saldırıya uğrayan kutu modeli özelliklerini değiştirmek çok zor olmamalı.

Şu anda, en iyi seçim, doğru özellikleri kullanarak mizanpajınızı ele almaktır. Bu genellikle sayfa ağırlığını şu anda tuhaflıkları telafi etmek için mevcut olan sınırlı özellik kümesini kullanmaktan daha etkili bir şekilde yoğunlaştıracaktır..

6. Çalışmanızla İlgili Her Zaman Güncel Belgeleri Saklayın

Bir web sitesinde ekip olarak veya tek başına çalışıyor olun, yaptığınız her şeyi takip etmek zorunludur.

Örneğin, tek başınıza yaptığınız bir şeyi unutabilirsiniz. Bir ekip olarak, birisi bir şeyler yapabilir ve kodun çeşitli öğelerinde sorunlara neden olabilecek değişiklikler yapana kadar farkında olmayabilirsiniz..

css yorumu eklemeKod çoğaltmaları, özellikle popüler web sitesi oluşturucularını kullanırken hem ekipler hem de bireysel tasarımcılar için büyük bir endişe alanıdır. Wix, Squarespace ve diğer web sitesi oluşturma yazılımları kodu çoğaltmak veya tamamen veritabanından kaçırmak için bilinir.

Stil sayfası kılavuzlarını ve biçimlendirme kılavuzlarını kullanmak uygun dokümantasyon seçimleridir. CSS yorumlarını başka bir seçenek olarak da kullanabilirsiniz ve bu, uzun CSS dosyalarının öğelerini bölümlemek için yararlı olabilir. Bunları stil veya biçimlendirme kılavuzuna koymak, dosya boyutunu eklemelerini önler.

Kod şişirmenin en hızlı yollarından biri, aynı işi iki kez yapmaktır. Kodlama karmaşıktır, bu nedenle yaptığınız her şeyin doğru bir şekilde belgelenmesi zorunludur.

Yalnız çalışıyorsanız, çalışmaya başlamak için her oturduğunuzda bu belgeleri incelemek idealdir. Bir ekibin parçası olarak çalışırken, aynı belgede kodlayan herkesin topluluk stiline veya biçimlendirme kılavuzuna uyar böylece kodlama değişiklikleri gruptaki herkes tarafından kolayca anlaşılır.

7. Dosyalarınızı Sıkıştırın (CSS Optimizasyonu 101)

css sıkıştırma ve optimizasyon gif

Sıkıştırma: Bundan biraz daha fazlası var…

CSS’yi optimize etmenin etkili bir yolu sıkıştırma kullanmaktır. Bu, insanlar tarafından okunamıyor olsa da dosyalarınızın tarayıcı dostu olmasını sağlamanın bir yoludur.

Çalışan kopyalarla karşılaştırıldığında, bunlar boyutun bir kısmı olacaktır. Sıkıştırma işlemini kolaylaştırmak için yararlanabileceğiniz farklı uygulamalar vardır.

Bunlar, birbirinin üzerine yazan CSS özelliklerini bulma ve düzeltme, beyaz alanı sıkıştırma ve CSS steno kullanma şansı arama gibi görevleri yerine getirecek.

Bu uygulamaların rahatlığına ek olarak, isterseniz el ile yapabileceğiniz görevler hakkında daha fazla bilgi edinmenize de yardımcı olabilirler. CSS dosyalarınızı biçimlendirmenize yardımcı olması için çeşitli metin düzenleyicileri de kullanabilirsiniz.

Sahip olduğunuz çeşitli CSS dosyalarının zip sürümlerini sunabilirler. Bu genellikle PHP kullanılarak yapılır. Optimizasyon ve sıkıştırma araçlarını kullanmak istiyorsanız, sizin için doğru olanı seçmeden önce birden fazla seçeneği gözden geçirdiğinizden emin olun..

Şimdi, bu uygulamalar genellikle hataları en aza indirmede iyidir, ancak mükemmel değildir. Bu nedenle, doğruluğu sağlamak için bir uygulamayı kullandıktan sonra CSS’nizi her zaman gözden geçirmelisiniz. Optimize edilmiş ve temiz kod, dosya boyutu için değil, aynı zamanda okunabilirlik ve bakım için de önemlidir.

Senin sıran

Burada ele alınan ilkeler, CSS için değil, aynı zamanda JavaScript, HTML ve diğer programlama dilleri için de somut değerlendirmelerdir. Web sitenizin oluşturulmasına kıyasla, CSS dosyaları son kullanıcı kadar belirgin değil.

Ancak, burada tartışılan ilkeler hem geliştirme deneyimine hem de kullanıcı deneyimine yardımcı olur.

En iyi web hosting şirketleri CSS optimizasyonu ile size yardımcı olacaktır. Daha hızlı web siteleri sizi mutlu bir müşteri yapar, ancak daha küçük dosyalar da sunucularına daha az yüklenir.

Kanada web barındırıcılarının her birini test ettik ve SiteGround’u öneriyoruz. Yalnızca CSS dağıtımını optimize etmenize yardımcı olmakla kalmaz, aynı zamanda teknik destekleri benzersizdir.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map