This is especially true in MODX Cloud as site_url is dynamically created and cached to memory based on the request URL. If you want to visit a site on abc123.modx.dev or your domain.com and the site work, having this uncached is key. Also, if you put it above all your other assets, they can be relative to base and will work no matter where the site is.
See an example head:
<!DOCTYPE html>
<head>
<base href="[[!++site_url]]" />
<meta charset="[[++modx_charset:lcase]]" />
<meta name="description" content="[[*description]]" />
<meta name="author" content="[[*createdby:userinfo=`fullname`]]" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
[[*searchable:is=``:then=` <meta name="robots" content="noindex,nofollow">`:else=``]]
<title>[[*pagetitle]] - [[++site_name]]</title>
<!-- Included CSS Files -->
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/app.css">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-ABC123FAKE-1']);
_gaq.push(['_trackPageview']);
</script>
[[*extraHead]]
</head>