What Will I Learn?
Wordpress, optimize the picture through our site. How to reduce the image size by opening pages faster.
- optimize image
- reduce image size
- fast pop-up pages
Requirements
https://tr.wordpress.org/plugins/ewww-image-optimizer/
Difficulty
- Intermediate
Tutorial Contents
Merhabalar, bu dersimizde wordpress sitelerimizde oldukça işimize yarayan bir eklentiden söz etmek istiyorum, eklenti sayesinde görselin görüntüsünü hiç bozmadan dosya boyutunu nasıl küçültebiliriz ve sayfamızı nasıl daha hızlı açılır hale getirebiliriz ondan söz etmek istiyorum. Bilmeliyiz ki hızlı açılan sayfalar başta ziyaretçiler olmak üzere özellikle Google için oldukça önem taşımaktadır, çünkü yavaş açılan websayfaları bulunan websitelerine kimse girmek istemez.
Muhakkak hepimiz wordpress sitelerimizde görsel kullanırız bu görsellerin bazılarının boyutu aşırı derece fazla olabilir. Hal böyle olunca sayfa da aşırı derece geç yükleneceği için bizi olumsuzluklar bekliyordur. İşte tam burada imdadımıza "EWWW Image Optimizer" isimli eklenti yetişiyor.
Dilerseniz verdiğim linkten eklentiyi indirip kurabilir, dilerseniz de wordpress sitenizin admin panelinde bulunan eklentiler>yeni ekle deyip arama çubuğuna "EWWW Image Optimizer" yazıp en başta çıkan eklentiyi kurabilirsiniz (aşağıda işaretledim)
Daha sonra panelimizde bulunan kısımda ayarlar>EWWW Image Optimizer alanına giriş yaptıktan sonra bir kaç ayar yapmamız gerekecek, burada dikkat etmemiz gereken en önemli kısım "Kayıpsız Sıkıştır" seçeneğini seçmektir. Böyle yapmamızın sebebi kaliteyi çok düşürmeden yani görseli bozmadan boyutunu düşürmektir ki bu sayede sayfamız eskiye nazaran çok daha hızlı açılacaktır.
Gelişmiş ayarlar kısmına girdikten sonra "JPG" kalite seviyesini defalarca denedim şahsen en uygun olanın 60 seviyesinde yapmanızıda sizlere öneriyorum. Tecrübe ile sabittir, bu sayede JPG formatında olan görsellerimiz hiç bozulmadan boyutları düşecektir ve daha optimizeli bir sayfa bizleri bekleyecektir.
Nasıl optimize ettiğine dilerseniz kaynak kodlarını inceleyip birde biz bakalım, bu şahane eklenti işte tam bu işe yarıyor. Üstün cacheleme sistemlerinin yanı sıra resim optimizasyonları için kesinlikle tavsiye ederim çünkü cacheleme sistemlerinden çok farklı çalışır.
Üstte gösterdiğim grafikten de anladığımız üzere sayfa açılış hızının sıralamaya tesiri oldukça fazladır. Sayfa açılış hızını azaltmak için yapılacak en iyi işlerden biride resim optimizasyonudur. WordPress’te resim optimizasyonu prosedürünü birazdan göstereceğim 2 adet eklentiden her hangi birini kullanarak basitçe oluşturulabilir.
Eklentilerden söz etmek gerekirse WordPress kategorisinde oldukça fazla bu tarz eklenti bulunmaktadır ancak sizlere önerebileceğim eklenti kesinlikle budur çünkü bunu diğerlerinden ayıran özelliği cacheleme kısmından farklı çalışmasıdır.
EWWW Image Optimizer
Öncelikle ayarlar kısmına aşağıdaki resimdeki benzeri WP Smush yazıp kırmızı dikdörtgen ile işaretlediğim image Optimization isimli görsel optimizasyon eklentisini yükleyin.
Wordpress resim optimizasyonu
Ayarlara farklı olarak ortam > EWWW Image Optimizer yolunu takip edin. Açılan ekranda aşağıda sol tarafta dikdörtgen kutu içerisine aldığım kısımda “Bulk Smash Now” butonuna tıklayın. Ben daha önceden optimize ettiğim amacıyla “Bütün resimleriniz başarı ile sıkıştırıldı.” bildirisi alıyorum. Sağ doğrultuda ise optimize edilen resimlerimin adedi (224) ve toplamda kazanılan meydan (6,6 MB) görebilirsiniz.
“Bulk Smash Now” kısmını bulup tıkladıktan sonra yaklaşık her 100 resim için 10-15 dakika sürede sıkıştırma işlemi gerçekleşir. Buradan sonra sizde yukarıdaki resimdeki gibi “All images are smushed and up to date” bildirisi aldıysanız resim optimizasyon prosedürü sonuçlanmış demektir.
işinizi fazla kolaylaştıran wordpress görsel optimizasyon eklentisi olan EWWW Image Optimizer adlı eklentiyi tanıyalım. Bu eklentinin diğer eklentiye göre bir artısı daha var. EWWW Image Optimizer eklentisi sayesinde yalnızca bölge kısmındaki resimleri optimize etmekle kalmaz aynı zamanda tema resimleri, BuddyPress, WP Symposium ve ayarlar sayfasındaki tercih ettiğimiz klasörlerdeki görsel dosyalarını da optimize eder. Hemen bu şahane eklentinin kullanım amacına bir göz atalım.
Ortam > Toplu Optimizasyon kısmına giriş yapalım gelen ekranda kutu içerisine aldığım “Optimizasyonu Başlat” butonuna tıklayarak ortam kısmındaki bütün resimleri optimize edebilirsiniz. Hem de yukarıda baksettiğim tema resimleri, BuddyPress, WP Symposium ve ayarlar sayfasındaki seçtiğimiz klasörlerdeki görsel dosyalarını da optimize etmek için mavi kutu içerisine aldığım “Tara ve Optimize Et” butonuna tıklayın.
CDN desteği barındırması bize büyük bir artı katmaktadır ve WordPress resim optimizasyon işleminden sonra şimdi de resimlerle alakalı tek başlarına çok vahim bir katkı sağlamasalarda tümünü uyguladığınız yöntem başarınızı kesinlikle büyük oranla arttırır.
İpucu 1: Görsellerde "title" ve "alt" tagını muhakkak kullanın.
Görsellerde alt tagı anahtar kelime geçirmek Google'ın yazdığınız onu hakkında görseller paylaştığınızı anlamasını sağlayacaktır. Bu da arama motorlarıda sıralamanızın yükselmesine katkı elde edecektir. Unutmayın sadece görsel paylaşmak yetmez. Arama motorlarının o resmin konu ile ilgili bulunduğunu anlayıp size o muamelede yaklaşmaktadır.
Bilinmesi gereken 2: Görsellerde uzunluk ve genişlik kodlarıyla genişlik ve yükseklik ayarı eklemeyi unutmayın!
İpucu 3: Görsel dosyanıza anahtar kelime içeren adlandırmalar yapmalısınız.
Bazı arkadaşlar şu hataya pek çok kez düşmektedirler, görsel dosyasına isim vermemektir. Alt etiketinin yanısıra görsel eklediğiniz zamanlarda kod kısmından resmin kaynağına bakmış olduğunuzda resim dosyasının adınında bulunduğunu görürsünüz. Örnek olarak birçok şahıs bir ekran görüntüsü paylaştığında bunu resim1 şeklinde siteye yükler. Resimlerinizi bu şekilde değilde anahtar kelime içeren düzgün bir isimle eklediğinizde arama motorlarına resmin mevzusuyla alakalı alt etiketinin yanında yeni bir argüman daha sunmuş olmuş olursunuz. Bu da elbette sıralamaya pozitif güç edecektir.
Wordpress üzerinden görsel boyutunu nasıl küçültürüz, sayfalarımızı nasıl hızlandırırız, ziyaretçiler için en güzel görsel sayfalarını nasıl oluşturabiliriz bugünkü dersimizde öğrendik, diğer derslerimizde çok daha farklı bilgiler ile karşınızda olacağım teşekkürler..
Posted on Utopian.io - Rewarding Open Source Contributors