I've been reading up on SEO and heard that paths should include full URLs: http://www.etc
Does this apply for image sources and video content as well?
Or does it make a difference if say a video on my page is loaded via "/images/ex.mov"
Does this affect load time at all either way?
Seo doesnt matter if you use full or relative, as long as they point to the correct destination
The only way it affects load times would be that the user has to download the bytes that the absolute url provides as extra characters.
It depends whether you want an absolute path or relative path.
When loading files(such as images) from another site, you should use full, absolute urls (including http://).
Example:
You want to load file http://www.example.com/images/img1.gif from http://www.example.com/page.html, you could use the path "/images/img1.gif".
however, if you want to load http://www.etc.com/images/img1.gif from http://www.example.com/page.html, you have to specify full url ("http://www.etc.com/images/img1.gif").
Related
I am checking the source of a webpage whose url is
http://localhost:12345/web/query?name=time&
In the source of the html webpage, I saw a relative url:
Date
Is the relative url in the source supposed to be appended to the url of the webpage? In the above example, is it
http://localhost:12345/web/query?name=time&./query?name=time¶ms=3
Or is how to interpret the relative url in the webpage completely up to the author of the webpage?
When a web browser renders the webpage, the web browser interprets the relative url as
http://localhost:12345/web/query?name=time¶ms=3
I wonder how the browser can guess how the author interprets it.
Thanks.
./ is relative to the directory the file is in. I'd never use paths like that personally.
If the file is /web/query then Date and Date would essentially be the same thing. Obviously that link has to be found at the first level inside the /web directory or it wouldn't point to the right place, which is why I never use those type of paths, I always use paths that start at the document root, /.
These types of paths are usually found when developers either can't or don't know how to set up a proper web server for the site in my experience.
I am developing a website on a web server which can be accessed by 2 URL: mywebsite.example.com or example.com/mywebsite. For example, when I access mywebsite.example.com/images/abc.jpg and example.com/mywebsite/images/abc.jpg, I get the same picture.
The problem is, I have many links inside my website, and I am not sure should I use an absolute or relative path.
From another question
Absolute vs relative URLs
I found someone suggesting using URL relative to root (like /images/abc.jpg), however when I access the website using example.com/mywebsite, every link just break.
For relative paths, I found it hard to manage since webpages are in different folders, but using the same template which contains some links. It means I have to manually set some links as ../ and some as ./.
I have also tried using <base> tag however it messes up with anchor. Even if I try to include the full path before the # symbol, some jQuery libraries does not function properly since they get the value inside the attribute href directly, but not extracting the part after #.
Would there be any better practice or suggestion?
I think you should use relative urls, and concentrate your searchs on how to use relative urls in templates, that would be resolved relatively to the final page.
I don't know the technology you are using for templating, but I see two common solutions :
declare a "relative path" variable in the template, and then override it in the different pages, with the new relative path. Use this relative path as a prefix for all urls
delegate urls construction to a service that would know the final page. Somethinkg like resolveUrl(..)
For my webpage http://www.example.com/homepage.html which is the best way to link static resources, such as CSS files?
http://www.example.com/css/base.css
http://example.com/css/base.css
/css/base.css
Neither is better.
One will survive moving the linking document to a different location. The other will survive moving the entire tree to a different location.
In most cases, the latter is more useful (as it lets the links work between environments (development, staging, test, production)) but your needs may vary.
Relative path is best way to use.
Ex : http://www.example.com - Absolute path
Relative path
var style="css/base.css";
var style1="css/base1.css";
Then, Absolute path+style;
or absolute path+style1 . We can able to change relative path without hard coding.
For internally-served resources, typically you would use a relative URL, for the reasons stated by Quentin (upvoted accordingly).
However, absolute URL's are useful in some important scenarios that you should be aware of, for example:
When you use a CDN (content delivery network) to serve your static files (such as the CSS files you mention in your question) more quickly. These are served from other servers than yours, so you have to fully specify the location.
When you need to change the protocol. The most common case is switching to https, e.g., for actions like signins and purchases.
If you are putting links into an email, where of course relative paths won't go anywhere. This isn't relevant for loading a CSS file, since styles are inlined in HTML emails, but still it's a case to consider, e.g., for images.
A coworker just asked me if there were any reason why referring to images with a relative path would impede site speed.
While for cleanliness it's a good idea to have the fewer characters of a relative path, but wondering if there are other slowdowns/consequences to using absolute/full paths? I'm thinking there may be a DNS lookup involved by having the full path.
What are the other consequences, if any?
Using absolute paths forces the web server to establish a connection, send and receive the HTTP requests. If using relative, the connection is already established, so it doesn't have to go through that logic (hence increasing page load speed). You probably won't see an amazing difference, but every bit saved is a good thing, right?
Edit: After doing a quick test, the difference is extremely negligible, and doesn't seem to produce that great of a case for my answer. I created a test page with the same image twice, one with relative and one with absolute path: http://damonbauer.me/test/index.html.
Test One: Image w/ Absolute path in HTML code first: (click for larger version)
http://damonbauer.me/test/images/results1.jpg
The absolute path image took 869ms to load, while the relative path image, listed second in the HTML code, loaded in 635ms.
Test Two: Image w/ Relative path in HTML code first: (click for larger version)
http://damonbauer.me/test/images/results1.jpg
The absolute path image took 303ms to load, while the relative path image, listed first in the HTML code, loaded in 315ms.
My opinion? It's faster to load using relative. Even when listed after the absolute path image, it took only 12ms longer for the relative image to load. When the absolute path image was loaded second, it took it 234ms longer to load. In both cases, they are close, and it looks to me like it matters more about what loads first. Either way, I would go with relative, if only for portability's sake.
nah, there isn't any noticeable difference, and both have their uses. There is no DNS lookup client-side, it's the browser (or maybe the web server?) that changes the url to what it should be.
Use them as what you need to, relative paths are more portable (no need to do anything to make them work in your development or live server), while absolute paths take you to specific location (regardless in what server you are).
In my case, I use relative paths unless I want a specific address to be used. Also, when you're switching from non-secure to secure, you'd want to specify https so full path (or do an extra redirect somewhere else)
A remote absolute path will go thru DNS but it frees up your web server to serve pages while another server gets the work of serving images. That lightens the network load on the page server and speeds things up.
A local absolute path will be the same as local relative in that after the first page it, it will be cached by the web server and it's not going to matter after that.
If I find a webpage I want to tinker with and I save the source to the desktop, change a couple of bits, and then re-open - then often all the src and hrefattributes don't work as they are relative to the original hosting folder eg /Images/picture1.jpg or /Scripts/script1.js.
Is there a way to 'trick' the browser into persisting these relative references? Preferably without going through every one of them and appending a path to the front - which I have also tried but without success. What is the format of the fully qualified path name for these resources?
Let me know if I'm not being clear.
<base>