Google PageSpeed Insights puanlarını yükseltmek

Merhaba arkadaşlar,

Google’ın PageSpeed aracında artık yeşil puanları görmek biraz zorlaştı, bunun sebebi yapacağımız işlemlerin çeşitli alanlarda olması.

 

|Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın

(bkz: google oluşturmayı önleyen JavaScript…)
Burada google

1 ) .css ve .js dosyalarımızı </html> kapanış tagı altına koymamızı istiyor. (Css dosyasını html tagnın altına koyduğumuzda önce komple html yükleniyor ve sonra style alıyor // Berbat bir durum)

2 ) .js dosyalarımıza async tagını eklememizi istiyor.

3 ) Tüm css’leri tek css’de, tüm js dosyalarını tek js dosyasında toplamamızı istiyor.

Örnek :

|Kaynakları Küçültme (HTML, CSS ve JavaScript)

(bkz: google kaynakları küçültme)

Burada HTML, CSS ve Javascript dosyalarını sıkıştırıp küçülteceğiz.

CSS‘i küçültürken csscompressor.com sitesini kulladım (küçültme oranını veriyor).

JS‘i küçültürken jscompress.com sitesini kullandım (küçültme oranını veriyor).

HTML küçültürken ise PHP script’imdeki kodların başına (şükür teknoloji gelişti) stackoverflow‘daki aşağıdaki kodu ekledim.

|Resimleri optimize edin

(bkz: google resimleri optimize edin)

Ben resim optimizelerin de daima tinypng.com‘u kullanırım

|Sıkıştırmayı Etkinleştirme

(bkz: google sıkıştırmayı etkinleştirin)

En cafcaflı kısmı ve en çok sevdiğim kısmı bu oldu. Linux bilgimi biraz tazelemiş oldum 🙂

Eğer apache kullanıyorsanız mod_deflate modülünü aktifleştirmeniz gerekmektedir. Yabancı kaynakları anlamata zorluk çekiyorsanız Doğan Ergezer konuyu burada anlatmış  bkz :   Apache Hızlandırma mod_deflate Gzip Kullanımı

Bu kurumulu yaptım ama şöyle bir uyarı aldım

Bu hatayı araştırırken tekrar stackoverflow’dan bu çözümü buldum ama yapamadım ve Servis sağlayıcım Data TR hızlıca çözüme ulaştırdı sağolsun varolsunlar 🙂

Mod_deflate modülü kuruldumu diye bu adresden kontrol ettim  “aycan.net is Compressed” uyarısını görünce sununcu tarafı tamamdır.

img

Bu işlem bittikten sonra hemen sıkıştırılacak dosyaları .htaccess ‘de belirtiyoruz yapıyoruz.

Aşağıdaki kodları .htaccess dosyanızın en altına yapıştırıyoruz

Bu şekilde 329Kb ‘lık css dosyası Chrome -> Network sekmesinden 50Kb olarak, 107KB’lık JS dosyası 37.9KB olarak download oluyor. // Canvar birşey

gzip

Tarayıcı Önbelleğine Alma Özelliğinden Yararlanma

Son işlemimizide .htaccess dosyasından yapacağız. .htaccess dosyasının en altına aşağıdaki kodları ekliyoruz.

Ve işlemimiz tamamlandı.

google-speed

Bu yazının altına sizlerden yeşili yeşilli googlespeed ekran görüntüleri bekliyorum.

 

Kalın sağlıcakla..

 

 

 

 

 

 

 

 

Readmore.Js – Devamını oku eklentisi

Merhaba arkadaşlar, geçen bir işte kullandığımız güzel bir eklenti.

See the Pen Readmore.js by Aycan BÜLBÜL (@AycanB) on CodePen.

Kullanımı gayet basit uzayan yazıları kesmek için kullanılan küçük ama kullanışlı bir eklentidir.

Standart çalıştırma kodunu aşağıdaki gibi tanımlamamız mümkün;

 

Readmore.js : http://jedfoster.com/Readmore.js/

Resimleri oran orantısını bozmadan bir alan içinde ortalamak / jQuery img load

Merhaba arkadaşlar,

Birkaç yıl olmuştur bu kodu yazalı ama arada gidip alıp kullanıyorum, sizinle de paylaşmak istedim umarım işinize yarar. Buraya tıklayarak aşağıdaki kodun ne işe yaradığını anlayabilirsiniz // Sayfada büyük resim olduğu için yüklenmesi uzun sürebilir.

Burada asıl önemli olan kısım resmin yüklenip yüklenmediğini kontrol etmek (jquery img load). Burada kullandığım resim yüklenme kodunu stackoverflow‘dan buldum ( Nick Craver )

 

Resimlerin kesin yüklendiğini anladıktan sonra, resmin orjinal boyutlarını alıyorum, ondan sonra resmi kapsayan element’in boyutlarını alıp oran / orantı yapıp resme yeni boyutunu ve pozisyonunu veriyorum. Burada img’i kapsayan elementin width, height ve overflow:hiden değerinin olması gerekir.

 

 

Jade Nedir, Nasıl Kullanılır?

Jade Nedir?

Jade kolay html yazımını sağlayan ve tag sonlarını kapatmayı unutma ya da hata yapma payını en aza indirgeyen bir node.js eklentisidir. Aynı zamanda html yazım hızınızı da arttırmakta. Tek yapmanız gereken Tab yapısına göre yazıma dikkat etmeniz. Gerisini jade sizin için yapacaktır. Bir örnek üzerinde inceleyecek olursak;

jade1

Jade Nasıl Kurulur?

Jade’ yi kurup kullanmanız için 2-3 yöntem mevcuttur.

Birinci Yöntem (Tavsiyem 2. yöntem, bu yöntem biraz karışık);

nodejs ‘yi indirerek bilgisayarınıza kurmanız gerekmektedir. Node’ un basit kurulumunu yaptıktan sonra masa üstüne herhangi bir simge atmadığından program aramasından “Node.js command prompt” yazıp bularak çalıştırmanız gerekmektedir;

node

Daha sonra;

kurulum1

Açılan pencerede ‘C:/’ yapısına çıkmak için konsola .

yazıyoruz.

Nodejs’mizin kurulu olduğu dosya yapısına girmek için ise

 komutunu yazıyoruz. Artık nodejs nin kurulu olduğu dosyadayız ve Jade kurulumunu yapmamız için  hiç bir sorun yok.

Konsolumuza

veya

yazarak kurulumu başlatıyoruz. Ortalama bilgisayarınızın hızına göre 10-60 saniye sürüyor.

Yükleme tamamlandıktan sonra ekrana jade ile ilgili sürüm bilgileri ve dosya bilgileri gelmektedir.

Ardından konsolumuz nodejs klasörünü gösteriyorken nmp start komutunu çalıştırıyor ve deneme.jade dosyamıza jade kodlarımızı bir editör yardımı ile oluşturuyoruz. örnek kodları yukarıda belirtmiştim. Oluşturduğumuz deneme.jade dosyamızı deneme.html şekline çevirmek için konsolumuzu

yazmamız yeterli olacaktır. Html çıktısı deneme.jade dosyamızın yanına çıktı olarak kaydedilecek.

 

Örnek kurulumu bu videodan izlemeniz mümkün olacaktır.

 

Şimdi jade dosyamızı oluştumak için bir txt dosyası açıp uzantısını .jade olarak değiştiriyoruz.
jade2

 

İkinci Yöntem;

Önerdiğim yöntem budur çünkü hiç bir konsolla uğraşmıyor, node.js’yi de kurmanıza gerek kalmıyor ve daha kullanışlı ve basit yapıda. Bu siteden Prepros adlı compiler programımızı indiriyoruz. Bu program .jade uzuntalı bütün dosyalarımızı html çıktısı olarak veriyor. Ayrıca sass, less gibi dosyalarınızı da compile edebilmektedir. Ücretsiz sürümü mevcuttur.

İndirip kurulumu yaptıktan sonra karşımıza çıkan ekranda

jade3

+ADD PROJECT butonundan daha önce masa üstümüzde oluşturduğumuz deneme klasörünü seçiyoruz. İçerisinde bulunan .jade uzantılı dosyaları otomatik olarak dönüştürebilmesi için açılan ekranda anaSayfa.jade dosyamızı seçip sağ alt köşedeki Process File butonuna tıklıyoruz ve bütün kurulum bu kadar. Artık kullandığınız txt editöründen projenizi her kaydettiğinizde otomatik olarak html dosyalarınızı değiştirecektir.

jade4

Jade Nasıl Kullanılır?

Örnek yazım şeklini en üstteki görselde paylaşmıştım fakat bazı güzelliklerinden bahsetmeye devam edelim;

Php de olduğu gibi header ve footer sayfalarını farklı jade’lere yazarak diğer sayfalarınızın içine çağırmanız mümkün. Yani tek bir header.jade dosyası üzerinde yapacağınız değişiklik diğer html sayfalarınızda bulunan header bölümlerine otomatik olarak yansıtılacaktır. Böylelikle projenizde bulunan onlarca belki yüzlerce sayfadaki headerı değiştirmek zorunda değilsiniz. Aynı durum footer ve javascript dosyaları içinde geçerli.

 

Örnek olarak gösterecek olursak;

Metalarımızın ve header’ımızın bulunacağı ayrı ayrı iki farklı .jade dosyası hazırlayalım.

(meta.jade)

meta

Metalarımızı şekildeki gibi jade yazım dilini kullanarak oluşturalım.

(header.jade)

header

Metalarımızı oluşturduğumuz gibi header’ımızıda basit bir yapıda oluşturduk. Burada dikkat etmeniz gereken kısım tab yapısına dikkat etmeniz olacaktır. aksi takdirde prepros programımız sağ alt köşede kırmızı yazılı hata ekranını    gösterecektir. Doğru yazım uyguladıysanız ctrl+s kombinasyonu ile dosyanızı kaydettiğinizde yeşil yazılı ekran doğru yaptığınızı gösterecektir. Daha sonra 2 dosyamızı da çağıracağımız asıl sayfamızı yapacak olursak;

(anaSayfa.jade)

anasayfa

include meta.jade ve include header.jade komutlarıyla istediğimiz konumlara meta ve header dosyalarımızı dahil ettik. Bu sayfanın çıktısı ise bize;

(anaSayfa.html)

html

3 farklı jade dosyasıyla hazırladığımız ana sayfamızın çıktısı şekildeki gibidir. Diğer kullanmak istediğiniz fonksiyonlar için ve daha geniş çaplı kullanımlar için jade‘nin sitesini ziyaret edebilirsiniz.

 

 

Kalın Sağlıcakla.

jQueryEasing ile .animate() efektleri

Merhaba arkadaşlar, jQuery’nin verdiği swing , linear artık güzel görünmüyor o yüzden sık kullandığım ama fırsat bulamadığım bir kod parçasını paylaşacağım.

Öncelikle yazarına teşekkür edelim :  gdsmith

jquery.easing.js  jQuery .animate() fonskiyonu biraz renklendirmek diyebiliriz ancak html5 de de bu animate’leri verebiliyoruz.

Js kodlarda select’den gelen veriyi çağırmak ve sürekli tetiklemek için birkaç şey yaptım kafanız karışmasın, dikkatli incelerseniz anlarsınız.

 

Yarın birgün rastgele animate efekt isteyeceksiniz o yüzden dizi halinedede veriyorum efektleri

 

Random seçtirme

 

 

Ön izleme

See the Pen jQueryEasing ile .animate() efektleri ~ www.aycan.net by Aycan BÜLBÜL (@AycanB) on CodePen.

 Aycan.net Ön izleme -> http://calismalar.aycan.net/jQueryEasing/