Oluşturmayı Engelleyen Kaynakları Nasıl Ortadan Kaldırırsınız?

Oluşturmayı engelleyen kaynaklar, web sayfanızın altyapısını optimize etmenin kritik bir parçasıdır.

Bunları azaltmak, sayfanızın çok daha hızlı yüklenmesine yardımcı olabilir ve sayfanızın Önemli Web Verilerini önemli ölçüde geliştirebilir.

Bu oluşturmayı engelleyen kaynaklar, yüklenmesi çok uzun süren (kullanılması gerekmeyen) harici yazı tipleri, gereksiz medya dosyaları, bir türlü gitmeyen kod şişkinliği ve istenmeyen ek eklentiler gibi şeyleri içerir. gerekli.

Cihazlarınızda daha hızlı indirilen tek dosyalar oluşturmak için sıkıştırabileceğiniz ve birleştirebileceğiniz, çok daha hızlı bir sayfa hızı oluşturan bu tür kaynaklar sayısızdır.

Sayfa yapınızı bu konuda optimize ederek Google'ın sitenizi taramak için yapması gereken işi azaltabilir ve bunun sonucunda kullanıcı deneyiminizi iyileştirebilirsiniz.

Aslında, bu işlemi yapmanın tüm faydaları şunları içerir:

• Daha hızlı sayfa hızı.
• Sayfanızı yüklemek için Google tarafından gereken daha az kaynak.
• Kod şişmesinden kaynaklanan sorunlarda azalma.
• DOM'nuzun (belge nesne modeli) daha küçük toplam dosya boyutu.
• İndirilecek daha az JavaScript ve CSS dosyası.
• Bir dizi platform ve cihazda daha iyi ve daha hızlı devreye alma.
• Mobil cihazlarda geliştirilmiş kullanıcı etkileşimi.
• Genel olarak geliştirilmiş performans.

Açıkçası, sitenizde bu tür bir optimizasyon işlemi gerçekleştirmenin muazzam faydaları vardır.

Neden Oluşturmayı Engelleyen Kaynakları Belirlemelisiniz?

Web sayfanızın oluşturulmasını engellemekten sorumlu kaynakları belirlemek ve azaltmak, sayfa hızınızı artırabilen veya azaltabilen kritik bir optimizasyon noktasıdır.

Sonuç olarak sitenizin sayfa deneyimi ölçümlerine (ve kullanıcılarınızın memnuniyetine) fayda sağlayabilecek kadar kritik olabilir.

2021'de bir mobil web sayfasını tam olarak oluşturmak için geçen ortalama süre 22 saniyeydi. 2018'de 15 saniyeydi.

Açıkçası, bu, Google'ın önerdiği iki ila üç saniyelik süreden önemli ölçüde daha yüksek bir sayıdır. Aynı zamanda eskisinden çok daha yüksek.

Oluşturmayı engelleyen kaynaklarla ilgili bu sorunlara ne sebep olabilir?

Genel sayfa oluşturma hızındaki bu artışı sağlayan nedir?

Unutulmaması gereken ilginç bir eğilim, sistem yazı tiplerine kıyasla üçüncü taraf yazı tiplerine artan bir güvenin olmasıdır. Kaynak olarak üçüncü taraf yazı tiplerinin kullanılması, bir sayfanın işlenmesine ve oluşturulmasına müdahale etme eğilimindedir.

Sistem yazı tipleriyle, tarayıcının fazladan bir şey yüklemesi gerekmez, bu nedenle sonuç olarak o ek işlem adımına sahip olmaz.

Web Almanac'tan ekran görüntüsü, Kasım 2022

Sektörler genelindeki bu güvenin, bu işleme süresini etkilemesi muhtemeldir. Elbette, oluşturmayı engelleyen kaynaklarla ilgili bu sorunun tek nedeni bu değildir.

Buna ek olarak, izleme amacıyla Google Analytics veya üçüncü taraf bir Facebook pikseli kullanma gibi Google'ın kendi hizmetleri, oluşturma süresi üzerinde önemli bir etkiye sahip olma eğilimindedir.

Bu tür teknolojilere güvenme arzusu, pazarlama açısından mutlaka korkunç değildir.

Ancak, oluşturmayı engelleyen kaynaklar açısından bakıldığında, sayfa yükleme süresinde ve Google'ın (ve kullanıcıların) sayfanızı algılama biçiminde önemli artışlara neden olabilir.

İdeal çözüm, kullanıcı etkileşimi için sayfanızın olabildiğince çabuk yüklenmesini sağlamaktır.

Ayrıca, günümüzde web geliştiricileri tarafından kullanılan zayıf web geliştirme uygulamalarının suçlanması olasılığı da vardır.

Her iki durumda da bu, her web sitesi projesinde Önemli Web Verileri denetimlerinizin bir parçası olarak ele alınması gereken bir şeydir.

Ancak sayfa deneyimi, yalnızca tüm sayfanın ne kadar hızlı yüklendiği ile ilgili değildir.

Bunun yerine, Google'ın sayfa deneyimi çerçevesi veya Önemli Web Verileri tarafından ölçülen sayfanın genel deneyimi hakkındadır.

Bu nedenle, DOM veya belge nesne modeli boyunca kritik işleme yolu için sayfa hızınızı iyileştirmek ve optimize etmek için çalışmak istiyorsunuz.

Kritik İşleme Yolu Nedir?

Kritik işleme yolu, tarayıcının verileri ilk kez almaya başladığı andan son işlemede sayfayı nihayet derlediği ana kadar, tüm sayfayı oluşturmak için attığı tüm adımları ifade eder.

Bu, doğru optimize ederseniz yalnızca birkaç milisaniye sürebilen bir işlemdir.

Kritik işleme yolu için optimize etmek, birçok farklı cihazda işleme performansı için optimize ettiğinizden emin olmak anlamına gelir.

Bu, ilk boyamanıza olabildiğince çabuk ulaşmak için kritik işleme yolunu optimize ederek gerçekleştirilir.

Temel olarak, görsel içeriği en kısa sürede görüntülemek için kullanıcıların boş bir beyaz ekrana bakarak harcadıkları süreyi azaltıyorsunuz (aşağıdaki 0.0'lara bakın).

web.dev'den ekran görüntüsü, Kasım 2022

Bunun nasıl yapılacağına ilişkin, Google'ın geliştirici kılavuzu belgelerinde özetlenen tüm bir süreç var, ancak özellikle bir ağır vurucuya odaklanacağım: oluşturmayı engelleyen kaynakları azaltmak.

Kritik Oluşturma Yolu Nasıl Çalışır?

Kritik oluşturma yolu, bir tarayıcının HTML, CSS ve JavaScript'i ekrandaki gerçek piksellere dönüştürerek bir sayfayı oluşturma yolculuğunda gerçekleştirdiği adım serisini ifade eder.

Medium'dan ekran görüntüsü, Kasım 2022

Esasen, tarayıcının herhangi bir görsel içeriği oluşturmaya başlamadan önce tüm HTML ve CSS dosyalarını (artı bazı ek işler) istemesi, alması ve ayrıştırması gerekir.

Bu işlem, saniyenin çok küçük bir bölümünde gerçekleşir (çoğu durumda). Tarayıcı bu adımları tamamlayana kadar kullanıcılar boş beyaz bir sayfa göreceklerdir.

Aşağıda, kullanıcıların sayfa yükleme işleminin farklı aşamalarına göre bir sayfanın nasıl yüklendiğini nasıl deneyimleyebileceklerine dair bir örnek verilmiştir:

web.dev'den ekran görüntüsü, Kasım 2022

Kritik işleme yolunun iyileştirilmesi böylece genel sayfa deneyimini iyileştirebilir ve bu da Önemli Web Verileri ölçütlerindeki performansı artırmaya yardımcı olabilir.

Kritik Oluşturma Yolunu Nasıl Optimize Edebilirim?

Kritik işleme yolunu iyileştirmek için işlemeyi engelleyen kaynaklarınızı analiz etmelisiniz.

Oluşturmayı engelleyen kaynaklar, sayfanın ilk oluşturulmasını engelleyebilir ve sonuç olarak Önemli Web Verileri puanlarınızı olumsuz etkileyebilir.

Bu, aşağıdakilerin bir optimizasyon sürecini içerir:

• İşleme yolu için kritik olan kaynakların sayısını azaltmak . Bu, olası işlemeyi engelleyen kaynaklar için bir erteleme yöntemi kullanılarak yapılabilir.
• Ekranın üst kısmındaki içeriğe öncelik vermek ve önemli medya varlıklarını olabildiğince erken indirmek.
• Kalan kritik kaynakların dosya boyutunu sıkıştırın .

Bunu yaparak, hem Önemli Web Verilerini hem de sayfanızın fiziksel olarak kullanıcıya nasıl sunulduğunu iyileştirmek mümkündür.

Kritik işleme yolunu optimize etmek için kullanabileceğiniz optimizasyon tekniklerini tartışmadan önce, ilk tarayıcı yükleme sürecini ve kritik işleme yolunun neden bu kadar önemli olduğunu tartışmak önemlidir.

Ve bu süreç şunları içerir:

• Sayfa öğeleri önceden yükleniyor.
• Kritik stilleri satır içine alma.
• JavaScript dosyalarının yüklenmesinin ertelenmesi.
• Erken ipuçları.

Sayfa Öğelerini Önceden Yükleme

İlk olarak, sayfa tarayıcı tarafından sunucudan alındığında, tarayıcı başlangıçta indirilecek tüm sayfa öğelerini tarar ve bulur. Varsayılan olarak bu, tarayıcının tüm öğeleri aynı anda indirdiği bir süreçte gerçekleşir.

Ancak, indirilecek çok sayıda sayfa öğeniz olduğunda ne olur (örneğin, bir WordPress web sitesinde sıklıkla olan şey?) Bu, sunucu kaynaklarını engelleyebilir ve bu da sayfa yükleme süresini daha da artırır.

Bunun etrafından nasıl dolaşıyorsun? Sayfanın oluşturulmasını engelleyen kritik dosyaları eşzamansız olarak indirmek için önyükleme bağlantısını kullanarak (bu makalenin ilerleyen kısımlarında ele alınmıştır).

Öğeleri önceden yüklemek, diğer tüm dosyaları yüklemeden önce sürecin ilk boyama aşaması için gereken kritik dosyaları yüklediğinden, işlemeyi engelleyen stil sayfalarını ortadan kaldırmaya yardımcı olan bir tekniktir.

CSS, JS, Yazı Tipleri veya Görselleri önceden yükleyebilirsiniz. Bunların nasıl önceden yükleneceğine ilişkin örnekler aşağıda verilmiştir:

JavaScript Ön Yüklemesi

 <link rel="preload" as="script" href="critical.js">

CSS Ön Yüklemesi

 <link rel="preload" href="style.css" as="stil" />

Yazı Tiplerini Ön Yükleme

 <link rel="preload" href="fonts/webfont.woff2" as="font" type="font/woff2" crossorigin />

Görüntüler Ön Yüklemesi

 <link rel=preload href="cat.png" as=resim resmi>

Bu, sayfanın sürecini hızlandırmaya yardımcı olur. Ancak bu ideal bir yöntem değildir.

İdeal yöntem, siteyi yalnızca iki ila üç eklenti, belki iki ila üç başka dosya kullanacak şekilde optimize etmek ve tam sayfa oluşturma için her şeyi minimumda tutmaktır.

Ne yazık ki, bu peşinden gitmek için gerçekçi bir çaba değil.

WordPress siteleri, geliştiricilerin uğraşmak istemediği (veya uğraşmak istemediği) pek çok eklentiye ve kaynağa sahip olma eğiliminde olduğundan, başarıya giden en kolay yol, bu kaynakların belirli eklentiler kullanılarak uygun şekilde optimize edildiğinden emin olmaya çalışmaktır.

Kritik Stilleri Satır İçi Yapma

Kritik CSS, içeriği kullanıcıya mümkün olan en hızlı şekilde sunmak için ekranın üst kısmındaki içerik için CSS'yi çıkaran bir tekniktir.

En azından, bu genellikle şunları gerektirir:

• Herhangi bir yazı tipi bildirimi.
• Düzene özgü herhangi bir CSS.
• Ekranın üst kısmındaki DOM (belge nesne modeli) öğeleri için tüm CSS stil kuralları.

Tüm kaynakları aynı anda yükleyen sayfa örneğimizi kullanarak, kritik stillerin satır içine alınması, HTML <head> etiketinin kendisinde kod kullanmayı içerir.

Örneğin, google.com kaynak kodunu kontrol ederseniz, HTML'nin <head> bölümünde kritik CSS'yi satır içine aldığını göreceksiniz.

Google.com kaynak kodundan ekran görüntüsü, Kasım 2022

Kritik CSS'yi ayıklamaya yardımcı olabilecek birkaç araç vardır.

• Criticalcss.com.
• kritik.
• HTML Kritik Web Paketi Eklentisi.

JavaScript Dosyalarının Yüklenmesini Erteleme

Bu yöntemi kullanarak, DOM ağacının diğer kritik öğeleri yüklenene kadar JavaScript dosyalarının yüklenmesini ertelemek mümkündür. Ancak, bu birkaç uyarı ile birlikte gelir.

JavaScript dosyasının nasıl erteleneceğine ilişkin örnek:

 <script erteleme src="script.js"></script>

Birincisi, JavaScript dosyalarının yüklenmesini ertelerken sitenin görünümünü olumsuz yönde etkileyebilmenizdir, çünkü bunlardan bazıları sayfanın tamamen yüklenmesi için gerekli öğeler olabilir.

İkincisi, dikkatli olmazsanız, JavaScript dosyalarının yüklenmesini erteleyerek sayfanın etkileşimiyle (sonraki paint Önemli Web Verileri metriğine etkileşim) potansiyel olarak sorunlara neden olabilirsiniz.

Üçüncüsü, sitenin genel olarak nasıl çalıştığıyla ilgili sorunları da ortaya çıkarabilmenizdir.

Buradaki fikir, bu tür optimizasyonlar üzerinde çalışırken dikkatli olmanız gerektiğidir, böylece sürecin başka bir yerinde istemeden sorunlara neden olmazsınız.

Bunu yaparak, sayfa hızınızı ve Google'ın sitenizi nasıl gördüğünü büyük ölçüde etkileyebilirsiniz.

Bununla birlikte, diğer endişe, CSS ve JavaScript gibi kritik dosyaları ertelemek için Nitro gibi eklentileri kullandığınız zamandır.

Bunun sayfa hızı üzerinde olumlu bir etkisi olsa da, bununla ilgili en büyük sorun, eklentinin tüm KRİTİK dosyaları, sayfa belgenin HTML bölümünü yükleyene kadar ertelemesidir.

Ne anlama geliyor? Bu, Google'ın belgenin tamamını görüntülenmesi amaçlandığı şekilde göremediği anlamına gelir. Bu, Google'ın sitenizin mobil uyumlu olup olmadığını belirlemek için ihtiyaç duyduğu robots.txt kullanarak CSS dosyalarınızı ve JavaScript dosyalarınızı engellemeye benzer.

Resmi Google Geliştirici sayfası, başka bir yerde de belirtildiği gibi bunu söylüyor:

"Optimal oluşturma ve indeksleme için, Googlebot'un sitenizi ortalama bir kullanıcı gibi görebilmesi için web siteniz tarafından kullanılan JavaScript, CSS ve resim dosyalarına her zaman Googlebot'un erişmesine izin verin.

Sitenizin robots.txt dosyası bu varlıkların taranmasına izin vermiyorsa, bu, algoritmalarımızın içeriğinizi ne kadar iyi oluşturduğunu ve dizine eklediğini doğrudan etkiler. Bu, yetersiz sıralamalara neden olabilir.”

Kritik CSS ve JavaScript dosyalarını SEO nedenleriyle ertelerseniz, Google'ın bu dosyaları sayfa yükleme sırasında görmesini sağladığınız sürece, Google'ın sitenizi nasıl görebileceği konusunda herhangi bir büyük sorunla karşılaşmazsınız.

Daha İyi Sunucu Optimizasyonu İçin Erken İpuçlarını Kullanma

Erken ipuçları hakkında konuşmadan önce, sunucunun bir web sayfasını nasıl yüklediği sürecini tartışmamız gerekiyor. Siteler gerçekten de son yıllarda daha sofistike hale geldi.

Ve böylece sunucular da var. Ancak sınırlamalar var. Sunucular tüm gün boyunca önemsiz görevleri yerine getirebilse ve yapsa da, bir sunucunun bir sitenin kaynaklarını nasıl kullandığını düşünmek için çalışarak çıkmaza girmesi yine de mümkündür.

Dolayısıyla, bu olduğunda, normalde yaşanabilecek olandan daha fazla gecikme meydana gelir ve bu, tarayıcı sayfayı oluşturmaya başlamadan önce gerçekleşir.

Bu gecikme meydana geldiğinde, bir sitenin tarayıcı penceresinde görünmesinin birkaç saniye sürebileceği durumlarla karşılaşabilirsiniz.

Ve sunucunuzun dosyaları düzgün bir şekilde işlediğinden emin olmak, sayfa hızınızı artırmaya yönelik mükemmel bir ilk adımdır.

Aşağıda, sunucunuz düzgün yanıt vermediğinde ve belirli kaynakları işlemesi çok uzun sürdüğünde ne olduğuna dair bir örnek verilmiştir:

Developer.chrome.com'dan ekran görüntüsü, Kasım 2022

Peki, erken ipuçları nasıl çalışır?

Google Chrome Geliştirici kılavuzuna göre, "erken ipuçları, son yanıttan önce doğru bir ön HTTP yanıtı göndermek için kullanılan bir HTTP durum kodudur (103 Erken İpucu).

Bu neyi başarıyor?

Bu, bir sunucunun web sayfasının kendisi tarafından yüklenmesi ve kullanılması muhtemel olan belirli kritik kaynaklar (JavaScript dosyaları, CSS stil sayfaları ve daha fazlası) için bir tarayıcıya belirli türde ipuçları sağlamasına olanak tanır.

Bu işlem, sunucu ana sayfa kaynaklarını oluşturmaya çalışırken birkaç milisaniye veya daha kısa sürede gerçekleşir.

Erken İpuçları, "bir tarayıcıya yardımcı olan" bir şeydir ve bu yükleme üzerinde önceden çalışarak sunucunun düşünme süresini hızlandırır.

Bu nedenle, bu işlem sonuç olarak sayfa yükleme süresinin hızlanmasına yardımcı olur.

Kritik Oluşturma Yolunuzu Optimize Etmenize Yardımcı Olacak Araçlar

Olağanüstü bir kod uzmanı değil misiniz ve kod, eklentiler ve web sitenizin altında yatan şeylerle çalışıp bunları optimize edemiyor musunuz?

Asla korkma (çok fazla!). Tam da bunu yapmanıza yardımcı olabilecek WordPress eklentileri var.

Aşağıda, başarı için kendi kritik işleme yolunuzu optimize etmenize yardımcı olacak araçların bir listesi yer almaktadır:

• Kritik CSS Eklentisi : Bu kullanışlı araç, sitenizin ihtiyaç duyduğu kritik CSS'yi oluşturmanıza olanak tanır. Sadece URL'nizi ekleyin, oluştur'a tıklayın ve gidin.
• Otomatik Sayfa Hızı Eklentisi: Bu özel eklenti, kritik dosyaları ertelemenize de izin veren başka bir sayfa hızı eklentisidir. Ek olarak, sayfa başlığına satır içi CSS eklenmesine yardımcı olur, komut dosyalarını alt bilgiye erteler ve HTML dosyalarınızı küçültür.
• WP Rocket Sayfa Hızı Eklentisi: Bu sayfa hızı eklentisi, en güçlü önbelleğe alma eklentilerinden biridir. Kurulumdan sonra, bu özel eklenti, sayfa önbelleğe alma, GZIP sıkıştırma, önbelleği önceden yükleme ve tarayıcı önbelleğe alma avantajlarından yararlanmanıza olanak tanır.
• WP-Optimize: Bu, sitenizi hızlı yükleme süreleri için daha iyi optimize etmenize yardımcı olacak birkaç şey yapmanıza izin veren bir WordPress eklentisidir. Veritabanınızı optimize etmeyi, resimlerinizi sıkıştırmayı ve sayfalarınızı önbelleğe almayı, ayrıca CSS ve JavaScript dosyalarınızı küçültmeyi ve senkronize etmeyi içerir.

Lütfen dikkat: Bu yazarın bu araçlardan herhangi biriyle ilgili herhangi bir finansal önyargısı yoktur.

Neden umursayayım?

Google'ın kullanıcı davranışı verileri, çoğu kullanıcının yavaş bir siteyi yaklaşık üç saniye sonra terk ettiğini bildiriyor.

Sayfa yükleme süresini azaltmanın ve sayfa deneyimini iyileştirmenin daha fazla kullanıcı memnuniyeti sağladığını gösteren çalışmalara ek olarak, ufukta hazırlanmak isteyeceğiniz birkaç büyük Google güncellemesi de var.

Oluşturmayı engelleyen kaynakları belirlemek ve optimize etmek, bu güncellemeler geldiğinde oyunun zirvesinde kalmak için kritik öneme sahip olacaktır.

Google, 2022'de masaüstünde sayfa deneyimini uygulayacak ve masaüstü sayfası deneyimini Şubat'ta kullanıma sunmaya başlayacak ve Mart'ta sona erecek.

Google'a göre, aynı üç Önemli Web Verisi metriği (LCP, FID ve CLS) ve ilişkili eşikleri artık masaüstü sıralamasına bağlanacak.

Ayrıca Google, maksimum etkinlik süresini ve toplam etkinlik süresini hesaba katan yepyeni, muhtemelen deneysel bir Önemli Web Verileri metriği üzerinde çalışıyor.

Düşündükleri bu faktörlere ilişkin açıklamaları şunlardır:

Maksimum olay süresi: etkileşim gecikmesi, etkileşim grubundaki herhangi bir olaydaki en büyük tek olay süresine eşittir.
Toplam etkinlik süresi: Etkileşim gecikmesi, herhangi bir çakışmayı göz ardı ederek tüm etkinlik sürelerinin toplamıdır.

Sayfa yükleme sürelerindeki azalmaları değerli KPI'lardaki (dönüşümler, hemen çıkma oranı, sitede geçirilen süre) iyileştirmelerle ilişkilendiren birçok çalışmayla, site gecikmesini iyileştirmek birçok kuruluş için akılda kalan bir iş hedefi haline geldi.

Rolümüz genellikle iş hedefleri ile web geliştiricilerin öncelikleri arasındaki boşluğu kapatmak olduğundan, SEO uzmanları bu çabaya rehberlik edecek benzersiz bir konuma sahiptir.

Bir siteyi denetleme, sonuçları analiz etme ve iyileştirme alanlarını belirleme becerisine sahip olmak, performansı iyileştirmek ve sonuçları kilit paydaşlara aktarmak için geliştiricilerle çalışmamıza yardımcı olur.

Oluşturmayı Engelleyen Kaynakları Optimize Etmenin Hedefleri

Kritik işleme yolunu optimize etmenin birincil hedeflerinden biri, bu önemli, ekranın üst kısmındaki içeriği işlemek için gereken kaynakların insan tarafından mümkün olan en kısa sürede yüklenmesini sağlamaktır.

Oluşturmayı engelleyen tüm kaynakların ve sayfanın hızlı bir şekilde oluşturulmasını engelleyen tüm kaynakların önceliği kaldırılmalıdır.

Her optimizasyon noktası, sayfa hızınızın, sayfa deneyiminizin ve Önemli Web Verileri puanlarınızın genel gelişimine katkıda bulunacaktır.

İşleme Engelleme CSS'sini Neden İyileştirin?

Google, sıralama için kodlamanın mutlaka önemli olmadığını birçok kez söyledi.

Ancak, aynı şekilde, sayfa hızı optimizasyon iyileştirmelerinden bir sıralama avantajı elde etmek, sorguya bağlı olarak potansiyel olarak yardımcı olabilir.

CSS dosyaları söz konusu olduğunda, oluşturmayı engelleyen kaynaklar olarak kabul edilirler.

Bu neden?

Bir milisaniye veya daha kısa sürede gerçekleşse bile (çoğu durumda), tarayıcı tüm CSS stillerini isteyip, alıp işleyinceye kadar herhangi bir sayfa içeriğini oluşturmaya başlamaz.

Bir tarayıcı, stili düzgün olmayan bir içerik oluşturursa, elde edeceğiniz tek şey, stili bile olmayan bir grup sıradan metin ve bağlantıdır.

Bu, daha iyi bir terim olmadığı için sayfanızın temel olarak "çıplak" olacağı anlamına gelir.

CSS stillerini kaldırmak, kelimenin tam anlamıyla kullanılamaz hale gelen bir sayfayla sonuçlanacaktır.

Bir kullanıcı için en az hoş görünmek için içeriğin çoğunluğunun yeniden boyanması gerekecektir.

Sayfa oluşturma sürecini incelersek, aşağıdaki gri kutu, tüm CSS kaynaklarını almak için gereken tarayıcı süresini gösterir. Bu şekilde, CSS'nin DOM'unu (veya CCSOM ağacını) oluşturmaya başlayabilir.

Bu, sunucunuzun bu kaynakları yüklemek için ne yapması gerektiğine bağlı olarak bir milisaniyeden birkaç saniyeye kadar sürebilir.

Ayrıca, bu CSS dosyalarının boyutuna ve miktarına bağlı olarak değişebilir.

Aşağıdaki oluşturma ağacı, DOM içindeki CSS ile birlikte tüm dosyaları işleyen bir tarayıcı örneğini gösterir:

Medium'dan ekran görüntüsü, Kasım 2022

Ek olarak, aşağıda DOM'un oluşturulmasından sayfanın kritik işleme yolu olarak bilinen son boyama ve birleştirme işlemine kadar tüm dosyaların bir süreçte yüklendiği bir sayfanın oluşturma sırasının bir örneği gösterilmektedir. .

CSS, varsayılan olarak oluşturmayı engelleyen bir kaynak olduğundan, CSS'yi sayfa oluşturma sürecini olumsuz etkilemeyecek kadar iyileştirmek mantıklıdır.

Resmi Google tavsiyesi aşağıdakileri belirtir:

“CSS, oluşturmayı engelleyen bir kaynaktır. İlk işleme süresini optimize etmek için mümkün olan en kısa sürede müşteriye ulaştırın."

HTML, tarayıcının birlikte çalışabileceği bir şeye dönüştürülmelidir: DOM. CSS dosyaları aynı şekildedir. Bu, CSSOM'a dönüştürülmelidir.

DOM ve CSSOM içindeki CSS dosyalarını optimize ederek, bir tarayıcının her şeyi işlemesi için gereken süreyi azaltmaya yardımcı olabilirsiniz, bu da gelişmiş bir sayfa deneyimine büyük ölçüde katkıda bulunur.

Oluşturmayı Engelleyen JavaScript'i Neden İyileştirin?

JavaScript yüklemenin her zaman gerekli olmadığını biliyor muydunuz?

JavaScript ile, bir sayfayı tam olarak oluşturmak için tüm JavaScript kaynaklarının indirilmesi ve ayrıştırılması gerekli bir adım değildir.

Dolayısıyla bu, sayfa oluşturmanın teknik olarak gerekli bir parçası değildir.

Ancak buradaki uyarı şudur: Modern sitelerin çoğu, ekranın üst kısmındaki deneyimi sağlamak için JavaScript'in (örneğin, Bootstrap JS çerçevesi) gerekli olacağı şekilde kodlanmıştır.

Ancak bir tarayıcı, bir sayfanın ilk oluşturulmasından önce JavaScript dosyaları bulursa, oluşturma işlemi daha sonraya ve JavaScript dosyaları tam olarak yürütülene kadar durdurulabilir.

Bu, JavaScript dosyalarını daha sonra kullanmak üzere erteleyerek başka şekilde belirtilebilir.

Bunun bir örneği, HTML'de yerleşik olan bir uyarı gibi JS işlevlerinin olup olmadığıdır. Bu, bu JavaScript kodunun yürütülmesine kadar sayfa oluşturmayı durdurabilir.

JavaScript, hem HTML hem de CSS stillerini değiştirmek için tek güce sahiptir, bu nedenle bu mantıklıdır.

JavaScript'in potansiyel olarak tüm sayfa içeriğini değiştirebileceği gerçeği nedeniyle, JavaScript'in ayrıştırılması ve yürütülmesi gecikebilir. Bu gecikme, tam da böyle bir "her ihtimale karşı" senaryosu için varsayılan olarak tarayıcıda yerleşiktir.

Resmi Google tavsiyesi:

"JavaScript, DOM yapımını da engelleyebilir ve sayfanın oluşturulmasını geciktirebilir. Optimum performans sağlamak için… kritik işleme yolundan gereksiz JavaScript'leri kaldırın."

İşleme Engelleyen Kaynaklar Nasıl Belirlenir?

Kritik işleme yolunu belirlemek ve kritik kaynakları analiz etmek için:

• webpagetest.org kullanarak bir test yapın ve "şelale" resmine tıklayın.
• Yeşil "İşlemeye Başla" satırından önce istenen ve indirilen tüm kaynaklara odaklanın.

Şelale görünümünüzü analiz edin; yeşil "işlemeye başla" satırından önce istenen ancak ekranın üst kısmındaki içeriği yüklemek için kritik olmayan CSS veya JavaScript dosyalarını arayın.

WebPageTest'ten ekran görüntüsü, Kasım 2022

Oluşturmayı engelleyen (potansiyel olarak) bir kaynak belirledikten sonra, ekranın üst kısmındaki içeriğin etkilenip etkilenmediğini görmek için onu kaldırmayı test edin.

Örneğimde, kritik olabilecek bazı JavaScript isteklerini fark ettim.

Kritik olsalar da bazen sitedeki değişen öğelerin deneyimi nasıl etkilediğini test etmek için bu komut dosyalarını kaldırmayı test etmek iyi bir fikirdir.

WebPageTest'ten ekran görüntüsü, Kasım 2022

Bu tür kaynakları iyileştirmenin başka yolları da vardır.

Kritik olmayan JavaScript dosyaları için, bu dosyaları sayfanızın altına ekleyerek dosyaları birleştirmeyi ve ertelemeyi düşünebilirsiniz.

Kritik olmayan CSS dosyaları için, sahip olduğunuz CSS dosyalarını tek bir dosyada birleştirip sıkıştırarak da azaltabilirsiniz.

Kodlama tekniklerinizi geliştirmek, dosyanın daha hızlı indirilmesini sağlayabilir ve sayfanızın oluşturma hızı üzerinde daha az etkiye neden olabilir.

Sayfadaki Oluşturmayı Engelleyen Öğeler Nasıl Azaltılır

Oluşturmayı engelleyen bir kaynağın, ekranın üst kısmındaki içeriğin işlenmesi için kritik olmadığını belirledikten sonra, sayfanızın oluşturulmasını iyileştirmek ve kritik olmayan kaynakları ertelemek için kullanılabilen sayısız yöntemi keşfetmek isteyeceksiniz.

JavaScript ve CSS dosyalarını ertelemekten CSS'nin sahip olabileceği etkiyi azaltmaya kadar bu sorunun birçok çözümü vardır.

Olası bir çözüm, @import kuralını kullanarak CSS eklememektir.

@Import Kuralını Kullanarak CSS Eklemediğinizden Emin Olun

Performans açısından bakıldığında, @import HTML dosyanızı daha temiz tutuyor gibi görünse de aslında performansla ilgili sorunlar yaratabilir.

@import bildirimi aslında tarayıcının bir CSS dosyasını daha yavaş işlemesine neden olur. Neden? Niye? Çünkü içe aktarılan tüm dosyaları da indiriyor.

İşlem tamamlanana kadar işleme tamamen engellenecektir.

Gerçekten de en iyi çözüm, HTML'de <link rel=”stylesheet”> bildirimini kullanarak bir CSS stil sayfası dahil etme standart yöntemini kullanmaktır.

CSS ve JavaScript Dosyalarınızı Küçültün

WordPress kullanıyorsanız, CSS ve JavaScript dosyalarınızı küçültmek için bir eklenti kullanmanın muazzam bir etkisi olabilir.

Küçültme işlemi, bir dosya içindeki tüm gereksiz boşlukları alır ve onu daha da sıkıştırır, böylece güzel bir performans artışı elde edebilirsiniz.

Ayrıca, WordPress'te olmasanız bile, işlemi manuel olarak tamamlamak için kalifiye bir geliştiricinin hizmetlerini kullanabilirsiniz.

Bu daha fazla zaman alacak ama buna değer olabilir.

Küçültülmüş dosyalar genellikle eski benzerlerinden çok daha hafiftir, bu da ilk işlemenin çok daha hızlı tamamlanacağı anlamına gelir.

Buna ek olarak, küçültme işleminden sonra, oluşturma işlemini engellemeyen kaynakları indirmek için daha az zaman gerektiğinden indirme işleminin daha hızlı olmasını da bekleyebilirsiniz.

Üçüncü Taraf Yazı Tipleri Yerine Sistem Yazı Tiplerini Kullanın

Üçüncü taraf yazı tipleri bir siteyi "daha güzel" yapıyor gibi görünse de durum tam olarak bu değildir.

Yüzeyde harika görünse de, bu üçüncü taraf yazı tipi dosyalarının yüklenmesi genellikle daha uzun sürer ve oluşturmayı engelleyen kaynaklar sorununuza katkıda bulunabilir.

Harici dosyalar nedeniyle, tarayıcının sayfanızı oluşturmak üzere bu dosyaları indirmek için harici isteklerde bulunması gerekir, bu da önemli ölçüde daha yüksek indirme sürelerine neden olabilir.

İdeal olmayan geliştirme en iyi uygulamalarına sahip bir ekipteyseniz, sitenizi oluşturmak için gerekli olmayan birçok üçüncü taraf yazı tipi dosyanızın olması mantıklı olabilir.

Bu durumda, tüm bu gereksiz dosyaları kaldırmak, oluşturmayı engelleyen kaynaklarınızı önemli ölçüde iyileştirebilir ve Önemli Web Verileri'ndeki genel gelişiminize katkıda bulunabilir.

Sistem yazı tiplerini kullanmak ise, harici istekler olmadan yalnızca tarayıcı içinde işlemeyi sürdürür.

Ayrıca, kullandığınız üçüncü taraf yazı tiplerine çok benzeyen sistem yazı tipleri de olabilir.

Ancak, kesinlikle üçüncü taraf yazı tiplerini kullanmanız gerekiyorsa, üçüncü taraf yazı tiplerinin belirli yönleriyle ilgili sorunları azaltmaya yardımcı olmak için yapmak isteyeceğiniz iki şey vardır.

İlk olarak, önyükleme ve yazı tipi değiştirme ile birlikte kullanılırlarsa, üçüncü taraf yazı tipleriyle ilgili sorunlar sorun olmaktan çıkar.

Üçüncü taraf yazı tiplerini kullanırken ortaya çıkan diğer sorun, yazı tipinin kendisi yüklenene kadar yazı tipinin görünmemesidir, bu da Önemli Web Verilerini ve kullanıcı deneyimini olumsuz etkiler. Bundan kaçınmak için yazı tipi değiştirme CSS'sini kullanabilirsiniz.

İşte nasıl çalışır: Yazı tipi değiştirme CSS, tarayıcıya, belirli bir yazı tipini kullanan metnin bir sistem yazı tipi kullanılarak hemen görüntülenmesi gerektiğini açıklar. Özel yazı tipi hazır olduğunda, bu özel yazı tipi sistem yazı tipinin yerini alacaktır. Bu, sayfa yükleme sırasında görünmez yazı tiplerini önlemek için kullanabileceğiniz en etkili yöntemdir.

Bloktaki Yeni Çocuk: Değişken Yazı Tipleri

2020 itibariyle, değişken yazı tipleri çoğu tarayıcıda geniş çapta desteklenir hale geldi. Değişken yazı tipleri tam olarak nedir?

Değişken yazı tipleriyle, tüm yazı tipi stilleriniz tek bir dosyada bulunur. Ancak değişken yazı tipleri yaygınlaşmadan önce, yazı tipleri için birkaç ayrı yazı tipi dosyasına ihtiyacınız olacaktır.

Değişken yazı tiplerini kullanmanın aşağıdakileri içeren çeşitli faydaları da vardır:

• Daha küçük dosya boyutu: Değişken yazı tiplerinin dosya boyutu daha küçüktür, çünkü bunlar genişlik, ağırlık ve diğer niteliklerin tüm varyasyonlarını içeren tek yazı tipi bir dosyadır.
• Daha esnek bir tasarım yelpazesi: Diğer yazı tipi türlerinde, bir sitenin tasarım dilinin/sesinin her bir temsilini sağlamak için üç ila beş farklı yazı tipi dosyası gerekir. Buna başlıkların, gövde metninin vb. tüm permütasyonları dahildir. Ancak değişken yazı tipleriyle, tek bir yazı tipi dosyası kullanmak, bir yazı tipinin tasarımıyla ilişkili olabilecek tüm olası varyasyonları kullanmanıza olanak tanır.
• Daha az ve tek dosya: Bu dosya boyutu tasarrufu nedeniyle, bu, sayfa boyutunuzu daha da sıkıştırmanıza yardımcı olur ve sayfa hızınızı düşürür. Ve tek dosya avantajının kendisi, web yöneticisinin sayfa hızlarını gerçekten daha da fazla sıkıştırmasını sağlar.

Aşağıdaki belgeler, değişken yazı tiplerinden ve bunların nasıl uygulanacağından bahseder. Avantajları nedeniyle, kesinlikle üçüncü taraf yazı tiplerini uygulamanız gerekiyorsa, değişken yazı tiplerini kullanmak kabul edilebilir bir alternatiftir.

Kodlama Tekniklerinizi ve Dosyaları Birleştirmenizi Geliştirin

Kendiniz kodla çalışıyorsanız, tekniklerin optimalden daha az olduğunu görebilirsiniz (veya olmayabilir… burada kimse yargılamıyor).

Bir örnek: Her yerde satır içi CSS kullanıyorsunuz ve bu, tarayıcıda işleme ve oluşturma hatalarına neden oluyor.

Kolay çözüm, tüm satır içi CSS'yi aldığınızdan ve bunları CSS stil sayfası dosyasında doğru şekilde kodladığınızdan emin olmaktır.

Başka bir geliştiricinin kodu eşit değilse, bu, sayfa oluşturma ile ilgili önemli sorunlara yol açabilir.

Örneğin: Modern ve daha yalın teknikler yerine eski teknikler kullanılarak kodlanmış bir sayfanız olduğunu varsayalım.

Daha eski teknikler, önemli miktarda kod şişmesi içerebilir ve sonuç olarak sayfanın daha yavaş işlenmesine neden olabilir.

Bunu ortadan kaldırmak için, daha yalın ve daha az şişkin kodlar oluşturarak kodlama tekniklerinizi geliştirebilir ve sonuç olarak çok daha iyi bir sayfa işleme deneyimi elde edebilirsiniz.

Dosyaları Birleştirmek de Durumu İyileştirebilir

Örneğin: Hepsi aynı göreve katkıda bulunan sekiz veya 10 JavaScript dosyanız varsa, tüm bu dosyaları sizin için birleştirebilecek bir geliştirici tutabilirsiniz.

Ve daha az kritik JavaScript dosyalarıysa, sayfa oluşturma sorunlarını daha da azaltmak için bu dosyalar sayfadaki HTML kodunun sonuna eklenerek ertelenebilir.

Dosyaları birleştirerek ve kodlama tekniklerinizi geliştirerek, daha iyi sayfa işleme deneyimlerine önemli ölçüde katkıda bulunabilirsiniz.

Temel Çıkarımlar

Oluşturmayı engelleyen kaynakları bulmak ve azaltmak için kendi sürecinizi oluşturmak istiyorsanız, artık bunu yapacak araçlara sahipsiniz. Süreç şu şekilde özetlenmiştir:

• 1. Adım: Screaming Frog veya diğer tarama araçlarını kullanarak sitenizi tarayın.
• Adım 2: Yavaş sayfa hızına sahip sayfaları belirleyin.
• Adım 2a: Bu amaçla Google Search Console veya Google Analytics'i de kullanabilirsiniz.
• Adım 3: Bulduğunuz en düşük performansa sahip sayfaları öncelik sırasına göre düzenleyin.
• 4. Adım: Yukarıdaki kontrol listesi öğelerine gidin (tercih ederseniz sayfa başına her öğe için bir elektronik tablo da oluşturabilirsiniz) ve bu oluşturmayı engelleyen kaynakları gerektiği gibi bulun, azaltın veya onarın.
• Adım 5: Durulayın ve sitenizdeki her sayfa için tekrarlayın.

Buradaki fikir, kolayca ölçeklenebilir, kolayca uygulanabilen ve sonuç olarak çok daha düşük sayfa hızıyla sizi başarıya giden yola sokabilen bir süreç yaratmaktır.

Bu süreç ile siz de sahip olacağınız avantajdan faydalanabilir ve ayrıca Google'ın Önemli Web Verilerinden bir artış yaşayabilirsiniz.

Oluşturmayı engelleyen kaynakların belirlenmesi ve onarılması, hız optimizasyonunun kritik bir parçasıdır ve çoğu denetimde bu adım öne çıkar. Bunun arkasındaki mantık, sıralama sayfalarınız için mümkün olan en iyi oluşturma sürelerini oluşturmaya yardımcı olmalarıdır.

Google, her zaman sayfa hızında iyileştirmeler yapmak için çalışıyor. Ancak her zaman tutarlı olan bir şey var: sayfa hızınız ne kadar hızlıysa o kadar iyidir.

Bunu hızlı bir şekilde gerçekleştirebileceğiniz ölçeklenebilir bir süreci entegre ederek, en büyük ve en karmaşık sayfa hızı optimizasyon projelerini bile nispeten kolay bir şekilde halletmek mümkündür.

Ve bu aynı zamanda daha iyi bir kullanıcı deneyimi anlamına gelir.

Oluşturmayı engelleyen kaynakları bularak ve onararak, kullanıcılarınızın sitenizi nasıl deneyimlediğini de geliştirebilir ve web sitenizin ziyaretçilerini mutlu etmeye devam edebilirsiniz.

After all, keeping your site in top shape for prime time is what all of this optimization work is all about!

Daha fazla kaynak:

• Advanced Core Web Vitals: A Technical SEO Guide
• Difference Between Search Console CWV Report & PageSpeed Insights
• Core Web Vitals: A Complete Guide

Featured Image: SuperOhMo/Shutterstock