Render engelleme css nedir?

  • İşleme CSS’sini engelleme, bir web sayfasının zamanında görünür olmasını geciktirir.
  • Css dosyalarınızın her biri sayfanızın oluşturulmasını geciktirir.
  • Css’niz ne kadar büyük olursa, sayfanın yüklenmesi de o kadar uzun sürer.
  • Ne kadar çok css dosyanız varsa, sayfanın yüklenmesi o kadar uzun sürer.

Render engelleme css neden kötü?

blank

Rss engelleme web sitenizi yavaşlatır.

Web sitenizden nasıl para kazanırsanız kazanın, daha hızlı daha fazla para demektir.

  • Adsense tarafından desteklenen siteler, reklamlar daha hızlı ve daha uzun görünürse daha fazla para kazanır.
  • Ticaret siteleri daha az alışveriş sepetini terk ederek ve daha iyi ve daha az sinir bozucu bir kullanıcı deneyimi sağlayarak daha fazla para kazanır.

Render engelleme css nasıl ortadan kaldırılır?

  1. Css dosyalarınızı doğru şekilde çağırın
  2. Kritik yoldaki css dosyalarının miktarını azaltın
  3. Genel olarak daha az css kullan

Bu makale, bu seçeneklerin her birine gerçekten derinlemesine bakacak ve bunu kendiniz yapma yöntemlerini, tasarımcılarınıza veya web yöneticilerinize sizin için yapmaları için talimat vermek için kullanışlı ipuçları ve her çözümü anladığınız sorunları yeterince gösterecektir.

Çözümün en kolay kısmı ile başlayacağız … Google tarafından önerilen şekilde css dosyalarınızı doğru şekilde çağırıyoruz. 1

1. CSS nasıl düzgün aranır

CSS, web sayfanızdan birçok yönden çağrılabilir ve modern, hızlı ve mobil dünyamızda bazı yollar yanlış yapılır.

İşte css arama biçiminde aramak için iki şey.

  • Css dosyalarını aramak için @import kullanmayın
  • Koşullu css’yi uygun şekilde etiketleyin

@İmport ve yanlış etiketlenmiş css kullanmak oluşturma engelleme sorunlarıdır ve her biri kolayca çözülebilir, onlara daha yakından bakalım.

Css’i aramak için @import kullanmayın

blank

Sorun: CSS’yi çağırmanın bu yöntemi kötü çünkü sayfanızın yüklenebilmesi için css’nizin yüklenmesi gereken süreyi artırıyor.

Çözüm: @ import çağrılarını bulun ve değiştirin.

Algılama: Sayfa hızı aracını kullanın . Sol sütunda, öğelerden biri “CSS içe aktarma işleminden kaçının”. Yeşil bir onay işaretiniz varsa, @import bulunamadı. Eğer bulunursa, kırmızı bir “x” olacaktır.

Ayrıntılar: CSS içe aktarımları bu şekilde görünür ve genellikle dosyanın üst kısmına yakın olur. @import url (“style.css”)

İçe aktarma yöntemini kullanarak bu css dosyasını çağırmak yerine , bu ek css’i yalnızca bir dosyada tutmak daha iyidir (içe aktarılan css’yi orijinal css dosyasına kopyalayıp yapıştırın). Bunu herhangi bir nedenle yapamıyorsanız, aşağıdaki kodu kullanarak bu css dosyalarını html dosyasından ekleyin … <link rel = “stil sayfası” href = “style.css”>

“Style.css” dosyasını CSS dosyanızın konumu ve adıyla değiştirdiğinizden emin olun.

Koşullu css’yi uygun şekilde etiketleyin

Sorun: css doğru şekilde etiketlenmediğinde, tarayıcı web sayfasını oluşturmadan önce varsayılan olarak tüm css’leri yüklemektir.

Çözüm: Tarayıcı, css dosyalarının oluşturulmaya başlaması için tüm css’lerin gerekli olmadığını bilmesi için düzgün bir şekilde etiketlenir.

Algılama: HTML’nizi inceleyin ve css’inizin nasıl etiketlendiğine bakın (aşağıda açıklanmıştır).

Ayrıntılar: Tipik bir css dosyası aşağıda gösterildiği gibi çağrılır: <link href = “style.css” rel = “stil sayfası”>

Yukarıdaki kodda, sadece “burada bir bağlantı” ve “bağlantı benim css için” diyor.

Yukarıdaki şekilde çağrılan herhangi bir css, web sayfanızda herhangi bir şey oluşturmadan önce her zaman tarayıcı tarafından yüklenir.

Şimdi, sayfayı oluşturmadan önce yüklenmesi gerekmeyen bir css dosyası örneğine bakalım, yani yazdırma için css talimatları … <link href = “print.css” rel = “stil sayfası” media = “yazdır”>

Yukarıdaki kod “burada bir bağlantı”, “bağlantı benim css için” ve aynı zamanda “css sadece yazdırma için” diyor.

Css media = “print” olarak etiketlendiğinden, modern tarayıcılar sayfayı oluşturmak için css dosyasının gerekli olmadığını bilir. Sonuç olarak, tarayıcı bu css dosyasına daha düşük bir öncelik verecektir. Yine de indirir, ancak bunu oluşturmayı engellemeyecek şekilde yapar.

blank

Başka bir koşullu duruma bakalım, burada bir sayfa belirli bir genişlik olduğunda kullanılan bir css dosyası var: <link href = “other.css” rel = “stil sayfası” media = “(dk. genişlik: 40em)”>

Modern tarayıcılar, bu css’nin bazı durumlarda kullanıldığını ve diğerlerinde kullanılmadığını anlayabilir, böylece tarayıcı, gerekli değilse, oluşturmadan önce bu css dosyasını yüklememeyi seçebilir.

2. Kritik yolda daha az CSS dosyası kullanın

Kritik render yolu “Bir tarayıcı web sayfasını görüntülemeden önce yapması gereken şeyler” demek için başka bir yoludur.

Css’nizi yukarıda tartıştığımız gibi düzgün bir şekilde etiketlediyseniz, css dosyalarını kritik yoldan kaldırmaya başlamışsınızdır. Ancak yapabileceğimiz çok daha fazlası var.

Açık olmak gerekirse, burada “main.css” ve “page.css” vb. Gibi css dosyaları hakkında konuşuyoruz. Dosyalar.

Kaldırabileceğiniz her fiziksel dosya, sayfanızın daha hızlı yüklenmesini sağlar.

Temelde daha az css dosyası kullanmanın iki yolu vardır

  • CSS’yi birleştir
  • Satır İçi CSS

Css dosyalarını birleştirme

Sorun: Sayfanızın kullandığı her css dosyası, ek bir dosyanın çağrılmasını gerektirerek web sayfanızın yüklenmesine ek süre katıyor.

Çözüm: CSS dosyalarını tek bir dosyada (veya css’inizin ne kadar büyük olduğuna bağlı olarak iki) birleştirin.

Ayrıntılar: Bir web sayfasında genellikle bir büyük CSS dosyası ve birkaç “destekleyici” CSS dosyası bulunur. Bu, birçok nedenden dolayı bir örnek, web tasarım css’nizi büyük bir CSS dosyasında içeren bir WordPress sitesi olabilir, ancak eklediğiniz widget’lar ve eklentiler, kendileriyle ilişkili ve ana css’inizden ayrı olarak yüklenen küçük css dosyalarına sahip olabilir.

Birçok web tasarımcısı, açıklık ve çalışma kolaylığı için çalışmak için ayrı css dosyalarına sahip olmanın iyi olduğunu düşündüğü için bu, statik web sitelerinde de görülür. Bu ne yazık ki web genelinde büyük bir web performans sorununa neden oldu.

blank

İyi haber şu ki, birkaç ayrı css dosyasına sahip olmak çok yaygın olduğu için, bu konuya dikkat ederek rakiplerinize karşı büyük bir hız avantajına sahip olmak mümkündür. Birkaç css dosyası yerine yükleme veya iki css dosyası arasındaki fark, genellikle sayfa yükleme sürenizden bir veya daha fazla uzaklaşır.

Kaydettiğiniz saniyeden daha da önemlisi, css’inizin karmaşıklığını azaltarak diğer şeylerin çok daha hızlı yüklenmesine izin vermesidir. Adsense’den para kazanırsanız, reklamlarınız daha hızlı gösterilir (çünkü yüklenen css dosyalarıyla rekabet etmeleri gerekmez). E-ticaret mağazanızdaki kullanıcılar için en iyi deneyimi yaşamak istiyorsanız, daha az css dosyası kullanıcılarınız için çok daha hızlı ve daha net bir deneyime olanak tanır.

Başka bir deyişle, sayfa hızınızı daha hızlı yapmayı düşündüğünüzde, kaldırılan her karmaşıklık yalnızca “x” zamandan tasarruf sağlamakla kalmaz, aynı zamanda sayfalarınızın diğer öğelerinin de son derece iyi performans göstermesine izin verir.

CSS nasıl birleştirilir

CSS’yi birleştirmek için , css’yi bir css dosyasından kopyalayıp diğerine yapıştırmanız gerekir. Bunu yaptıktan sonra, o CSS dosyası için çağrıyı kaldırmanız gerekir.

blank

Yukarıdaki resimde “other.css” dosyasının ve “third.css” dosyasının içeriğini alıp “main.css” dosyasının içine yerleştirdik. Bunu yaparak, üç css dosyasının yüklenmesini gerektiren bir web sayfasından, yalnızca bir css dosyasının yüklenmesini gerektiren bir web sayfasına gittik.

Satır içi CSS dosyaları

Sorun: Sayfanızın kullandığı her css dosyası, ek bir dosyanın çağrılmasını gerektirerek web sayfanızın yüklenmesine ek süre katıyor.

Çözüm: Bir css dosyasını html’nin içine yerleştirerek kaldırın.

Ayrıntılar: Html stil etiketlerini kullanarak, css talimatları harici bir css dosyası yerine html dosyasında bulunabilir.

CSS nasıl sıralanır?

CSS’yi satır içi yapmak için , css’yi bir css dosyasından kopyalamalı ve html dosyanıza düzgün bir şekilde yapıştırmalısınız (bu yalnızca küçük css dosyalarıyla yapılabilir veya html dosyanız çok büyük olur). Bunu yaptıktan sonra, o CSS dosyası için çağrıyı kaldırmanız gerekir.

blank

Yukarıdaki resimde “small.css” dosyasının içeriğini aldık ve HTML dosyasının içine yerleştirdik. Bunu yaparak, iki css dosyasının yüklenmesini gerektiren bir web sayfasından, yalnızca bir css dosyasının yüklenmesini gerektiren bir web sayfasına gittik.

Inlined css, stil etiketleri kullanılarak html belgesinin başına yerleştirilir … <style>
…. burada css talimatlarınız …..
</style>

3. Genel olarak daha az css kullanın

“Daha az css kullan” demek basit ama yapmak çok zor.

Çoğu web sitesinde bu kadar kullanılmayan css’in yüklü olmasının birkaç nedeni vardır.

  • Özelleştirilebilir WordPress temalarında gerekli olmayan büyük ek css’ler var
  • Temel veya önyükleme gibi çerçeveler kullanılır, ancak css sonuçta ortaya çıkan web sitesine uyarlanmamıştır
  • Genel olarak, css miktarı geçmişte endişelenmiyordu, bu yüzden tasarımcılar işlerini gereğinden fazla css kullanarak işlerini kolaylaştırıyor

Css’inizin büyük olmasının sebebi ne olursa olsun, onu nasıl daha küçük ve daha akıllı hale getireceğinizi anlamanız gerekir.

Gerçeklik

Eğer css yazdıysanız veya kontrolünü sizde verdiyseniz, sadece gerekli olan css’i dahil etmek için zaman ayırabilirsiniz.

Bununla birlikte, başka birinden bir tema veya tasarım satın almış olmanız daha olasıdır ve bu durumda tek gerçek çözüm, css’i oluşturan ve daha ince bir versiyon isteyen tasarımcı ile konuşmaktır.

Yeni bir tasarım veya tema düşünüyorsanız, optimize CSS teslimatını projenin bir gereği haline getirerek kendinize zaman ve paradan tasarruf edebilirsiniz.

Araçlar

İnsanların css’lerinin bir sayfada nasıl kullanıldığını incelemelerine yardımcı olacak bir CSS dağıtım aracı oluşturdum :

Ayrıca, birçok yaygın css sorununu tanımlayan sayfa hızı aracı da vardır .