To measure the growth rate for any online businesses, we always consider conversion rate as the main key.

Conversion Rate is a rate at which visitors to your online stores gets converted into a customer (who made an order).

One factor that plays an important role in higher conversion rate is - Page Speed Optimisation. As per research, Google stated that 53% of people leave a mobile page if it takes longer than 3 seconds.

I believe it's difficult to achieve 3 seconds page load time for mobile, but at the same time I think it's not impossible. So in this blog, I will cover all the major problems that I faced for application performance when working on ruby on rails app.

Check Your Page Speed Score

The first thing is we need to check our current page speed score of our application using any of the below tools -

Page speed performance monitoring tool -

  1. PageSpeed
  2. WebPage Speed
  3. GMetrix
  4. Pingdom
  5. Lighthouse - Google Developer Tool

I have used all of them and analyse areas of improvement.

Problems We Faced

There are several problems we may faced when working on page speed optimisation for any application. Below, I listed some of them -

Usage of Stylesheet & JavaScript as one bundle

In Rails application, following the legacy with rails asset pipeline, we ended up creating one bundle file that include all CSS or js. These application bundle js and CSS are render blocking.

Render Blocking means the resources that are blocking you page from the initial rendering of the page. JavaScript and CSS both are render blocking resources

And when you search for the solution of this, it will say to - load your JavaScript and Style sheets resources asynchronously. Obviously this solution will break your application code.

Possible solution for this problem, is load - Page specific JS/CSS resources.

External Third Party Scripts

Another problem we generally faced in rails application is usage of external scripts and libraries. When it comes to extend the application code for features, we unintentionally ended up usage of lots of scripts and style sheets. From our page speed score and areas of improvement, we can easily know what are those external libraries.

The disadvantage of this is, it break several other google recommendations related to page speed. Here I listed some of them -

  1. Leads To Leverage Browser Caching
  2. Increase Internal Redirects
  3. Leads To Increase in Resources Size (No Compression)

This is a situation, where we cannot do anything to fix those. If we remove the libraries, it will break the application code.

Possible solution would be for this - Minimise usage of external resources

No Static Asset Hosting

In rails application, by default assets are served from the server itself, from where all application code are also served. So, it keep the server busy all the time for serving assets resources.

This might slow down the server response time also which is one of the factor recommend by google for page speed slow down.

Server response time is the amount of time it takes for a web server to respond to a request from a browser.

Possible Solution - Use asset hosting service -  S3, Cloudnary etc.

Heavy Sized Images

A general rails application served many resources including images and scripts, out of which images are the most common used asset that impact the page speed.

The more the size of the images, the more bandwidth it requires which leads to slow down the page speed. We want to keep the image size smaller without losing image quality.

We want to choose the correct image type according to the need.

Possible solution - Image compression, New generation Image Format, Image type.

Looking to solve these problems?

The problems list can be long, but we considered the most common one that occur in every rails application at some point of time.

The solution for all these are explained in detail in my next blog with results.

Ruby on Rails - Page Speed Optimisation (Part II)