Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma | WP Takviyeleri

Web sitenizin yüklenme hızıyla ilgili şikayetler duyuyorsanız veya web sayfalarınızı daha hızlı yüklemek ve kullanıcı deneyiminizi geliştirmek istiyorsanız, oluşturmayı engelleyen kaynakları nasıl ortadan kaldıracağınızı düşünmek isteyebilirsiniz.

Nedeni ne olursa olsun, bir web sitesinin ziyaretçinin yüzünün önünde ne kadar hızlı göründüğü, kullanıcı deneyimini etkileyebilir ve işletmenizin müşteri bağlantılarını kaçırmasına neden olabilir. Kullanıcının web sitesi deneyimi, esas olarak kritik oluşturma yoluna ve oluşturma işlemi sırasında web sitenizin yüklediği komut dosyalarının yönetimine bağlıdır.

Oluşturma Nedir?

Tüm web siteleri, kullanıcının içeriğini görmesi ve içerikle etkileşime girmesi için bir yol izler. Web sitesini yükleme yoluna kritik oluşturma yolu denir. Bu yol, her sitenin ziyaretçi ve tarayıcısı için veri toplama ve oluşturma adımlarını açıklar.

Tarayıcılar Oluşturmadan Önce Ne Yapar?

Bir web sitesi URL'si girmek aşağıdaki süreci tetikler:

1. Bir kullanıcı belirli bir URL istediğinde gezinme tamamlanır.
   1. Bir sunucunun bir IP adresi sağladığı bir DNS araması gerçekleşir.
   2. Tarayıcı ve web sitesi sunucusu, bağlantı kurmak için bir TCP El Sıkışma gerçekleştirir
   3. Güvenli bağlantı istekleri, bir TLS Anlaşması veya ikinci el sıkışma alışverişi alır
2. Tarayıcı bir yanıt alır ve web sitesinin kodunu alır
   1. İlk veri paketi, ağ trafiğini düzenlemek için bir TCP Yavaş Başlangıç'ta alınır.
   2. Kullanıcı, bağlantı sınırlamalarını ve gönderme oranlarını belirlemek için sunucuya alındı ​​(ACK) gönderir.
3. Tarayıcı bilgileri ayrıştırır ve verileri bir CSS Nesne Modeli (CSSOM) ve Belge Nesne Modeli'ne (DOM) dönüştürür.
   1. DOM ağacı oluşturulur (site ve sayfa yapısı)
   2. Önceden yüklenmiş bir tarayıcı, komut dosyaları ve görüntüler gibi harici kaynakları toplar.
   3. CSSOM oluşturulur (stil ağacı)
   4. CSSOM oluşturulurken JavaScript derlenir
   5. Erişilebilirlik Nesne Modeli (AOM), yardımcı cihazların içeriği yorumlaması için oluşturulmuştur.
4. Oluşturma, önceden oluşturulmuş CSSOM ve DOM ağaçları kullanılarak gerçekleşir.

Bir Sayfayı Oluşturduğunuzda Ne Olur?

Web siteleri, bir web sitesinde düzeni, stili, boyamayı ve bazen birleştirmeyi tamamlamak için kod tasarımı yoluyla oluşturulur. CSS Nesne Modeli (CSSOM) ve Belge Nesne Modeli (DOM)

stil

DOM ve CSSOM, bir oluşturma ağacında birleşir ve inşaat başlar. Oluşturma ağacı, site ve her benzersiz düğüm için görünür düğümleri, içeriği ve hesaplanan stilleri düzenler.

Düzen

Düzen, mimarinin inşaatla buluştuğu adımdır ve sayfanın oluşturma ağacındaki tüm düğümlerin genişliğini, yüksekliğini ve konumunu göstermesi için bir yapı oluşturulur. Her nesnenin boyutu ve konumu belirlenir.

Web siteleri bir kutu yapısı içinde düzenlenir. Bu kutular, sınırsız sayıda farklı görüntü alanı boyutuna ayarlanabilir. Boyutlandırma için kutu yapısı değiştiğinde buna yeniden akış denir.

Paint: First Paint ve First Contentful Paint (FCP)

Bir web sitesi tarayıcısının bir sayfanın herhangi bir görüntüsünü oluşturduğu an, “İlk Boya” olarak adlandırılır. First Paint, yalnızca sayfanın koduna bağlı olarak düz bir arka plan rengi olabilir.

First Contentful Paint (FCP), bir web sitesi ziyaretçisinin sayfanızdaki içeriği (metin, resimler, videolar vb.) görüntüleyebildiği ölçülebilir anı ifade eder. FCP, sayfa yüklemenizin başlangıcından herhangi bir içeriğin oluşturulduğu noktaya kadar ölçer.

First Paint ve FCP, hızlı yükleme sayfası veya hızlı performansla aynı şey değildir, ancak site ziyaretçileri hızlı yüklenen bir sayfa algıladığında kullanıcı deneyimi ölçülebilir şekilde daha olumlu hale gelir. İlk Boyalarınızın ince ayarı, yükleme süresi ve site performansı, kullanıcının yükleme süresi algısını iyileştirir.

Kompozisyon

Web sayfaları, yapıyı düzenlemek için nesnelerin üst üste geldiği katmanları kullanır. Birleştirme, sayfanın bunları doğru bir şekilde oluşturmak için işlerin sırasını hesapladığı yerdir.

Nesne konumlandırma genellikle bir yeniden akışta değiştiğinden, yeniden akışlar yeniden birleştirmeyi tetikler.

Oluşturmayı Engelleyen Kaynaklar Nelerdir?

Tarayıcının bir web sitesinde içerik oluşturmasını yavaşlatan, geciktiren veya engelleyen komut dosyaları, stil sayfaları ve HTML içe aktarma işlemleri, oluşturmayı engelleyen kaynaklardır. İnsanlar oluşturmayı engelleyen kaynaklara atıfta bulunduklarında, genellikle şunlara atıfta bulunurlar:

• CSS
• <head> bölümünde JavaScript
• Bir sunucudan veya içerik dağıtım ağından yüklenen yazı tipleri
• HTML içe aktarmaları (eski sayfalar)

Oluşturmayı engellemeyen ve üste yakın yüklenmesi kritik olan çok sayıda CSS ve JavaScript vardır. Herhangi bir site ziyaretçisinin, stillendirilmemiş içerik veya hiçbir şey yerine amaçlanan içeriği görmesini sağlamak için stil sayfalarına öncelik verin.

Oluşturmayı Engelleyen JavaScript ve CSS Nedir?

Oluşturma işlemi sırasında tarayıcınız, her komut dosyası dahil olmak üzere önce <head> içindeki bilgileri çalıştırarak web sitesi bilgilerini yükler. Sayfa tarayıcınızda görünmeden önce komut dosyalarının tümünün sırayla çalıştırılması ve tam olarak işlenmesi gerekir.

Komut dosyaları bir kuyruğa yerleştirilir, bu nedenle geliştirme sırasında <head> içindeki komut dizisi sırası önemlidir. Koda bağlı olarak, web sitenizin tam olarak yüklenmesini yavaşlatabilir veya önleyebilir ve bunlar, oluşturmayı engelleyen CSS ve JavaScript olarak adlandırdığımız şeydir.

WordPress web sitenizdeki komut dosyaları, temalardan, özel çalışmalardan veya çeşitli işlevler için eklenen eklentilerden gelebilir.

Görüntüler Oluşturma-Blok Kaynakları mı?

Görüntülerin oluşturmayı engelleyen kaynaklar olup olmadığını merak ediyorsanız, değildir. Bir resmin boyutu yine de sayfanızda yükleme sorunlarına neden olabilir, ancak oluşturmayı engellememelidir.

Oluşturmayı Engelleyen Kaynakları Neden Ortadan Kaldırmalısınız?

Oluşturmayı engelleyen komut dosyaları, sayfa yükleme sürelerini yavaşlatabilir ve ziyaretçileriniz için bir web sitesi deneyimini mahvedebilir. Yavaş bir web sitesi algısı, web sitesi deneyiminiz zayıfsa ziyaretçi kaybına neden olabilir. Düşük ziyaretçi tutma, arama motoru sonuçlarınızı etkileyebilir ve sonuç listenizi düşürebilir.

Daha düşük Arama Motoru Optimizasyonu (SEO) sıralaması, ziyaretçilerde azalma ve potansiyel iş kaybı anlamına gelir. Sıralamaları kaybetmek, ziyaretçi sayınızı azaltır ve kötü bir site, ziyaretçiyi elde tutma oranınızı azaltır; oluşturmayı engelleyen kaynaklar büyük bir sorun olabilir.

Web sitenizin yüksek bir Google Sayfa Hızı Puanı hedefi varsa, oluşturmayı engelleyen kaynaklarınızı anlamak bu hedefe ulaşmanın anahtarıdır.

Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma

Sitenizin SEO sıralaması ve kullanıcı deneyimi konusunda ciddileşmek, sitenizin işlemeyi engelleyen kaynakların ele alınması veya kaldırılması gerektiği anlamına gelir. Sitenizi sıfırdan oluşturmuyorsanız, web sitenizi oluşturmayı engelleyen kaynaklar için test etmeye başlayın.

Oluşturmayı engelleyen kaynakları belirledikten sonra, sorunu çözme ve site işlevselliğini iyileştirme yönteminizi seçeceksiniz.

Web Sitenizin Oluşturmayı Engelleyen Kaynakları Olup Olmadığını Test Edin

Oluşturmayı engelleyen kaynakları keşfetmek için web sitenizde bir değerlendirme yapmaktan asla zarar gelmez (Google PageSpeed ​​Insights'ı deneyin). Elinizden gelenin en iyisini optimize ettiyseniz, en iyi uygulamaları izliyorsanız ve hala sorun yaşıyorsanız veya nereden başlayacağınızı bilmiyorsanız, sayfa değerlendiricileri yardımcı kılavuzlar olabilir.

Oluşturmayı Engelleyen JavaScript ve CSS'yi Ortadan Kaldırma Yöntemleri

WordPress, sitenizin oluşturulmasına engel olan kaynakları birkaç farklı şekilde yönetmenize olanak tanır. WordPress, oluşturmayı engelleyen komut dosyalarınızı ve bağlantılarınızı kod, etiketler, dosya organizasyonu ve optimizasyonu ve eklentilerle düzenlemenizi sağlar.

Profesyonel geliştiriciler, bu süreçleri koda dahil eden özel eklentiler veya temalar da oluşturabilir.

Kod ile Oluşturmayı Engelleyen Javascript'i Kaldırın

Kod aracılığıyla oluşturmayı engelleyen kaynakları ele almanın üç yöntemi şunlardır:

1. <script> ve <link> etiketlerini HTML kodunuzun altına taşıyın
2. Kritik olmayan komut dosyaları için etikete zaman uyumsuz veya erteleme nitelikleri ekleyin.
3. Kullanılmayan JavaScript kodunu kaldırın.

WordPress, eklentiler ve temalar tarafından kullanılan eski jQuery sürümleriyle uyumluluk sağlamak için bir jQuery Migrate dosyası yükler. Sitenizdeki hiçbir şeyin çalışması gerekmiyorsa, WordPress'in bu jQuery Migrate dosyasını yüklemesini durdurmak için bir kod parçası veya bir eklenti kullanabilirsiniz.

Oluşturmayı Engelleyen Stil Sayfalarını Ortadan Kaldırın

Stil sayfalarının doğası, onları doğası gereği kaynakları engelleyen kaynaklar yapar. Bunu sitenizde aşağıdaki şekillerde ele alabilirsiniz:

1. CSS'yi medya türüne göre ayırın (mobil, tablet, masaüstü vb.)
2. Kritik İşleme Yolunu Optimize Edin
3. CSS dosyalarını birleştir

WordPress ve bir görsel oluşturucu kullanarak, bir sayfanın nasıl oluşturulduğunu doğrudan kontrol edemeyebilirsiniz, ancak herhangi bir sorunu çözmenin yolları vardır.

Bir WordPress Eklentisi veya Uzantısı Kullanarak Adres Oluşturma Engelleme

WordPress eklentileri ve uzantıları, bir sayfadaki komut dosyalarının düzenlenmesinde kullanılır. Eklentiler, sayfanızın <script> ve <link> etiketlerinden geçer ve belirli yönergelere göre erteleme veya zaman uyumsuz niteliklerini uygular.

WordPress için bir dizi eklentiyi inceledik ve test ettik ve blogda hız optimizasyonu için favori eklentilerimiz gibi faydalı şeyleri paylaşmaya devam ettik.

Bir WordPress Profesyoneline Sahip Olun, Oluşturmayı Engelleyen Kaynakları Sizin İçin Ortadan Kaldırın

Bazı eklentiler özelleştirme gerektirir ve basit görünse de yanlış ayarlanırsa çalışmayabilir. Bir WordPress uzmanından yardım istemek utanılacak bir şey değildir ve WP Buffs, sitenizi optimize edebilecek birkaç uzmana sahiptir.

Oluşturmayı Optimize Etmek İçin En İyi Uygulamalar

1. Sayfa yükü üzerindeki etkilerini azaltmak için oluşturmayı engelleyen kaynaklarınızı bir araya getirin.
2. Kaynağın boyutunu azaltın, böylece yüklenecek bayt sayısı azaltılır.
3. Oluşturma engelleme olmayan kaynakların indirilmesini erteleyin.
4. Harici bir yük olduğu için @import kuralıyla CSS eklemeyin.
5. Komut dosyalarınızı önbelleğe almak ve JavaScript ile CSS'nizi optimize etmek için tasarlanmış bir WordPress eklentisi kullanın.
6. Özel yazı tiplerini yerel olarak yükleyin.
7. Kritik ve Kritik Olmayan CSS ve JavaScript'i tanımlayın.
8. Kritik olmayan oluşturmayı engelleyen kodu zaman uyumsuz veya erteleme öznitelikleriyle işaretleyin.
9. Kullanılmayan kod kaldırılmalıdır.

Baş Ağrısını Ortadan Kaldırın ve Bir WordPress Uzmanının Yardımına İzin Verin

WP Buff'lar, WordPress sitelerini optimize etme ve sayfa performansını iyileştirme konusunda yeteneklidir. Performansın işiniz için neden önemli olduğunu ve en önemli etkiyi yaratmak için hangi alanlara odaklanmanız gerektiğini anlıyoruz.

Web sitenizin performansını ve ziyaretçi deneyimini iyileştirmek, yalnızca oluşturmayı engelleyen kaynaklardan daha fazlası olabilir. WP Buffs sitenize ve adresinize bakabilir:

• Görüntü boyutları
• Görüntü kalitesi ve teslim biçimi
• Sayfa uzunluğu ve dinamik içerik yüzdesi
• Kötü oluşturulmuş temalar
• Gecikmelere neden olan gereksiz komut dosyaları
• Kötü oluşturulmuş eklentiler
• Kullanılmayan harici komut dosyaları
• eski yazılım
• Sınırlı web barındırma planı, sitenin ihtiyaçlarını yeterince destekleyemiyor

WordPress, bir web sitesi oluşturmak için oldukça kolay bir platform olabilir, ancak kullanıcı deneyimini en üst düzeye çıkarmak, eğitimli bir profesyonel veya genellikle harika bir hizmet sağlayıcı gerektirebilir.

Sıkça Sorulan Sorular