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;
12345module Uygulamanizclass Application < Rails::Applicationconfig.middleware.use Rack::Deflaterendend
– İkinci olarak nginx ayarlarımızı aşağıdaki gibi güncelleyelim.
123456789101112131415161718server {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
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.
12345678910111213141516171819class FileUploader < CarrierWave::Uploader::Baseinclude CarrierWave::RMagickversion :show doprocess :resize_to_fill => [600, 350]process :optimizeenddef optimizemanipulate! do |img|img.write(current_path){ self.quality = 80 }img.write(current_path) { self.interlace = Magick::PlaneInterlace }img = yield(img) if block_given?imgendendend
Mevcut görsellerinizi sıkıştırmak için
1for 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.
1234Rails.application.configure doconfig.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.
1 Pingback