SUNIPEYK

[ Okuma süresi tahmini 3 dakikadır ]

Sitelerimizde CSS stil dosyası ve/veya dosyaları kullanıyoruz. Bu dosyalar Google Pagespeed insights ölçümünde optimizasyon değerlerimize etki etmektedir.
Normal bir CSS dosyasını

<link rel="stylesheet" href="http://www.siteniz.com/style.css"/>

şeklinde gösteririz.

Link rel preload

Bu link rel stylesheet kısmı optimizasyon değerimizi düşürebiliyor. İşte bunu kodu değiştirebiliriz.
Yeni CSS stylesheet kodumuz şu şekilde;

<link rel="preload" href="http://www.siteniz.com/style.css" as="style" onload="this.rel='stylesheet'/>

ve

 <link rel="stylesheet" href="http://www.siteniz.com/style.css"/> 

Çoğu tarayıcıların yeni versiyonları Link rel preload ile CSS stil dosya yönlendirmesini destekliyor. Detayları Can i use sayfasından takip edebilirsiniz. Ancak bu sayfa pek güncel sayılmaz. Yaptığım testlerde Microsft Edge tarayıcıda da çalıştı. Yani sorun yok.
Opera mini tarayıcıya çalışmıyor. Ancak Opera touch mobil tarayıcıda sorun yok, çalışıyor.
Bu kod bir tek Firefox tarayıcıda çalışmıyor. Daha doğrusu varsayılan tanımlarında yok.

Link rel preload Firefox ayarı

Kodun Firefox tarayıcınızda da çalışmasını istiyorsanız Firefox’un config dosyasına elle müdahele etmeniz gerekiyor.
Tarayıcınızdan about:config ile giriş yapın. Network.preload satırını tıklayın.
modified boolean true
haline getirdiğinizde işlem tamamlanmış oluyor. Böylece Firefox tarayıcınızda Link rel preload kodunu işleyebiliyor.
Aslında Firefox 56. sürümünde bu özelliği eklemiş. Ancak daha sonra ön tanımını kaldırmış. Halen de eklemedi.
Bir başka ilginç tarafı ise Firefox’un iOS tarayıcısında sorun yok ve çalışıyor.
Config elle müdahele masaüstü için gerekiyor. (Hem Windows hem Mac için)

Google Pagespeed Insights Değeri

Bu sitenin Pagespeed insights değeri mobil için 94, masaüstü için 96 idi. Yeni Link rel preload CSS stylesheet kodu ile her iki değer de 99 oldu.
Tabii 90 küsürlere kadar gelmek için geçerli html ve css kodlamasına önem vermek gerekiyor.
Bu arada sitede halen google adsense reklamları yayınlanıyor. Ancak google analytics kodlarını kaldırdım. Bir süre sonra adsense kodlarını da kaldıracağım bakalım 100 tam puan olacak mı?
Ne dersiniz?

NOT: Evet, Google adsense kodlarını da kaldırınca mobil optimizasyon değeri 100 ve masaüstü optimizasyon değeri de 100 oldu.