Sayfa Hızı (ve Google) için görüntüleri nasıl optimize edebilirim
Sayfa hızları ve Google için resimleri nasıl optimize edeceğinizi bilmek ister misiniz? Bu makalede, performansı artıran ve sayfa hız bilgileri (PSI) görüntü uyarılarının üstesinden gelen en iyi görüntü optimizasyon tekniklerini öğreneceksiniz.
Resimlerle ilgili sorunlar – Kaynak: Google PagePeed Insights Google, çoğu işletme için önemli bir gelir kaynağıdır, bu nedenle iyi bir sıralama elde etmek çok önemlidir. Sayfa hızı, algoritmadaki en önemli KPI’lardan biridir ve WordPress sitenize hızı artırmanın en iyi yolu görüntü optimizasyon tekniklerinin nasıl olduğunu göreceksiniz.Dalış yapalım. Görüntüler sayfa hızını Google’a göre artırmak için neden çok önemlidir, sıralama ve kullanıcı deneyimi için önemli sayfa hızları için görüntüleri optimize eder. Aslında, web için görüntüler hazırlamanız gerekir. Optimize edilmeyen çok sayıda görüntünün genellikle yavaş bir web sitesinin arkasındaki nedenler olduğunu biliyor muydunuz? Görüntünün performansı nasıl etkilediği aşağıda açıklanmıştır:
Genel Sayfa Hızı – Büyük resimler, web sitenizi yavaşlatabilir ve bilgiye mümkün olan en kısa sürede erişmeyi uman ziyaretçilerinizi rahatsız edebilir. Aşağıdaki resimde gösterildiği gibi, görüntü web sayfasındaki baskın kaynaktır: İçerik Türüne Göre Sayfa Ağırlığı – Kaynak: HTTP Almanak Şekil Arşivi, sayfa ağırlığının iyi bir kaynağıdır ve ayrıca sayfa başına en fazla HTTP isteğidir: İçerik Türüne Göre İstekler – Kaynak: HTTP Almanak Arşivleri Ziyaretçiler sitenize vardığında, tarayıcınız içerik oluşturmak için birkaç dosya talep etmeli ve indirmelidir. Her dosya için sunucuya HTTP istekleri yapılır: HTTP istekleri açıklanır – Kaynak: WP Roket Ne kadar çok kaynağınız varsa, tarayıcınızın yapılması gereken daha fazla istek. Görüntünüzü optimize etmek ve daha küçük hale getirmek, daha hızlı site yükleme üreten HTTP isteklerinin boyutunu azaltacaktır. Dönüşüm – Sayfanın hızı için görüntünüzü optimize etmek iş geliriniz için çok önemlidir. Ziyaretçilerinizi mutlu etmek için hafif görüntülerle hızlı yüklenen bir siteye ihtiyacınız var, eğer değilse, potansiyel müşteriler keşfetmeden önce bile gidecek. Google’a göre, açılış süresi 5 saniyeden fazlaysa, o zaman bir zıplama olasılığı%90 artıyor!
Kenarlık ve Hız Sayfalarının Oranı – Kaynak: Google Hakkında Düşünme Görüntülerin web sayfalarının performansında nasıl önemli bir rol oynadığını gördük. Google PagePeed Insights raporunda optimize edilmeyen görüntüleri tartışalım. Görüntünün Google PagePeed Insights üzerindeki etkisi nedir? PagePeed Insights, Lighthouse tarafından desteklenen, resimler de dahil olmak üzere web sayfalarında içeriği analiz eden bir araçtır. Denetim tamamlandıktan sonra, PagePeed görüntüleri optimize etmek ve sayfayı daha hızlı hale getirmek için bir teşhis ve öneri sağlar. Figürden etkilenen iki sayfalık metriği vardır: Google Core Web canlısı olan en büyük içerikli boya (LCP) ve ilk içerikli boya (FCP).
Görüntülerden etkilenen FCP ve LCP – Kaynak: PagePeed Insights
Potansiyel Tasarruf Yaklaşık 25 KB – Kaynak: PSI 3. Ekran dışındaki görüntüleri erteleyin Görüntü performansını optimize etmenin ek yolu, ekran dışındaki görüntüleri geciktirmek ve düşük yarım görüntüye yavaş yükleme komut dosyaları uygulamaktır (ziyaretçi ekranında değil). Amaç önce önemli kaynaklara öncelik vermek ve “gizli” görüntüyü daha sonra yüklemektir. Yavaş yükleme ile tahmini zaman kaydetme yükleme: 5.4 DTK – Kaynak: PSI 4. Görüntü Boyutu Doğru Google’dan başka bir öneri, özellikle hücreselde (duyarlı tasarım) sunarken görüntünün doğru bir şekilde boyutudur. Aşağıdaki resimde, boyutumu değiştirerek ve mobil cihazlar için resmimi optimize ederek 50 kb tasarruf edebilirim. Görüntüleri doğru ölçerken yükleme süresi tahminleri: 0.6 DTK – Kaynak: PSI 5. Önbellek ilkesi önbelleğe sahip statik varlıkların servis edilmesi HTTP CAN Sitenize tekrar tekrar ziyaretlerde sayfanızın açılış saatini hızlandırın. Google, önbellek olmayan tüm statik kaynakları işaretler: Önbellek ile optimize edilebilen aktarım boyutu – Kaynak: PSI Bir sonraki bölümde, her sayfa sayfası içgörü görüntü öğesinin nasıl işleneceğini ve sayfa hızının nasıl artırılacağını tartışacağız. Görüntüleri Google için optimize etmek ve sayfa hızını artırmak için Google PagePeed ve Performans için Görüntüler Nasıl Optimize edilir, aşağıdaki 8 performans tekniğini uygulayabilirsiniz: WebP’ye (veya diğer yeni nesil formatta) resim dönüşümü Görüntü sıkıştırma Görüntü boyutunu değiştir
Görüntü boyutlarını ayarlayın
Tembel yükleme uygulayın
Önbellek tarayıcısını etkinleştirin
CDN’den yararlanın
Mümkünse .svg grafiğini kullanın
Genel deniz feneri puanınızı artırmak için Google tarafından önerilen her optimizasyon için kullanabileceğiniz web araçlarını ve eklentilerini tartışalım. 1. Görüntülerin WebP’ye (veya diğer yeni nesil formatına) dönüştürülmesi, görüntünüzü Google için optimize etmenin en etkili yollarından biri, Imagify gibi WordPress eklentilerini kullanarak WebP’ye dönüştürmektir. Bu, daha iyi sıkıştırma ve optimizasyon üreten görüntülerin bir WebP sürümünü oluşturur. Ayda 20 MB’a kadar veri ücretsiz olarak hayal edin. (ImageFife’ın tam fiyatını kontrol edin). Imagify ile WebP’ye görüntüler sohbet etmek diğer WebP dönüştürme eklentilerini görebilirsiniz: Media ve WebP Express için WebP Converter. Bir eklenti kullanmak istemiyorsanız, Convertio veya EZGIF gibi birçok ücretsiz çevrimiçi araç bulacaksınız. Bu yöntem için birkaç adım daha atmanız gerekir: resminizi yükleyin, WebP’ye indirin ve WordPress kitaplığınıza yerleştirin.
JPG’yi WebP’ye dönüştürmek için web tabanlı araçlara örnekler – Kaynak: Convertio 2. Görüntü sıkıştırma görüntüleri, depolama maliyetlerini azaltmak için boyutunu önemli ölçüde azaltmak anlamına gelir. Google’a göre, bu web sitenize iyi bir performans geliştirme sağlayacaktır!
Kaliteyi kaybetmeden görüntüleri sıkıştırmanın en popüler WordPress eklentileri:
Imagify (3 sıkıştırma seviyesi ile: görüntü kütlesini sıkıştırabilen normal, agresif ve ultra) Görüntüleri Tek Tıklamada Sıkıştırın – Kaynak: Hayali Optimol
JPEG & PNG’yi sıkıştırın (küçük PNG)
EWWW Kısa piksel
WordPress için en iyi 6 görüntü sıkıştırma eklentisi hakkında daha fazla bilgi edinmek için kılavuzumuzu okuyun. Görüntüleri sıkıştırmak için Photoshop veya Lightroom gibi tasarım yazılımlarını da kullanabilirsiniz, ancak kalitenin değiştirilebileceğini unutmayın. Son seçenek, Tinypng gibi web tabanlı araçları kullanmaktır. Görüntüleri sıkıştırmak için Web Araçları – Tinypng Kaynaklar 3. Görüntü boyutunu değiştir Google, görüntünün boyutunu özellikle mobil cihazlarda doğru şekilde değiştirmenizi önerir. Görüntünün boyutunu değiştirmek ve ağırlığı azaltmak için eskizler, önizlemeler veya gimp gibi yazılımları kullanabilirsiniz.
Resmin Boyutunu Değiştirme Eskizde Not: Büyük görüntünün boyutunu değiştirmek için ImageY’yi de kullanabilirsiniz. Daha büyük görüntüleri otomatik olarak optimize etme seçeneği vardır.
Daha büyük görüntünün boyutunu Imagify 4 ile değiştirin. Amaç, düzendeki kaymayı azaltmak ve kümülatif düzen (CLS), diğer çekirdek web veri metriklerindeki metrik kaymayı arttırmaktır. Bu görsel içerik istikrarı ölçer. Görüntü boyutlarını ayarlamak için, aşağıdaki kırmızı renkte gösterildiği gibi HTML “Genişlik” ve “Yükseklik” etiketlerinin bir değerine sahip olduğundan emin olun:
Boyutların doğru hazırlanıp hazırlanmadığını öğrenmenin manuel yolu Chrome’da bir geliştirici kullanmak ve resminizi kontrol etmektir :Genişliği ve Yüksekliği Ayarla – Kaynak: Chrome 5. Tembel Yükleme Yavaş Yükleme Uygulama Görüntülerinizi Google ve Performans için optimize etmenin en etkili yollarından biridir.Neden? Niye?Tarayıcıya sadece ziyaretçilerin gördüğü resimleri indirmesini söylersiniz. Tembel önemsiz içerik içerir – Kaynak: WP Rocket, resminize yavaş yükleme uygulamak için WP Rocket veya AutoPtimize tarafından Lazyload gibi ücretsiz WordPress eklentilerini kullanabilirsiniz.WP Rocket tarafından Lazyload çok kolay:
WordPress WordPress Gösterge Tablonuzla Lazyload, resminize aşağıdaki etiketi ekleyerek yavaş yavaş yükleme uygulayabilirsiniz:
Tembel Yükleme hakkında daha fazla bilgi edinmek için, WordPress için en iyi tembel yük eklentileri hakkında bu makaleyi okumanızı öneririz. 6. Önbellek tarayıcı önbelleğini etkinleştir, sayfa hızı için başka bir Google önerisidir, çünkü görüntülerin kullanıcılara daha hızlı sunulmasını sağlar. Önbellek tarayıcısı, sayfa başına HTTP istek sayısını azaltarak sunucu yüklerini azaltmaya yardımcı olabilir. Google, önbellekleme uygulamak için WordPress eklentisini kullanmanızı önerir. En iyi önbellek eklentilerinden biri WP roket. Bu, web performansının en iyi uygulamasının% 80’ini uygular, basit bir arayüze ve hızlı ayarlara sahiptir. 7. CDN görüntüsünü kullanarak CDN’den yararlanın Trafik maliyetlerinizi önemli ölçüde azaltın ve Google PagePeed Insights’daki değerinizi artırın. Bu, görüntünün dünyada nerede olurlarsa olsunlar ziyaretçilere gönderilme şeklini optimize eder. Bu görüntünün optimizasyon tekniği sayesinde aktarılan veri miktarı azalır. ÖNEMLİ: CDN’nin başından beri hazırlanması çok yorucu olabilir. DNS notları ve CNAME alanlarıyla uğraşmanız gerekir. Otomatik kurulumu tercih ediyorsanız, RocketCDN’yi denemek isteyebilirsiniz. Ağır işler yapıyorlar ve CDN’yi sizin için yapılandırıyorlar. 8. Mümkünse SVG grafiğini kullanın SVG’nin performans için en değerli özelliklerinden biri, grafiğin kaliteyi kaybetmeden boşaltılabilmesidir. SVG ölçeklenebilir vektör grafikleri anlamına gelir ve XML’ye dayanmaktadır. Perde arkasında, bu format eşitlik ve matematiktir ve pikselleri feda etmeden tartışmayı kolaylaştırır. Resim ve hız sayfası:
Vaka çalışması Web sayfalarının optimizasyonundan önce ve sonra performansımızı karşılaştırabilmemiz için bahsettiğimiz tüm önerilen teknikleri uygulayalım. Denetimler için PagePeed Insights ve GtMetrix’i kullanacağız. İlk sütun, tüm optimizasyon türlerinden önce sonuçları gösterir. İPhone’umdan 8 HD görüntü içeren bir web sayfası oluşturdum. İkinci sütun, bir görüntü optimizasyon tekniği uygulandıktan sonra bir artış gösterir. Google PagesPeed Insights’daki sonuçlarım kesin olarak arttı:
Görüntüleri optimize etmeden önce
Görüntü optimizasyonundan sonra (hayal + wp roket + roket cdn)
Imagify, WPROCKDN ve RocketCDN ile ana performans sonuçları: Google'ın görüntüleri nasıl optimize edeceğinizle ilgili önerilerini takip ettikten sonra aşağıdaki iyileştirmeyi görebiliriz:
Görüntü ile ilgili sorunlar ve psi uyarıları düzeltildi
Görüntünün toplam ağırlığı 3.5 MB'dir, şimdi 36.8 kb'ye düşer
HTTP isteklerinin yarısı resim tarafından yapılır. Optimize ettikten sonra, talebin sadece% 22'sinden sorumludurlar.
HTTP isteği 16'dan 9'a değişti
Hayati web çekirdeğim şimdi her şey yeşil
Performans seviyeleri hücreselde 68/100'den 95/100'e yükseldi
Tam zamanlı doldurulmuş 3,9 saniye idi ve 1.2 saniyeye düştü
Sayfa boyutum neredeyse 4MB ve şimdi 91KB!
Sayfa Hızı ve Google için görüntüleri optimize etmek için sarma, aşağıdaki performans protokolünü uyguladım: Hayalpify'ı yükledim, bu da bana izin verdim:
Resmimi WebP'ye dönüştürün
En büyük resim boyutumu değiştir
Verimli bir şekilde teşvik etmek için Ultra Modu kullanarak görüntüumu sıkıştırın ve optimize edin
Rocketcdn'i dünya çapında daha hızlı sunulmasına izin vermek için etkinleştiriyorum.
WP roketini şu şekilde kullanıyorum:
Önbellekleme uygulayın
Resmime tembel yük uygulayın
JS ve CSS kodumu optimize et
Denetim üzerindeki etkiyi hayal edin.Görüntünüzü Image ile optimize etmek için yolculuğa başlayın!Eklentiyi yüklemeden önce web uygulamasını ücretsiz olarak kullanmaya başlayabilirsiniz.
Sayfa boyutum neredeyse 4MB ve şimdi 91KB!
Sayfa Hızı ve Google için görüntüleri optimize etmek için sarma, aşağıdaki performans protokolünü uyguladım: Hayalpify'ı yükledim, bu da bana izin verdim:
Resmimi WebP'ye dönüştürün
En büyük resim boyutumu değiştir
Verimli bir şekilde teşvik etmek için Ultra Modu kullanarak görüntüumu sıkıştırın ve optimize edin
Rocketcdn'i dünya çapında daha hızlı sunulmasına izin vermek için etkinleştiriyorum.
WP roketini şu şekilde kullanıyorum:
Önbellekleme uygulayın
Resmime tembel yük uygulayın
JS ve CSS kodumu optimize et
Denetim üzerindeki etkiyi hayal edin.Görüntünüzü Image ile optimize etmek için yolculuğa başlayın!Eklentiyi yüklemeden önce web uygulamasını ücretsiz olarak kullanmaya başlayabilirsiniz.