WordPress'te Yavaş Yükleme Nasıl Yapılır (Resimler ve Videolar)

Bir web sitesi sahibiyseniz, site hızını geçmişte en az bir kez düşünmüşsünüzdür. Ne de olsa Google, siteleri arama sonuçlarında nereye yerleştireceğini belirlerken hızı dikkate alır. Bu nedenle, siteniz yavaş yükleniyorsa sıralama söz konusu olduğunda dezavantajlı durumdasınız demektir. Ve hepimiz biliyoruz ki daha yüksek sıralamalar daha fazla trafiğe yol açar.

Peki, WordPress sitenizin olabildiğince çabuk yüklendiğinden nasıl emin olabilirsiniz? Bir yol, resimlerinizi tembel yüklemektir.

Tembel yükleme, görüntülerin ve videoların oluşturulmasını ihtiyaç duyulana kadar geciktiren bir tekniktir. Bunu uygulamak, sitenizi önemli ölçüde hızlandırabilir ve harika haber şu ki, bunu çalıştırmak için bir geliştirici olmanıza gerek yok.

Bugün size iki yöntem kullanarak WordPress'te görüntüleri ve videoları nasıl tembel yükleyeceğinizi göstereceğiz: eklentili ve eklentisiz.

geç yükleme nedir?

Yavaş yükleme, sayfa hızını artırmak için kullanılan yaygın bir tekniktir. Fikir basit: Bir ziyaretçi ilk geldiğinde bir sayfadaki tüm resimleri yüklemek yerine, yalnızca görünür olan resimleri işler. Ardından, ziyaretçi sayfayı aşağı kaydırdıkça, gerektiği kadar daha fazla resim yüklenir.

Bu, bir ziyaretçi asla bir sayfanın en altına inmezse, sayfanın görüntülenen alanının altındaki resimlerin asla yüklenmeyeceği anlamına gelir. Böylece, yavaş yükleme, sayfa yükleme sürenizden değerli milisaniyeleri (hatta saniyeleri) azaltabilir.

Ek olarak, yavaş yükleme, bant genişliğinden tasarruf etmenize de yardımcı olabilir. Bu, özellikle sitenizi bir mobil cihazda ziyaret eden kişiler varsa önemlidir. Görünmeyen resim ve videoların yüklenmesini erteleyerek kullanılan veri miktarını azaltabilirsiniz.

Yavaş yükleme nasıl çalışır?

Genel olarak, yavaş yükleme iki yoldan biriyle çalışır. 5.5 sürümünden başlayarak WordPress, "yükleme" adı verilen bir HTML5 özelliği ekler. Bu durumda tarayıcı, geç yükleme işleminin tüm bölümlerini herhangi bir ekstra JavaScript'e ihtiyaç duymadan yönetir.

HTML5'in özelliğinden önce geliştirilen başka bir yöntem, bazı yaratıcı JavaScript'lerdir. Bu durumda, sayfa yüklendiğinde boş bir yer tutucu sunulur, ardından görüntüleri görüntü alanına geldiklerinde yüklemek için JavaScript kullanılır.

Her iki durumda da, yalnızca tarayıcının ihtiyaç duyduğu resimler yüklenir. Bir ziyaretçi sayfayı aşağı kaydırdığında diğer resimler yüklenir.

Bunu yapmanın, aşağıda daha ayrıntılı olarak tartışacağımız birkaç farklı yolu vardır. Ancak tembel yüklemenin nasıl çalıştığının özü budur.

Tembel yüklemenin faydaları nelerdir?

Resimleri geç yüklemenin başlıca üç avantajı vardır:

• Artan site hızı
• Azaltılmış bant genişliği kullanımı
• Daha iyi kullanıcı deneyimi

Artan site hızı, genellikle yavaş yüklemeyi uygulamak için birincil motivasyondur. Gereksiz görsellerin render edilmesini bekleyerek sayfa yükleme sürenizi azaltabilirsiniz. Bu, özellikle bir sayfada çok fazla görseliniz varsa veya resimleriniz büyükse geçerlidir.

Ardından, yavaş yükleme, bant genişliğinden tasarruf etmenize yardımcı olabilir. Ziyaretçiler asla sayfadan aşağı inmezlerse, asla görmeyecekleri görselleri yüklemek için bant genişliği boşa harcanmaz.

Son olarak, geç yükleme, kullanıcı deneyiminizi iyileştirebilir. Bunun nedeni, ziyaretçilerin sitenizle etkileşim kurmaya başlamadan önce bir sayfadaki tüm resimlerin yüklenmesini beklemeleri gerekmemesidir.

WordPress varsayılan olarak tembel yükleniyor mu?

Evet, WordPress 5.5'ten itibaren yavaş yükleme, kurulum sırasında varsayılan olarak otomatik olarak etkinleştirilir. Bununla birlikte, deneyimi özelleştirmenin oldukça basit ve sezgisel olan bazı yolları vardır. Aşağıda bu yöntemleri daha ayrıntılı olarak tartışacağız.

Resimlerimi tembel yüklemeli miyim? Dezavantajları var mı?

Çoğu durumda, sayfa hızınızı artırmak veya bant genişliğinden tasarruf etmek istiyorsanız resimlerinizi geç yüklemek harika bir fikirdir. Bununla birlikte, dikkate alınması gereken bazı potansiyel dezavantajlar da vardır.

Düzen değiştirme

Resimlerinizi tembel yüklerseniz, sayfanızın düzeni değişebilir. Örneğin, sayfanızın sağ tarafında bir kenar çubuğunuz varsa ve bunun içinde bulunan bir görseli yavaş yüklerseniz, kenar çubuğu yer açmak için aşağı hareket edebilir. Bu, ziyaretçileriniz için çok kafa karıştırıcı olabilir.

Genel bir kural olarak, bu sorunu önlemek için yer tutucuların kullanılması önerilir.

SEO'ya potansiyel isabet

Düzgün yapmazsanız, geç yüklenen görseller, Google gibi arama motorlarının onları indekslemede sorun yaşamasına neden olabilir . Sıralama söz konusu olduğunda içerik kraldır ve bu durumda değerli parçaları kaybedebilirsiniz.

Resimleriniz artık arama sonuçlarında görünmeyebilir ve resimlerin sayfa içeriğinin geri kalanıyla (bir e-ticaret listesi için ürün resimleri gibi) ne kadar önemli olduğuna bağlı olarak, normal arama sıralamalarınızı da alt üst edebilir.

Bununla birlikte, yavaş yüklemeyi düzgün bir şekilde ayarlarsanız, bu bir sorun olmayacaktır. Bu nedenle, kendinize güvenen bir geliştirici değilseniz, yapabileceğiniz en iyi şey bir yavaş yükleme eklentisi kullanmak veya WordPress'te bulunan varsayılan yavaş yüklemeyi kullanmaktır.

Eklenti çakışmaları

Ek olarak, geç yükleme, sosyal medya önizlemeleri oluşturmak için görüntüleri kullanan eklentiler gibi bazı WordPress eklentilerinde sorunlara neden olabilir.

Sitenizde her değişiklik yaptığınızda, her şeyin olması gerektiği gibi çalıştığından emin olmak için bunları kapsamlı bir şekilde test etmelisiniz.

Ve bir şeylerin ters gitmesi durumunda, hızlı bir kurtarma için WordPress sitenizin bir yedeğini elinizin altında bulundurun.

WordPress'te yavaş yükleme nasıl etkinleştirilir

Tembel yükleme artık WordPress'te varsayılan olarak etkindir. Modern bir WordPress yinelemesi kullanmıyorsanız (kullanmanızı önersek de) veya geç yükleme işlemi üzerinde daha ayrıntılı kontrol istiyorsanız, bunu iki farklı yöntemden birini kullanarak yapabilirsiniz: bir eklenti kullanmak veya sitenize kod eklemek. alan.

1. Bir eklenti ile yavaş yükleme

Deneyimli bir geliştirici değilseniz, bir eklenti kullanmanızı öneririz çünkü sitenizin kodunu her düzenlediğinizde sorunlarla karşılaşma riskiniz vardır. Bir şeyi bozmanız durumunda elinizde yedekleriniz olsa bile, yine de en iyisi güvenilir bir eklenti kullanmak olabilir.

Jetpack Boost, site performansını ölçmenize ve iyileştirmenize yardımcı olmaya adanmış ücretsiz bir eklentidir. Aşağıdaki gibi işlevler sunar:

• Gerekli olmayan JavaScript'i erteleme
• CSS yüklemesini optimize etme
• Geç resim yükleme
• Site performans testi

Jetpack Boost'u kullanmaya başlamak için WordPress eklenti dizininden ücretsiz olarak indirin.

Veya WordPress kontrol panelinizde Eklentiler → Yeni Ekle'ye gidin, ardından “Jetpack Boost”u arayın ve Şimdi Kur'a tıklayın. Kurulduktan sonra Etkinleştir'i tıklayın.

Ardından, Boost başlıklı yeni pano menü seçeneğine gidin. Ardından, Ücretsiz olarak başlat'ı tıklayın.

Bir sonraki sayfada, Lazy Image Loading yazan büyük geçişe gidin ve açın. Şimdi sitenize bir göz atın ve her şeyin düzgün bir şekilde oluşturulduğundan ve iyi göründüğünden emin olun. Bu kadar! Tembel yükleme, yalnızca birkaç tıklamayla gitmek için iyidir.

İşleri bir adım öteye götürmek ve sitenizin geç yüklenmesini özelleştirmek istiyorsanız, bunu functions.php dosyanıza ekleyebileceğiniz kod parçacıklarını kullanarak yapabilirsiniz. Veya bunları bir işlevsellik eklentisiyle ekleyebilirsiniz.

İşte başarabileceğiniz birkaç görev:

1. Belirli sayfalarda geç yüklemeyi devre dışı bırak
2. Resim yüklenene kadar görüntülenen bir yer tutucu ayarlayın
3. Belirli görüntüler için geç yüklemeyi kapatın
4. Belirli bir CSS sınıfı için geç yüklemeyi kapatın

Örneğin, bir CSS sınıfını geç yükleme işleminin dışında bırakmak istiyorsanız, şu kodu kullanırsınız:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Daha fazla ayrıntı için yavaş yükleme belgelerinin tamamına bakın.

2. Eklenti olmadan WordPress'te görüntüler nasıl tembel yüklenir

Daha önce de belirttiğimiz gibi, WordPress varsayılan olarak boyutları ayarlanmış tüm resimler için geç yüklemeyi etkinleştirir. Bunu yapmak için herhangi bir şeyi açmanız veya herhangi bir kod eklemeniz gerekmez. Ancak, bu işlevin nasıl çalıştığını özelleştirmek istediğiniz zamanlar olabilir.

Örneğin, şablon resimlerinin dahil edilmesini istemediğinizi varsayalım. Bu kodu functions.php dosyanıza eklersiniz:

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

Ya da belki de süper ayrıntılı olmak ve belirli görüntüler için yavaş yüklemeyi kapatmak istiyorsunuz. Bunu, bir sayfaya veya gönderiye eklendiğinde her bir resme fazladan bir resim sınıfı atayarak ve ardından bu sınıfı, functions.php dosyanızdaki aşağıdaki koda ekleyerek yapabilirsiniz:

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Yukarıdaki örnekteki jump-lazy resim sınıfını bir resme eklemek için:

1. Resmi sayfaya ekleyin veya Medya Kitaplığı aracılığıyla yayınlayın.
2. Resmi ekledikten sonra, resim ayarlarınızı bulun. Bu, Gutenberg Blocks düzenleyicisini, klasik düzenleyiciyi veya bir site oluşturucu eklentisini kullanıp kullanmadığınıza bağlı olarak farklı görünebilir. Yeni bir CSS sınıfı ekleme yeteneği genellikle Gelişmiş ayarlar alanında (Gutenberg ve klasik düzenleyiciler) veya görüntü ayarları seçeneklerinizin alt kısmında (diğer birçok site oluşturucu) bulunur.
3. Skip-lazy sınıfını resme ekleyin ve güncellemenizi kaydedin.

Olasılıklar hakkında daha fazla bilgiyi WordPress belgelerinde bulabilirsiniz.

WordPress'te videolar nasıl tembel yüklenir

Videolarınızı tembel olarak yüklemek istiyorsanız, bunu yazıya veya sayfaya videonun kendisine kod ekleyerek yapabilirsiniz. Bu kod şöyle bir şeye benzemelidir:

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

WordPress'te geç yükleme hakkında sık sorulan sorular

WordPress geç yükleme hakkında daha fazla bilgi edinmek ister misiniz? Aşağıda bazı sık sorulan soruları yanıtladık:

Geç yükleme ve ekran dışı görüntüleri erteleme aynı şey midir?

Ekran dışı görüntüleri ertelemek, kritik, ekranın üst kısmındaki içeriğin geri kalanı yüklenene kadar görüntülerin yüklenmesini beklemek anlamına gelir. Bunu yapmanın birkaç yolu vardır, ancak WordPress siteleri genellikle geç yükleme kullanır.

Esasen, tembel yükleme, ekran dışı görüntüleri erteleme yöntemidir .

WordPress'te arka plan resimlerini tembel yükleyebilir miyim?

Evet, isterseniz arka plan resimlerini tembel olarak yükleyebilirsiniz. Jetpack Boost, arka plan resimleri için yavaş yüklemeyi açar. Ancak, resimlerinizin nasıl ayarlandığına bağlı olarak, hepsini tanımlayamayabilir. Örneğin, resim background:url özelliği aracılığıyla yüklenirse eklenti onu resim olarak okumaz ve bu nedenle geç yüklemeyi etkinleştirmez.

Bu durumda, yavaş yüklemek istediğiniz belirli arka plan resimlerini seçmenize olanak tanıyan Lazy Loader gibi bir araç kullanabilirsiniz.

Bir YouTube videosunu tembel yükleyebilir miyim?

Evet yapabilirsin! Bunu yapmak için, WPOrbit'ten aşağıdaki kod parçacığını temanızın functions.php dosyasına ekleyin. Bunu nasıl yapacağınızdan emin değilseniz, functions.php dosyasına erişme ve dosyayı düzenleme kılavuzumuza göz atın.

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

Yavaş yükleme SEO'yu etkiler mi?

Evet, yavaş yükleme, arama motoru sıralamalarınız üzerinde olumlu bir etkiye sahip olabilir. Google, sayfaların arama sonuçlarında nerede sıralanacağına karar verirken site hızını dikkate alır. Yavaş yükleme performansı iyileştirdiği için, Google'ın sitenize ilişkin algısını da artırabilir.

Yavaş yükleme eklentisi kullanmak yerine manuel olarak yaparsanız ve bir hata yaparsanız, arama motorlarının resimlerinizi tanımasını engelleyerek SEO üzerinde olumsuz bir etkisi olabilir.

Geç yükleme, kullanıcı deneyimini etkiler mi?

Evet, geç yükleme, sitenizin yüklenme süresini azaltırken ziyaretçilerin içeriğinizi hemen görüntüleyebilmesini sağladığından kullanıcı deneyiminizi iyileştirebilir. Bu da, markanıza ilişkin algılarını geliştirebilir.

İçeriğimi tembel yüklemek için bir eklentiye ihtiyacım var mı?

Hayır, içeriğinizi yavaş yüklemek için bir eklentiye ihtiyacınız yoktur. Tembel yükleme WordPress'te varsayılan olarak etkindir. Ancak, geç yükleme işlemi üzerinde daha fazla kontrol istiyorsanız, bir eklenti kullanmak isteyebilirsiniz. İşte WordPress için en iyi yavaş yükleme eklentilerinden bir seçki.

Geç yükleme içeriğinin bir dezavantajı var mı?

Tembel yükleme içeriğinin pek çok dezavantajı yoktur. Hızınızı, kullanıcı deneyiminizi ve arama motoru sıralamalarınızı iyileştirir. Ancak, bazen sayfa düzenlerinizde garip kaymalara neden olabilir. Bu nedenle, yavaş yüklemeyi etkinleştirdikten sonra sitenizi her zaman test etmelisiniz.

Tüm içeriğimi tembel yüklemem gerekiyor mu?

Hayır, tüm içeriğinizi yavaş yavaş yüklemeniz gerekmez. Yalnızca resimler, videolar veya iFrame'ler gibi belirli öğeleri geç yüklemeyi seçebilirsiniz.

Yükleme hızlarını artırmak için başka ne yapabilirim?

Geç yüklemeye ek olarak, WordPress sitenizin hızını artırmanın başka yolları da vardır:

• Bir içerik dağıtım ağı (CDN) kullanma
• Önemli Web Verilerini de iyileştiren aynı şeyleri iyileştirmeye odaklanmak.
• Resimlerinizi optimize etme
• Tarayıcı önbelleğini etkinleştirme
• Kaynakları küçültme

WordPress tembel yükleme ile sitenizi hızlandırın

Resimlerinizi geç yüklemek, sitenizin performansını optimize etmenin ve genel kullanıcı deneyiminizi iyileştirmenin harika bir yoludur. Jetpack Boost, başka güçlü hız araçları sağlarken, tembel yüklemeyi etkinleştirmenin en uygun ve sağlam yolunu sunar. başlamaya hazır mısın? Jetpack Boost'u Alın!