Should I use relative or absolute url on my website? - html

If I'm not moving my site around, any good reason for why I should use absolute URL's over relative?

Absolute URL's will work no matter if you move the content from folder to folder, however each language will have a way to reference a BASE URL in one way or another.
For example if you have "test/1.html" as a URL on index.html it will redirect to /test/1.html however if you copy that link to /dom/index.html it will redirect to /dom/test/1.html
It would be best practice to use the base URL and then the relative URL e.g. {BASE URL}/test/1.html

I tend to prefer using relative because if you ever make any changes to the site relative urls tend to be much more adaptable.
If you are talking about efficiency, there is no real difference between the two.

If I'm not moving my site around [...]
This will come up one day. Even if you're just moving your site from one folder to another, you want the links to be relative. You may not think that will ever happen, but it's better to be safe than sorry.

Related

Are full links when linking resources worse than paths?

The question is very simple and even tho I might get downvoted into oblivion for it, I can't find a good search query for this.
If I link images, stylesheets, scripts and other things with the full website url (http://url.tld/css/style.css) instead of path (css/style.css) , are the visitors affected negatively? Is there any difference?
The html page is on the same link as the resource, so we're not talking about external resources.
This only makes a difference if you change your domain name. You cannot simply transfer the scripts over but have to change each line or the include of those files then.
One small thing to keep in mind: Your string will be longer and so your file will be a very bit bigger in size but it doesn't really matter.
Either won't affect visitors. Specifying the protocol might cause problems in the future if your users can switch between http and https. Specifying the folder also means changes when you move the site. So best to use relative

What should be the addresses in CSS (for links&images)

In my website the menu is loaded from a file called "menu.php".
But my website has some sub-directories - /blog/ , /searchtool/, /shop/
They are with the same design, using the same CSS file.
But the urls for the images and for the links are like this:
<a href="my-page.html" >
<img src="images/my-image.jpg" >Image description</a>
If I add my website full URL before them - it works
<a href="http://example.com/my-page.html" >
<img src="http://example.com/images/my-image.jpg" />Image description</a>
My question is how does this affect my website performance?
Is it good or bad?
What problems can it cause?
Is there anything I should know before doing it?
How about using "../" before the addresses, will it work?
It depends.
The performance gain from using relative URLs is absolutely negligible compared to using absolute URLs. Of course, it is recommended to use relative URLs where you can, for example, the content residing on your own server within folders, which you can link easily.
The browsers are efficient enough to resolve relative URLs and as I said, it gives you no major performance increase as such. To answer your question, it is generally a common practice to use relative linking if you are referring to resources on your servers.
One could argue that using absolute URLs could cause a subtle decrease in load time as there will be a touch more DNS lookups, but don't worry, its so minimal it won't even matter. But always, use relative resource referencing where you can, its just less fussier.
Reasons for using Relative URLs
Easier to debug issues on localhost
Migrating to a different server like from Bluehost to Hostgator
Easier to work with shorter paths for development reasons
Helpful in developing on multiple environment
Reasons for using Absolute URLs
From a SEO standpoint,its better.Offers canonicalization
For search engines, doesn't matter really. They resolve relative well enough too.
All sorts of SEO problems on the web are caused by the use of relative URLs in links, canonicals and more.
An absolute URL contains more information than a relative URL does. Relative URLs are more convenient because they are shorter and often more portable. However, you can use them only to reference links on the same server as the page that contains them
Relative URLs are often used because developers have a test environment on another hostname and it makes it easy for them to move stuff between their test environment and their live environment. Other reasons include that it’s “just easier in website maintenance”. They’re also, in my opinion falsely, promoted by some websites about site speed because they’re “shorter” and thus “faster”.
have a good read here relative-urls-issues

Relative links with subdomains

I've just added a subdomain to my website, but can I point it to files in the main website with relative links? Like in the way that ../ goes back a folder, can you tell it to remove the first part of the url?
Also, I've just seen perhaps it's better putting the image folder as a subdomain too, is it worth doing this?
It's not possible to link to another domain using relative links, even if it is a subdomain. If you really want to do this you could make some kind of scripting helper to do that, but it would need to run on every page. With this you could run into problems on clients that have scripting disabled.
Putting images in a different subdomain is usually done to optimise loading speed. Browsers usually have a limited number of simultaneous requests to a single (sub)domain. By putting images on a separate (sub)domain you allow the browser to make more simultaneous requests and (in theory) allow your site to be loaded faster.
You can't use relative links, but you can use mod_rewrite to help you make a 'pseudo relative' link.
If your desired relative link were: href='folder/filename.typ'
then make it: href='root/folder/filename.typ'
in .htaccess enter: Rewriterule ^root/(.+)$ http://yourdomain.com/$1
You don't have to use 'root' of course, any word will do so long as it's unique in this context (i.e. not an actual folder name).
CAUTION: I found this thread looking for a solution myself. I've only just worked out this method. It does work on my site but I've not tested exhaustively yet.

Performance of HTML links

Is there any reason to prefer
<a href="alpha/beta.html">
over
<a href="http://mysite.com/dir/alpha/beta.html">
(assuming that the links refer to the same location)? And similarly for references to scripts and style sheets.
I worry that the former might be slightly slower because the browser might reuse a connection in the former case but open a new connection in the latter.
Or are browsers smart enough to handle this in the optimal way?
Yes, there is a major reason : portability. When something changes, you feel better if it is not hard-written in one thousand places.
Additionnally, the relative form — the first one — is much shorter. So, when you have dozens of internal links in your page, using the relative links saves many bytes. Here is for the performance. This gives shorter transfer times, so it saves energy and it is good for the planet Earth.
Regarding the reuse of connections, the relative or absolute form of the links do not matter. Web browsers don't work that way. Anyway, Web browsers are very good at using relative links and directing them to the good server.
Relative links are definitely the way to go.
HTTP is a state less protocol, therefore everytime a user clicks on a link which links to a new HTML page a HTTP request is sent to the server, so using the full URL is not slower or faster than a relative URL.
No, there isn't any difference in performance in terms of requesting the page to load because they will both resolve to the exact same address, though the page size will be slightly larger with absolute paths by virtue of the src attributes being longer but that is obviously, not worth mentioning unless you have a page with thousands of links on of course.
Relative paths (your first example) are in most cases preferred over absolute as if the domain needs to change, you wont have to go through your entire site updating the image/file paths.

Should I make all links relative or absolute

Since I started making my own web applications, rather than managing other peoples, I have fallen into the habit of making each reference url start from / .
This was becuase I wanted a convention, and I would find I was testing/deploying apps that used relative and absolute(/ not including http://....) urls in the app.
What convention should I be using for web applications, and will I run into problems with either approach (Aside from not being able to run apps in different folders with the absolute one)
Is there a benefit I get from using absolute? Or would relative always work just as well, and give me an added benefit of portability?
No benefit from absolute versus relative as long as the reference gets properly resolved. As for portability, this is one of those "it depends" situations.
For external page it is obviously that you can use only absolute paths. But for internal links I would suggest to use relative paths, as you'll gain from portability of the site.