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.
Related
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
I have nine different CSS files. My website will not load until browser downloads all the CSS files. Most of CSS not even needed for home page. In JavaScript you can do like <script async>,
but for stylesheets, what will be best solution?
I have searched found following articles
Code Pen
keithclark.co.uk
They recommend to use
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
or
<head>
<!-- head content -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- body content -->
<link rel="stylesheet" href="style.css">
</body>
By default, CSS is treated as a render blocking resource, which means
that the browser won't render any processed content until the CSSOM is
constructed. Make sure to keep your CSS lean, deliver it as quickly as
possible, and use media types and queries to unblock
rendering.
-- Google Developers
By default, CSS is treated as a render blocking resource.
Media types and media queries allow us to mark some CSS resources as non-render
blocking.
The browser downloads all CSS resources, regardless of
blocking or non-blocking behavior.
CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.
However, what if we have some CSS styles that are only used under certain conditions, for example, when the page is being printed or being projected onto a large monitor? It would be nice if we didn’t have to block rendering on these resources.
CSS "media types" and "media queries" allow us to address these use cases:
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
By using media queries, we can tailor our presentation to specific use cases, such as display versus print, and also to dynamic conditions such as changes in screen orientation, resize events, and more. When declaring your style sheet assets, pay close attention to the media type and queries; they greatly impact critical rendering path performance.
Let's consider some hands-on examples:
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
The first declaration is render blocking and matches in all conditions.
The second declaration is also render blocking: "all" is the default type so if you don’t specify any type, it’s implicitly set to "all". Hence, the first and second declarations are actually equivalent.
The third declaration has a dynamic media query, which is evaluated when the page is loaded. Depending on the orientation of the device while the page is loading, portrait.css may or may not be render blocking.
The last declaration is only applied when the page is being printed so it is not render blocking when the page is first loaded in the browser.
Source - Render blocking CSS -
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.
My css appears to be being cached somewhere. I've uploaded a new css file and none of the changes have taken place. I thought that maybe it was being cached serverside so I slept on it and still, no updates to my css. I know it's not being cached in my browser because I've cleared that three times, and the tech support says server cannot cache. I need this css to take effect asap. Help would be much appreciated.
<link rel="stylesheet" href="~Content/site.css?t123456789" type="text/css" />
is what I have in my head tag of my _layout page.
You could try forcing the browser to refresh the css file by adding a timestamp to the link:
<link rel="stylesheet" type="text/css" href="/path-to-your-css/styles.css?t=12345678910">
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.