Görüntünüzün web sitenizi yavaşlatmasının 6 nedeni (ve nasıl düzeltileceğiniz)
Sitenize yavaş görüntünün neden yüklendiğini mi merak ediyorsunuz yoksa yüklenmesi uzun zaman alıyor mu?Doğru makaleyi okuyorsunuz.Bilmeniz gereken iki önemli şeyle başlayalım: Görüntü, web sitesi trafiğinin büyük bir yüzdesidir, bu nedenle görüntünüzü optimize etmek, yüklemek için gereken süreyi azaltmaya yardımcı olabilir.Aynı zamanda, görüntüler genellikle performans sorunlarının nedenidir: yükleme kaynakları alırlar ve bu yüzden WordPress sitenizi yavaşlatırlar.
Resim en yüksek HTTP istek numarasından sorumludur – Kaynak: almanac.http arşiviSorun şu ki, resim veya resimsiz bir web sitesi hayal etmek zor.SEO tarafından optimize edilen resimleri kullanmak web sitenize daha fazla trafik yönlendirebilir.Onlar olmadan iş yapamayız!
Bu blog yazısında, görüntülerin sitenizi yavaşlatması için altı neden açıkladık.Ayrıca, sitenizde (mobil cihazlar dahil) fotoğrafların nasıl daha hızlı yükleneceğini öğreneceksiniz.Görüntünüz neden WordPress’te yavaş yüklendi (veya sonsuza kadar yüklendi) 1. Web sayfasının hızı söz konusu olduğunda resim çok büyük (ve çok fazla kullanabilirsiniz), yapmanız gereken ilk şey ağırınızı optimize etmektir görüntü.Daha büyük yüksek çözünürlük çok fazla bant genişliği harcayabilir ve sitenize ziyaretçileri yükleme süresini yavaşlatabilir – neden daha küçük bir boyutta yüklemiyorsunuz?Ama aynı zamanda, görüntü kalitenizin düşmesine izin vermeyin!Görüntü sıkıştırma için güvenilir ve etkili bir uygulama kullanın.Bu, boyutlarını azalttığınızda, hala kalite kaybı ile görsel sadakatte korunmalarını sağlayacaktır.
2. Çok uzun yüklü web sitelerinden kaçınmak için görüntünün belirtilmemiş bir boyutuna sahip görüntüler önemlidir.Tarayıcının sizin yerine dağılmasına izin vermeyin-yüklemek için daha fazla veri sağlayacaktır.Başka bir deyişle, tarayıcı yine de tüm görüntüyü içerecektir.2000 x 2000 piksel ölçen bir görüntünüz varsa, ancak 200 x 200 piksele düşürdünüz, tarayıcınız gerekenden on kat daha fazla yüklenmelidir.3. Görüntü, görüntülerin yüklenmesini önlemek için cihaza göre optimize edilmez, sayfanız kullanıcı ekranında görüntülenen sürümden daha büyük görüntüler oluşturmamalıdır.Basit bir kelimeyle, cihazdan daha büyük olan her şey boşa harcanan bir bayt üretir ve sayfalarınızı yavaşlatır.
4. Tarayıcı, görüntüyü varsayılan olarak aynı anda yüklemeye başlar, tarayıcınız her şeyi aynı anda yüklemeye çalışır. Önce yüklenmesi gereken görüntülere öncelik vermezseniz, tarayıcı her şeyi aynı anda oluşturmakla meşgul olacaktır. Ziyaretçinin görüş alanına yüklenmesi gereken en önemli görüntülere odaklanın. 5. Görüntü boyutunuzun ağırlık biçimini kullanırsınız, sorunun yalnızca bir parçasıdır. Kullandığınız dosya türü de değerli alan harcayabilir. .Tiff veya BMP gibi bir format kullanıyor musunuz? Bu durumda, TIFF’in görüntüleri daha ayrıntılı hale getiren ve daha fazla veri içeren sıkıştırılmamış bir format olduğunu unutmayın … Bu, dosyayı daha büyük hale getirecek ve sonunda çok fazla depolama alanı harcayacaktır. Kullanmıyorsanız. Basit dönüşüm, resminize biraz destek verebilir! 6. Önbelleğiniz görüntüleri saklamaz önbellek görüntüsünün ana yararı, WordPress sitenizin performansını artırmaktır. Kullanıcılar, bir ağ bağlantısı üzerinden indirilmesini beklemek yerine doğrudan sistemden resimleri veya JavaScript ve CSS dosyalarını görmelidir. Başka bir deyişle, veritabanına gereksiz pingden kaçınırken görüntünüz yerel bir klasörde önbellek olmalıdır. Sitenizdeki yavaş yükleme görüntüsü nasıl düzeltilir, içerik stratejileri için çok önemlidir, ancak çok uzun yüklemek istemiyoruz. Anahtar, WordPress sitenizi yavaşlatmaktan kaçınmak için düzgün kullanmaktır. WordPress sitenizdeki görüntü yüklemesini artırmak için kullanabileceğiniz altı tekniğe bakalım.
1. Görüntünün boyutunu ve sıkıştırmasını değiştirin Görüntünüzü hızlandırmak istiyorsanız, boyutu değiştirerek ve sıkıştırarak her zaman fotoğrafınızı optimize etmelisiniz. Kayıplı ve kayıpsız sıkıştırma, web sitenizi daha hızlı açık bir süre için optimize etmek için yaygın olarak kullanılan iki yöntemdir, bu da sonuçta sayfa yüklemesini hızlandırır. Her iki yüksek seviyeli taktikler, kalite kaybı olmadan görüntü boyutunun nasıl azaltılacağı konusundaki kılavuzumuzda iyi açıklanmaktadır. Kayıplı = bazı verileri ortadan kaldıran filtre. Etkilenen görüntü kalitesi.
Kayıpsız = görüntünün kalitesine dokunmadan verileri onaylayan filtre.
Doğru eklenti ile WordPress’ten otomatik olarak sizin için bazı görüntü formatörleri yapmasını isteyebilirsiniz.
Sorun: resim çok büyük (ve çok fazla). Çözüm: Görüntünüzü daha hızlı yüklemek için kullanabileceğiniz görüntü optimizasyon eklentisi:
Hayal etmek
Imagify ile görüntüleri sıkıştırın: Kalite iyi kalır, ancak dosya boyutumuzda% 87 tasarruf ediyoruz – Kaynak: Hayalpiy
Ewww görüntüleri optimize etmek Optimole (Optimole tarafından Görüntü Optimizasyonu ve Tembel Yük)
Optimal kısa piksel görüntüleri
Resmush.it
Görüntü JPEG & PNG sıkıştırma
2. Web sitenizdeki yavaş görüntü yüklemesini iyileştirmek için görüntünün boyutlarını ayarlayın, doğru görüntü boyutlarını ayarlamayı unutmayın. Verileri kaydetmek ve sayfa açık zamanını artırmak için tüm görüntülerin genişliğini ve yüksekliğini ayarlayın. O nasıl çalışır? İşaretlemeye Geniş ve Yüksek Özellikler Ekleme Tarayıcınıza görüntüler için yer kaydetmesini söyleyeceksiniz. Bunu yapmazsanız, bu içerikte bir değişiklik yapar ve kümülatif düzen kaydırma puanınız etkilenir. Sonuç olarak, Lighthouse hayati web çekirdeklerinize SEO ve performansa zarar vererek çok kötü bir puan verecektir. Görüntü kaymasının kullanıcı deneyimi üzerindeki etkisini daha iyi anlamak için aşağıdaki örneği görelim.
Görüntü boyutları tarayıcıya verilmezse metin değişecektir.
Kaynak: SmashingMagazine 2. Görüntü boyutu sağlanırsa, uygun alan tahsis edilebilmesi için metin değişmez (CLS etkilenmez).
Kaynak: SmashingMagazine Sorun: Görüntünün belirtilmemiş bir boyutu vardır. Çözüm: WP roketini kullanarak boyutlar ve kayıp görüntü öznitelikleri ekleyin. Bu, WordPress sitenizin hızını artırmak için önbellekleme, kod optimizasyonu, yavaş yükleme ve daha fazlasını yapacak güçlü bir eklentidir.
Medya sekmesine kayıp boyutlar ekleme – Kaynak: WP Roket 3. Her “Duyarlı Görüntü” aygıt için optimize edilmiş görüntüleri servis sunmak, cihaza (tablet, hücresel ve masaüstü) göre doğru boyutta görüntüyü sunmak için kullanılan bir stratejidir. Başka bir deyişle, her görüntünün birkaç sürümünü yaparsınız ve hangilerinin kodunuzda medya sorguları, görünüm alanının boyutları vb. Kullanarak kullanılacağını belirlersiniz. Web.dev, “mobil cihazlara masaüstü boyutlu görüntülerin sunulmasının, gerekenden 2-4x daha fazla veri kullanabileceğini” söyledi. Sorun: Görüntüler cihaza göre optimize edilmez. Çözümler: Size yardımcı olmak için WordPress sayfa üreticisini kullanın. Cihaza göre görüntü boyutlarını seçmenize ve değiştirmenize izin veren öğelere örnekler – Kaynak: Elementor Page Maker
Cihaza göre doğru boyutta görüntüler göndermek için CDN görüntüsünü kullanın.
CSS kullanarak manuel olarak yapın ve yanlış boyutlu görüntüleri tanımlamak için deniz feneri kullanın. Deniz Feneri> Seçenekler> Performans girerek bir performans denetimi çalıştırın.
4. WordPress görüntüsünüzün yavaşça yüklenmesi durumunda resminizi yüklemek için tembel? Görüntüleri yalnızca ziyaretçiler gördüğünde görüntülemenin zamanı geldi. Bant genişliğini kaydetme ve oluşturulacak içeriğin önceliklendirilmesi tekniğine “tembel yükleme” denir. Ziyaretçileriniz tarafından görülmeyen alt yarısında yavaş yükleme uygulamanız gerekir. Sorun: Tarayıcı görüntüleri hemen yüklemeye başlar. Çözüm: WordPress eklentilerini kullanarak tembel yükleme uygulayın.
WP Rocket tarafından tembel yükleme, resimdeki tembel yük komut dosyasını uygulayan ücretsiz bir eklentidir.
Piyasada bulunan en iyi tembel yük eklentilerini karşılaştırmak istiyorsanız bu ilginç kılavuzu kontrol edin. Manuel olarak tembel yüklemeyi uygulayın: Bu kılavuzu, tembel yüklemeyi manuel olarak uygulamanın iki yolunu açıklayan (yeni başlayanlar için takip edilmesi çok kolay olmasa da) bu kılavuzu izleyin.
5. Görüntünüzü WebP’ye dönüştürün WebP, web’deki görüntülerde daha hızlı yüklenmesini sağlayan kayıpsız ve kayıplı sıkıştırma sağlar. Google’a göre,% 26 kayıpsız WebP görüntüsü PNG’den daha küçük. Ve kayıplı webp görüntüleri, eşdeğer kalitede JPEG görüntülerinden 25-34 daha küçük. Sorun: Ağır bir format kullanıyorsunuz. Çözüm: Görüntünüzü WordPress eklentilerini kullanarak JPG, PNG veya WebP’ye dönüştürün.
Hayal edin – resimlerinizi otomatik olarak WordPress kontrol panelinizdeki WebP biçimine dönüştürür.
Medya için WebP Converter – Görüntülerinizi WebP’ye dönüştürün.
6. Önbellek eklentisi önbellek eklentisini kullanın Önbellek, sunucuya dosyanızı diske veya RAM’e kaydetmesini söyler. Sonuç olarak, web sayfanız (ve resminiz) daha hızlı içerir, çünkü doğrudan önbellekten “depolanır”. Buna sayfa ve tarayıcı önbelleği, fikrin yerel bellek navigasyon cihazlarında genellikle erişilen görüntüleri depolamak olduğu yer. Sorun: Önbelleğiniz görüntüleri saklamaz. Çözüm: Görüntünüzü önbelleğe almak için WordPress eklentisini kullanın.
WP Rocket, görüntülerinizi önbellekleme ve yavaş yükleme, GZIP sıkıştırmasına izin veren kodunuzu temizleme ve daha fazlası dahil olmak üzere en iyi web performans uygulamalarının% 80’ini otomatik olarak uygular.
Artık daha iyi görüntüler sunmak için uygulayabileceğiniz tekniklere baktığımıza göre, Imagify gibi eklentilerin nasıl yardımcı olabileceğini görelim. Görüntünüzün daha hızlı yükleniğinizle nasıl daha hızlı hale getirilir, bence, iyi bir görüntü optimizasyonu eklentisi görsel kaliteyi korurken görüntünün boyutunu azaltmalıdır. Web sitemdeki ve geleceğin (hızlı bir şekilde) kullanımı ve sıkıştırılması kolay olmalıdır. Imafy açıklamamla eşleşiyor ve Imagify’ın sitemi hızlandırmama nasıl yardımcı olduğunu göstereceğim. Hazır? Çok uzun yüklü web sitesi görüntüsüne veda etme zamanı. Bu vaka çalışması için GTMetrix kullanıyoruz ve aşağıdaki KPI’yı ölçeceğiz: genel performans değeri
Kümülatif Düzen Değişimi (Ani İçerik Değişimi)
Tam zamanlı
Sayfa Boyutu ve Resim tarafından işgal edilen % boyutu
HTTP isteklerinin sayısı ve resim tarafından işgal edilen boyutun %
Imagify ile optimize edilmeden önce ve sonra görüntü dosyası boyutu
10 resim içeren Divi ile oluşturulan bir test sitesini kullanarak denetime başlayalım.
Divi ile oluşturulan web sitemi çıkarın (toplam: 10 resim)
Senaryo 1: Web sitem Divi ile yapılır – Hayır Hayır Sayfa URL’mizi GTMetrix’e koyup farklı bir parça görüyoruz. Sonuçlar çok kötü değil, ama hayati web çekirdeklerimden biri turuncu ve B’nin puanı alıyorum
Hayal Olmadan Performans Denetimi – Kaynak: GtMetrix
td> 2.6s
%)
/tr>
JPG Boyut: 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB
> Daha sonra, görüntü toplam sayfa boyutunun 2.44 MB'si, toplam sayfa boyutunun% 54'ünde 1.31 MB alır. 75 talebin 41'i, talebin% 55'i olan resim tarafından yapıldı.
Hayal etmeden sayfamın detayları
Şimdi resmimin nasıl yayınlandığını görmenin zamanı geldi, hayal ettiğiniz için teşekkür ederim. Senaryo 2: Aynı web sitesini ve resimleri denetleme - Imagify ile imajımı Imagify kullanarak optimize edelim. Bunu yapmak için, eklentiyi etkinleştirin ve ayarlar → Hayali Ayarlar'dan "Kütle Optimizasyonu" nu başlatın.
Imagify ile 10 fotoğrafımı optimize etmek - Kaynak: WordPress Kütüphanesi Ortalama olarak, Image dosya boyutumun% 50'sini kaydeder ve her şeyi WebP formatına dönüştürür:
Son olarak, KPI'mın Imagify'ı etkinleştirmeden önce ve sonra karşılaştırma zamanı.Sonuçlar çok cesaret verici! GTMetrix puanları Imagify kullandıktan sonra
cls
0.17s (turuncu)
0.1s (şimdi yeşil)
tam zamanlı
2.6s
2.6s
TD>
TD> Toplam: 75 - Resim: 41 ( %55)
Toplam: 72 - Şekil: 38 (%52)
JPG Boyut: 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB
JPG Boyutu (Tasarruf -50%): 82 KB 60 KB 13 KB 56 KB 42 KB 98 KB 37 KB 41 KB 90 KB 6 KB
Imagify'ın görüntüleri sıkıştırarak, boyutunu değiştirerek ve onu dönüştürerek sayfamı daha hafif hale getirdiğini görebiliriz. WebP biçimi. GtMetrix'te bir puan bile aldık! Buna ek olarak, Imagify kullanılırken resim tarafından alınan alanın daha düşük olduğunu fark ediyoruz. Ve daha az önemli değil, web sitem hala iyi görünüyor ve bulanık bir resmim yok. Sarma, web sitesi sayfalarının yükleme hızının yavaş olmasına neyin neden olduğunu belirlemek her zaman kolay değildir. Örneğin, optimize edilmeyen görüntüler, çok sayıda HTTP isteği, büyük kodlar ve JavaScript problemleri gibi birçok sorumlu faktör vardır. Belki ne olacağını bulmak sizin için iyidir, çünkü bu sorunu hemen çözmezseniz, gelir kaybına neden olabilir. Denetimimizde, Imagify: Görüntüyü optimize etmek listenizin üstünde olmalı ve ne kadar hayal kurmayı sizin için rahatlattığını görün! Image Free Denemeleri kullanarak WordPress sitenizdeki görüntüleri optimize etmeye çalışın ve bize ne kadar veri kaydettiğinizi söyleyin.
