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 detail solution to those problems. Below is the list of those problems
- External Third party scripts
- No Static Asset Hosting
- 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.
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.
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:
For more, I also recommend following -