WordPress’te görüntüleri verimli bir şekilde kodlayabilir ve sayfa gönderimi uyarılarını nasıl geliştirir
WordPress site denetiminizi PagePeed Insights aracılığıyla çalıştırırsanız, Deniz Feneri resimlerinizi verimli bir şekilde teşvik etmenizi önerebilir. PagePeed Insights (PSI), tüm WordPress sayfalarınız için performans raporları üreten bir araçtır. Görüntülerinizin daha iyi optimize edilebileceğini tespit ederseniz, bir “görüntü impodu verimli bir şekilde” uyarısı tetikler.
Sorun “Görüntü Verimli bir şekilde kodlama” – Kaynak: PagePeed Insights Bu kılavuzda, görüntünün etkili bir şekilde kodlanması ve görüntü durumunuzu nasıl kontrol edeceğinizi açıklıyoruz. Bu aynı zamanda deniz feneri performans puanlarınızı artırmanın etkili bir yoludur. Ayrıca 6 görüntü optimizasyon tekniği ve “Verimli Görüntü Kodlama” uyarısını geliştirmenin hızlı yollarını paylaşıyoruz.Bölünelim! Görüntünün etkili bir şekilde kodlamasının anlamı nedir? Görüntüleri kodlamak, kalitesini önemli ölçüde etkilemeden dosya boyutunu azaltmak için görüntüleri optimize etmek anlamına gelir. Deniz Feneri resmi optimize edilmiş olarak nasıl işaretler? Bu sorunu tetikleyen nedir? Deniz Feneri tüm resimlerinizi denetlediğiniz sayfada tarar, ardından sıkıştırma seviyesini%85 olarak ayarlayın. Potansiyel tasarruflar 4 KIB veya daha büyükse, görüntüleri rapor edecek ve performans raporunuzda bir hata olarak gösterecektir. Görüntüler deniz feneri ile karakterizedir, çünkü potansiyel tasarruflar çok yüksek kalitede sıkıştırılmayan 4B (24.6kib) görüntülerden daha iyidir, genellikle büyük dosya boyutları üretir. Ve resim ne kadar büyük olursa, ziyaretçilerinize indirmek ve görüntülemek için o kadar çok zaman gerekir. Bu tüm resimleriniz için olduğunda, toplam yükleme süresinin artması muhtemeldir ve yavaş bir web sitesi ile sonuçlanabilirsiniz. Bu durumdan kaçınmak için, görüntüleri web’de doğru bir şekilde sunmanıza izin veren 6 optimizasyon tekniğini paylaşırız. WordPress’te görüntüleri verimli bir şekilde kodlamanın 6 yolu: Görüntüleri verimli bir şekilde çizmek ve bu sayfa içi içgörü tavsiyesinin üstesinden gelmek için atabileceğiniz altı adım vardır:
Görüntünüzü sıkıştırın
Tembel yük uygulayın
Resimleri WebP’ye dönüştürün (Yeni Nesil Format)
Görüntüleri doğru boyutlarla sunun
CDN görüntüsünü kullanma
Video ile animasyonlu GIF’i değiştirmek
Her adımı tartışalım. 1. Görüntünüzü Sıkıştırın Görüntü sıkıştırmasının amacı, çok fazla kaliteden ödün vermeden görüntü dosyalarını azaltmaktır. Bu, PagePeed Insight’ları çok mutlu eder, çünkü görüntü en verimli biçimde saklanabilir ve oluşturulabilir, bu da düzgün kodlanmış hale getirir. Görüntü kalitesine dokunmamayı seçerseniz görüntü sıkıştırma kayıplı ancak kayıpsız olabilir.
Bununla birlikte, doğru aracı kullanırsanız, kayıpsız sıkıştırma çıplak gözle görülmez. Aşağıdaki örneğimizde, biri orijinal dosya, diğeri sıkıştırıldı. Farkı görebiliyor musun? Yapamam.
Unutmayın, suboptimal görüntüler sayfanızın hızını önemli ölçüde etkiler ve WordPress sitenizi yavaşlatır. Performans sorunlarından kaçınmanın en kolay yolu WordPress eklentilerini kullanmaktır. Merak etme. Sizin için ağır işler yapıyoruz ve WordPress için en iyi görüntü sıkıştırma eklentilerinin bir listesini derledik. Görüntünüzü sıkıştırmanın manuel yolunu tercih ederseniz, size de yardımcı oluruz. Ve Photoshop ve Lightroom tarafından bunalmış hissediyorsanız, kullanabileceğiniz birçok alternatif optimizasyon aracı vardır. Tembel bir yükleme yükleme yavaş yükleme uygulamak, görüntünüzü verimli bir şekilde yardımcı olur, çünkü bu sadece gerektiğinde görüntüleri görüntülemeyi amaçlayan bir optimizasyon tekniğidir. Kullanıcı görürse, görüntü tarayıcı tarafından görüntülenir. Değilse, yükleme en önemli içeriğe öncelik vermek için askıya alınacaktır. Google, PagesPeed’de “Ekran dışında resimleri erteleme” önerir, bu da aşağıdaki yavaş yükleme komut dosyalarını uygulamak anlamına gelir: “Yükleme = Lazy” Unutmayın, ilk görünür görünüm alanındaki herhangi bir görüntü için bu komut dosyasını ayarlamaktan kaçınmalısınız. Bunun yerine, alt yarı içeriğe gecikmeler uygulayın: Alt yarım içerik için yavaş yükleme uygulama Lazy yükleme manuel olarak uygulamak istemiyorsanız, WP Rocket tarafından Lazy Load gibi ücretsiz WordPress eklentilerini kullanabilir veya WordPress için en iyi tembel yük eklentilerini görebilirsiniz. 3. Görüntüleri Google tarafından geliştirilen WebP’ye (yeni nesil format) dönüştüren WebP, görüntüler için daha iyi olan kayıpsız ve kayıplı sıkıştırma sağlayan yeni nesil görüntü biçimidir. Bu, WordPress sitenizdeki görüntünüzün daha iyi bir görüntüsüyle sonuçlanır ve sayfa denetimini geçer. Aslında, Google’a göre, “WebP dosya boyutu JPEG dosya boyutundan ortalama% 25-% 34 daha küçüktür”. Bu tablo, WebP’nin JPEG formatından daha iyi bir sıkıştırmaya ulaştığını gösterir: daha küçük bir dosya boyutuna sahip WebP – Kaynak: GreenSpector Emin misiniz? Hayali eklentiler, görüntülerinizi doğrudan WordPress kontrol panelinden WebP’ye dönüştürebilir. Bu yeni nesil formatı hakkında daha fazla bilgi edinmek istiyorsanız, WordPress’te WebP formatının nasıl kullanılacağını okumanızı öneririz. 4. Doğru Boyut Deniz Feneri ile görüntüler sunmak, WordPress sitenizde yanlış boyutta görüntüleri bulmayı kolaylaştırır. Sayfanızı denetlayın ve “Görüntü Boyutu Doğru” bir uyarı bulursanız, boyutu değiştirmelisiniz. Devtools öğesi paneli, görüntülenen görüntünün boyutunu kontrol etmek için de kullanılabilir:
Görüntü boyutumu “Element” sekmesinde tanımlamak – Kaynak: DeVtools Koyu kolay geliyor, ancak 2022’de mevcut çeşitli ekran boyutları göz önüne alındığında, her şey hızla karmaşık olabilir. Bir kural: ideal olarak, sayfanız kullanıcı ekranından daha büyük görüntüleri göstermemelidir. Ortalama masaüstü ekran boyutu 1920 x 1080 pikseldir Çoğu telefonun genişliği 400 piksel cihaza sahiptir WordPress siteniz için, görüntüleri medya kitaplığından veya doğrudan sayfanızdan yükleyebilirsiniz. Google, optimal görüntü boyutunun kullanılmasını sağlamayı önerir (BreakPoint Duyarlı için dahil). Anahtar, tam boyutlu görüntüleri kullanmaktan ve boyutunu doğru değiştirmekten kaçınmaktır: Görüntü dosyası boyutunuzu 200 kb’nin altında tutmaya çalışın
Çoğu görüntü için maksimum 800 piksel genişlik yeterlidir
Bu numaralar arasında görüntüleri kaydetmek, görüntünün kullanıcının cihazında hızlı bir şekilde yayınlanmasını sağlayacaktır. Daha ileri gidebilir ve resme aşağıda gösterildiği gibi her bir cihaza göre optimize edebilirsiniz:
Apple Cihaz Boyutları – Kaynak: Eskiz Yazılımı
Görüntüleri doğru ölçmek ve web sitenizin yavaşlamasından kaçınmak için birçok seçeneğiniz var:
Photoshop, Lightroom, GIMP, vb. Gibi araçlarla manuel olarak yapın.
Imagify gibi bir resim optimizasyonu eklentisi kullanın. Sıkıştırmaya benzer şekilde, sitenizdeki tüm görüntülerin boyutunu değiştirmek için kütle kullanabilirsiniz: Görüntü boyutumu doğru değiştirin – Kaynak: Hayal Etme 5. Görüntüleri WordPress’te verimli bir şekilde kodlamak için CDN görüntüsünü kullanarak, bir CDN sağlayıcısı seçmelisiniz. Bu, resimlerinizi daha hızlı gönderecek ve Google sayfa görüntüleri ile ilgili sorunlardan kurtulmaya yardımcı olacaktır. CDN, kullanıcılarınızın dünyada nerede olursa olsun görüntüleri optimize etme ve gönderme konusunda uzmanlaşmıştır: Görüntüleri daha hızlı göndermek için kenarın +50 konumu – Kaynak: Rocketcdn WebDD’ye göre “CDN görüntüsüne geçmek, görüntü dosyası boyutunda% 40-80 tasarruf üretebilir “Aşağıda gösterildiği gibi:
CDN’ye geçtikten sonra görüntü baytlarının tasarrufu – Kaynak: Google Chrome Geliştiricileri 6. Animasyonlu GIF’leri animasyonlu GIF’leri değiştiren videolarla değiştirme performansı iyileştirecek çünkü video .mp4, aşağıdaki örnekte görebileceğiniz gibi GIF’den çok daha hafiftir: – GIF Dosya Boyutu: 12 MB – MP4 Dosya Boyutu: 286 KB (Toplam Tasarruf:%98)
GIF vs MP4 PagesPeed dosyasının boyutu, animasyon içeriğinizi video formatları aracılığıyla sunmayı ve GIF kullanmamayı önerir. İçeriği MP4’e dönüştürdüğünüzde, GIF gibi görünmesi için doğru ayarlara sahip olduğunuzdan emin olun: – Sürekli olarak tekrarlanmalıdır – bu otomatik olarak oynatılmalıdır – GIF’i videoya dönüştürmenin birkaç yolu vardır, i Yukarıdaki karşılaştırma için EZGIF’i kullanmıştır.
Şimdi görüntüleri WordPress’te verimli bir şekilde teşvik etmek için 6 optimizasyon tekniği gördük, performans aracı kutumu sizinle paylaşmama izin verin. WordPress sitenizin hızını artırmanız ve resimlerinizin web için iyi optimize edilmesini sağlamanız gerekiyorsa bu yararlı olabilir. WebP (her ay 20 MB resim için ücretsiz) – WP Rocket tarafından tembel yük (ücretsiz) – Rocketcdn resimlerimi daha hızlı göndermek için (sınırsız bant genişliği için sadece 8,99 $/ay) – EZGIF (.gif’i .mp4’e değiştirmek için ücretsiz araç) – WP Rocket, çeşitli tıklamalarda hızı artırmak için en iyi performans eklentilerinden biri (çekirdek web canlılarını yeşile çevirmesini sağlıyor)
Bir sonraki bölümde, Imagify’a odaklanacağız, sofistike imajımıza odaklanacağız Görüntüleri otomatik olarak etkili bir şekilde kodlayan sıkıştırma eklentisi. Görüntü Kodlanması Nasıl Düzeltilir Image ile Verimli Bir şekilde Kodlama Imagy, kaliteyi azaltmadan ve “Encode Görüntünün Verimli” uyarısını geliştirmeden görüntünüzü sıkıştırabilirsiniz. Imafy’yi eylemde görmenin ve PagePeed’in içgörüsünü hayal edip etmeden karşılaştırmanın zamanı geldi. HD Image ile demo sitem
Imagify’dan önce – PagePeed Insights Deniz Feneri’ndeki performans sonuçlarım iyi sonuçlar vermedi ve görüntülerle ilgili bazı sorunlar buldum: Görüntüleri verimli bir şekilde kodlama (bugün bizim konumuzdur) Görüntüleri yeni nesil formatta servis edin Doğru görüntü boyutuDeniz Feneri tarafından işaretlenen sorunlar (Imagify’ı optimize etmeden önce) şimdi Imagy’yi, görüntülerimizi yeni nesil formatta, doğru boyutta sıkıştırma ve sunma ve elbette verimli bir şekilde teşvik etme zamanıdır. Imagify ile – PagePeed Insights Imagify’daki performans sonuçları “Encope görüntüsünü verimli” uyarısını geliştirdi! Ayrıca tüm görüntülerimi optimize etti ve önceki sorunlarımı geçen denetim alanına yerleştirdi: Görüntü Imagify (denetimi geçerek) ile doğru bir şekilde kodlandı – Kaynak: PSI Imagify görüntü dosyamın boyutunu% 90 azalttı – bu değişti Aşağıdaki örneğimizde gösterildiği gibi neredeyse 2 MB ila 200 KB: Görüntümü optimize ettiğiniz ve dosya boyutunun neredeyse% 90’ını tasarruf ettiğim gibi “Encore Görüntü Verimli” uyarısını benim gibi ortadan kaldırmak istiyorsunuz? Imafian’ı yükleyin ve aşağıdaki ayarları uygulayın: Ayarları Hayal Etme (Kolay)
Görüntünüzü sıkıştırmak için kullanmak istediğiniz optimizasyon seviyesini seçin. En yüksek optimizasyon seviyesi olan Ultra’yı seçtim:
Ultra Optimizasyon Seviyesi Seçimi – Kaynak: Hayal Etme
Görüntünüzü PagesPeed Insights tarafından önerilen yeni nesil format olan WebP’ye dönüştürün:
WebP Dönüşümü Tek Tıklamada – Kaynak: Hayal Etme Büyük resminizi Imagify ile toplu olarak optimize edin. (Bu, tüm kütüphaneyi tek bir tıklamayla optimize etmek anlamına gelir!) Ve bunun gibi, Psi’nin uyarısı kayboldu.
Bu görüntüyü optimize etme sürecinin tamamen ücretsiz olduğu belirtilmelidir! Image’ın ücretsiz sürümü, boyutu değiştirmenize ve ayda 20 MB değerinde görüntüleri sıkıştırmanıza olanak tanır. Daha fazla resim eklemeyi planlıyorsanız, aşağıdaki prim fiyatlarını seçebilirsiniz: 500 GB için ayda 4,99 $ (yaklaşık 5.000 resim)
ve sınırsız kullanım için ayda 9,99 dolar. Hala şüphe duyuyorsanız, PagePeed Insights da Imagify gibi bir resim optimizasyonu eklentisi kullanmanızı önerir:
Imagy eklentisi PSI tarafından önerilen görüntüleri Imagify olmadan etkili bir şekilde sarmak için bir çözüm olarak, PagePeed resmim için bazı sorunları işaret ediyor: Web sitem Imagify – Kaynak: PSI Imagify kullanırken, resmimle ilgili tüm sorunlar düzeltildi. Yeni nesil formatlardan birinde (WebP) birinde optimize edilirler ve “kodlama görüntülerini verimli bir şekilde” nihayetinde yeşile döner.
Web sitem, benim gibi olup olmadığınızı ve birkaç tıklamada resminizi WordPress’te verimli bir şekilde kodlamak isteyip istemediğinizi Imafy ile geçti, neden Imagify kullanmıyorsunuz? Hayalpian’ı ücretsiz olarak deneyebilir, resminizi optimize edebilir ve kendi denetiminizi benim gibi PagesPeed Insights’ta çalıştırabilirsiniz. Imagify sayesinde sınavı da geçerseniz yorumlarda bana söyleyin, merak ediyorum!
