Rails Google Page Speed Optimizasyon

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.

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;

module Uygulamaniz
  class Application < Rails::Application
    config.middleware.use Rack::Deflater
  end
end

module Uygulamaniz

class Application < Rails::Application

config.middleware.use Rack::Deflater

end

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

server {
  server_name site-adi.com;
  server_name www.site-adi.com;
  passenger_enabled on;
  passenger_app_env production;
  root /home/site/public;
  gzip on;
  gzip_http_version 1.1;
  gzip_vary on;
  gzip_comp_level 6;
  gzip_proxied any;
  gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript text/xml application/xml application/rss+xml application/atom+xml application/rdf+xml;
  location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|js|css|woff)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
  }
}

server {

server_name site-adi.com;

server_name www.site-adi.com;

passenger_enabled on;

passenger_app_env production;

root /home/site/public;

gzip on;

gzip_http_version 1.1;

gzip_vary on;

gzip_comp_level 6;

gzip_proxied any;

gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript text/xml application/xml application/rss+xml application/atom+xml application/rdf+xml;

location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|js|css|woff)$ {

expires 1M;

access_log off;

add_header Cache-Control "public";

}

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

views/layouts/application.slim
Ruby

=javascript_include_tag 'application', async: Rails.env.production?

1

=javascript_include_tag 'application', async: Rails.env.production?

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.

class FileUploader < CarrierWave::Uploader::Base
  include CarrierWave::RMagick

  version :show do
    process :resize_to_fill => [600, 350]
    process :optimize
  end


  def optimize
    manipulate! do |img|
      img.write(current_path){ self.quality = 80 }
      img.write(current_path) { self.interlace = Magick::PlaneInterlace }
      img = yield(img) if block_given?
      img
    end
  end

end

class FileUploader < CarrierWave::Uploader::Base

include CarrierWave::RMagick

version :show do

process :resize_to_fill => [600, 350]

process :optimize

end

def optimize

manipulate! do |img|

img.write(current_path){ self.quality = 80 }

img.write(current_path) { self.interlace = Magick::PlaneInterlace }

img = yield(img) if block_given?

img

end

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

for i in ./*; do  for j in $i/*.png; do convert -strip -interlace Plane -quality 80 $j $j; done; done

1	for i in ./; do for j in $i/.png; do convert -strip -interlace Plane -quality 80 $j $j; done; done

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.

Rails.application.configure do
  config.static_cache_control = "public, s-maxage=31536000, maxage=15552000"
  config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
end

Rails.application.configure do

config.static_cache_control = "public, s-maxage=31536000, maxage=15552000"

config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'

end

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.

Emre K.

Blog

Rails Google Page Speed Optimizasyon

emrekurt

0 Comments

Add yours

1 Pingback

Bir cevap yazın Cevabı iptal et

Kategoriler

Etiketler

Faydalı

Ara

Arşivler