3 Tips to Speed Up the Page Loads in Rails App

Objective


To find three low hanging fruits and quickly fix performance issues to speed up page load.

Background


These tips are based on Google's Online PageSpeed Insights

Tip 1

Remove render-blocking JavaScript by using html5 async tag to the javascript_include_tag in the application layout file:

  <%= javascript_include_tag "application", "data-turbolinks-track" => true, async: true %>

In order for this enhancement to work you should not use document.write. Read the documentation at Blocking JS for other constraints.

Tip 2

Losslessly compressing logo images on the home page could save page load time. Here is the logos of different dimensions and its before and after compression sizes for rubyplus.com.

Logo : 127 kb -> 47 kb
300w : 40 kb  -> 19 kb
500w : 60 kb  -> 38 kb

If you run trimage:

trimage -f logo.png

You will get the error:

trimage.py: cannot connect to X server 

You need Virtual Framebuffer 'fake' X server for trimage to work. I am using Moonshine to manage the server. So I added the following directives in the application manifest file to install trimage, fake X server and it's dependencies.

# trimage is used manually to compress images to speed up page load.
package 'trimage',         :ensure => :installed

# Virtual Framebuffer 'fake' X server
package 'xvfb',            :ensure => :installed
package 'x11-xkb-utils',   :ensure => :installed
package 'xfonts-100dpi',   :ensure => :installed
package 'xfonts-75dpi',    :ensure => :installed
package 'xfonts-scalable', :ensure => :installed
package 'xfonts-cyrillic', :ensure => :installed                    
package 'x11-apps',        :ensure => :installed                    

If you are managing your server manually you can run:

apt-get install xvfb x11-xkb-utils xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic x11-apps

After deployment, I compressed the images on the server:

app/assets/images$ /usr/bin/xvfb-run -a trimage -f logo_300w.png
/app/assets/images/logo_300w.png not a supported image file and/or not writeable
File: /releases/20160105195127/app/assets/images/logo_300w.png, Old Size: 38 KB, New Size: 18 KB, Ratio: 51.5%

Notice that I am using the Virtual Framebuffer 'fake' X server to run the trimage. Then downloaded the compressed images to my laptop using scp. Copied them to my rails app/assets/images folder and deployed the changes using Capistrano.

Tip 3

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. How to test if gzip is enabled? Go to Gift of Speed and enter your site URL. You can also check the server if deflate is properly configured.

rails@li552-13:~$ apachectl -t -D DUMP_MODULES | grep deflate
/usr/sbin/apachectl: 87: ulimit: error setting limit (Operation not permitted)
Syntax OK
 deflate_module (shared)

In this case, we see Apache deflate_module in the output, which confirms that gzip is setup on this server. You can also go to the 'Network' tab in the Chrome inspector and inspect the headers.

Ruby Plus

You can see that the Content-Encoding is gzip. So, what files are compressed using gzip? For Apache mod_deflate is used to compress files using gzip. Moonshine creates /etc/apache2/mods-enabled/deflate.conf with the following configuration:

<IfModule mod_deflate.c>
  # these are known to be safe with MSIE 6
  AddOutputFilterByType DEFLATE text/html text/plain text/xml

  # everything else may cause problems with MSIE 6
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript
  AddOutputFilterByType DEFLATE application/rss+xml
</IfModule>

You can see which files will be compressed using gzip. The images are already compressed so it is not included in this file.

Summary


You have to test pages using javascript to make sure it does not have any issues. I hope these three tips helps you to speed up your Rails apps. It definitely helped to load the home page of rubyplus.com faster.

References


Trimage
Virtual Framebuffer 'fake' X server


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.