WordPress’te Fotoğraflar Nasıl Daha Hızlı Yapılır: 6 Ana Taktik
Web sitenizde fotoğrafları daha hızlı yükleyerek savaşmak mı? Görüntüler daha çekici bir web sitesi oluşturmanıza yardımcı olur, bu yüzden kullanmak için çok iyidir. Ancak çok fazla resim kullanıyorsanız, optimize etmezseniz sitenizi yavaşlatma riskiyle karşı karşıya kalırsınız, bu nedenle görüntülerin nasıl daha hızlı yükleneceğini öğrenmek isterseniz daha iyidir. Neyse ki, fotoğrafın kalitesini etkileyerek veya etkilemeden görüntünüzü hızlandırmak için uygulayabileceğiniz birçok taktik var. Bu yazıda, web sitenizde kullandığınız resimlerin nasıl daha hızlı yükleneceği konusunda kapsamlı bir rehber paylaşacağız.
Yükleme görüntülerini hızlandırmak için altı ana taktik paylaşarak başlayacağız. Ardından, bu taktiği WordPress sitenize uygulamak için iki yeni dostça WordPress eklentisini nasıl kullanacağınızı göstereceğiz. Fotoğrafların Daha Hızlı Yüklemesi Nasıl Yapılır: Altı Performans Stratejileri Bu ilk bölümde, görüntülerinizi sitenizde daha hızlı yüklemek için uygulayabileceğiniz taktikler hakkında konuşacağız. Ardından, bir sonraki bölümde, tüm bu taktikleri WordPress’te nasıl uygulayacağınızı göstereceğiz. Bu bölümü “teori” ve bir sonraki bölüm olarak “takip edilebilecek yollar” olarak değerlendirebilirsiniz.
Resmin neyin daha hızlı yüklendiğini merak ediyorsanız, okumaya devam edin! İşte sitenizde kabaca ilgi alanlarına göre sıralanan görüntüleri hızlandırmak için kullanabileceğiniz altı taktik:
Fotoğraf sıkıştırma.
Fotoğraf boyutunu değiştirin.
Fotoğrafları WebP gibi optimize edilmiş formatlara dönüştürün.
Görüntünün indirme süresini hızlandırmak için İçerik Dağıtım Ağını (CDN) kullanın (özellikle sitenizin barındırılmasından uzak olan ziyaretçiler için).
Bir sonraki ziyareti hızlandırmak için önbellek tarayıcısını etkinleştirin.
İlk üç taktik, görüntü dosyasının kendisinin optimizasyonu ile ilgilenirken, son üç taktik web sitenizin görüntü dosyasını yükleme şeklini optimize etmeye odaklanır.
Bu taktiğin görüntüsünüzün WordPress’e yüklenmesini nasıl hızlandırabileceğini tartışalım. 1. Fotoğraf sıkıştırma fotoğraf sıkıştırması, boyutlarını değiştirmeden görüntü dosyasının boyutunu azaltmanızı sağlar. Sıkıştırma, aşırı/gereksiz bilgileri kaldırarak ve dosya boyutunu azaltmak için çeşitli algoritmalar uygulayarak çalışır. İki tür sıkıştırma vardır:
Kayıpsız – Kalite değişiklikleri olmadan dosya boyutunda küçük bir azalma.
Kayıplı – çok daha büyük bir indirgeme dosya boyutu, ancak bazı azaltılmış görüntü kalitesi olabilir. Çeşitli kayıplı sıkıştırma seviyeleri vardır – bazıları insan gözü tarafından görülmeyebilir, daha agresif algoritmaların gerçek bir etkisi olabilir.
Kayıplı ve Kayıpsız Görüntü Sıkıştırma hakkındaki makalemizde daha fazla bilgi edinebilirsiniz.
Çoğu web sitesi için, kayıplı sıkıştırma ile iyi olacaksınız. Ancak, bir fotoğrafçı veya görüntü kalitesinin en önemli olduğu başka bir sektörde iseniz, kayıpsız sıkıştırma kullanmaya devam etmek isteyebilirsiniz. Kayıplı sıkıştırma kullanırsanız, oldukça etkileyici bir tasarruf elde edebilirsiniz. Örneğin, Basit JPG görüntülerini sıkıştırmak için Image kullanıyoruz. Imafy, bu kılavuzda daha sonra tartışacağımız ücretsiz bir görüntü optimizasyon aracıdır. Test görüntüsünde kayıplı sıkıştırma kullandıktan sonra, kalitede hafif bir değişiklik ile 133.7 kb boyutunu 36.9 kb’ye düşürebiliriz – yani dosya boyutunda% 73: 2. Yukarıdaki resmin boyutunu değiştirin, fotoğraf sıkıştırmasının boyutlarını değiştirmeden görüntü dosyasının boyutunu değiştirmenize izin verdiğini söylüyoruz. Ancak çoğu durumda, görüntünün boyutlarını değiştirmek istersiniz, burası giriş fotoğrafının boyutunu değiştirir. Her şey aynıdır, görüntünün boyutları ne kadar büyük olursa, dosya boyutu o kadar büyük olur. Ve dosya boyutu ne kadar büyük olursa, görüntü o kadar yavaş yüklenir. Web siteleri için, görüntünün boyutunu kullandığınız doğru boyuta değiştirmeye çalışmalısınız. Örneğin, site içerik alanınız 800 piksel genişliğe sahipse, görüntünün boyutunu 800 piksel olarak değiştirmeniz gerekir (veya retina ekranı gibi yüksek çözünürlüklü monitörleri hesaplamak için belki 1.600 piksel olarak iki katına).
Tasarruf ne kadar büyük? İşte herhangi bir sıkıştırma eklemeden sadece görüntünün boyutunu değiştirdiğimiz hızlı bir test örneği:
Sıkıştırmayı değişen boyutla birleştirirseniz, boyut görüntüsünde olağanüstü bir azalma elde edebilirsiniz. Örneğin, Imagify ile boyut olarak değiştirilen görüntüleri sıkıştırdıktan sonra, 101 kb’ye daha fazla düşürüyoruz. Bu yüzden sadece boyutu değiştirerek ve görüntüyü sıkıştırarak, neredeyse hiç kalite değişikliği olmadan 380 kb’den 101 kb’ye düşürdük (web sitesinde gösterdiğiniz varsayılarak). 3. Fotoğrafların WebP’ye dönüştürülmesi WebP, Google’dan kalite kaybetmeden jpeg veya png’den daha küçük dosya boyutları sunabilen modern bir resim biçimidir. Ortalama olarak,% 25-34 karşılaştırılabilir JPEG görüntülerinden daha küçük ve% 26 daha küçüktür. Karşılaştırılabilir PNG görüntüleri. Bu boyut tasarruflarından yararlanmak için, WordPress sitenize yüklediğinizde resimlerinizi WebP’ye dönüştürebilirsiniz. Bu biçim hakkında daha fazla bilgi edinmek için WebP görüntüleri için tam kılavuzumuza bakın. 4. CDN içerik dağıtım ağını (CDN) temel olarak yalnızca dünya çapında bir küresel sunucu ağını kullanın. WordPress sitenizi CDN kullanacak şekilde yapılandırırsanız, sitenizin (ve diğer statik dosyaların) tüm fotoğraflarını bu sunucu ağında barındırabilirsiniz.
Ardından, sitenizi ziyaret edenler, doğrudan sitenizin barındırma sunucusundan indirmek yerine, onlara en yakın ağ konumundan fotoğraf indirebilecektir. Görüntü dosyası tarafından alınması gereken fiziksel mesafeyi azaltarak, ziyaretçileriniz için daha hızlı yüklenecektir. Hızlı CDN, web sitesi kitleniz birkaç ülke veya kıtalar gibi geniş coğrafi alanlarda yayılmışsa çok kullanışlıdır. Ancak, web siteniz yalnızca belirli coğrafi konumlardaki (yerel şehirler gibi) kişileri hedefliyorsa, CDN.5 kullanarak görüntü yükleme sırasında çok fazla iyileşme göremeyebilirsiniz. WordPress Sitesinin Yavaş Resimleri Yükleme Tembel Görüntüler Sevgi dolu Fotoğrafınızın Sitenizin Yükleme Süresi üzerindeki etkisini bir bütün olarak sınırlayabilirsiniz. Temel olarak, tembel yükleme, ziyaretçiler tarafından görülen görünümün dışındaki görüntüleri yüklemek için beklemenizi sağlar. Tersine, siteniz yalnızca ziyaretçiler aşağı kaydırmaya başladığında “zamanında” görüntüyü yükler. Bu, sayfada birçok görüntü olsa bile daha hızlı bir başlangıç yükleme süresi üretecektir. 6. Tarayıcı önbellek tarayıcısını etkinleştirin Birisi sitenizi ilk ziyaret ettiğinde fotoğrafı daha hızlı yüklemez. Ancak bir sonraki ziyaret için görüntülerin yüklenmesini hızlandıracak.
WP Rocket – Bunu, web sitenizin görüntü dosyasını ziyaretçilere sunma şeklini optimize etmek için kullanacaksınız.
Hayal edin – Imagify WebP’ye sıkıştırma, değiştirme ve dönüştürme, listemizde optimize etme konusundaki ilk üç ipucunu işleyebilen kullanımı kolay bir WordPress eklentisidir. Yapılandırdıktan sonra, aşağıdaki taktikleri kullanarak WordPress’e yüklediğiniz tüm görüntüleri otomatik olarak optimize edecektir:
Görüntü, kayıpsız, orta kayıplı algoritma veya agresif kayıp kullanılarak sıkıştırın.
Görüntünün boyutunu belirli bir maksimum boyuta değiştirin.
Resimleri WebP’ye dönüştürün ve ziyaretçilere servis yapın.
Ayrıca boyutu değiştirebilir ve sitenizin fotoğraflarını tek bir tıklamayla sıkıştırabilirsiniz. WordPress.org adresinden Ücretsiz Image eklentisini başlatmak, yüklemek ve etkinleştirmek için. Eklentiyi etkinleştirdikten sonra, WordPress sitenizi Imagify Optimizasyon Hizmetine bağlamanıza olanak tanıyan Ateş Anahtarına girmenizi isteyecektir. API anahtarınızı almak için ücretsiz bir Imagify hesabı almak için kaydolabilirsiniz. Ayda 20 MB fotoğrafı sonsuza dek ücretsiz olarak optimize edebilirsiniz (ayda ~ 200 resim). Bu sınırı aşmanız gerekiyorsa, ücretli paket 500 MB (~ 5.000 resim) veya sınırsız kullanım için aylık 9,99 $/ay için ayda 4,99 $ değerinde. WordPress sitesinde sınırsız bir paket kullanabilirsiniz. Bir yangın anahtarınız olduktan sonra, kutuya koyabilir ve bana bağlayabilirsiniz: Ardından, görüntü optimizasyon ayarlarınızı yapılandırmak için ayarları açın → Hayal Etme. Üstte, istenen sıkıştırma seviyesini seçebilirsiniz. Farklı seviyeleri test etmenize yardımcı olacak görsel bir karşılaştırma da vardır:
Aşağı kaydırırsanız, Imafy’nin görüntüleri otomatik olarak WebP’ye dönüştürüp ziyaretçilere gösterebilirsiniz. WebP görüntüleri için etiket yöntemini kullanmalısınız:
Bunun altında, Imatify’ye büyük görüntünün boyutunu belirli bir maksimum boyuta (genişliğe göre) değiştirmeyi söyleyebilirsiniz. Bir kez daha, bunu site içerik alanınızın genişliğine ayarlamanızı öneririz (veya Retina ekranı için daha yüksek çözünürlüklü bir görüntü sunmak istiyorsanız belki de iki katına):
Ve hepsi bu! Imafy artık WordPress’e yüklediğiniz tüm yeni görüntüleri otomatik olarak optimize edecektir. Sitenizde çok fazla görüntünüz varsa, Medya → Kütle Optimizasyonu: WP Roket – Önbellek Tarayıcısı, Tembel Yükleme ve CDN WP Roketini açarak bir kütleye optimize etmesini isteyebilirsiniz. Sitenizi hızlandırın ve tartıştığımız diğer fotoğraf optimizasyon taktiklerini uygulayın. Bunlar şunları içerir:
Önbellek tarayıcısını uygulayın.
Görüntüleri yavaşça yükleyin.
Buna ek olarak, bu da sayfa önbelleği, kod optimizasyonu ve daha fazlası gibi çizim dışı performansın iyileştirilmesine yardımcı olabilir. Yönetmek için önce WP roketi satın almalı ve yüklemelisiniz. Etkinleştirilir etkinleştirmez, sayfa önbellek ve önbellek tarayıcısını otomatik olarak etkinleştirir. Diğer ayarlara erişmek için, gösterge panelinizde ayarları açın → WP roketi. Yavaş yüklemeyi etkinleştirmek için Medya sekmesini açabilir ve yavaş bir görüntü (ve istenirse video) yüklemek için kutuyu kontrol edebilirsiniz. Ayrıca, başka bir yararlı optimizasyon ipucu olan eksik görüntünün boyutlarını ekleyerek WP roketinden de sorabilirsiniz: CDN hazırlamak için CDN sekmesini açabilirsiniz. Başlamanın en kolay yolu, sınırsız bant genişliği için ayda sadece 7,99 dolara mal olan RocketCDN hizmetini kullanmaktır. Veya WP Rocket, Bunny CDN, Keycdn veya StackPath gibi diğer hizmetlerle entegre olmanıza yardımcı olabilir.
