Eliminate render-blocking resources Lighthouse uyarısını düzeltin
Render engelleyici kaynaklardan kurtulun ve Core Web Vitals'ı iyileştirin
'Eliminate render-blocking resources' kısaca
Render engelleyici kaynakları olan herhangi bir sayfa yüklenirken, tarayıcı buna neden olan tüm öğeler indirilip değerlendirilene kadar oluşturma sürecini başlatamaz.
Bu, PageSpeed'in altın kuralını ihlal eder: 'oluşturmayı her zaman mümkün olan en erken zamanda başlatın'. Sayfa oluşturmadaki herhangi bir gecikme, sayfanın gerekenden daha yavaş yüklenmesine neden olur.
Bu Lighthouse uyarısını, render engelleyici kaynakları kaldırarak veya erteleyerek düzeltin.
'Eliminate render-blocking resources' Lighthouse uyarısı nedir?
Lighthouse'da Eliminate render-blocking resources uyarısına ne sebep olur? Lighthouse, aşağıdaki durumlardan birine sahip sayfaları işaretler:
- Head bölümünde bulunan ve ertelenmemiş bir script etiketi.
Sayfanın head bölümündeki scriptler, defer veya async özelliğine sahip değillerse varsayılan olarak render engelleyicidir. - Cihaz medyasıyla eşleşen bağlantılı bir stil sayfası.
Bir <link rel="stylesheet">, devre dışı bırakılmadıysa ve tarayıcının medyasıyla eşleşiyorsa sayfanın oluşturulmasını engeller. Örneğin <link rel="stylesheet" media="print"> masaüstü cihazlarda oluşturmayı engellemez
'Eliminate render-blocking resources' uyarısı bazı Lighthouse metriklerini doğrudan etkiler. Teoride render engelleyici kaynaklara sahip sayfalar yine de oldukça hızlı yüklenebilir. Pratikte çoğu zaman öyle olmaz. Çok fazla render engelleyici kaynak, First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) gibi önemli Lighthouse metriklerini büyük olasılıkla doğrudan etkiler.
Kısa bir hatırlatma - Rendering nedir?
Rendering, web geliştirmede web sitesi kodunu kullanıcıların ziyaret ettiklerinde gördükleri etkileşimli sayfalara dönüştürmek için kullanılan bir süreçtir. Bu terim genellikle HTML, CSS ve JavaScript kodlarının kullanımını ifade eder. Bu süreç, bir web tarayıcısının web sayfasını oluşturmak için kullandığı yazılım olan rendering motoru tarafından tamamlanır.
'Render-blocking resources'a ne sebep olur?
Render engelleyici kaynaklar her zaman sayfanın head bölümündeki stil sayfaları ve JavaScript'lerdir. Bu, yalnızca CMS'niz tarafından, web geliştiricisi tarafından manuel olarak veya bir eklenti tarafından eklenebilecekleri anlamına gelir. Render engelleyici bir kaynağın kökenini bulmaya çalışırken şu yerlere bakmayı deneyin:
- Şablon Web sitenizin şablon dosyaları bakılacak ilk yerdir. <head> kodunun bulunduğu yeri bulun ve sabit kodlanmış stilleri ve scriptleri arayın.
- CMS bazen CMS'nin kendisi düzgün çalışmak için bazı scriptlere (örneğin jQuery) ihtiyaç duyar.
- Eklentiler. Eklentiler, sayfaya stil ve script enjekte etmesiyle bilinir.
'Render-blocking resources' sayfa hızını nasıl etkiler?
Render engelleyici kaynaklar, render ağacının oluşturulmasını engeller. Render ağacı oluşturulmadığında tarayıcı oluşturmaya başlamaz. Bu, tüm render engelleyici kaynaklar indirilip değerlendirilene kadar sayfanın tamamen boş kalacağı anlamına gelir. Bu, First Contentful Paint ve Largest Contentful Paint gibi metrikleri etkiler.
'Eliminate render-blocking resources' nasıl düzeltilir?
'Render blocking resources' sorununu düzeltmek için bu kaynakların artık render engelleyici olmadığından emin olmanız gerekir. En kolay yol bu kaynakları kaldırmaktır. Bazen eski, kullanılmayan kaynaklar hâlâ sayfanın oluşturulmasını engelliyor olabilir. Kaldıramıyorsanız ertelemelisiniz.
JavaScript'i Erteleme
JavaScript, script etiketine defer veya async özelliği eklenerek ertelenebilir.
//ertelenmiş javascript
<script src="script.js"></script>
//asenkron javascript
<script src="script.js"></script>
Stil Sayfalarını Erteleme
Stil sayfalarını ertelemek biraz daha karmaşık olabilir. Bir stil sayfası ertelendiğinde sayfa önce stiller olmadan oluşturulur. Ardından stiller yüklendiğinde tarayıcı stilleri uygulayarak her türlü titreme ve düzen kaymalarına neden olur. Bu yüzden satır içi, kritik CSS'e ihtiyacınız vardır. Kritik CSS, sayfanın görünür kısmını oluşturmak için gereken stillerin bir koleksiyonudur.
<style>//kritik CSS buraya</style> <link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/> 'Eliminate render-blocking resources' için geçici çözüm
Bazen render engelleyici kaynakları ortadan kaldırmak mümkün olmayabilir. Şablona erişiminiz olmayabilir veya CMS'niz belirli scriptleri gerektirebilir. Bu render engelleyici kaynakların etkisini azaltmak için birkaç geçici çözüm vardır.
- Stillerinizi ve scriptlerinizi küçültün ve sıkıştırın.
Mevcut stillerinizi ve scriptlerinizi küçültün ve sıkıştırın. Daha küçük kaynaklar, yükleme performansı üzerinde büyük kaynaklardan daha az etkiye sahiptir. - Büyük dosyaları birden fazla dosyaya bölün.
Büyük dosyaları birden fazla dosyaya bölmek, kaynakların yükleme süresini azaltabilir. - Kaynakları sayfa bazında kaldırın.
Bir kaynak bir sayfadan kaldırılamıyorsa, bu tüm sayfalarda gerekli olduğu anlamına gelmez. WordPress eklentileri örneğin, eklenti o sayfada aktif olmasa bile tüm sayfalara script ve stil ekleme eğilimindedir.
Lab data is not enough.
I analyze your field data to find the edge cases failing your user experience.
- Real User Data
- Edge Case Detection
- UX Focused
