Ruby on Rails - Page Speed Optimisation (Part II)

From Previous Post ...

We have discussed the general problems in ruby on rails application while improving page speed. In this blog, I will explain the detailed solution to those problems. Below is the list of those problems

1. Usage of Stylesheet & JavaScript as one bundle
2. External Third party scripts
3. No Static Asset Hosting
4. Heavy Sized Images

Solutions We Can Apply

There are several solutions we can opt for these problems, but here I listed only the best way we can deal with these problems.

Page Specific Resources (JavaScript/Style-Sheets)

In order to reduce JavaScript/Stylesheet payload, we can use the code splitting technique.
We can remove the code from the main application bundle that is no longer needed for a particular page.

Keeping the most commonly used CSS and JS throughout application in the main bundle. This ultimately reduces the size of the main bundle.

For the page specific JS/CSS, we can easily find out some ways to dynamically render those based on controller name and action name, this way only the needed assets will be loaded for the particular page and improves page speed.

Minimise Third Party Scripts

In order to resolve this issue, we need to first audit the site if existing one and check what are the external scripts and libraries that slow down the page. So, that we can eliminate or create our own scripts.

Other possible way, but with slightly disadvantage, is we need to download those resources (JS/CSS) and placed those in application, so that those are served from our server instead of third party server.  This will solve the problem of Compression, Leverage browser caching of those resources.

The disadvantage of this is we can miss the updates in those resources as, we are not requesting it from origin server.

To prevent from render blocking, we can use defer and async loading. Else we should load java scripts contents at the bottom of the page, so that it never blocks page rendering.

Defer Loading Simply put delaying script execution until the HTML parser has finished

In Async Loading, HTML parsing may continue and the script will be executed as soon as it’s ready

Use Static Assets Hosting

We can use some storage services like S3, cloudary etc, to store our static assets and use CDN (Content Delivery Network) to serve assets to the end user. The use of CDN helps to serve assets better due to its caching. Once the assets are served from CDN, they cached it, and next time when request comes for the same resource, instead of fetching the resource from source(S3 buckets), they directly served from CDN.

Amazon CDN servers are located to all over world, so they serve assets to the end user from the nearest server. This reduces the time interval to complete the request. This solution will also make the server idle for assets requests and thus improves speed.

Use Compression

Compression is also very important, as heavy sized images, js, css, takes more bandwidth and ultimately takes more time to load on a page. Using GZIP for compression helps in this, it compress all the compiled assets and reduces there sizes into almost half.  So, less size resource will load faster and improves page load time.

Enable compression on NGINX:

After applying all the above solutions and It helps us to improves speed and here is results for our website for both mobile and desktop:

Web Result:

Mobile Results:

For more, I also recommend following -

1. Google pagespeed nginx module or pagespeed apache package, because it comes with many options that we can easily tweak to optimize the application performance.
2. AMP (Accelerated mobile pages) - If you are more particular about mobile, AMP is the good option to use.