Şuan anlatılacak 2 yöntemimiz ise ;
1-Resimleri Optimize ( Bu işlemi toplu olarak yapma yöntemide anlatılacaktır.Çok etkili bir yöntemdir.)
2-Oluşturmayı Önleyen Javascript ve Css Kodlarını Ekranın Üst Kısmındaki İçerikten Kaldırma ( Bu işlem benim için çok önemli olmasada yoğun istek üzerine anlatılacaktır.)
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.
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.)
Ş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
Bu 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. 🙂 )
Açılan Sayfada Sing Up diyoruz ve mail,parola oluşturuyoruz.
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.
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 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. kodun geleceği alan , bu komutlar arasına ekliyoruz.
<script>
document.addEventListener("DOMContentLoaded", function() {setTimeout('document.getElementById("koddostuyuk").style.display="none"', 1000);});
</script>
Kodda bulunan href=ht tp://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 yazıyı paylaşmak istediğinizde kaynak belirtmenizdir.Ayrıca ilgili yazımdan yorum atarak sorularınızı sorabilirsiniz.
KAYNAK: http://ack10.com/wordpress-site-hizlandirma-resim-optimize/
