Search code examples
pagespeed

Influence of relative vs. absolute URLs on loading time


Am I right with my meaning, that:

In javascript and CSS, a referencing of own ressources with relative urls avoids multiple delays like SSL, DNS and so on - and achieves so a loading time gain.

Example: background:url('../img/image.gif') is faster than background:url('https://www.example.com/img/image.gif')


Solution

  • Using a relative URL or an absolute URL will have no difference and the browser will convert it to an absolute URL anyway before sending it. The conversion is also so quick btw compared to everything else needed to fetch the resource that it will not have a meaningful impact on performance.

    So the only thing that makes it quicker is if you use an absolute external URL. So if loading http://www.example.com then using background:url('/img/image.gif') is generally faster than using background:url('https://cdn.example.com/img/image.gif') as the first is on the same server and so doesn't require the cost of setting up a new connection to https://cdn.example.com.