Neler yeni

WordPress'te Resim Optimizasyonu

Full Nvme SSD Disk Desteği Sayesinde Çok Daha Hızlı Web Siteleri! 7/24 Destek. Ücretsiz Antispam Koruma. Ücretsiz Domain. Anında Aktivasyon
Ad
Soyad
Katılım
30 Mayıs 2019
Konum
web master
Konular
327
Mesajlar
493
Ticaret - 100%
1   0   0
  
iletişim
Meslek
Seo Danışmanı
Detay  
Meslek
Seo Danışmanı
WordPress sitenizde birçok tam boyutlu görüntü mü kullanıyorsunuz? Bunun sayfalarınızın yavaş yüklenmesine neden olduğuna dikkat edin. Yavaş bir web sitesi SEO'nuzu etkiler, hemen çıkma oranlarını artırır ve izleyicilerinizi uzak tutar. Bu makale, daha iyi yükleme süreleri elde etmek için sitenizdeki tüm görüntüleri (elle veya otomatik pilotta) nasıl kolayca optimize edebileceğinizi öğrenmenize yardımcı olacaktır.

Yavaş bir web sitesi herkesin endişesidir.
Sadece ziyaretçileri etkileyen değil, aynı zamanda SEO'nuzu da etkiliyor. Bu yüzden 'formda' kalmaya çalışmak, bir işletmeyi veya hatta kişisel bir siteyi yönettiğinizde kesinlikle işaretleyebileceğiniz ana öğelerden biri.

Her biri diğerini tamamlayan WordPress sitenizi hızlandırmanın birçok yolu vardır. Evrensel bir yöntem yok. Sitenizin hızını artırmak aslında bu yöntemlerin bir araya gelmesinin toplamıdır. Bunlardan biri, bu gönderide yoğun şekilde ele alacağımız resim optimizasyonu.

Bu nedenle, WordPress sitenizdeki tüm resimleri manuel olarak ve otomatik olarak nasıl optimize edeceğinizi öğrenmek için daha fazla bilgi edinin. Bu, sitenizi daha hafif ve daha hızlı hale getirecek resim optimizasyonu hakkında adım adım bir rehberdir.

Görüntü Optimizasyonunun Önemi

göre , resimlerin WordPress sitenizi etkilemesinin üç ana nedeni:

  • Çok büyük resim dosyaları.
  • Elementlerin senkronize yüklenmesi.
  • Çok fazla resim ve HTTP isteği var.
1. Çok büyük resim dosyalarının yüklenmesi uzun sürebilir
Büyük boyutlu görüntüler, yüksek çözünürlüklü görüntüler ve sıkıştırılmamış görüntüler sayfa yükleme hızını büyük ölçüde azaltabilir.

Bu nasıl düzeltilir?
→ Ekran boyutu


Masaüstü, dizüstü bilgisayar, tablet, akıllı telefon gibi farklı son kullanıcı cihazlarında görüntü gösterimi için en uygun genişliğe ve yüksekliğe karar verin.

Büyük bir görüntü kullanmayın ve ekran boyutunu IMG öğesinin genişlik ve yükseklik özelliklerine sahip ölçeklendirin. Bunun yerine, farklı boyuttaki dosyaları oluşturun ve saklayın.

Kullanıcı cihazına bağlı olarak uygun boyutta görüntü dosyasını sunmak için koşullu mantık kullanın.

→ Çözünürlük

Standart bir 15 "dizüstü bilgisayar ekranı yaklaşık 100 PPI (İnç Piksel) veya DPI (İnç Başına Nokta) değerinde bir ekran özelliğine sahiptir. 300 DPI çözünürlükte görüntüler sunmanın anlamı yok.

Web sayfalarında görüntü gösterimi için standart çözünürlük 72 ÜFE'dir. Ekranlar için değil baskı için 300 DPI gereklidir. Neredeyse tüm ekranlar 72 PPI ile 100 PPI arasında değişmektedir.

→ Görüntü işleme

JPEG, GIF ve PNG, görüntüleri daha az bayt almak için sıkıştırabilen ve böylece indirilecek dosyanın boyutunu azaltan standart dosya formatlarıdır. Ancak, bu üç dosya tipi, görüntülerle birlikte depolanan gereksiz veri yükünü meta veri biçiminde azaltarak daha da optimize edilebilir.

Bunun dışında görsel detaylardan kurtulmadan görüntünün boyutunu küçültmek için görüntü işleme tekniklerini kullanabilirsiniz (daha fazla bilgi için ).

Bu, statik görüntüler için veya Adobe Photoshop gibi uygulamalarda veya dinamik görüntüler için bir bulut görüntü çözümü kullanarak yapılabilir.

2. HTML, CSS, JavaScript ve Görseller'i senkronize olarak yükleme
Web sayfanız tüm HTML, CSS, JavaScript ve resimleri eşzamanlı olarak yüklediğinde, ilk oluşturma süresi çok yüksek olabilir.

Görüntüler oluşturma süresinin önemli bir kısmını alabilir.

Bu nasıl düzeltilir?
Yükleme görüntüleri erteler. Bunun yerine, gerekli CSS ve HTML oluşturulduktan sonra bunları zaman uyumsuz olarak yükleyin. Görüntüler katın altına yerleştirilebilir ve ziyaretçi sayfanın ilgili bölümüne kaydırıldığında JavaScript kullanılarak koşullu olarak yüklenebilir.

Bu, ilk sayfa yüklemesi sırasında HTTP isteklerinin sayısını da azaltır.

3. Çok fazla resim ve HTTP isteği
Web sayfasında referans verilen her görüntü dosyasının sunucuya bir bağlantıya ihtiyacı var.

Web sayfasındaki çok fazla resim yalnızca yükleme boyutunu artırmakla kalmaz, aynı zamanda izin verilen HTTP isteklerinden daha fazlasını göndererek sunucuya bağlantıyı boğabilir.

Bu nasıl düzeltilir?
→ Görüntü sayısını azaltın


Görüntüleri az miktarda kullanın. Numarayı beşten az tut.

→ CDN kullanın

Bir CDN (İçerik Dağıtım Ağı), dosyalarınızı dünya çapında dağıtılan sunuculara yerleştirmenize izin verir. Web sayfanızdaki görüntü dosyası istekleri dış sunuculara gider ve sunucunuz yalnızca temel HTML dosyasına hizmet verebilir.

→ Yükseltme sunucusu

Paylaşılan barındırma, sunucuyu paylaşan her web sitesine sınırlı kaynaklar sağlar. En önemli sınırlama, her site için izin verilen eşzamanlı bağlantı sayısıdır, genellikle ondan azdır.

Bu, yalnızca yapabileceğiniz dosya isteklerinin sayısını azaltmakla kalmaz, aynı zamanda web sitenizi görüntüleyebilen eşzamanlı ziyaretçi sayısını da sınırlar.

Bir VPS'ye (Sanal Özel Sunucu) yükseltme, bu sınırlamanın bir dereceye kadar üstesinden gelmenize yardımcı olabilir. DigitalOcean, UpCloud, Linode, Vultr gibi çeşitli satıcılar ayda 5 dolardan az bir fiyata temel VPS sağlıyor.

Görüntü sayısını azaltamıyor musunuz?
Web sitenizdeki resim sayısı azaltılamazsa ne yapmalı?

Sayfa içeriğiniz ağırlıklı olarak belirli bir resimden ibaret değilse, küçük resim görüntüsünü içeriğe satırla yerleştirmek ve onu orijinal görüntüye bağlamak akıllıca olur.

Ayrıca düşük genişlikte, düşük kaliteli bir görüntü kullanmayı veya içeriğin izin vermesi durumunda yalnızca bir yer tutucu kullanmayı deneyebilirsiniz. Ziyaretçiler talep üzerine gerçek, büyük resmi görebilirler.

Talep, bir dokunuşla veya bir tıklamayla, hatta bazı JavaScript özelliklerine sahip bir fareyle çalışmak üzere programlanabilir. Böylece görüntü sayısını azaltamasanız da, en azından indirilen bayt sayısını azaltabilirsiniz.

4. Hala bir şey yanlış gibi görünüyor
Yukarıda tartışılan tüm optimizasyonları yaptıktan sonra sayfanız PageSpeed Insights ile uyumlu değilse, yapabileceğiniz başka bir şey var mı?

1 Doğru görüntü formatını kullanın: PNG görüntülerinin kayıpsız sıkıştırması yerine, fotoğraflar için kayıpsız sıkıştırmanın bozulmasının uygun olduğu JPEG görüntüsünü kullanın.

2 Daha yeni resim formatı kullanın : Google, JPEG'den % 25 ila% 34 daha küçük resim dosyaları üreten yeni bir resim formatı olan WebP'yi tanıttı . Yani formatını kullanmak daha iyi olurdu.

3 CSS3 yöntemlerini kullanın: CSS3 yöntemlerini kullanarak, görüntüleri görsel olarak çekici efektler yaratan degradelerle ve gölgelerle değiştirmek mümkündür.
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.