CODEWITHSUNDEEP
javascriptruby-on-railstwitter-bootstrapperformance
michaelsking1993
michaelsking1993

Reputation: 441

Rails: Importing CDN files vs using the assets for bootstrap

I'm a brand new developer (~3-4 weeks), and I've been using rubymine to build my ruby on rails application. I installed a plugin for bootstrap-4, and the automatic template it gave me for a bootstrap page included the following lines of code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
        integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
        integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>

I've spent the last 2 hours reading up on CDN files and the assets pipeline, but I still am not understanding what best practices here are: should I remove these CDN files and replace them with gems and/or 'require' lines in the assets pipeline, or should I leave them here? I know this probably depends on my goal, but my goal is simply to give my website style without causing large lags in loading time. One of my pages will have lots of onclick functionality and api calls, and in the previous version of the application, things were getting slowed down (not sure if it was because of the javascript, but my gut tells me that it probably had something to do with it).

In sum, I want simplicity, and I want to understand my code, haha. Should I keep these CDN lines of code or should I replace them with something in the asset pipeline?

Cheers, Michael

Upvotes: 4

Views: 3374

Answers (1)

Sahil
Sahil

Reputation: 3358

CDN puts your content in many places at once, providing superior coverage to your users.

You can read more about them here.

It is better in the above case that you use CDN(Content Delivery Network) as it will improve your page's load time. It is only the first time a js,css files specified in the link, script tags would get cached from the nearest location and from next request onwards they will be loaded from browser's cache.

On first request as the js/css will be loading from the nearest geographical location the load time will be less.

Example:

Consider your app being hosted in US, and a user accessing it from India. If you were using CDN, it will try to load the asset from the nearest geographical location where as if you weren't using CDNs then it would load from US and so more load time.

In general it's better to use assets if:

  • it is not a common css/js or it is your own asset
  • if you feel its going to change atleast once a day/week/month

Whenever you do asset precompile rails appends a hash code to the names of all the assets, its rails way of maintaining versions of your assets. By default the assets will get cached based on your app's caching setting and the app will use the cached version until a new version of asset is available. The only problem, it will always load for the first time from your app's hosting location, so slightly more load time.

But you can use AWS S3, which allows you to store your assets in S3 bucket and then create your own CDN from the S3 bucket. You can read about syncing assets to S3 using asset_sync gem here and about creating AWS Cloudfront(CDN) from S3 bucket here.

Upvotes: 3

Related Questions