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..

 

 

 

 

 

 

 

 

Apple safari tarayıcıda telefon numaralarının şekillenmesini engellemek

Merhaba arkadaşlar. (Uzun zamandır merhaba demiyorum, özlemişimm)

iPhone akıllı cep telefonları internet sitesindeki  telefon numaralarını algılıyor, şekillendiriyor ve bizim yapımızı bozuyor.

İnternetde arama yaptığımda aşağıdaki meta tag’ın olayı çözdüğünü gördüm.

Bu tag Apple’a özel bir meta tag. (Apple’a özgün diğer taglara apple meta tag ulaşabilirsiniz.)

 

Sağlıcakla kalın.

 

 

iOS ~ iPhone ve iPad Simulator

Merhaba arkadaşlar,

Teknoloji çok hızlı geliştiği için yaptığımız işlerin kontrolu çok zorlaşıyor. Geçenlerde yaptığım bir iş iPhone6Plus da sorunlu çıkıyordu ve nerdeyse sinirden ki gidip alacaktım o telefonu 🙂

Herneyse sonra Macbook yani macOS  bilgisayarlarda Xcode programı var ve bu programın bu cihazlar için simulatoru var, denedim gayet güzel çalışıyorlar. Okumaya devam…

HTML5 placeholder renk değiştirme

Ne güzel hayatımıza placeholder(bu bir attribute’dir.) girdi ve aşağıdaki aptal kodu yazmıyoruz.

Placeholder attribute kullanımı

Bu attr’yi kullandığımızda verdiğimiz, renk değerini ne verirsel verelim opacity değerini düşürüyor bunu engellemek için aşağıdaki tanımlamayı yapmamız gerekiyor.

 

Burada gördüğünüz gibi placeholder attribute içine yazılan değere opacity değeri veriyor.

Firefox ve IE ailesinde (sadece IE10) opacity ile düzeltebiliyoruz ama Chrome koduna renk kodunu yazmadan düzeltme yapmıyor. // Sebebini anlamadım

Placeholder Internet Explorer10 ve altında çalışmıyor,r bunun için internetten placeholder.js araması yapıp çalışır vaziyete getirebilirsiniz. Ufak bir not

 

Kaynaklar

  • http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
  • http://www.paulund.co.uk/html5-placeholder

 

Tüm kodlar :

Demo / Ön izleme ->  http://calismalar.aycan.net/placeHolder/