Render Engelleme CSS – Bu nedir?Ve nasıl düzeltilir?

Google PagesPeed Insights gibi çevrimiçi araçlarla web sitenizin performansını ölçüyorsanız, CSS’yi engelleme olarak bilinen küçük bir sorun yaşayabilirsiniz. Bu ayrıca, web siteniz için en uygun performans istiyorsanız bu sorunu çözmeniz gerektiğini de söyleyecektir. Ancak CSS’yi engelleyen render nedir? Kısacası, bu, web sitenizin düzgün yüklenmesini engelleyen CSS komut dosyasını ifade eder. Sonuç olarak, ziyaretçiler web sitenizde bir şey görmeden önce daha uzun süre beklemelidir. Ama bu neden oldu? Ve nasıl düzeltirsin?
Şimdi, tüm sorularınızda size yardımcı olmak için, bu sorunu çözmek için çeşitli yöntemlerle birlikte CSS’yi engelleme hakkında bilmeniz gereken her şeyi içeren ayrıntılı bir yazı derledik. Daha fazla uzatmadan başlayalım:
İçindekiler
Render Engelleme CSS – Genel Bakış
CSS’yi Engelleme Oluşturma Nasıl Kurtulur
Engelleme engelleme CSS’yi ortadan kaldırmak için en iyi 3 eklenti
Paketlemek
CSS’yi Engelleme Oluşturma-Genel Resim CSS oluşturma işlemini nasıl geliştireceğinizi tartışmaya başlamadan önce, önce ne olduğunu ve neden bir sorun olduğunu tartışalım. Bu sorunun doğru anlaşılmasıyla, düzeltmek çok daha kolay olacaktır.
CSS’yi engelleyen render nedir? Teknik olarak, tarayıcı tarafından “oluşturma”, HTML kodunu parçalamak ve ekranda görüntülemek anlamına gelir. Web tarayıcısı önce tüm HTML metinlerini okuyacak ve ardından ziyaretçileri görmek ve kullanmak için web sayfaları üretecektir. Böylece, web sitenizde ne kadar çok CSS’ye sahip olursanız, tarayıcının onu tanımlaması için gereken süre daha uzun süre daha uzun yükleme hızları üretir. Bu nedenle CSS genellikle oluşturmayı engelleyen bir kaynak olarak kabul edilir. Ancak aynı zamanda, modern bir web sitesi oluşturmak ve iyi görünmek istiyorsanız CSS önemlidir. Bu nedenle, hile dengeyi elde etmektir. Çok fazla CSS dosyası veya büyük CSS dosyası ile aşırı olmayın. İnce kalın ve mümkün olan en kısa sürede göndermek için akıllı hileler kullanın. Tüm bu tekniği aşağıda derinlemesine tartışacağız. Ama önce, CSS’yi bloke etme oluşturmanın neden çok önemli olduğunu anlayalım. Neden silinmeli? Daha önce tartışıldığı gibi, CSS’nin engellenmesi yükleme hızını geciktirir ve ister inanın ister inanmayın, bir site yükleme hızının başarısı üzerinde büyük bir etkisi vardır. Bir site yüklenmesi çok uzun sürerse, sadece potansiyel müşterilerinize müdahale etmekle kalmaz, aynı zamanda SEO puanınızı da etkiler.
Research’e göre, 2 saniyeden fazla içeren bir web sitesi, üstel hızlara sahip ziyaretçileri kaybediyor. Örneğin, yükleme süresi 2 saniye olan alanların oranı%6’dır. Bu, web sitenizi ziyaret eden her 100 kişi için 6 kaybedeceğiniz için sabırsızlanıyorlar. Yaklaşık 3 saniye içinde oran%11’e yükseldi. Ve 5 saniyelik bir işaretle,% 38’e kadar ulaştı – yavaşça yüklenen web sitesi nedeniyle kaybedilen tüm kayıp trafiğin üçte birinden fazlası oldu. Ayrıca, web sitenizin yüklenmesi daha uzun sürerse, SEO puanınızı engeller, bu nedenle arama motorlarındaki sıralamayı belirlemek zordur. Bu nedenle, web sitenizde sahip olduğunuz CSS’yi engelleme sorununu derhal düzeltmeniz çok önemlidir. Şimdi bununla birlikte, daha iyi web sitesi performansı için yapmanız gereken birçok şey olduğuna dikkat edilmelidir ve CSS oluşturmayı düzeltmek bunun bir parçasıdır. Bununla birlikte, bu, bazı küçük ayarlarla hızlı bir şekilde çözülebilen daha kolay sorunlardan biridir.
Daha önce belirttiğimiz gibi, CSS render engellemeyi nasıl ortadan kaldırırsa, CSS bir bloke oluşturma kaynağı olarak kabul edilir, ancak web sitesinin görünümü ve hissi için hala önemli olduğu için kullanımlarını tam olarak görmezden gelemeyiz. Bu nedenle, saha yükleme hızı üzerindeki etkisini en aza indirme hilesi, kullanımını tamamen en aza indirmektir. Bunu şu şekilde yapabilirsiniz:
CSS dosyalarını birleştiren CSS’yi kullanma
Ve daha az CSS kullanın
Temel kodlama bilginiz varsa, bu ayarlama bir sorun olmayacaktır.Veya, web sitenizi tasarlayan bir web geliştiriciniz varsa, bu değişikliğin uygulanması hakkında onlarla konuşabilirsiniz.
Not: WordPress kullanıcıları için özel bir bölüm de ekliyoruz, CSS engelleme işleyişini geliştirmeye yardımcı olabilecek bazı olağanüstü eklentileri tartışıyoruz. yüklemek için tarayıcıya tarayıcı.Buradaki en iyi çözüm, CSS komut dosyasını doğrudan HTML’nize yerleştirmektir.Buna CSS’nin iç kısmı denir.Tek yapmanız gereken CSS dosyalarından birini açmak ve kodu kopyalamaktır.Ardından HTML dosyanıza CSS eklemeniz gerekir.CSS’nin HTML belgesinin üstünde ve stil etiketini kullandığını unutmayın.Şöyle görünmeli:
…. Kopyalanan CSS talimatları …. CSS kodunu girdikten sonra CSS dosyaları için çağrıları silmeyi unutmayın. Bu yöntemin yalnızca birkaç kod satırı kullanan küçük CSS komut dosyaları için geçerli olduğunu unutmayın. Büyük dosyaların eklenmesi, yalnızca HTML dosya boyutunda bir artış üretir ve bu da daha uzun bir yükleme süresine katkıda bulunur. Büyük bir CSS dosyası gördüğünüzde, aşağıdaki yöntemlerden birini kullanmanız önerilir: Sitenizde çok fazla CSS dosyası varsa, CSS dosyasını birleştirin, her dosya daha yavaş bir hıza katkıda bulunacaktır, çünkü Tarayıcı her dosyayı ayrı ayrı içerir. Bu sorunun kolay iyileştirilmesi, birkaç CSS dosyasını bir (veya bazı durumlarda dosyanın ne kadar büyük olduğuna bağlı olarak bazı durumlarda) birleştirecektir. Web sitenizin birkaç küçük CSS dosyası eşliğinde bir büyük CSS dosyası olduğunu fark etmelisiniz. Daha küçük dosyalar genellikle web sitenize yüklediğiniz çeşitli widget ve eklentiler tarafından üretilir. Bazı tasarımcılar ayrıca CSS’lerini çeşitli dosyalara ayırmayı severler, çünkü yönetilmesi daha kolaydır. Şimdi, bu CSS dosyalarının bazılarını nasıl birleştiriyorsunuz? Bu, CSS’ye nasıl girdiğinize çok benziyor. Destekleyici CSS dosyalarından birini açın ve kodu kopyalayın. Ardından ana CSS dosyasını girin ve kodu oraya yapıştırın.
Artık kullanmayacağınız için ilk CSS dosyası için çağrıları silmeyi unutmayın.Bu sizin için çok karmaşık geliyorsa, aynı şeyi yapabilecek ve size yardımcı olabilecek bir eklenti var.Aşağıdaki kısmımıza bakın.Peki web sitenizin neden ve nasıl gereksiz bir ek CSS var?
Bu alandaki en büyük neden, özellikle birçok ayar seçeneği olan çok amaçlı bir WordPress temasıdır. Geliştiricilerin hızlı bir şekilde tasarım değişiklikleri yapmasına yardımcı olmak CSS’ye bağlıdır. Bununla birlikte, tüm CSS web siteleri tarafından kullanılmaz ve sonunda şişer, böylece yavaşlar. Bootstrap ve Foundation gibi bir çerçeve kullanılarak tasarlanan web sitelerinin karşılaştığı benzer sorunlar. Kullanılan tüm CSS, üretilen web sitesine yansıtılmaz. Bu nedenle, bu görsellere, düzenlere veya işlevlere katkıda bulunmaz, bunun yerine yükü artırır. Şimdi bunu düzeltmek teknik olmanızı gerektirir. Site kodunuzu araştırmalı ve CSS oluşturmayı manuel olarak ortadan kaldırmaya başlamalısınız. Bununla birlikte, WordPress kullanıcıları için, size de yardımcı olabilecek özel bir WordPress eklentisi de vardır. Kodlama deneyimi olmayan kullanıcılar için karmaşık ve korkutucu. Web sitenize yanlışlıkla zarar vermek yerine, size yardımcı olmak için aşağıdaki eklentilerden birini kullanmanızı öneririz. 1. Varlıkları temizleme
Varlık Temizliği, tüm yayınlarınızı ve sayfalarınızı otomatik olarak tarayan ve yüklenen tüm CSS ve JavaScript (JS) dosyalarını algılayan çok popüler ve güçlü bir ücretsiz eklentidir. Bittiğinde, bu, manuel olarak gerekli olmayan CSS dosyalarını devre dışı bırakabileceğiniz özel bir gösterge tablosuna erişmenizi sağlayacaktır. Web siteniz tarafından hangi dosyaların kullanılmadığını ve CSS’yi oluşturma olarak işaretlendiğini bulmak için, Google PagePeed Insights gibi çevrimiçi performans metrik araçlarını kullanın. Hangi CSS dosyasının soruna neden olduğunu bildikten sonra, aşağıdaki adımları kullanarak dosyayı devre dışı bırakın: Adım 1: Eklentiyi yükleyin. Bunu yapmak için WordPress kontrol panelinizi girin ve eklentileri açın> Yeni ekleyin. Şimdi varlık temizliği arayın ve şimdi Yükle düğmesine basın ve ardından etkinleştirin. Adım 2: Eklenti web sitenize yüklenirken, Varlık Temizleme seçeneğini> CSS/JS Yük Yöneticisi’ni sol kenar çubuğundan bulun. Burada tüm web sitesi içeriğinizi bulacaksınız – ev, sayfalar, yayınlar ve özel yayınlar. Bunlardan birini seçin. Adım 3: Şimdi aşağı kaydırın, belirli bir web sayfası veya yayın için tüm etkin CSS ve JS dosyalarını göreceksiniz. Her birini seçici olarak devre dışı bırakma seçeneğiniz olacaktır. CSS’yi engellemeyi devre dışı bırakın ve bunu yapmaya hazırsınız. Bittiğinde güncellemeyi tıklayın. Adım 4: Başka bir gönderiye veya sayfaya geçin ve 3. adımı tekrarlayın. Tüm CSS oluşturma dosyalarını devre dışı bırakana kadar tekrarlamaya devam edin. Not: Bu eklenti de özel bir test modu ile donatılmıştır. Önce CSS dosyasını test modunda devre dışı bırakmanız/devre dışı bırakmanız ve web sitenize zarar verip vermediğini görmeniz önerilir.
Varlık Temizliği ile Başlayın
2. Roket WP
WP Rocket, sitenizi yükleme performansını ve hızını artırmak için birçok özelliğe sahip WordPress için premium bir optimizasyon eklentisidir. Render’ı engelleme CSS’yi ele almanıza yardımcı olmanın yanı sıra, bu eklenti JS minifikasyonu, görüntülerin yavaş yüklenmesi, JS isteklerini geciktirme ve daha fazlasında size yardımcı olabilir. Tüm özelliklerini ve işlevlerini tartışan WP roketinin özel bir incelemesine sahibiz. Burada, CSS engelleme işleme engelleme sorunlarınızı çözmeye yardımcı olmak için eklentileri nasıl kullanabileceğinizle ilgili adım adım -adım yönergelerini derhal tartışacağız. Adım 1: Eklentiyi WordPress sitenize yükleyin. Bu birinci sınıf bir eklenti olduğundan, önce satın almalı ve ardından yerel depolama alanınıza indirmelisiniz (muhtemelen .zip dosyasında olması muhtemeldir). İndirdikten sonra WordPress kontrol panelinizi girin ve eklentiyi açın> Yeni Ekle ve Yükle düğmesini tıklayın. Şimdi .zip dosyasını arayın ve web sitenize yükleyin. Bu kurulumu birkaç dakika sürecektir. Adım 2: Kurulduktan ve etkinleştirildikten sonra ayarlar> WP roketine gidin. Burada tüm eklenti seçeneklerini bulacaksınız. Adım 3: Dosya optimizasyonu ayarlarını bulun. Aşağıda CSS dosyasının parçasını göreceksiniz.

Bu eklenti, CSS dosyalarını azaltmak, CSS dosyalarını birleştirmek ve CSS teslimatını optimize etmek için üç seçenek sunar. Seçeneği etkinleştirin ve bunu yapmaya hazırsınız. Bu seçeneği kullanmanın web sitenize zarar verme potansiyeline sahip olduğunu unutmayın. Bu yüzden önce bir yedeklemeniz önerilir.