I recently started loading stylesheets on my webpages using just // instead of fighting between http:// and https://. E.g.:
<link href="//example.com/styles.css" rel="stylesheet" type="text/css" />
Now I wonder if the same should be done for the link[rel="canonical"] tags. E.g.:
<link rel="canonical" href="//example.com/index.html" />
If you do it, the purpose of rel="canonical" is somewhat defeated, as the page now has two names (one for http:, one for https:). There's nothing prohibiting it, but it's probably not a good idea.
Pick one or the other and make that the canonical URL.
Related
I have a page that embeds another page, let’s call it frame.html:
<iframe src="sub-page.html">
On sub-page.html, it loads some CSS and an image:
<link rel="stylesheet" href="sub-page.css">
<img src="sub-page.svg" alt="Sub-Page">
I at first thought that I could speed up the loading of these sub-subresources by adding <link rel=preload> to frame.html:
<link rel="preload" href="sub-page.css" as="style">
<link rel="preload" href="sub-page.svg" as="image">
…but that doesn’t seem to help, looking at the resulting waterfall graphs.
The specs for preload links seem to emphasize that it’s only for subresources of the current page, but since you can preload font files that are called from a stylesheet, it’s plausible that resources of a frame could also count. Am I missing something, like the correct use of the crossorigin attribute?
Yes.
Turns out I was looking at an old, unpurged version of the page when I was trying my performance tests.
<link rel=preload> absolutely can preload subresources of an <iframe>’d page..
We use cloud typography for a selection of web fonts chosen by a designer. The response time is creating a lag that people have begun to notice.
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
Is there a way, while still respecting CT's licencing model to bring these fonts in locally? Or do I switch to standard web fonts?
To sort of explain my answer/comment...
Say you have something like this for example..
<link type="text/css" rel="stylesheet" href="localfolder/main.css" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="localfolder/other.css" />
<link type="text/css" rel="stylesheet" href="localfolder/again.css" />
<link type="text/css" rel="stylesheet" href="localfolder/some.css" />
<link type="text/css" rel="stylesheet" href="localfolder/thing.css" />
You can change this to something more like...
<link type="text/css" rel="stylesheet" href="localfolder/css.php" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
With the php file of css.php being like this
header("Content-type: text/css");
require "localfolder/main.css";
require "localfolder/other.css";
require "localfolder/again.css";
require "localfolder/some.css";
require "localfolder/thing.css";
exit;
Basically this will combine all of your local CSS into a single script, which you can then use a PHP cache control and gzip to ensure your local CSS is sent as quick as possible in a single http/file request
... And your second link for typography tag will start downloading straight away as well
As soon as your first link tag (the css.php) is finished being downloaded/checked.. It will continue with anything else in the head tag until they are all done.
This may work for you, it really does very per site/design.. Basically most browsers will download only so many files at once... refer to Max parallel http connections in a browser? for some more info on this...
--- Another possible option ---
You can load the page without the typography link/tag.. and then add it dynamically via javascript.. see something like this How to load up CSS files using Javascript? for an example..
The side effect here depending on how the site is designed, would be that you might see old/default fonts for a few seconds or something.. But you can hide this from the user with a re-design possibly or some form of loader..
Otherwise the only other option i can think of is to try finding the same font or similar with google fonts https://www.google.com/fonts as they do load quicker in general.. And the advantage of using a google hosted css/js/lib is that alot of users also already have them cached because they are common across alot of other sites.
Hopefully this can give you some idea's or possibly help with a solution, but it is a tricky question and a good one... This is how i would deal with it if i was in the same situation.
I'm pretty new to HTML&CSS, and I'm building my first website.
My head tag looks like this:
<head>
<meta charset="utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/739d414f-2430-436c-b2cf-5b84cc45995c.css">
<link type="text/css" rel="stylesheet" href="css/mobile.css">
<link type="text/css" rel="stylesheet" href="css/projects2.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width:680px)" href="css/tablet.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width:1400px)" href="css/desktop.css">
<title>Yulie Wollman | Projects </title>
</head>
I have 2 questions regarding to the CSS:
First, is multiple external CSS files influence my loading times? is it better to merge them into one big CSS file?
Secondly, will the media screen css link tags influence my loading times on smaller resolutions than 680px/1400px?
Thank you,
Boaz Keren Gil
With HTTP 1.0/1.1 every single HTTP request comes with overhead so the fewer requests the better.
You should work to keep the CSS segregated for your ease of coding at the server but combine them and then serve a single CSS compiled "file" to the client.
<?php
header('Content-Type: text/css; charset=UTF-8');
include('css/normalize.css');
include('css/mobile.css');
include('css/projects2.css');
?>
If you're running Apache you'll need to ensure you can execute PHP inside of the file type you use (e.g. .css)...
AddType application/x-httpd-php5 .css
...just make sure that you serve the correct mime FROM the file itself when you do this.
From my experience I would've said that one request is always better that lots of requests, so one big css is , in this case better, BUT if you have really big css file for lots of pages, and you'll load it on every page even if 99% of it's style are not necessary - that's not good at all. So decide it for your own case: few pages, small css - merge it to one, big project, lots of pages - separate requests on each.
And for second - nop,they will not.
Overall question Yes, it does influence load time. Each external css file is a additional request so it does add overhead.
However, the browser will cache the css so the next request will not suffer that much.
In general, if all pages in the site use the same css I would combine them and minimize them once deployed into your production environment
There are tools available like YSlow from Yahoo or Page Speed from Google that give you great insight in what is happening.
https://developer.yahoo.com/yslow/
https://developers.google.com/speed/pagespeed/?hl=nl
You can also use plugins for your browser to see the effect.
Generally it is recommended to reduce the number of http requests, especially for the websites targeting mobile browsers. The mobile networks have usually high latency (could be 300ms per request), then for 10 referenced files (css, javascript) it is 300 * 10 = 3 seconds loading time.
I have a favicon.ico in my root directory. This now shows up when people browse to my site. I notice that I can also use the following:
<link
rel="icon"
href="[URL]
type="image/x-icon"
/>
<link
rel="shortcut
icon" href="[URL]
type="image/x-icon"
/>
Is there any advantage in adding this to my master page?
Can I use this syntax to specify different favico's for different pages on my site?
Thanks,
You can do it. (One different per page). But IMHO is better to provide consistency.
If you do that on your Master Page all the pages will share the same one (recommended).
Yes, you can specify as many as you want BUT need to provides the respective header declaration on each page.
I am used to just save the favicon.ico in the public_html folder for adding the favicon.
The problema I have now is that I want to display the in all the files of a certain subdirectory, ( example.com/example "onwards" ) just putting it there, doesnt seem to do the job.
I know I could go document by document and add:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
But I hope there is a more practical way, first I thought there might be a way trough CSS but that doesnt seem to be the case.
This would have come in handy because every document already includes:
<link rel="stylesheet" type="text/css" href="test.css" />
So any ideas or workarounds to how to solve this?
You will have to specify the favicon using the link rel=... notation.
Browsers will search only in the root directory of the domain for a default /favicon.ico. Any variations from that you have to specify explicitly.
Adding the <link> element is the right way to go. Use a template engine (e.g. Template-Toolkit) to avoid duplicating common content manually.
It might not be the most elegant way, and i came here to find a solution.
Unfortunaly the given answers did not suited for me.
In my case i working on a localhost (via private ip)
this is what i did :
<link rel="icon" href="<?php echo rtrim($_SERVER['PHP_SELF'], basename($_SERVER['PHP_SELF'])); ?>favicon.ico" type="image/x-icon">
As mentioned above don't waste time on searching. is the only way in that case. When you will be checking out results of your markup changes, remember that browser cache can be tricky.
redirect favicon.ico url for all subdomains to public_html's favicon.ico
ie. subdomain.website.com/favicon.ico should go to www.website.com/favicon.ico