Web sitenizi Lighthouse aracılığıyla çalıştırıyorsanız, görüntü oluşturmayı engelleyen kaynakları kaldırmak için bir öneri fark etmiş olabilirsiniz.
JavaScript'i geciktirerek ve önemli CSS stillerini satır içine koyarak, WordPress'te oluşturmayı yavaşlatan kaynaklardan kurtulabilirsiniz. Bu, önbellek eklentilerinin çoğu, Autoptimize ve Async JavaScript tarafından desteklenir. Hem Elementor hem de Divi , ertelenmiş ve satır içi CSS kullanarak sayfanın oluşturulmasını engelleyen kaynaklardan kurtulmanın yerleşik yollarına sahiptir. Gereksiz CSS, JavaScript ve üçüncü taraf kodunun kaldırılması da çözüme yardımcı olabilir.
Bu yazıda, render engelleme kaynaklarını tanımlayacağız ve web sitenizden bunlardan kurtulmanın avantajlarını ele alacağız. Ardından, onlardan kurtulmanın beş alternatif yolunu sizin için göstereceğiz.
Oluşturmayı engelleyen kaynaklar nelerdir?
Oluşturmayı engelleyen kaynaklara daha yakından bakmadan önce tipik web sitesi yükleme sürecini anlamak çok önemlidir. Web sitenizin tüm içeriği, bir bağlantıya tıkladıktan sonra ziyaretçinin tarayıcısı tarafından oluşturulmalı (veya indirilmelidir). Web sitenizdeki tüm HTML, CSS ve JavaScript'i yukarıdan aşağıya okur. Tarayıcı bu komut dizisini okumayı bitirene kadar web siteniz ziyaretçiler tarafından görülemez. Oluşturmayı engelleyen kaynaklar varsa, uzun süre beklemeleri gerekebilir. Temel olarak, tarayıcının işlenirken diğer içeriği yüklemesini önleyen bir CSS veya JavaScript dosyası, oluşturmayı engelleyen bir kaynaktır. Bu, oluşturma işlemini durdurabilir ve sayfanın bitmemiş veya boş görünmesine neden olabilir.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başlaWeb sitenizde oluşturmayı engelleyen kaynaklar olduğunda, kodun en üstüne fazladan dosyalar yüklenir. Web sitesini görüntülemeden önce, kullanıcıların bu dosyalar işlenirken beklemesi gerekir. Oluşturmayı engelleyen kaynaklar, çeşitli web sitesi performans göstergelerini etkileme potansiyeline sahiptir. Örneğin, en büyük içerikli boyama, bir sayfanın birincil içeriğinin yüklenmesinin ne kadar sürdüğünü ölçer. Sitenizin Belge Nesne Modeli'ndeki (DOM) materyalin tarayıcı tarafından ilk kez görüntülenmesi, ilk içerikli boyama olarak bilinir. Toplam engelleme süresi, ilk içerik dolu boyama ile etkileşim süresi (bir sayfanın tamamen etkileşimli hale gelmesinin ne kadar sürdüğü) arasındaki süredir.
Yükleme için gerekli olmasalar da, işlemeyi engelleyen kaynaklar işlemeyi engelleyebilir. Sonuç olarak web sitenizin Kullanıcı Deneyimi zarar görebilir (UX). Bu nedenle, ziyaretçilerin sayfalarınızdan ayrılmasını engellemek için bunlardan kurtulmanız çok önemlidir.
Oluşturmayı engelleyen kaynakları ortadan kaldırmanın faydaları
İnternet kullanıcıları genellikle web sitelerinin yüklenmesini beklemekten hoşlanmazlar. Hızlı bir web sitesi, kullanıcıları materyallerinizi keşfetmeye ikna edebilir ve onları bir rakibi ziyaret etmekten alıkoyabilir. Oluşturmayı engelleyen öğeleri kaldırarak, web sitenizin kodunu mümkün olduğunca hafif hale getiriyorsunuz, bu da sayfa hızını artırmanın sırrı olabilir. Site performansı ve kullanıcı etkileşimi, Google gibi arama motoru devlerinin web sitelerini değerlendirirken dikkate aldığı iki faktör olduğundan, görüntü oluşturmayı engelleyen dosyaları kaldırmak, sitenizin arama motoru sıralamalarını yükseltmeye yardımcı olabilir.
WordPress'te oluşturmayı engelleyen kaynaklar nasıl ortadan kaldırılır
Oluşturmayı engelleyen öğeleri WordPress'te nasıl tespit edeceğinizi artık anladığınıza göre web sitenizden nasıl kaldıracağınızı merak ediyor olabilirsiniz. Neyse ki, en basitlerinden başlayarak, bunu başarmak için uygulayabileceğiniz birçok yaklaşımın bir listesini bir araya getirdik.
CSS yüklemesini optimize edin
CSS'nin web sitenize yüklenme hızını artırmak, oluşturmayı engelleyen kaynaklardan kurtulmanın bir tekniğidir. Bir tarayıcı, daha önce söylendiği gibi web sayfanızı yukarıdan aşağıya yükler. Bu, belirli dosyaların işlenmesi gerektiğinde yükleme işleminin daha uzun sürmesine neden olabilir. Sayfanın görüntülenmesi için yalnızca bazı CSS dosyalarının yüklenmesi gerektiğini unutmamak çok önemlidir. Bu nedenle, CSS yüklemesini optimize ettiğinizde ilk önce en önemli dosyaları görüntüleyebilirsiniz. Oluşturmayı engelleyen CSS manuel olarak kaldırılabilir, ancak işleri kolaylaştırmak için bir eklenti de yükleyebilirsiniz. Jetpack Boost kullanarak web sitenizi doğrudan WordPress panonuzdan optimize edebilirsiniz. Bu eklenti, yavaş yüklemeyi uygulamayı, gerekli olmayan JavaScript'i ertelemeyi ve CSS yüklemesini iyileştirmeyi kolaylaştırır. WordPress'te oluşturmayı engelleyen kaynaklardan kurtulmanın en basit yollarından biri bunu yapmaktır.
WordPress panonuzdaki Eklentiler Yeni Ekle altında Jetpack Boost'u arayarak başlayın. Yükleyin ve ardından web sitenizdeki eklentiyi açın.
Zaten Jetpack yüklediyseniz, Jetpack My Jetpack'e gidebilirsiniz. Boost'u arayın ve Jetpack ürünleri listesinden Etkinleştir'i seçin.
Eklenti etkinleştirildikten sonra, Jetpack Boost sekmesine tıklayın ve Başlayın'ı seçin.
Web siteniz anında Jetpack'ten bir performans derecesi alacaktır. Masaüstü ve mobil puanlarınızla ilgili bilgilerle birlikte bir harf notu göreceksiniz.
Ardından, CSS Yüklemesini Optimize Et seçeneğine ilerleyerek bu özelliği etkinleştirin. Jetpack Boost etkinleştirildiğinde, web siteniz için çok önemli olan CSS'yi yükselterek daha hızlı yüklenmesini sağlar.
Gerekli olmayan JavaScript'i erteleyin
Yalnızca CSS yüklemesini optimize etmenin dışında, WordPress'teki oluşturmayı engelleyen kaynaklardan kurtulmak için daha fazla önlem alabilirsiniz. Web sitenizin yüklenmesini daha da hızlandırmak için gerekli olmayan JavaScript de ertelenebilir. Gerekli olmayan JavaScript, bazı işlemleri içeriğiniz yüklenene kadar geciktirmek için geciktirilebilir. Bir sayfanın yüklenmesi için gerekli değilse, tarayıcının JavaScript dosyalarını yürütmesini durdurabilirsiniz. Neyse ki, Jetpack Boost eklentisini kullanmak bunu yapmayı kolaylaştırır. CSS yükleme işlemini optimize ettikten sonra, gerekli olmayan JavaScript'i kolayca erteleyebilirsiniz. Temel Olmayan JavaScript'i Ertele alanının geçiş anahtarını açık konuma getirin. Bu bölüm, CSS Yüklemesini Optimize Et bölümünün altında bulunabilir.
Eklenti, siz bu ayarı etkinleştirdikten sonra sayfanızın genel performansına ilişkin değerlendirmesini güncelleyecektir. Jetpack Boost'u kullanmadan önceki ve sonraki puanınız görüntülenecektir.
Bu işlemi tamamlamadan önce ve sonra alınan ekran görüntülerindeki puanlara bir göz atın. Artan sayfa hızının, gerekli olmayan JavaScript'i geciktirerek ve CSS'yi daha verimli bir şekilde yükleyerek başarıldığını fark edeceksiniz. Tarayıcılar, büyük betikleri çalıştırmak zorunda olmadıkları için içeriğinizi daha hızlı yükleyebilirler.
Ekran dışı görüntüleri ertele
Görüntüler, sayfaların oluşturulmasını engelleyen bir kaynak olmasa da yükleme sürelerini hızlandırmayı düşünebilirsiniz. Web sitelerinde sıklıkla, bir kullanıcı sayfayla kaydırma gibi bir etkileşimde bulunana kadar görünmeyen ekran dışı resimler bulunur. Bunları web sayfasının yüklenmesi için gerekli olmadığından lazy load ile erteleyebilirsiniz. Yalnızca ziyaretçilerin görebileceği resimler tembel bir şekilde yüklenir. Bu fotoğraflar, kullanıcı sayfayı kaydırdığında sayfada görüntülenmeden hemen önce yüklenir. Yavaş yükleme etkinleştirilmemişse, bir tarayıcı bir sayfadaki her resmi aynı anda yüklemeye çalışır. Malzemenizin yüklenmesi ne kadar uzun sürerse, ziyaretçilerin sitenizden ayrılma olasılığı o kadar artar.
Bir ziyaretçi bir masaüstü bilgisayar kullanıyorsa, düzenli yükleme sorun olmayabilir. Akıllı telefonlar ve tabletler ise daha küçük ekranlara ve daha az bant genişliğine sahiptir. Web siteniz, tüm fotoğraflarını aynı anda tamamen yüklerse, cep telefonu kullanıcıları için daha fazla bant genişliği tüketebilir ve yüklenmesi daha uzun sürebilir. Bu sorun, geç yükleme ile çözülmüştür.
Sitenizde yavaş yüklemeyi etkinleştirmek için Jetpack Boost'u kullanın. Sadece Lazy Image Loading seçeneğini arayın ve etkinleştirin.
Bunu yaparsanız, izleyici yalnızca sayfada aşağı kaydırdıklarında web sitenize yüklenen resimleri görecektir. Fotoğraflar blok oluşturan bir kaynak olmasa da, yavaş yüklemeyi etkinleştirmek sayfanızı hızlandırabilir.
Elementor/Divi ile Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın
Hem Elementor hem de Divi , işlemeyi engelleyen kaynakları kaldırmak için seçenekler içerir.
CSS'yi ve yazı tiplerini satır içi olarak yüklemek için Elementor Deneyleri ayarlarınızda Geliştirilmiş CSS Yükleme ve Yazı Tipi-Awesome Satır İçi'ni etkinleştirerek onları oluşturma engelleyici olmayan hale getirin. Gelişmiş Varlık Yükleme, temel web yaşamsal özelliklerini çeşitli şekillerde iyileştiren gereksiz CSS/JavaScript'i ortadan kaldırır.
Divi'nin performans seçenekleri, önemli CSS'yi uygulayarak, CSS/JavaScript'i erteleyerek ve yazı tiplerinizi satır içine yükleyerek, oluşturmayı engelleyen kaynakları da azaltabilir.
Oluşturmayı engelleyen JavaScript'i manuel olarak kaldırın
Bir optimizasyon eklentisi yüklemek çok daha kolay bir seçenek olsa da, işlemeyi engelleyen kaynakları manuel olarak da silebilirsiniz. İdeal olarak, bu seçimi yalnızca deneyimli bir kodlayıcıysanız düşünmelisiniz. Web sitenizdeki eklenti sayısını azaltmak istiyorsanız, bu prosedür de yardımcı olabilir. JavaScript'in daha verimli çalışmasına yardımcı olmak için dosyalarınıza bir zaman uyumsuz veya erteleme özelliği verebilirsiniz. Tarayıcıya, kritik olmayan komut dosyalarını bu şekilde işaretleyerek ayrı ayrı işlemesi talimatı verilecektir. Her iki özellik de HTML bilgilerinin yüklenmesini hızlandırmak için kullanılabilir.
HTML dosyası, komut dosyasıyla karşılaşana kadar tipik bir şekilde ayrıştırılır. Ayrıştırma, betiği bulurken duracaktır. İndirip çalıştırdıktan sonra ayrıştırma devam eder.
Kalan HTML'yi işlerken, tarayıcı async özelliği sayesinde JavaScript'i indirebilir. İndirdikten sonra, HTML işlemeyi durdurabilir ve komut dosyasını çalıştırabilir.
Erteleme özelliği benzer şekilde çalışır ve tarayıcının HTML'yi ayrıştırırken betiği indirmesine izin verir. Aradaki fark, betiğin çalıştırılmasını HTML ayrıştırması tamamlanana kadar geciktirmesidir.
Bu özelliklerden herhangi birini uygulamak için functions.php dosyanıza bir kod parçası eklemelisiniz. Önce işlemeyi engelleyen kaynağın script> etiketini bulmanız gerekir. async özniteliği olarak aşağıdakiler:
<script src="resource.js" async></script>Alternatif olarak, erteleme özelliği kullanıldığında bir betiğin nasıl görünebileceğini düşünün:
http://resource.jsBir eklenti bu özellikleri sizin yerinize halledebilir, ancak bunu kendiniz yapmak tercihlerinize daha uygun olabilir. Öyleyse, her özelliğin ne zaman uygulanacağını anlamak çok önemlidir. Başka bir komut dosyasına bağlı olan temel olmayan komut dosyaları için bir erteleme özelliği kullanmalısınız. Eşzamansız seçeneği, diğer tüm komut dosyaları için uygundur.
Bir eklenti ile zaman uyumsuz veya erteleme niteliklerini uygulayın
Komut dosyalarını manuel olarak düzenlemede sorun yaşıyorsanız, Async JavaScript gibi bir eklenti kullanın. Bu araç sayesinde, hangi betiklerin zaman uyumsuz veya erteleme özelliğine sahip olduğu konusunda tam kontrole sahipsiniz.
Eklenti yüklendikten sonra, Ayarlar Eşzamansız JavaScript altında Eşzamansız JavaScript'i Etkinleştir'i seçin.
Ardından Async JavaScript Method başlıklı bölüme gidin. Eşzamansız veya erteleme özelliklerini burada etkinleştirip etkinleştirmeyeceğinizi seçebilirsiniz.
Pek çok eklenti jQuery'ye bağlı olduğundan, bu komut dosyalarını hariç tutmak iyi bir fikirdir. Eşzamansız özelliklerin jQuery'ye uygulanması web sitenizin bozulmasına neden olabilir.
Şüpheye düştüğünüzde erteleme özelliğini kullanabilirsiniz, ancak jQuery'yi tamamen hariç tutmak en iyi eylem şeklidir.
Artık hangi komut dosyalarını zaman uyumsuz veya ertelemede çalıştırmak istediğinizi belirtebilirsiniz. Her betiği uygun bölüme koymaya dikkat etmelisiniz.
Bu prosedürün dışında bırakmak istediğiniz tüm komut dosyalarını Komut Dosyası Hariç Tutma bölümü altında listeleyebilirsiniz.
Sayfanın alt kısmında eklentileri ve temaları hariç tutma seçenekleri de vardır. Burada bahsettiğiniz herhangi bir tema veya eklenti için komut dosyaları, zaman uyumsuz veya erteleme özellikleri için geçerli olmayacaktır.
Gerekli ayarlamaları yaptıktan sonra Ayarları Kaydet'e tıklayabilirsiniz. Bu yaklaşım, betikleri manuel olarak değiştirmek ile görevi sizin yerinize halletmek için bir eklenti kullanmak arasında yararlı bir uzlaşma olabilir. Alternatif olarak, Jetpack Boost gibi hepsi bir arada bir uygulama kullanarak bu ekstra adımları ortadan kaldırabilirsiniz.
Sarma
Ziyaretçilerin tarayıcılarını, hemen gerekli olmayan varlıkları indirirken ekranın üst kısmındaki içeriğin oluşturulmasını erteleyerek, oluşturmayı engelleyen kaynaklar, WordPress sitenizin algılanan sayfa yükleme sürelerini artırır. Ziyaretçilerin sayfanızın görüntülenebilir alanını daha hızlı yüklemesine yardımcı olmak için hemen gerekli olmayan kaynakların yüklenmesini geciktirmelisiniz. WordPress'te oluşturmayı engelleyen kaynaklardan kurtulmak için önceden hazırlanmış eklentileri kullanın. Aynı geliştirici tarafından oluşturulan iki eklenti olan Autoptimize ve Async JavaScript'i ücretsiz bir çözüm için birleştirebilirsiniz. Kinsta ile özel bir etkileşim sunan ve bunun için ödeme yapmaya hazırsanız, birçok ek WordPress performans ince ayarına yardımcı olabilecek WP Rocket'i kullanabilirsiniz.
