3 Tips to Speed Up the Page Loads in Rails App
To find three low hanging fruits and quickly fix performance issues to speed up page load.
These tips are based on Google's Online PageSpeed Insights
In order for this enhancement to work you should not use
document.write. Read the documentation at Blocking JS for other constraints.
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.
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.
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:
You can see which files will be compressed using gzip. The images are already compressed so it is not included in this file.
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