0

I am a beginner building my own website and I am currently linking my css and js pages by like so:

<link rel="stylesheet" href="style.css">
<script src="jscode.js"></script>

where style.css and and jscode.js is in the same folder as the html file. However, published websites seem to exclusively link their css and js pages by online links like so:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7">
<script async="" src="https://cdn.sstatic.net/Js/full.en.js?v=ada34f05dd4d"></script>

Why would they do this instead of having the css and js files hosted in the same folder as the html file? Should I also upload my css and js files online and link them?

StrawberryMilkTea
  • 51
  • 4

4 Answers4

0

This is done for perfomance reasons.

As you may have noted, they link a CDN hosted stylesheet: https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7

Files that rarely change benefit from being hosted on CDNs, improving website performance. This is especially true for common libraries, e.g. Bootstrap or jQuery or Vue.

But if you craft your resources yourself, it is totally fine to put you css and js files alongside your web pages.

punund
  • 4,321
  • 3
  • 34
  • 45
0

These external libraries increase the application bundle size when we build our application and so it also increases the application loading time. When you load CSS and JavaScript library from a CDN your website will load them fast.

John D
  • 118
  • 1
  • 12
  • Well, sort of. It’s that the client may already have that file from that CDN in its cache and therefore will use that instead of downloading the file again. – Scott Marcus Jun 19 '20 at 00:46
0

Using CDN links typically offers faster delivery of the contents/resources to the user, and for websites that have high enough traffic, it can reduce the workload on the hosting server, because of the way CDNs work, you might want to read up on CDN here. But it also depends on the creator of the code, because in most cases, the difference is usually not observable by the user.

Abiola
  • 103
  • 1
  • 1
  • 6
-1

You will notice the 'cdn' subdomain in the src and type attributes: (href="https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7").

These refer to 'content delivery network'. These are servers that are distributed around the globe and host the CSS and JS files in question. When a user visits the site the CDN will serve cached files from a server that is close to them which results in a quicker site load.

However, using a CDN isn't required.

Stu
  • 324
  • 3
  • 10
  • 1
    It’s not that the server serves cached files or the location of the server. It’s that the client may already have that file from that CDN in its cache and therefore will use that instead of downloading the file again. And, if the files do need to be downloaded, CDNs are optimized for high availability and bandwidth for faster downloads. – Scott Marcus Jun 19 '20 at 00:43