WordPress için görüntüleri nasıl optimize edebilirsiniz ve sayfa skorunuzu artırırsınız
Son Güncelleme: Temmuz 2021 Resim her web sitesinin önemli bir unsurudur: Görüntüler, yayınları ve sayfaları okumayı daha ilginç ve ilginç hale getirir, ancak görüntüler hızla bir performans yükü ve sayfa sorumlusu puanınız olabilir. Google her zaman uyanıktır ve web performansı açısından adımlarınızı değerlendirmeye hazırdır ve bunu hayal kırıklığına uğratmak istemezsiniz, değil mi? Bu yüzden size WordPress için görüntü optimizasyonu hakkında tüm bilgileri vermek için buradayız! Boyutu nasıl değiştireceğiniz ve görüntüleri nasıl sıkıştıracağınız, kalitesini koruyacağı ve en iyi çevrimiçi görüntünün nasıl seçileceği hakkında her şeyi öğreneceksiniz. Çok kullanışlı bir WordPress görüntü optimizasyon eklentisi önermek için daha derine ineceğiz, Imafy. Son olarak, yavaş yükleme yoluyla sitenizin performansını nasıl daha da artıracağınızı öğreneceksiniz.
Topu yuvarlamaya hazır mısınız? Hadi gidelim! Büyük görüntüler, yükleme görüntülerindeki en büyük su kanallarından biridir, genellikle en büyük performans sorunlarından biridir (ve göz ardı edilir). Önbellekleme ve CDN ile bile, optimize edilmeyen görüntüler, sayfanızın yükleme süresini azaltacak ve temel web verilerinin metriklerinden biri olan en büyük içerik boya puanını etkileyecektir. Ancak, bir web sitesi sahibi olarak, görüntü tamamen sizin kontrolünüz altındadır. Böylece, görüntülerle nasıl çalışacağınızı ve optimize edeceğinizi anlayabiliyorsanız, sitenizin hızını artırabilir ve temel web canlılarının performansını optimize edebilirsiniz.
WP Rocket müşterileri ile olan deneyimimize dayanarak, en yaygın sorunlardan birinin bazen yüksek çözünürlüklü görüntüler, fotoğraf widget’ları ve büyük görüntü kaymaları ile dolu ağır sayfalarla ilgili olduğunu biliyoruz. Bir örnek olarak: Görüntüler, sayfanın toplam açma süresinin ortalama% 30’una katkıda bulunur. Genellikle bu, yükleme süresinin en büyük tek faktörüdür. Aşırı durumlarda, bu yükleme süresinin% 60’ına yakın olabilir. Aşağıda, siteniz için hangi görüntülerin optimize edilmeyeceğine bir örnek: Optimize edilmeyen resim örnekleri
HTTP isteklerinin sayısı genellikle açık zamanda bir faktör olarak adlandırılır ve önemli olsa da, sonunda sayfa boyutu, hız veya yavaşlığın gerçek göstergesidir. Az miktarda HTTP isteğiniz olabilir, ancak istek dev bir görüntü çağırırsa ellerinizle bir sorun yaşayacaktır. açık süreyi artırmak için etkili strateji. Ve bu, WordPress sitenizin performansı için gerçek bir oyun değiştirici olabilir. boyut birbiriyle ilişkilidir. Görüntünüzün boyutları ne kadar büyük olursa, dosya boyutu o kadar büyük olur.
Dosya boyutu Kilobayt (KB) ve Megabayt (MB) 1MB = 1000KB referans olarak ölçülür, bu blogun ana içerik sütununun genişliği 796 piksel vardır. Akıllı telefonunuzla fotoğraf çekerseniz, ayarlarınıza bağlı olarak, fotoğraf 3MB (veya 3000KB) dosya boyutuna sahip 2500 piksel genişliği (veya daha fazla) olabilir. Cep telefonumla bir fotoğraf çekip herhangi bir düzenleme yapmadan bu bloga yüklersem, olması gerekenden yaklaşık 3 kat daha büyük dosyaları yükleyeceğim – toplam kaynakların ve sayfa yüklemesindeki engellerin israfı. Bu nedenle, bir cep telefonunun fotoğrafını çekmek ve blogunuza yüklemek basit olabilirken, çok fazla gereksiz ağırlık ekleyerek hızlı bir site istiyorsanız gerçek bir sorun yaratır. Fotoğrafı yüklemeden önce iki şey yapmanız gerekir: Boyutu değiştirin ve sıkıştırın. Bu yol. Çevrimiçi görüntünün boyutunu nasıl değiştirir, böylece yapmanız gereken ilk şey, görüntünüzün boyutunu siteniz için doğru boyuta değiştirmektir. Blog resimleri için, blog içeriğinizin alanının ne kadar geniş olduğunu öğrenin ve asla bundan daha geniş resim yüklemeyin. Bir kaydırıcıda kullanılacaksa, önce kaydırıcı boyutunu belirlediğinizden emin olun. İçerik alanınızın nasıl olduğunu nasıl anlarsınız? Chrome veya Firefox’ta bir geliştiriciyi nasıl kullanacağınızı biliyorsanız, kullanabilirsiniz. Ancak korkutucu geliyorsa, daha basit bir araç var.
Bir Mac kullanıyorsanız, zaten içinde olan bir ekran görüntüsü, Grab var ve ekrandaki alanı tanımladığınızda size piksel söyleyecektir. Veya Chrome için kolay bir sayfa eklentisi yükleyebilirsiniz. Görüntünün boyutlarını bildikten sonra, görüntünüzün boyutunu ona göre değiştirmek için aşağıdaki araçlardan birini kullanabilirsiniz: uygulamanın boyutunu ve bir aracı değiştirin.
Gimp – Ücretsiz, Windows ve Mac
Irfan View- Windows için Ücretsiz
Mac için önizleme – zaten yüklü!
Mac’teki geliştiriciler, komut satırını SIP’yi kontrol edebilir
Boyutları değiştirmek için çevrimiçi araçlar
picmonkey.com
Pixlr.com (ayrıca hücresel uygulamaları da var)
Fotor.com (ayrıca hücresel bir uygulamaya sahip olmak) kullandığınız sorun yok – tek yapmanız gereken boyut değiştirme özelliğini bulmak. Pikselin istenen genişliğini girebilirsiniz ve uygulama, yüksekliği otomatik olarak ayarlayarak görüntünün orantılı kalmasını sağlar.
Web’deki genel görüntü biçimi görüntüsü .jpg, .png veya belki .gif formatında saklanmalıdır
JPEG, en iyi şeffaflığa ihtiyacınız olmayan genel destinasyonların fotoğrafları ve görüntüleri için kullanılır. Kolayca sıkıştırabilir ve web için uygun daha küçük bir dosya boyutu alabilirsiniz.
PNG genellikle daha büyük dosya boyutları üretir, bu nedenle yalnızca şeffaflık gerektiren görüntüleriniz varsa kullanılabilir.
GIF daha nadiren kullanılır. Sınırlı bir renk aralığına sahiptirler, bu nedenle yalnızca çok basit görüntüler için kullanılabilir, ancak küçük dosya boyutları üretebilir.
, şimdi resimden ‘ağır’ ile ilgilenelim. Görüntüleri mümkün olduğunca hızlı ve yüklemek için sıkıştırmak istiyoruz. Amaç, dosya boyutunu azaltmaktır. Her resim için sihirli bir sayı yoktur, çünkü nasıl kullanılacağına bağlıdır. Kahramanlarda veya vites pankartlarında kullanılan görüntüler daha büyük olacak, ancak birkaç resminiz varsa her görüntüyü 100KB veya daha azına indirmeyi hedefliyorum. Küçük resimler, logolar vb. İçin kullanılacak küçük görüntüler çok daha küçük olacaktır. Örneğin, bu blogun üst kısmındaki logo 3.8 kb’dir.
Sıkıştırma ile kalitede hafif bir azalma olabilir, bu nedenle kalite ve dosya boyutu arasında bir denge arıyorsunuz. Ama her zaman hatırlayın: Dosya boyutu ne kadar küçük olursa, açık süre o kadar hızlı olur. Görüntüleri sıkıştırma uygulaması
Photoshop – Web için Kaydet seçeneğini kullandığınızdan emin olun
Gimp
ImageOptim (Mac)
Çevrimiçi araçlar, Photoshop veya GIMP gibi profesyonel görüntü optimizasyon araçlarını kullanın Gerçekten de görüntünüzü yönetmenin ve web için hazırlamanın çok etkili bir yoludur: ancak bu aracın öğrenme eğrisi bazen çok yorucu olabilir.
Çoğu zaman, çevrimiçi görüntü optimizasyonuna yaslanmak en iyi ve en uygun fiyatlı seçimdir. Hayatınızın çevrimiçi resim optimizasyon aracının çoğundan yoksun olmasını kolaylaştıran WordPress eklentisi, optimize edildikten sonra görüntünüz üzerinde tam bir kontrolünüz olmamasıdır. Optimize edilmiş görüntüyü indirdikten sonra, bunları manuel olarak klasörde sıralamanız gerekir. Buna ek olarak, bazı çevrimiçi araçlar resimlerinizin sunucularında nasıl depolandığını ve ne kadar süreyle: serin değil! Resimlerinizi WordPress site medya dosyanızda optimize etmek ve kaydetmek daha doğal olurdu, değil mi? Aslında, WordPress’e yüklemeden önce boyutunu değiştirmek ve görüntünüzü sıkıştırmak daha iyidir. Öte yandan, siteniz etkinse, zaten orada olan görüntülerle uğraşmanız gerekir. Sitenizin her sayfasında yayınlanan logolar, başlıklar vb. Bu, medya kütüphanenizdeki görüntüleri, herhangi bir bağlantıya zarar vermeden optimize edilen yeni bir kitapla değiştirmenize olanak tanır. Medya kütüphanenizdeki her şeyi tek tek geçmenin gerçekçi olmadığı diğer resimler için WordPress için en iyi resim optimizasyon eklentisini görebilirsiniz. Onlardan birine daha yakından bakalım, hayal. Imagify ile daha hızlı web siteleri için daha hafif görüntüler
Bir çevrimiçi görüntü optimizasyon aracı yerine bir WordPress eklentisi seçmek size çok zaman kazandıracaktır. Kurulduktan sonra, iyi bir optimizasyon eklentisi genellikle bağımsız olarak çalışır ve manuel ayarlamalardan kaçınır. Görüntünüz yüklendiğinde optimize edilmeli ve gönderiye veya sayfaya eklemeye karar verdiğinizde her zaman hazır olmalıdır. WordPress için en eksiksiz görüntü optimizasyon eklentilerinden biri Imagey: WP Rocket’in arkasındaki aynı şirket olan WP Media tarafından geliştirildi. Yani, önbellek çözümümüzü zaten biliyor ve beğendiyseniz, Imagify’a döktüğümüz aynı sadelik ve kullanımdan şaşırmayacaksınız. Tüm JPG, PNG ve GIF dosyaları her zaman mükemmel durumda olacak ve bu araçla sayfanıza yüklenmeye hazır olacaktır! Ayrıca görüntüleri WebP formatına dönüştürebilir ve performansı geliştirebilirsiniz. Görüntü yükleme süresini büyük ölçüde etkilediğinden, bir sıkıştırma aracı önbellekleme eklentileri için mükemmel bir tamamlayıcıdır. Yükleme süresi performansınız üzerinde gerçek kontrol elde etmenize yardımcı olacak 3 görüntü sıkıştırma modu sunuyoruz. Imafy mevcut medya kitaplığını optimize edebilir veya hangi görüntülerin manuel olarak optimize edileceğini seçebilirsiniz. Müşteriler için bir site oluşturursanız veya herkesin iyi optimize edilmiş en iyi uygulamayı kullanmasını ve görüntüleri yüklemesini sağlayamayacağınız birçok kullanıcıyla bir siteniz varsa, Hayalpian, yüklendiğinde birkaç görüntünün boyutunu otomatik olarak sıkıştırarak ve değiştirerek yardımcı olabilir.
Görüntünüzü daha hızlı sıkıştırıp görüntü boyutunuzu değiştirmek için tembel yükleme, dosyaları sitenize yüklemeden önce alınması gereken önemli bir eylemdir. Ancak optimize edilmiş görüntü yüklendikten sonra ne oldu? Performans açısından hala bir artış var mı? Bazı resimleri barındırmaları gerektiğinde bile biraz daha fazla hız elde edebilir ve sayfanızı daha hızlı yükleyebilirsiniz? Kullanıcılarınızın anahtar olmasını beklemek için birkaç ekstra milisaniye tasarruf edebilecek teknikler bulmak. Web siteleri arasında keşfettiğimizde hepimizin sabırsız olma eğiliminde olduğumuzu ve ziyaret ettiğimiz sitenin gerçek yükleme süresini neredeyse hiç görmediğimizi unutmayın. Cevap, bu durumda bir: Görüntünüze yavaş bir yükleme komut dosyası uygulayın. Tembel yükleme komut dosyaları cevap tembel yükleme komut dosyasıdır. Bu, önemsiz bir kaynak olarak kabul edilen ve kullanıcının ihtiyacı olana kadar “ekranın dışında” bırakan ekranın dışına yüklenmeyi geciktiren yararlı bir tekniktir. Kullanıcı sayfayı kaydırmazsa, altta yerleştirilen görüntü yüklenmez. Birkaç popüler blog veya web sitesinde yavaş yükleme eylemi görebilirsiniz;
Örneğin, Unplash.com: Görüntü koleksiyonlarını kaydırdığınızda, orijinal yüksek çözünürlüklü fotoğraflarla değiştirilen yer tutucusunu göreceksiniz. WP tembel yük komut dosyası roketi üzerinden tembel yükleme uygulamak programlanmıştır: Kodu değiştirebiliyorsanız bunu başarmak için birkaç olası teknik vardır. Örneğin, Google’ın geliştiriciler için kılavuzu, çeşitli yöntemlerin iyi bir resmini sunar. Ancak WordPress kullandığınız için, bir eklenti kaydetmek için gelir ve resminizi koda dokunmadan yüklemenize izin verir. Örneğin, WordPress için en iyi tembel yükleme eklentilerini görebilirsiniz. Ancak, zaten WP roketini kullanıyorsanız, sizin için iyi haberlerimiz var: Önbellek eklentimiz, etkinleştirildikten sonra resminize yavaş yükleme davranışı uygulayan bir tembelload özelliği içerir. Tembel yükleme hakkında devam edin: Lazy Nasıl Yapılır WordPress üzerine görüntü yükleyin. Tembel yüklemenin nasıl çalışacağını ve mümkün olduğunca en iyi nasıl kullanılacağını öğreneceksiniz. Ve hız. Eklentimizin kullanımı kolaydır, temiz bir tasarıma sahiptir ve karmaşık bir yapılandırma işlemi gerektirmez:
