We have many ways to add CSS to Html page but each way has its own advantages and disadvantages. So what is the best way to increase the page loading speed? Let's find out together.
1. Add css file external to html.
This is the most popular way to add css to html web page. We will separate css to another file with the .css extension. This file can contain large css define and you can import css file to many html pages. To add css file to html page, html support <link> tag to help import a css file. You can use multiple <link> tags to import multiple CSS files into one Html file. You should put this tag inside the <head> tag. However, you can also put it inside of the <body> tag.
The syntax for import css file to html page as below:
<link rel="stylesheet" type="text/css" href="yourfile.css" media="screen" />
In that:
rel : This is a new attribute of html5, It informs the browser that this is a CSS file.
type="text/css" : This is an attribute of html4 it is not required in html5, you can remove it.
media : This is a new attribute of html5, it defined this css file use for what. It contains some value such as:
- screen it indicates this css file use for screen device (desktop, tablet or mobile). You can set css file for only some screen ex :
<link href="yourfile.css" rel="stylesheet" media="screen and (max-width: 600px)">
This css file only applies for a screen width of less than 600px.
- projection for projected presentations.
- handheld for handheld devices (typically with small screens).
- print set style for printed web pages.
- all (default value) This is what most popular choices. You can remove this attribute if you want this style display for all cases.
Note: When you set the media attribute, this file will only be loaded when the condition is true.
You can use this attribute to make the website responsive and it also helps the page load faster.
href : This attribute defines the path of css file, you can use relative path or absolute path.
So what's the relative and absolute path?
Relative path (Recommend) :
If the css file is the same folder with html file:
<link href="yourfile.css" ... >
If the css file is in a subfolder with html file:
<link href="sub-folder/yourfile.css" ... >
Absolute path:
<link href="https://www.yourdomain.com/foldername/yourfile.css" ... >
1.1 Advantages
- Scalable
- Easy maintain
- Reuseable
- Change css file will affect all html file
- Increases time load site
1.2 Disadvantages
If you add more css files to html page, it will make more requests when the page loads and make the page load slowly.
2. Add css using the style tag.
You can add css directly to html documents by using a <style> tag. It looks like as below:
<style type="text/css">
/* Add style rules here */
</style>
You can add many <style> tags in your html document. And you can put this tag in both <head> tag and <body> tag but You don’t forget CSS rules are render-blocking it will stop display GUI in the browser so I recommend you put css inside <head> tag, although css rules are render-blocking display GUI but css need to style layout for html so it needs to load before display html to the browser.
2.1 Advantages
- Faster loading times because it does not make any request HTTP for your site.
- You can reusable css but it only for that html document.
- Works great with dynamic styles.
2.2 Disadvantages
- It is harder to maintain than create an external file.
- It makes the site heavier.
- CSS must be downloaded with every page request, it can not cache by the browser.
3. Add css inline using the style attribute of html tag.
You can write css directly to any Html element by attribute style of that element. You can see an example code below:
<h1 style="color:blue; background:yellow;">This is a heading</h1>
Adding css to html in this way will get the highest priority compared with another way.
3.1 Advantages
- Works great with dynamic styles.
- Faster loading times because it does not make any request HTTP for your site.
3.2 Disadvantages
- Can not be reusable: if you have many tags with the same style you need to repeat it many times.
- Makes the site heavier.
- Very difficult to maintain.
- Not good for SEO.
4. Using Javascript to add css to html page.
This way is not usually used to add css to an html page but sometimes you need using js to add a css file to html for best performance or simple you want to add a class or css property for any html tag.
4.1 How to Inject an external stylesheet file with javascript.
To add a css file you need to create an element <link> tag and then append it to <head> tag of Html document.
/* create the link tag html */
var cssHtmlTag = document.createElement('link');
/* add attributes */
cssHtmlTag.setAttribute('rel', 'stylesheet');
cssHtmlTag.setAttribute('href', 'mystyles.css');
/* attach to the document head */
document.getElementsByTagName('head')[0].appendChild(cssHtmlTag);
In this way you can add many css files into the html page if you want.
4.2 Insert a block of rules.
This way allows one or more internal css styles, same with way 2 above. This way is often used to generate dynamic css from the database.
/* specify your css rules */
var cssInternal = 'p { font-size:15px; color:#000; }';
/* create the style tag html */
var styleTag = document.createElement('style');
/* add css rules to the style tag */
styleTag.appendChild(document.createTextNode(cssInternal));
/* append the style tag to the document head or body */
document.getElementsByTagName('head')[0].appendChild(styleTag);
4.3 Add inline styles to any Html element.
You can add direct inline css for any Html element by using Javascript. This way for the result is the same as the way 3 above.
/* get a element */
var element = document.getElementById('header');
/* add css properties */
element.css.color = 'green';
element.css.backgroundColor = 'red';
4.4 Advantages
- Suitable for generating dynamic css.
- Support Lazy load css.
4.5 Disadvantages
- It’s same three-way above
5. Using @import to add css file to another css file.
This way is not a popular way to link css file to html page but sometimes it is very helpful, you can use @import to add a css file to another css file as below:
@import "anotherstyles.css";
You can put this command on the top of the css file and be sure the path of css file import is correct.
5.1. Advantages
No need to change the code of the Html page but it will affect too many pages if they use the same css file.
5.2 Disadvantages
It makes more requests when loading sites.
6. Custom css for best performance page loading speed
6.1 Minify css
We need to minify css to remove white space, comment and more… to reduce the total size of the CSS file. Thereby help to load webpage faster.
Have some website support for minifying css you can refer to https://cssminifier.com or https://csscompressor.com
If you use ASP.Net core to make a web application, you can refer to the article below to get the best way to minify css.
ASP.Net Core bundle, minification and gzip Css and Javascript files.
6.2 Preload css file
This is a new technology, it ensures all css files are available earlier and are less likely to block the page's render thereby improving performance. Syntax as below:
<link rel="preload" href="style.css" as="style">
But it has a problem, that it is not supported for all browsers, it is working fine with chrome but not fine on firefox.
To fix this problem you can use code hack css as below:
<link href="style.css" rel="stylesheet" type="text/css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link href="style.css" rel="stylesheet" /></noscript>
6.3 Load css asynchronous
To fix the issue block the page's render of css you can use LoadCSS.js to resolve this problem. This is a small js and also a pattern for loading CSS asynchronously. You can download the js plugin and see an example by the above link.
Note: Don’t forget when you resolved this issue you page load faster but your GUI will be broken before displaying beauty. Please consider it.
6.4 Top 10 tips for optimizing css performance
- Bundle and minify many files to one, it helps reduce the total size file and request HTTP.
- Avoid using the
@importcss file. - Load asynchronous css by using javascript.
- Remove all css not use for that page.
- Not use more than one font on a page.
- Use google font for your site because it small, can custom and has CDN support .
- Limit the use of animation in css.
- Gzip css file.
- Preload css & font.
- Use analysis tools to see problem such as Google page speed, gtmetrix.com, pingdom....
7.Summary
In this article, I just introduced to you some tips how to add css to html page and some tips to load css for best performance. I hope it is helpful to you and also recommend using way 1 to do it.
Happy learning and coding!!!