WordPress’te Görüntü Nasıl Optimize Edilir (Hem Hız + SEO için)

Görüntü optimizasyonu söz konusu olduğunda, alternatif metin hakkında yeterince şey duydunuz.


Aslında görüntüleri optimize etmenin 20 farklı yolu vardır (hem SEO hem de hız optimizasyonu eklerseniz). Bunlar size GTmetrix / Pingdom’da daha iyi puanlar verecek, potansiyel olarak aramada daha üst sıralarda yer alacak ve içeriğinizin çok daha hızlı yüklenmesini sağlayacaktır. .5s yükleme süreleriyle% 100 GTmetrix raporu almayı başardım … Görüntülerimi WordPress’te optimize etmek bunun büyük bir parçasıydı.

Yüklemeden ÖNCE görüntüleri optimize edin – Photoshop gibi bir programı kullanarak görüntüleri yüklemeden önce optimize etmek için çok fazla iş kaydedebilirsiniz. EXIF verilerini yeniden boyutlandırabilir, sıkıştırabilir, şeritleyebilir, doğru biçimde kaydedebilirsiniz (örn. PNG / JPEG) ve açıklayıcı bir dosya adı yazabilirsiniz (bu, eğer kullanılırsa otomatik olarak alternatif metin olarak kullanılır) Automatic Image Alt Attributes eklentisi). Bu 6 optimizasyon!

Yüksek çözünürlüklü görüntülere ihtiyacınız varsa (ör. bir fotoğraf sitesi), bunları yeniden boyutlandırmak ve sıkıştırmak istemeyebilirsiniz (adım 3 ve 8), çünkü bunlar küçük bir miktar olsa bile kaliteyi düşürebilir.

Kullandığım ana araçlar – Kullanırım GIMP resimleri yeniden boyutlandırmak / sıkıştırmak için (seçtiğiniz resim düzenleyicim), WP Roketi önbellek eklentim için, Imagify daha fazla kayıpsız sıkıştırma + EXIF ​​verilerinin kaldırılması için Cloudflare ve StackPath CDN, Otomatik Görüntü ALT Nitelikleri eklentisi görüntü dosyası adını otomatik olarak alternatif metin olarak kullanmak ve Optimum Gravatar Önbellek Gravatars’ı yorumlarda önbelleğe almak için. kullanırım WP Review Pro benim zengin snippet eklentim olarak, Daha İyi Arama Değiştir görüntüleri toplu olarak güncellemek için (çok kullanışlı) ve GTmetrix benim hız testi aracı olarak. Araçların tam listesine bakın.

1. Optimize Edilmemiş Resimleri Bulun

Sitenizi üzerinden yayınlayın GTmetrix bu öğeleri Sayfa Hızı / YSlow sekmelerinde göreceksiniz. İlk beş genellikle sayfaya özgüdür, yani GTmetrix test ettiğiniz tek bir sayfa için optimize edilmemiş görüntüleri gösterecektir. Son 3 genellikle sitenizin tamamında görülür. Tabii ki, bunlar görüntüleri optimize etmenin sadece 7 yoludur, ancak en önemlilerinden bazılarıdır, bu yüzden önce bunları yapacağız.

  • Ölçekli görüntüler sunma: büyük resimleri doğru boyutlara göre yeniden boyutlandırır (Adım 2)
  • Görüntü boyutlarını belirleme: resmin HTML veya CSS’sinde bir genişlik / yükseklik belirtin (Aşama 3)
  • Görüntüleri optimize edin – görüntüleri kayıpsız sıkıştırın (4. adım)
  • CSS sprite kullanarak görüntüleri tarama – birden fazla görüntüyü 1 görüntüye birleştirin (Adım 5)
  • URL yönlendirmelerinden kaçının – yanlış www veya http (s) sürümünden resimler sunma (6. adım)
  • Bir içerik dağıtım ağı kullanın – CDN’den görüntü / dosya sunma (adım 7)
  • Tarayıcı önbelleklemesinden yararlanın – önbellek eklentinizi kullanarak görüntüleri / dosyaları önbellekleyin (adım 8)
  • Favicon’u küçük ve önbelleğe alınabilir hale getirme – 16×16 piksel favicon kullanın ve önbelleğe alın (adım 9)

GTmetrix'te Görüntü Optimizasyonları

Birden çok sayfada görünen resimleri düzelterek başlayın: logo, kenar çubuğu / altbilgi resimleri, vb. Ayrıca, yeni boyutlarla yeniden boyutlandırmanız / yeniden yüklemeniz gerekebileceğinden ölçekli resimlerle başlayın.

2. Ölçekli Görüntüler Sunun

Eğer görürsen ölçekli görüntüler sunma GTmetrix’te hatalar varsa, büyük boyutlu resimleriniz olduğu ve bunları doğru boyutlara (GTmetrix’in size sağladığı) yeniden boyutlandırmanız gerektiği anlamına gelir. Resim boyutları hile sayfasını izlediğiniz sürece (aşağıya bakın), bu hataları görmemelisiniz. Ancak, zaten büyük boyutlu resimler yüklediyseniz, bunları manuel olarak yeniden boyutlandırmanız veya bir eklenti kullanmanız gerekir.

Serve Ölçekli-Görüntüleri

Eklenti Kullanarak Görüntüleri Toplu Olarak Yeniden Boyutlandırma – buradaki sorun, farklı görüntülerin farklı boyutlar (widget’lar, kaydırıcılar, tam genişlikte görüntüler) gerektirmesidir. Çoğu görüntü optimizasyonu eklentisi görüntüleri bire yeniden boyutlandırma seçeneğine sahipken tek belirli boyutlar kümesini yüklerseniz, yüklemeden önce gerçekten kırpmanız / yeniden boyutlandırmanız gerekir. Eklenti kullanarak görüntüleri yeniden boyutlandırırsanız, sonuçlardan memnun kalmamanız durumunda orijinal görüntülerin yedeklerini tutar (ve yalnızca birkaçını test eder).

Büyük Resimleri Yeniden Boyutlandır

Görüntüleri Manuel Olarak Yeniden Boyutlandırma – GTmetrix’ten doğru boyutları alın ve yeniden boyutlandırın / yeniden yükleyin. Unutmayın, GTmetrix yalnızca test ettiğiniz tek bir sayfa için optimize edilmemiş resimleri gösterir.

Web Sitenizin Resim Boyutlarından Bir Cheat Sheet oluşturun
Kaydırıcılarınızın, blog kenar çubuğunuzun, öne çıkan görüntülerin ve blog içerik gövdesinin tümü, görüntülerin yeniden boyutlandırılması gereken belirli boyutları gerektirir. WordPress’e yüklemeden önce yeniden boyutlandırabilmeniz için bir hile sayfası oluşturun. Bu, web sitenizde farklı görüntü boyutları gerektiren birçok alanınız varsa ve birden fazla tasarımcı / düzenleyiciniz varsa özellikle yararlıdır.

Misal:

  • Kaydırıcı resimleri: 1900 (w) x 400 (h)
  • Atlıkarınca resimleri: 115 (h)
  • Widget görüntüleri: 414 (w)
  • Fullwidth blog gönderisi resimleri: 680 (w)
  • Öne çıkan resimler: 250 (w) x 250 (h)
  • Yoast Facebook OG resmi: 1200 (w) x 628 (h) – adım 11
  • Yoast Twitter OG resmi 1024 (g) x 512 (s) – adım 11

680 Piksel Genişliği Dikdörtgen

3. Görüntü Boyutlarını Belirleme

Bu, resmin HTML veya CSS’sine bir genişlik / yükseklik eklemek anlamına gelir. Visual Editor bunu sizin için yapar (ancak widget’lar, bazı sayfa oluşturucular ve özel HTML yapma). GTmetrix’te birkaç sayfayı test edin.

GTmetrix size resmin boyutlarını anlatıyor…

Özel Görüntü Boyutları GTmetrix

Görüntünün HTML’sine genişlik / yükseklik ekleyin…

Görüntü Boyutlarını Belirtme

4. Görüntüleri Kayıpsız Sıkıştır

Bunlar GTmetrix’teki “görüntüleri optimize et” öğeleridir. Birçok program (örn. Photoshop ve Gimp) dışa aktarıldığında sıkıştırma seçeneğine sahiptir. Bu harika bir başlangıç ​​olsa da, görüntü sıkıştırma eklentileri genellikle daha iyi sonuçlar alır. tercih ederim Imagify, deniz canavarı, ShortPixel, veya Smush. Diğer eklentilerin görüntü kalitesini görsel olarak düşürdüğü bilinmektedir ve görüntülerinizde hatalara neden olabilir.

Görüntüleri Imagify ile Sıkıştırma

  1. İçin kayıt olun Imagify
  2. Yükle Imagify Eklentisi
  3. Aşağıdaki talimatlar istenecektir:
  4. Imagify hesabınızdan API anahtarınızı girin
  5. Sıkıştırma seviyenizi ayarlayın (normal, agresif, ultra)
  6. Toplu olarak tümüyle (aşağıdaki fotoğraf) sitenizdeki tüm resimleri optimize eder
  7. Sınırınıza ulaştıktan sonra 4,99 ABD doları ödeyin veya sınırınızı sıfırlamak için gelecek ay bekleyin

imagify

Görüntülerin farklı sıkıştırma düzeyleriyle nasıl göründüğünü test edin…

Sıkıştırma Karşılaştırmasını Hayal Edin

Kayıt olduktan sonra, sitenizdeki tüm resimleri toplu olarak optimize edin…

imagify-wordpress-görüntü optimizasyonu

Yükleme sırasında görüntüleri optimize etme seçeneğini belirleyin…

Yükleme Sırasında Resimleri En İyi Duruma Getirin

5. Görüntüleri CSS Sprite’larına Birleştirin

Ana sayfamda 21 simge gördüğünüzü düşünebilirsiniz, ancak aslında 1 tek resimdir. Bu bir CSS hareketli grafiği, burada birden fazla görüntüyü 1 tek görüntüde birleştirirsiniz. Bu, görüntü (ve istek) sayısını azaltır, bu nedenle ana sayfamın yalnızca 10 isteği vardır. 21 resim yüklemek yerine 1 yükler. Bunu yapmak için CSS bilgisine ihtiyacınız olacak veya CSS hareketli grafik oluşturucu.

CSS Spriteları

GTmetrix CSS Spriteları

Dekoratif Resimler İçin Yalnızca CSS Sprite Kullanın – 21 resmi 1 olarak birleştirdiğinizde çok sayıda resim alt etiketi kaybedersiniz. İçeriğinizi açıklıyorlarsa önemli resimleri CSS sprite’larıyla birleştirmeyin. Bana gelince, ana sayfamın hızı SEO’dan daha önemli… Ana sayfamın GTmetrix raporunu birçok yerde kullanıyorum (bu yüzden temiz tutmak zorundayım) ve ana sayfam, ister inan ister inanma, anahtar kelime. Amacı derslerimi özetlemek ve hızlı yüklemek.

6. Resim URL’si Yönlendirmelerinden Kaçının

HTTPS, www sürümleri olarak değiştirdiyseniz veya bir CDN’den görüntü sunmaya başladıysanız, tüm resimlerinizi (ve bağlantılarınızı) kullanarak Daha İyi Arama Değiştir bu yüzden doğru sürümü sunuyorlar. Aksi takdirde görebilirsiniz yönlendirmeleri en aza indir veya çerez içermeyen alan adları kullanın hatalar.

Yönlendirmeleri En Aza İndir

Çerez İçermeyen Alanlar

Resim URL’lerini toplu güncellemek için Daha İyi Arama Değiştirme eklentisini kullanın…

Daha İyi Arama WWW Sürümlerini Değiştirin

Daha İyi Arama HTTP yerine HTTPS'yi değiştirin

7. CDN’den Görüntüler Sunma

Bunun için, resim URL’lerinizi CDN URL’si

  • Eski Resim URL’si (CDN’siz): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Yeni Resim URL’si (CDN ile): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare ve StackPath Karşılaştırması – İkisini de kullanıyorum Cloudflare ve StackPath çünkü daha fazla veri merkezi = daha hızlı içerik teslimi. Cloudflare var 200’den fazla veri merkezi, StackPath var 34+ veri merkezi Amerika Birleşik Devletleri’nde (ziyaretçilerin çoğunun geldiği yer). Cloudflare size bir CDN URL’si atamaz görüntüler sunmak için StackPath’in CDN’sini kullanacağız.

StackPath-Data-Merkezleri

Aşama 1: Bir CDN seçin. kullanırım StackPath (30 günlük deneme süreleri vardır).

Adım 2: Gösterge tablosunda CDN sekmesini ve ardından StackPath CDN Sitesi oluşturma

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Aşama 3: CDN URL’nizi kopyalayın ve önbellek eklentinize yapıştırın (aşağıda WP Rocket içindir) …

WP-Roket-CDN

4. Adım: Görüntü URL’lerini, CDN URL’nizi içerecek şekilde değiştirin (kullanarak Daha İyi Arama Değiştir).

Daha İyi Arama CDN URL'sini değiştirin

Adım 5: Eski resim URL’lerini Chrome DevTools. Bazen önbellek eklentiniz veya CDN Etkinleştirici CSS ve JavaScript’teki sabit kodlanmış bağlantılar dışında bununla ilgilenir. Geride kalan bağlantılar için normalde Dosyalar (CSS veya Javascript gibi) manuel kontrol ve değiştirme gerektirir. Chrome DevTools, şu anda kullanılmakta olan tüm alanları gösterir.

6. Adım: Sitenizi şurada yayınlayın GTmetrix ve “içerik dağıtım ağı” YSlow’da yeşil olmalıdır. “Yönlendirmeleri en aza indir” veya “çerez içermeyen alan adlarını kullanma” konusunda hiçbir hatayla karşılaşmamanız gerekir.

CDN GTmetrix YSlow

8. Önbellek Görüntüleri

Çoğu önbellek eklentisi için tarayıcı önbelleğe alma, hangi görüntüleri önbelleğe alır. Birden çok Facebook anketinde # 1 önbellek eklentisi olarak değerlendirilen WP Rocket kullanıyorum ve bunun için eğiticim var. Hızlı Performans genellikle # 1 ücretsiz önbellek eklentisi sıralanır (Ben de bunun için bir öğretici var).

Tarayıcı Önbelleğe Alma

9. Favicon’u Küçük ve Önbelleklenebilir Yapın

Sık kullanılan simgenizin 16×16 piksel olduğundan, favicon.ico biçiminde olduğundan ve önbellek eklentinizle önbelleğe alındığından emin olun.

10. EXIF ​​verilerini kaldırma

Exif verileri diyafram, enstantane hızı, ISO, odak uzaklığı, kamera modeli, fotoğrafın çekildiği tarih ve daha fazlası gibi bilgileri içerir. Web sitenizdeki resimler için buna ihtiyacınız yoktur. VA Exif eklentisini kaldırma görüntüler yüklendikten sonra Exif verilerini otomatik olarak kaldırır.

Çoğu görüntü optimizasyonu eklentisi (Imagify, ShortPixel, Kraken, EWWW ve Smush dahil) EXIF ​​verilerini otomatik olarak kaldırma seçeneğine sahiptir. İşte Imagify için ayarlar…

Hayal EXIF ​​Verilerini Kaldır

11. Cloudflare Görüntü Optimizasyonu

Cloudflare ayrıca görüntüleri optimize etmenin birkaç yoluna sahiptir. Serap ve Lehçe Cloudflare hız ayarları Hotlink Koruması Kazıma Kalkanı ayarları.

Cloudflare Mirage (Pro Feature) – yavaş ağ bağlantılarına sahip mobil cihazlarda görüntü isteklerini azaltır, tembel yükler yükler ve görüntü yükleme sürelerini iyileştirir. İşte daha fazla ayrıntı…

  • Bir ziyaretçinin cihazına / bağlantısına göre resimleri yeniden boyutlandırır. Kötü bağlantıdaki bir ziyaretçi, daha yüksek bir bant genişliğine geri dönene kadar daha küçük bir sürüm (daha düşük çözünürlük) elde eder.
  • İstek miktarını azaltır – Mirage, web sitesindeki tüm resimler için birden fazla istek göndermek yerine, ziyaretçilerin resimleri hemen görebilmesi için bunu tek bir istekte toplar..
  • Tembel görüntüleri yükler (yalnızca kullanıcılar sayfayı aşağı kaydırıp resmi gördükten sonra yükler).

Cloudflare Görüntü Serap

Cloudflare Lehçe (Pro Feature) – EXIF ​​verilerini çıkarır ve görüntüleri sıkıştırır.

Cloudflare Görüntüsü Lehçe

Cloudflare Hotlink Koruması – insanların resimlerinizi kopyalayıp kendi web sitelerine yapışmasını önler (ki bu resmi barındırmaya devam ettiğinizden beri) bant genişliğinizi emer.

Cloudflare Hotlink Koruması

12. Tembel Yük Görüntüler

Bu, kullanıcılar sayfayı aşağı kaydırıp resmi görene kadar görüntülerin yüklenmesini geciktirir. İlk yükleme sürelerini iyileştirirken, görüntüleri kaydırırken sürekli yüklemek çok can sıkıcı olabilir. Kişisel olarak sadece tembel yük videolarım, çünkü bunların yüklenmesi resimlerden çok uzun sürüyor.

Kullanabilirsiniz Lazy Load eklentisi, Lazy Load For Videos eklentisi, veya WP Roket kullanın…

WP-Roket-Tembel-Yük

13. Doğru Biçim Olarak Kaydet

PNG ve JPEG – PNG sıkıştırılmamış (daha büyük dosya boyutu) ve çok sayıda renk içermeyen basit görüntülerde kullanılmalıdır. JPEG, görüntü kalitesini hafifçe azaltan ancak boyutu daha küçük olan ve çok renkli görüntülerde kullanılan sıkıştırılmış (daha küçük dosya boyutu) bir dosyadır. GIMP ve diğer görüntü düzenleme programları otomatik olarak doğru biçimi kullanmalıdır, ancak bunu bilmek hala iyidir.

jpg_vs_png

İllüstrasyon Labnol

14. Görüntü Dosyası Adları

Arama motorları alternatif metin ve resim dosyası adları kullanır, bu nedenle WordPress’e yüklemeden önce dosyalarınızı adlandırın. Bir eklenti kullanıyorsanız, otomatik olarak alternatif metin ekler dosya adına göre, dosyalarınızı adlandırmanız yeterlidir! Anahtar kelimeleri doldurmayın, yalnızca resmi açıklayın.

Etiket Dosyası Dosya Adları

15. Alternatif Metin

Bunlar resim dosyanızın adıyla aynı olmalıdır. Kullanabilirsiniz Automatic Image Alt Attributes eklentisi dosya adını otomatik olarak alternatif metin olarak kullanmak için. Alakalı resimler kullandığınız sürece, bazıları doğal olarak anahtar kelimenizi (bit) içermelidir … resimlerdeki anahtar kelimeleri doldurmak için kesinlikle hiçbir neden yoktur. anahtar kelime doldurma cezası.

Resimlere Otomatik Olarak Alternatif Metin Ekleme – kullan Automatic Image Alt Attributes eklentisi. Şimdi her resim eklediğinizde, eklenti dosya adıyla aynı alternatif metni ekleyecektir…

alt ="WP-En Hızlı-Cache-Plugin" genişlik ="577" yükseklik ="247" />

Eksik Alt Metni Bul – Screaming Frog size alt metni eksik olan tüm görüntüleri gösteren ücretsiz bir araçtır.

Eksik Resim Alt Metin - Çığlık Kurbağa

16. Açık Grafik (Facebook + Twitter)

Bu, her iki ağ da görüntülemek için özel boyutlar kullandığından, içerik biçiminizi Facebook / Twitter’da paylaşıldığında, özellikle resminizde düzgün bir şekilde yapar, aksi takdirde komik görünecektir.

Facebook paylaşımı

Yoast kullanıyorsanız, “Sosyal” ayarlarına gidin ve hem Facebook / Twitter için Grafik Aç’ı etkinleştirin…

Yoast-Sosyal-Meta Veri

Şimdi bir sayfayı / yayını düzenleyin, ardından Yoast’taki “paylaş” bağlantısını tıklayın; Facebook (1200 genişlik x 628 yükseklik) ve Twitter (1024 genişlik x 512 yükseklik) için özel resimler yükleme seçeneklerini göreceksiniz..

Yoast-sosyal-medya-optimizasyon

17. Öne Çıkan Parçacıklardaki Görüntüler

Öne çıkan snippet’ler Google içeriğinizin bitlerini arama sonuçlarının üstünde gösterdiğinde ve bir resim ekleyebileceği (ancak garanti edilmediği). Google bunları herhangi bir 1. sayfa sonucundan alacaktır, ancak öne çıkan bir snippet veya resim görüntüleyip görüntülememeleri onlara bağlıdır. Bunlar ayrıca snippet’inizin iki kez görünmesini sağlar ve çok fazla trafik almanın inanılmaz bir yoludur.

3 Öne Çıkan Parçacık Türleri

  • Yanıtlar
  • Tablolar
  • Listeler

Sunulan-Görüntü-Parçacıklar

Google’da Öne Çıkan Parçacıklar Nasıl Alınır?

  • Kullanıcıların bir Özlü Cevap
  • kullanım Moz Anahtar Kelime Gezgini soru anahtar kelimelerini tanımlamak için
  • Daha da fazla soru anahtar kelimesi bulmak için Herkese Cevap Ver’i kullanın
  • Yanıtın paragraf mı, liste mi yoksa tablo mu olacağını seçin
  • Anahtar kelimeyi açıklayan güzel bir grafik tasarlayın (veya fotoğraf çekin)
  • En uygun karakter uzunluğunu kullanın (aşağıdaki fotoğrafa bakın Moz)
  • Kalite referanslarıyla (linkler, grafikler vb.) Gerçeklere dayalı içerik oluşturun
  • Zaten öne çıkan bir snippet’e sahip, ancak kötü bir iş yapan anahtar kelimeleri hedefleyin
  • Yanıt kutusunu hedefliyorsanız, tam bir eşleme kullanarak anahtar kelimenizi hedefleyin
  • Anahtar kelimenin 1. sayfasında olduğunuzdan emin olun, değilse içeriği iyileştirin

Optimial Özellikli Parçacıklar Uzunluğu

18. Yapısal Veri

Görüntüler aşağıdaki alanlarda kullanılabilir yapılandırılmış veri (ve Rozetler) aşağıdaki içerik türleri için:

Video Zengin Snippet'i

Reçete Zengin-Snippet'leri

Ürün Zengin Snippet'i

Hangi Zengin Snippet Eklentisini Kullanmalıyım?
kullanırım MyThemeShop’un WP Review Pro (işte kullandığım bir sayfa), tarifler ve ürün incelemeleri dahil 14 veri türünü destekler. WP Rich Snippet’lerini kullanıyordum, ancak geliştirici eklentiyi terk etti ve 2 yıldan fazla bir süredir güncellenmedi ve All In One Schema eklentisi sadece sıkıcı (seçenek ve stil eksikliği var). WP Review Pro’nun kullanımı çok kolaydır.

19. Stil Görüntüleri

Resimlerinizi şekillendirmeyi unutmayın! Çoğumda sınırları kullanıyorum.

  • Resim Başlıkları
  • Resim Bağlantıları
  • Görüntü Kenarlıkları
  • Resim Yazıları

20. GIF’leri yeniden boyutlandırma

Görüntüleri doğru boyutlara göre yeniden boyutlandırdığınız gibi, GIF’ler de yeniden boyutlandırılmalıdır (kullanın GIF GIF).

GIF’i yeniden boyutlandır…

GIF'leri yeniden boyutlandırma

Sonra sıkıştır…

GIF'leri Sıkıştır

Sonuç :-)

Bölüm GIF

21. Önbellek Gravatarları

Çok sayıda yorum içeren yayınlarınız varsa, Gravatars raporunuzu tamamen mahvedebilir. Bunları devre dışı bırakabilir, yalnızca belirli sayıda yorum göstermek için yorumları kesebilir veya Gravatar önbellek eklentisini deneyebilirsiniz. Bazı eklentiler bazı web sitelerinde çalışmadığından biraz test yapmanız gerekebilir.

  • Önbellek Gravatarları (Optimum, Harry’nin, veya FV Gravatar Önbellek)
  • Gravatarları tamamen devre dışı bırak
  • Varsayılan Gravatar’ınızı boş olarak ayarlayın
  • Değer katmayan yorumları silin
  • Varsayılan Gravatar’ınızı sunucunuzdaki özel bir resme ayarlayın
  • Gravatar görüntülerinizi daha küçük boyutlarla sınırlayın (ör. 32 piksel)
  • WP’deki yorumları sayfalandır Bir seferde yalnızca 20 yorum göstermeyi devre dışı bırak
  • Bunlardan hiçbiri işe yaramazsa, WP Rocket’in önbellek Gravatarları eğitimi

Cache-Gravatar Görüntüler

22. Harici Web Sitelerinden Görüntüler Gömmekten Kaçının

Her zaman web sitenize resim yükleyin, asla kopyalamayın / yapıştırmayın. Aksi takdirde, resim sunucunuzda barındırılmadığından ekstra istekler elde edersiniz, böylece başka bir yerden çekmek gerekir.

23. Görüntü Optimizasyon Araçları

Yinelenen işlevlere sahip eklentileri kullanmaktan kaçının – Imagify, ShortPixel, Kraken, EWWW ve Smush temelde aynı şeyi yapar (kayıpsız sıkıştırma, EXIF ​​veri kaldırma, resimleri yeniden boyutlandırma). WP Rocket, çoğu önbellek eklentisinin sunmadığı tembel yükleme, önbellekleme ve CDN (ve veritabanı temizliği + Google Analytics’i yerel olarak barındıran) seçeneklerine sahiptir, bu da sizi ekstra eklentiler kullanmaktan kurtarır.

  • Harika Ekran Görüntüsü – Ekran görüntüsü almak için Chrome uzantısı.
  • Otomatik Resim Alt Özellikleri – resim dosyası adını kullanarak alternatif metin otomatik olarak ekler.
  • Daha İyi Arama Değiştir – görüntüleri toplu güncellemek için kullanın.
  • Cloudflare – 200’den fazla veri merkezi bulunan ücretsiz CDN, hotlink koruması, serap, parlatma.
  • Chrome DevTools – GTmetrix yönlendirme hatalarınız varsa kullanılan alan adlarını gösterir.
  • CSS Sprite Üreticisi – birden fazla görüntüyü 1 CSS sprite ile birleştirmek için ücretsiz araç.
  • EWWW Image Optimizer – kayıpsız sıkıştırma, EXIF ​​kaldırma, yeniden boyutlandırma.
  • GifGifs – GIF’leri yeniden boyutlandırır.
  • GIMP – Kullandığım ücretsiz resim düzenleme yazılımı.
  • GTmetrix – hangi görüntülerin optimize edilmesi gerektiğini gösterir.
  • Imagify – kayıpsız sıkıştırma, EXIF ​​kaldırma, yeniden boyutlandırma.
  • Imsanity – GTmetrix’teki “ölçekli görüntüler sunma” düzeltmek için büyük resmi yeniden boyutlandırır.
  • deniz canavarı – kayıpsız sıkıştırma, EXIF ​​kaldırma, yeniden boyutlandırma.
  • Tembel Yük – görüntülerin görünür hale gelinceye kadar yüklenmesini geciktiren eklenti.
  • Videolar için tembel yük – videoların görünür hale gelene kadar yüklenmesini geciktiren eklenti.
  • Optimum Gravatar Önbellek – Gravatars’ı önbelleğe alır (veya deneyin Harry’nin Gravatar Önbellek).
  • Çığlık Kurbağa SEO Örümcek – eksik alternatif metni, meta açıklamaları vb. Bulun.
  • ShortPixel – kayıpsız sıkıştırma, EXIF ​​kaldırma, yeniden boyutlandırma.
  • Smush – kayıpsız sıkıştırma, EXIF ​​kaldırma, yeniden boyutlandırma.
  • StackPath – 31 veri merkezi ile 10 $ / ay CDN.
  • Swift Performance Lite – Çoğu Facebook anketinde 1 numaralı ücretsiz önbellek eklentisi.
  • WP İncelemesi – zengin snippet eklentisi (arama sonuçlarında gösterilen görüntülerin alınmasına yardımcı olur).
  • WP Roketi – Çoğu Facebook anketinde # 1 önbellek eklentisi.
  • VA Exif’i Kaldırma – görüntülerden gereksiz verileri çıkarır.
  • yakınlaştırma  -Ekran görüntüsü alırken mükemmel zum elde etmek için Chrome uzantısı.
  • Yoast – Facebook / Twitter meta verilerini etkinleştirir, böylece resimler paylaşıldığında düzgün biçimlendirilir.

Sıkça Sorulan Sorular

&# X2705; GTmetrix’teki Görüntü İyileştirme hatalarını nasıl düzeltirsiniz??

ShortPixel, Imagify veya Smush gibi bir eklenti kullanarak kayıpsız bir şekilde sıkıştırarak. ShortPixel kullanıyorum çünkü GTmetrix’te bu hatayı her zaman düzeltiyor.

&# X2705; GTmetrix’te Serve Scaled Image hatalarını nasıl düzeltirsiniz??

Bu, görüntüleri doğru boyutlara kırpmanız / yeniden boyutlandırmanız gerektiği anlamına gelir. Görüntüler çok büyükse, GTmetrix sunum ölçekli görüntü hataları gösterir ve size yeniden boyutlandırılması gereken doğru boyutları söyler.

&# X2705; GTmetrix’te Görüntü Boyutunu Belirleme hatalarını nasıl düzeltirsiniz??

Görüntünün HTML’sini görüntüleyin ve bu eğiticide gösterildiği gibi, belirtilen genişlik ve yüksekliğe sahip olduğundan emin olun.

&# X2705; Görüntülerin daha hızlı yüklenmesini sağlamanın diğer yolları?

EXIF verilerinin kaldırılması ve görüntülerinize hizmet etmek için bir CDN kullanılması, GTmetrix’teki öneriler dışında en fazla farkı yaratacaktır.

&# X2705; Hangi görüntü optimizasyonu en iyisidir?

ShortPixel kullanıyorum çünkü neredeyse hiç kalite kaybı yok ve GTmetrix’teki Resimleri En İyileştir öğesini düzeltiyor.

Ne düşünüyorsun?
GTmetrix raporunuz biraz daha iyi görünüyor mu? Yorumlarda bana bildirin! Ve size daha iyi skorlar / yükleme süreleri kazandıracak daha fazla ipucu istiyorsanız, tam WordPress hız kılavuzuma bakın.

Şerefe,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map