CSS dağıtımı nedir?

  • Bir web sayfasını oluşturmak için CSS’nin kullanılma biçimi
  • Harici CSS dosyalarının, dahili CSS bloklarının veya ikisinin bir kombinasyonunun kullanılması.

CSS, bir web sayfası tarafından birçok şekilde kullanılabilir ve yine de çalışır. Kullanmanın birçok yolu olduğundan, birçok farklı CSS kurulumu vardır.

Sayfalarınızda nasıl kurulursa kurulsun, CSS’niz web sayfalarınızın onları yavaşlatmadan daha hızlı oluşturulmasına yardımcı olmalıdır.



“Optimize edilmiş CSS dağıtımı” örneği

css dosyaları ve html

İdeal CSS kurulumu şuna benzer …

  • Makul boyutta birden fazla harici CSS stil sayfası (75 KB’den az)
  • Ekranın üst kısmındaki içerik için stil etiketlerini kullanarak küçük CSS’yi HTML’ye satır içi yapın
  • CSS için @import çağrısı yok
  • HTML’de CSS yok, div’leriniz veya h1’leriniz gibi şeyler (element CSS’de)

Bu CSS kurulumunun ideal olmasının nedeni, CSS’nin oluşturmayı engellemesini en aza indirmesi ve sayfanın çok hızlı yüklenmesidir.

Bu farklı CSS teslimi türlerine aşina iseniz, web sayfanızın veya blog yayınınızın CSS’yi nasıl kullandığına dair bir genel bakış elde etmek için css yayınlama aracı kullanabilirsiniz.

Aşina değilseniz panik yapmayın, her birini aşağıda açıklarım (ilk göründüğünden daha az kafa karıştırıcı, söz veriyorum).

Harici CSS dosyaları

Harici CSS dosyaları, CSS’nin web sayfalarında kullanılmasının ana yoludur ve büyük olasılıkla CSS’nizin kullanım şeklidir. Html’nizin baş bölümünde genellikle buna benzeyen bir şey var …

<link rel = “stylesheet” type = “text / css” href = “http://yoursite.com/main.css” media = “screen” title = “style (ekran)” />

Bu, CSS dosyanızı çağırır ve bunlar harici olarak adlandırılır çünkü CSS talimatları HTML’nizden ayrı bir dosyadadır. Harici bir CSS dosyasına sahip olmak, CSS’nizi işlemenin fiilen yoludur ve CSS’nizin bir web tarayıcısı tarafından önbelleğe alınması (hatırlanması) avantajına sahiptir. Sorunun geldiği yer, bu dosyalardan birkaçına sahip olmanızdır. Ne yazık ki, bu genellikle WordPress ve diğer tema türlerinde geçerlidir.

Birden fazla CSS dosyanız varsa, bunlar tek bir dosyada birleştirilmelidir.

css dosyaları

Birkaç harici CSS dosyanız olduğunda, tarayıcının sayfanızı görüntüleyebilmesi için her birini indirmesi gerekir. Bu, birçok gidiş dönüşün her CSS dosyasını almasına neden olur ve bu da web sayfanızın yavaş yüklenmesine neden olur. Bu, tüm CSS dosyalarını tek bir dosyada birleştirerek kolayca değiştirilebilir.

Satır İçi CSS

css dosyaları

Satır içi CSS, HTML belgesinin kendisinde bulunan CSS talimatlarıdır. Bu yöntemin ana avantajı, web sitesi gösterilmeden önce fazladan (harici) dosya alınmasına gerek olmamasıdır. CSS talimatları küçükse, bu avantaj yalnızca gerçek bir avantajdır. CSS’niz büyükse, bu sizin için iyi bir yöntem değildir.

Satır içi stil, aşağıda gösterildiği gibi stil etiketlerinin içine talimatlar yerleştirilerek gerçekleştirilir …

<style>
CSS buraya gelir
</style>

Satır içi küçük CSS, sayfaların web tarayıcılarında yüklenme şeklini gerçekten hızlandırabilir.

CSS dosyalarınızı çağırmak için @import kullanmayın

@ css dosyalarının içe aktarılması

@İmport yöntemi, harici CSS dosyalarının yukarıda tartışıldığı gibi doğrudan bağlantı kurmak yerine @import komutu kullanılarak çağrıldığı yerdir. Bu yöntem, CSS dosyası veya çağrılan dosyaların, bu yöntem kullanılarak bir seferde yalnızca bir tane indirilebildiğinden, bağlantı yönteminden daha yavaş yüklenmesine neden olur. Kodunuzda şöyle görünüyor …

@import url (“style.css”)

Bu çağrılar web sayfanızın hızına gerçekten zarar veriyor ve birçok tasarımcı hala kullanıyor, bu yüzden kontrol edilmesi gerekiyor.

HTML öğelerinde CSS özelliklerini satır içi yapmayın

css öğesinde

Stilleri HTML öğelerine koymak çok yaygındır, aslında bunu her zaman yapma eğilimindeyim. Google sayfa hızı yönergesi “CSS dağıtımını optimize edin”, bunu artık yapmamamız gerektiğini söylüyor. Bunun tarayıcının daha yavaş yanıt vermesine neden olacağını ve kodumuzda bu tür stillerin bulunmasının akıllıca olmayacağını çünkü bunu yapmak, herhangi bir öğeyi engelleyecek bir güvenlik protokolü olan W3’ün İçerik Güvenlik Politikasına aykırıdır. varsayılan olarak stilleri stiller. Bu stiller şuna benziyor …

<p style = "float: left;"> veya <div style = "color: #fff;">

Kodumda bunlardan çok var ve hepsinden kurtulmak için çok çalışmam gerekecek.

Web tasarımcıları

CSS’nin bir web sayfasında kullanım şekli, büyük ölçüde web sitesi sahipleri tarafından değil, web tasarımcıları tarafından belirlenmiştir. Bu yüzden web tasarımcısı güzel, iyi yorumlanmış CSS kodu yapıyor ve anlaşılır olması için birkaç farklı dosyaya yerleştiriyor. Lütufla, “Harika bir iş yaptım” diye düşünüyorlar. Bu onlara öğretilen şeydir.

Ne yazık ki bu uygulama ve diğerleri web sayfalarının performansını düşürüyor. CSS birden çok dosyadaysa, sayfanın bir tarayıcıda görüntülenebilmesi için birden çok istek yapılmış olması, sayfa yükünü yavaşlatır ve mobil sayfa yüklemelerine ciddi şekilde zarar verir . Mümkün olan en iyi web performansı için tüm CSS yalnızca tek bir dosyada olmalıdır.

Bu farkındalık ortaya çıktıkça, web tasarımcılarının kullanıcılarına olabildiğince hızlı çalışarak yardımcı olacak kodlar yapmaya başlayacaklarını fark edeceksiniz, ancak şimdilik … Muhtemelen web sitenize yardım etmek yerine zarar veren CSS’ye sahipsiniz.

Kapanışta

Gördüğünüz gibi, web sayfalarında CSS’nin kullanılmasının birçok yolu vardır, ancak önemli olan, sayfalarımızın olabildiğince hızlı yüklenmesini sağlamak için kodu temizlememiz ve önerilen CSS dağıtımını kullanmamız gerektiğidir.

Öneriler:

  • Harici CSS stil sayfalarını birleştirin
  • Stil etiketlerinde satır içi küçük CSS
  • @İmport uygun olduğunda CSS çağrısı yapmaz
  • HTML’de CSS yok, div’leriniz veya h1’leriniz gibi şeyler (element CSS’de)