CODEWITHSUNDEEP
performancetwitter-bootstrapcdnpagespeed
TarranJones
TarranJones

Reputation: 4242

Pagespeed - cdn.com/framework.css + mysite.com/custom.css VS mysite.com/customframework.css

There are lots of CSS frameworks out there and this might be applicable to js as well but i'll use twitter bootstrap for an example.

Is it recommended to compile a custom version of the framework (using sass for example) which will be hosted on your site
OR
Use a framework cdn and a small theme stylesheet to overwrite the default style which is hosted on your site?

e.g 

<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- custom theme -->
<link rel="stylesheet" href="mysite/css/custom-bootstrap-theme.min.css">

OR

<!-- custom boostrap -->
<link rel="stylesheet" href="mysite/css/custom-bootstrap.min.css">

Upvotes: 1

Views: 116

Answers (1)

orcaman
orcaman

Reputation: 6551

Generally speaking, you want to minimize the number of requests the browser has to make to obtain the resources, so one script (or style) is better than two.

However, the CDN you are using might provide much better latency and download speed than your own server, and in this case, it might be faster to grab the style in parts (fast download from CDN for the bulk of the content and a slower download of less content from your server).

The best option would be to use a single script (a "bundle") which is minified (like you have done) and CDNified (i.e. you want your own script to be served from a CDN, like Amazon CloudFront for example).

Upvotes: 2

Related Questions