A huge collection of 3400+ free website templates JAR theme com WP themes and more at the biggest community-driven free web design site
Ana Sayfa / SEO / WordPress %100 Site Hızlandırma-Resim Optimize

WordPress %100 Site Hızlandırma-Resim Optimize

Sitenizin yavaşlığından bıkmış usanmış durumda iseniz bu yazımda anlatacağım yollarla WordPress sitenizi %100 hızlandırmış olacaksınız.Öncelikle bu yazıda hıza etki eden 2 yöntemi anlatacağım.Diğer ve daha basit yöntemler için daha önceden yazılmış Site Hızını Arttırmanın Yolları adlı yazımı ” bu  konuda epeyi eksiğim hız testlerinde puanlarım çok düşük çıkıyor” diyorsanız başlangıç seviyesi olarak okuyunuz.Site hızınız seo açısından çok önemli bir etkendir.Arama motorlarında üst sıralara çıkmak istiyorsanız buyrun hızlanalım.

Şuan anlatılacak 2 yöntemimiz ise ;

Resimleri Optimize


Hıza etki eden en önemli sebep sayfamızın boyutudur diyebilirim.Boyutu etkileyen unsurlar ise Resim,Script(JS),Css,Html dosya boyutlarıdır.
Hem anasayfanın hem de içerik sayfalarında bulunan tüm görsellerinizin boyutu düşük kilobayt (Kb) değerlerinde bulunması gerekir.
Page Total Size değerinizi en iyi şekilde öğrenebilmek için Pingdom aracını kullabilirsiniz. (Test from:Stockholm,Sweden olsun.) Sitenizi taratmanız sonucunda Page Size değerinizi öğrenecek ve bu değerin boyutu etkileyen unsurlar arasındaki dağılımını aşşağıdan göreceksiniz.
pingdom sayfa boyutu

  • Sitenize ekleyeceğiniz görselleri .jpg uzantısında olmasına özen gösterin.( Logo,arkaplan veya önemli görselleriniz Png olabilir.)
  • Sitenize görselleri eklemeden önce boyut tasarrufu edebilmek için mutlaka optimize edilmesi gerekir.Bu boyutlandırma işlemi Photoshop kullanıyorsanız “Dosya” menüsü altından “Web için kaydet” özelliği ile yapabilirsiniz.
    Ek olarak online görsel optimize sitelerini kullanabilirsiniz.
    Bunlardan birkaçı;
     PunyPng ( Bir seferde max. 500kb olan 20 adet resimi optimize edebilirsiniz. )
    Optimizilla ( Boyutlandırılmış görseli kayıt ederken adına -min ekler.)
    Compressjpeg ( Sadece .jpg .jpeg uzantılı resimler için )
  • Bu işlemi yapabilmek adına wordpress eklentileride var ama onlarla olan ilişkimi birazdan anlatacağım.

Tabi birde benimle aynı sorunu yaşamış arkadaşlar olabilir.Benim sorunum tüm resimlerimi png uzantısında, boyutlarında hiç küçültme yapmadan siteme atmış olmamdı. Gtmetrix,googlepagespeed,pingdom gibi hız araçlarında puanlarım 90 lara gelmesine rağmen sitem çok yavaş açılmaktaydı.Buna sebep olan tek şey ise  Total Page Size değerimin 3 Mb olmasıydı. ( Bu değerin 2.9 Mb’ sini resimlerim oluşturuyordu. Şimdi ise yukarda gördüğünüz gibi sadece 533Kb yer tutmakta görsellerim.)

wordpress resim optimize
Gtmetrix’ten alıntı: Optimize Öncesi

Şuan ki değerimin 900 KB de olmasıyla birlikte sitem eskiye göre inanılmaz hızlandı.Bu hızlanmanın sonucunda sitem çok yavaşken puanım 90 larda olmasında rağmen hızlandıktan sonra puanımda düşüşlerde oldu. ( Demem o ki hız araçlarındaki skorlara çoook fazla takılmanıza gerek yoktur.) Bu düşüşlerin sebebi ise dışarıdan çağırılan script kodlarının ( facebook beğeni sayfası,gravatarlar,google analytic kodu vs.) olmasıdır. Bu durum gayet olağan ve sorun edilecek bir yavaşlatmaya sebep olmaz.

Şimdi ise ben bu hatamı ( Page Total-Resim Boyutunu ) ücretsiz olarak nasıl düzelttiğim konusuna gelelim.Öncelikle bu işlem için birçok araştırma yaptım ve birçok eklentiyi kurup denedim.
Onlarla ilgili tecrübem;

  1. Smush Image Compression and OptimizationÇok övülen bir eklenti olmasına rağmen ücretsiz versiyonunda 50 adet görsel optimize ediyor.Ücretli versiyonu da oldukça pahalı.
  2. EWWW Image Optimizer: Bu eklentide ücretli apı key istemektedir.
  3. Compress JPEG & PNG images: Bu eklentide para vermediğiniz sürece çok az görsel boyutlandırabilirsiniz.
  4. Imsanity: Sadece jpg boyutlandırıyordu.Benim sıkıntım ise .png uzantılı görsellerdi.O yüzden nasıl çalıştığını bile göremedim.
  5. ShortPixel Image Optimizer: Bu eklentide ücretsiz versiyonunda az sayıda görseli küçültüyordu.Yalnız bu eklentiyi beğimiş fiyatlarınıda uygun bulmuş almayı düşünürken birde baktım ki Paypal ( Türkiye pazarından çekilmiş ) üzerinden satış yapıyor,vazgeçtim.

Sonuç olarak bu eklentilerden edindiğim tecrübe bütçeniz sorunlu değil ise ilk eklenti işinizi görür zaten.
Şimdi ise derdimizin devası olan yola geldik.

Kraken.io Image Optimizer

wordpress resim boyutlandırmaBu eklenti ile 100MB görseli ( diğerlerine göre oldukça fazla ) ücretsiz ve toplu bir şekilde optimize edeceğiz.Boyutlandırılmış resimlerin isimleride aynı olacağı için direk Ftp’den Uploads klasörümüze atacağız.
Eğerki 100MB yetersiz diyorsanız, diğer eklentilere göre oldukça ucuz fiyatlardan ( mesela 500MB=5$ , 2GB=9$ ,5GB=19$> Yıllık alımlarda 2 ay ücretsiz )
Öncelikle işimizi gören eklentiyi WordPress Admin Panelinden > Eklentiler > Yeni Ekle dediğimizde açılan sayfada eklenti arama çubuğuna Kraken.io Image Optimezer yazarak aratıyor görselde ki gibi eklentiyi Hemen Yükle>Ardından Etkinleştir diyoruz.
Admin Paneli Ayarlar menüsü altından Kraken.io sekmesine tıklıyoruz.Açılan sayfada bizden Apı key alınması istenecek görselde kraken.io linkine tıklayınız. ( Sitesine yönleneceğiz ve işimizi oradan halledeceğiz uzun uğraş sonucu bulduğum çözümle minnet borcumu eklentiyi kurdurarak ve tanıtarak ödüyorum. 🙂 )
kraken.io
Açılan Sayfada Sing Up diyoruz ve mail,parola oluşturuyoruz.
kraken.io kurulum
Sitemize kayıt olduk mailden üyeliğimizi aktifleştirelim.;Panelimizde solda bulunan menüden Web Interface Pro kısmına gelelim.Bu sayfayı görsel aracılığı ile açıklayalım.
wordpress resim küçültme
File Uploader: Görselleri Ftpden Pc’nize aktardıysanız bilgisayarınızdan resimleri küçültme içindir.
Url Paster: Resimlerinizin url adreslerini yazarak boyutlandırabilirsiniz.
Page Cruncher: Direk web adresinizi yazarsanız açılış sayfanızda bulunan tüm görselleri boyutlandırır.
Lossy: %60 oranında tasarruf ederek kayıplı küçültme işlemi
Lossless: Piksel kaybı yaşamadan küçültme
Expert: Jpj Png kalitesini 1-100 aralığında değerler vererek, meta verilerini koruyarak küçültme işlemindeki ayarlamaları siz belirleyebiliyorsunuz.
Strategy: Bu kısımdan resimlerinizin genişlik ve uzunluk ayarlarında da değişiklik yapabiliyorsunuz.

Alttaki butonlardan görsellerinizi .zip dosyası,dropbox,google drive,box aracılığı ile atabiliyorsunuz.Aynı şekilde resim optimize işi bittikten sonra da bu yollarla toplu kayıt edebiliyorsunuz.

Benim size eklenti ve sitesi hakkında anlatacaklarım bu kadar diğer ekstra işlemler için siz biraz kurcalayarak bilgiler edinebilirsiniz. Dediğim gibi bu bu yöntemle 2.9MB olan görsellerimi 533Kb boyutuna kadar indirdim ve wordpress sitemi net bir şekilde hızlandırdım.

Oluşturmayı Önleyen Javascript ve Css Kodlarını Ekranın Üst Kısmındaki İçerikten Kaldırma

Bu işlemde bize anlatılmak istenen javascript,css çağrımında bulunan kodlarınızı header.php dosyasından kaldır ve footer.php dosyasına ekle.Js,css dosyalarının daha geç açılması demek sitemizin ilk birkaç sn bozuk görünümde açılması demektir.Biz bu işlemi sayflarımızın açılışına 3-5 Sn’lik bekleyiniz scripti ekleyerek.Bu süre zarfında js dosyalarımızın footer.php de etkin olmasına sağlayacağız.

WordPress sisteminde bu çağrımı yerine getiren bir kod mevcut

Header.php dosyamızı açıp yukarıda ki kodu CTRL+F fonksiyonunu kullanarak aratalım.Şimdi bu kodu CTRL+S fonksiyonu ile oradan alıp footer.php dosyamızda  </footer> satırının üstüne yapıştırıyor ve kayıt edip çıkıyoruz.

Header.php dosyamızdan kestiğimiz kodun yerine ise aşşağıdaki kodu ekleyerek sitemizin sayfa açılışlarına 3-5sn bekleme .gif’i ekliyoruz. <Head> kodun geleceği alan </Head> , bu komutlar arasına ekliyoruz.

Kodda bulunan href=”http://ack10.com/” ve src=”http://ack10.com/wp-content/uploads/2016/12/loading.gif” kısımlarını .gif dosyanızı ftpye attıktan sonra kendi sitenize göre düzenleyebilirsiniz.İsteğiniz doğrultusunda ise google görsel aramadan loading araması yaparak farklı gif dosyalarınıda upload edebilirsiniz.

Test sonucunda Css Yayınının Optimize edilmesi istenen dosyalar için;
csscompressor.com : CSS Compressor
mintik.com : Online css compressor.
Online css optimize araçlarını kullanarak tekrar sunucunuza yükleyebilirsiniz. ( Her ihtimale karşı orjinal dosyalarınızı yedekleyiniz. )

Ve anlatımızın sonuna gelmiş bulunmaktayız ilk yöntem tüm sitelerin hızı için gerekli ikinci yöntem çoğu sitenin pek ilgilenmediği ama çok sorulan yöntemdi.İlk yöntemin araştırılması için gerçekten çok vakit harcadım sizden isteğim Aşşağıdaki sosyal ağ butonlarından yazımı paylaşmanız ve siteme abone olmanızdır.

Karşılaştığınız sorun ve düşünceleriniz içinde yorumlarınızı bekliyorum.

Kalın Sağlıcakla…

 


BÜLTENİMİZE ABONE OLABİLİRSİNİZ

Yeni,Kaliteli ve Özgün İçerikler Hakkında İlk Siz Haberdar Olup Bilgilendirme Mail-i Alabilirsiniz.

Hakkımda ACK

ACK
23 yaşında, internetin her alanına küçük yaşlardan gelen bir ilgisi söz konusu, konu fark etmeksizin araştırmayı, güncel bilgileri takip etmeyi ,bilgi paylaşımını seven , iktisat 4. sınıf öğrencisi.

Okumalısın !

WORDPRESS ALT ETKİKETİ

WordPress Görsele Alt Etiketi Ekleme

Çoğunluğumuzun amacı sitelerimizi arama motorlarına sevdirerek üst sıralarda yer almaktır.Rekabetin üst düzey olduğu web çağında …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


BÜLTENİMİZE ABONE OLABİLİRSİNİZ !

Yeni,Kaliteli ve Özgün İçerikler Hakkında İlk Siz Haberdar Olup Bilgilendirme Mail-i Alabilirsiniz.