Merhaba,

Bu yazımda google pagespeed’i 26/100 olan bir rails uygulamasını 100/100 nasıl çıkardığımı anlatacağım. Hemen başlayalım. Temel olarak html kısmında h1,h2 vs. taglarının span’lar vs. bunların tam olduğunu, düzgünce kodlandığını kabul ediyorum.

  1. gzip sıkıştırması
    Kulanıcının erişeceği tüm dosyalar için gzip sıkıştırmasını aktive edelim.
    – İlk olarak Rack::Deflater ile rails uygulamamız içinde sıkıştırmayı uygulayalım. Bunun için yapmamız gereken şu;

    – İkinci olarak nginx ayarlarımızı aşağıdaki gibi güncelleyelim.

     
  2. Sunucu Yanıt Süresi Optimizasyonu
    İnternet sitenizin yanıt süresinin 200 ms’nin üzerinde olmamasına dikkat edin. Bunun için şunlar iyi ayarlanmalıdır;
    – Uygulama mantığını ve sunucudan gelen yanıtı analiz edin. Bu aslında başlı başına ayrı bir konu.
    – Sayfa Hızı ve geri yanıt süresini görmek için Rack Mini Profiler gemini kullanabilirsiniz.
    – 400 Bad Request hatası olmamalı, buna dikkat edin.
    – Görsel dosyalarınızı CDN servislerinde barındırın. Cloudinary öneririm.
  3. Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın
    Rails zaten dosyaları minify ediyor, bu nedenle sıkıştırma gibi bir ihtiyacımız yok. Ancak <head> </head> tagları içinde çağırdığımız zaman sayfanın yüklenmesi için önce js ve css dosyalarının yüklenmesi bekleniyor. Bu nedenle js dosyalarını sayfanın en altına. Hatta css dosyalarını da sayfanın en altına noscript tagları arasına alarak ve js ile page on load olduktan sonra yüklenmesini sağlayabilirsiniz. Detayveyaheader dosyalarını asenkron olarak yükletebilirsiniz. Örneğin temel dosyalarınızı asenkron olarak yükle dediğinizde sayfa açılır açılmaz ilk onları yükletip daha sonra o temel dosyalarınızdan extend ettiğiniz kendi kodlarınızı normal olarak footerda yükletebilirsiniz. Bunun için

     
  4. Sunucuda Barındırılan Görsellerin Optimizasyonu
    Ben görsel upload işleminde CarrierWave ve RMagick kullandığım için onlar üzerinden anlatacağım. Uploader dosya(lar)mıza optimize fonksiyonunu ekleyip her version için görseli optimize fonksiyonunda işleyelim.

    Mevcut görsellerinizi sıkıştırmak için

     
  5. Ayrı bir web sunucusu kullanmayanlar için
    Nginx kullanmanızı öneririm ancak kullanmıyorsanız assetleri cachelemek için şu işinizi görür.

     
  6.  Sabit görsellerin sıkıştırılması
    css veya html içeriğinde kullandığınız sabit görsel dosyalarınızı tinypng.com gibi sitelerde kayıpsız sıkıştırabilirsiniz.