Kimse yavaş bir sayfanın yüklenmesini beklemek istemez, örneğin bir blog yazısında çok sayıda görsel olduğunda. Çarpıcı görünseler bile, onları görmek için beklemek ziyaretçileriniz için sinir bozucu olabilir.
İşte bu noktada tembel yükleme yardımcı olabilir. Bu, görsellerin yalnızca ihtiyaç duyulduklarında yüklendiği akıllıca bir hiledir. Bir sayfadaki her görseli bir kerede yüklemek yerine, web siteniz ziyaretçi bir görselin görüneceği yere kadar aşağı kaydırana kadar bekler.
Bu, daha hızlı sayfa yükleme süreleri, daha mutlu ziyaretçiler ve hatta web sitenizin SEO’su için bir destek anlamına gelir.
İşin en iyi yanı, WordPress sitenize tembel yükleme eklemenin düşündüğünüzden daha kolay olmasıdır. Bu makalede, daha hızlı ve daha verimli bir web sitesinin keyfini çıkarabilmeniz için süreç boyunca size rehberlik edeceğiz.
WordPress’te Görselleri Neden Tembel Yükleyelim?
Tembel yüklenen WordPress görselleri web sitenizi hızlandırabilir ve daha iyi bir kullanıcı deneyimi sunabilir.
Kimse yavaş web sitelerini sevmez. Aslında, bir web sitesi performans araştırması, sayfa yükleme süresindeki 1 saniyelik gecikmenin %7 daha az dönüşüm, %11 daha az sayfa görüntüleme ve müşteri memnuniyetinde %16 azalmaya yol açtığını ortaya koymuştur.
Google gibi arama motorları da yavaş yüklenen web sitelerini sevmez. Bu yüzden daha hızlı siteler arama sonuçlarında daha üst sıralarda yer alır.
WordPress sitenizde görsellerin yüklenmesi diğer web öğelerine kıyasla en fazla zamanı alır. Makalelerinize çok sayıda görsel eklerseniz, her görsel sayfanızın yüklenme süresini artırır.
Bu durumla başa çıkmanın bir yolu BunnyCDN gibi bir CDN hizmeti kullanmaktır. Bir CDN, kullanıcıların görüntüleri kendilerine en yakın web sunucusundan indirmelerine ve web sitesi yükleme hızlarını düşürmelerine olanak tanır.
Ancak resimleriniz yine de yüklenecek ve genel sayfa yükleme süresini etkileyecektir. Bu sorunu aşmak için web sitenize lazy load uygulayarak görsel yüklemeyi geciktirebilirsiniz.
Görüntülerin tembel yüklenmesi nasıl çalışır?
Tüm resimlerinizi bir kerede yüklemek yerine, tembel yükleme yalnızca kullanıcının ekranında görünen resimleri indirir. Diğer tüm görüntüleri bir yer tutucu görüntü veya boş alan ile değiştirir.
Bir kullanıcı sayfayı aşağı kaydırdıkça, web siteniz tarayıcının görüntüleme alanında görünen görüntüleri yükler.
Tembel yükleme WordPress blogunuz için çok faydalı olabilir:
- İlk web sayfası yükleme süresini kısaltır, böylece kullanıcılar sitenizi daha hızlı görür.
- Yalnızca görüntülenen görüntüleri sunarak bant genişliğini korur, bu da WordPress barındırma maliyetlerinden tasarruf etmenizi sağlayabilir.
WordPress 5.5 sürümü, tembel yüklemeyi varsayılan bir özellik olarak ekledi.
Ancak, resimlerinizin tembel olarak nasıl yükleneceğini ve ayrıca arka plan resimlerinin tembel olarak nasıl yükleneceğini özelleştirmek istiyorsanız, bir WordPress eklentisi kullanmanız gerekecektir.
Şimdi iki farklı eklenti kullanarak WordPress’te görselleri nasıl tembel yükleyebileceğinize bir göz atalım. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:
Yöntem 1: WP Rocket ile WordPress’te Görselleri Tembel Yükleme
WordPress’te görselleri tembel yüklemek için WP Rocket eklentisini kullanmanızı öneririz. Piyasadaki en iyi WordPress önbellekleme ek lentisi olan bu eklenti, görsel tembel yüklemeyi kolayca açmanızı sağlar.
Bunun yanı sıra, karmaşık teknik terimler bilmeden veya uzman ayarlarını yapılandırmadan sayfa hızınızı optimize etmenize yardımcı olan çok güçlü bir eklentidir.
Kutudan çıkar çıkmaz, varsayılan önerilen önbellekleme ayarlarının tümü WordPress web sitenizi büyük ölçüde hızlandıracaktır.
Yapmanız gereken ilk şey WP Rocket eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme kılavuzumuza bakabilirsiniz.
Görüntü tembel yüklemesini etkinleştirmek için tek yapmanız gereken birkaç kutuyu işaretlemektir. Hatta videolar için tembel yüklemeyi etkinleştirerek sitenizin hızını daha da artırabilirsiniz.
Tek yapmanız gereken WordPress panonuzdaki Ayarlar ” WP Rocket bölümüne gitmek ve ‘Medya’ sekmesine tıklamak. Ardından, ‘LazyLoad’ bölümüne ilerleyebilir ve ‘Resimler için etkinleştir’ ve ‘Iframe’ler ve videolar için etkinleştir’ seçeneklerinin yanındaki kutuları işaretleyebilirsiniz.
Daha fazla ayrıntı için WordPress’te WP Rocket’in nasıl düzgün bir şekilde kurulacağı ve ayarlanacağı hakkındaki kılavuzumuza bakın.
Not: WordPress barındırma sağlayıcınız olarak Siteground kullanıyorsanız, benzer tembel yükleme özelliklerine sahip ücretsiz SiteGround Optimizer eklentisini kullanabilirsiniz.
Yöntem 2: Optimole ile WordPress’te Görselleri Tembel Yükleme
Bu yöntem ücretsiz Optimole eklentisini kullanır. Görüntülerin tembel yüklenmesini kolayca etkinleştirmenizi sağlayan en iyi WordPress görüntü sıkıştırma ek lentilerinden biridir.
Ayda 5.000’den fazla ziyaretçi alıyorsanız, Optimole’un premium sürümüne ihtiyacınız olacaktır. Daha fazla ayrıntı için Optimole incelememizin tamamına bakın.
Öncelikle Optimole eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, bir API anahtarı için kaydolmanızı isteyen bir ekran göreceksiniz. Bu ekranı yönetici menüsünde Optimole ‘a giderek de bulabilirsiniz.
Listelenen e-posta adresinin doğru olduğundan emin olmanız ve ardından ‘Hesabınızı oluşturun ve bağlayın’ düğmesine tıklamanız gerekir. Alternatif olarak, mevcut bir kullanıcıysanız, ‘Zaten bir API anahtarım var’ düğmesine tıklamanız yeterlidir.
Eklenti Optimole’a bağlanırken birkaç saniye beklemeniz gerekebilir. Bundan sonra, eklenti otomatik olarak resimlerinizi optimize etmeye başlayacak, böylece ziyaretçileriniz artık cihazları için en iyi resimleri görecekler.
Bu gerçekleşirken, tembel yüklemeyi yapılandırmak için ‘Ayarlar’ sekmesine tıklayabilirsiniz.
Burada, ‘Görüntüleri ölçeklendir ve & Tembel yükleme’ ayarının etkinleştirildiğinden emin olmanız gerekir. Bu, ziyaretçinizin ekran boyutuna göre görüntüler oluşturacak ve yükleme hızlarını artıracaktır.
Ardından, ‘Gelişmiş’ menü seçeneğine tıklayın ve ‘Tembel Yükleme’yi seçin. Bu ekranda, resimlerinizin nasıl tembel yükleneceğini özelleştirmenize olanak tanıyan birkaç farklı ayar vardır.
İlk olarak, ‘İlk resim sayısını tembel yüklemeden hariç tut’ ayarını yapabilirsiniz. Bu, yazılarınızın veya sayfalarınızın üst kısmındaki görsellerin tembel yüklenmesini durduracak, böylece katlamanın üstündeki görseller her zaman görünecektir.
Her görüntünün tembel olarak yüklenmesini istiyorsanız bunu 0 olarak ayarlayabilirsiniz.
Optimole’de kontrol edebileceğiniz birkaç gelişmiş tembel yükleme ayarı daha vardır. Bu ayarlar varsayılan olarak etkindir.
Bunlardan ilki ‘Görüntüleri Ölçekle’ ayarıdır. Bu, görüntüleri ziyaretçinin ekran boyutuna göre ölçeklendirecek ve sayfanızın daha hızlı yüklenmesini sağlayacaktır.
Bundan sonra, ‘Arka plan resimleri için lazyload’u etkinleştir’ ayarını göreceksiniz. Bu, web sitenizdeki en büyük resimler olabilecek arka plan resimlerinizi tembel olarak yükleyecektir.
Bir diğer ayar ise gömülü videoların ve iframe’lerin tembel yüklenmesidir. Çok fazla gömülü video içeriğiniz varsa, bu ayarı açık bırakmak isteyeceksiniz. Video yerine bir yer tutucu görüntü yükleyecektir. Yer tutucuya tıklandığında videonun tamamı yüklenir.
Bu ayarları özelleştirmeye devam edebilir ve web siteniz ve resimleriniz için en iyi olanı görebilirsiniz.
Eklenti ayarlarından çıkmadan önce, sayfanın altındaki ‘Değişiklikleri kaydet’ düğmesine tıkladığınızdan emin olun.
WordPress Görsellerinizi Optimize Etmek için Bonus İpuçları
Tembel yükleme web sitesi yükleme hızını artırmaya yardımcı olsa da, WordPress görsellerinizi en iyi performans için optimize etmenin birkaç yolu daha vardır.
Örneğin, TinyPNG veya JPEGmini gibi bir araç kullanarak resimlerinizi web sitenize yüklemeden önce sıkıştırmanızı öneririz. Alternatif olarak, Optimole veya EWWW Image Optimizer gibi otomatik bir görüntü sıkıştırma eklentisi kullanabilirsiniz.
Resimleriniz için doğru WordPress resim boyutunu ve dosya biçimini seçmek de önemlidir. JPEG’ler fotoğraflar veya çok renkli görüntüler için en iyisidir, PNG’ler basit veya şeffaf görüntüler için uygundur ve GIF’ler yalnızca animasyonlu görüntüler içindir.
Umarız bu makale WordPress’te görselleri nasıl tembel yükleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca adresindeki kaliteden ödün vermeden görselleri web için nasıl kolayca optimize edebileceğinize dair eğitimimize ve WordPress için en iyi dosya yükleme eklentileri uzman seçimlerimize de göz atmak isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dick Sijtsma
Hi there,
during the process of lazyloading (I’m using WP Rocket) there is a short time a placeholder showing for the images. In my situation (Google Chrome) this placeholder has a purple color. Is there a way to influence this color? Or is this a browsersetting?
Thanks!
WPBeginner Support
You would want to check with WP Rocket for their up to date method for modifying their placeholder.
Yönetici
Dick Sijtsma
Thanks!
But it was Theme related. I found a setting for background color of the image (in Elementor). This color was shown during the lazy-load. So now i know how to change that color. Thanks.
Jiří Vaněk
Do you have experience with how Lazy Load affects user experience and other Google metrics? Not everyone recommends lazy loading precisely because it can appear unnatural on a website in the long run.
WPBeginner Support
It would depend on how it is implemented for how it affects the user experience and Google metrics.
Yönetici
Kunj Bihari
Wordpress already provide “lazyload” so Why we have to use any lazyload plugin?
Suzanne
Well, this plugin is awesome. My site speed score just went from an embarrassing 42 to a respectable 72!
WPBeginner Support
Awesome! Glad the plugin could help your site
Yönetici
Piotr
Is that possible to creates a group of photos that will get lazy-loaded?
Example: I have 30 photos and I want to lazy load first 10, when user keeps scrolling- I download another 10 and so on..
daus
can i combine BJ Lazy Load and photon jetpack?
Naveen
My site was having many issues and I have learned a lot here which has helped me to grow my blog.
Many Thanks
Franklin
Thanks for sharing this. I didn’t even think of getting a plugin for lazy images, and I probably will be getting this later.
Alun Price
I’d love to implement a lazy loader on my website but I’ve heard that they can negatively impact on SEO – is this true????
Dr.Amrita Basu
Thank you for this. Helped me make a much-needed change quickly .Have downloaded and adjusted the plugin settings
Fahad Khan
i HAVE JETPACK AS WELL AS CLOUDFLARE APPLIED ON MY WEBSITE, DO I STILL NEED THIS PLUGIN ?
Nagarjun
Thanks for the advice! Bj Lazy Load works like a charm!
Luke Cavanagh
Rocket Lazy Load also works very well.