How To Make Web Pages Load Faster While Using CSS?

HTML specifications clearly defines the way front-end engineers should code the html document though browsers are making us lazy to follow these rules. We do mistakes and do code the html documents in a wrong way. On top of that, browsers helps us more to do more mistakes by ignoring such problems and renders the web page, even though they sometime take a bit extra time to load elements on web page.

HTML cannot be compiled, it is a document writing language. It’s up to you the way you write it and browser just render it based upon the HTML specs, though they ignore sometime. We will talk about CSS related issues and how can we achieve well-written HTML document with speed.

Before moving to CSS, lets learn about a fact called Progressive Rendering, which is a base of faster web page and decreasing loading time.

Progressive Rendering

Loading things as soon as possible while rendering a web page is Progressive Rendering. To achieve faster web page, front-end engineers should consider this fact and let browser load content and elements as soon as possible. Do not force browsers to load things slower. This turn out to be super important when a web page has lots of content and for users who are with slower internet connection.

The following two ways can make your web page faster:

1. Put CSS at top with <link> tag

Put CSS in the document HEAD using the <link> tag, do not put it anywhere else or at the bottom. Browsers renders web page top to bottom, so providing style before making content is way to provide things to browser on time. Putting CSS at the bottom of the document can delay page load. Do not use <link> tag anywhere in the document because it works the same way you put style sheets at the bottom of the page.

2. Do not use @import:

There are two ways you can include style sheets in your documents. The <link> tag and the @import rule. @import puts style sheets at the bottom of the page, which makes browsers to load content first then load style sheet and then again load styled content. This happens in fraction of seconds but can make a web page blank for few seconds and lead to flash of unstyled content (FOUC) problem. It is a blank white screen phenomenon is due to browsers behavior. It mostly happens with Internet Explorer(IE)

Let us know if you have more thoughts, best practices on this topic. Always appreciate readers contribute.