CODEWITHSUNDEEP
javascriptjqueryhtmlcssrender-blocking
Intern
Intern

Reputation: 51

Can I put my external css files at the end of the html page to prevent render blocking?

I have done google page speed test. In the report it suggests me to remove render blocking css resources in above the fold content. I came to know that I have 14 external CSS files which causes delay in loading my page. So can I put my CSS files at the end of the HTML tag or is there any other way to do it?

Upvotes: 3

Views: 2626

Answers (4)

SVARTBERG
SVARTBERG

Reputation: 505

Putting it at the end of the file would cause the browser to first display all your html wihtout any styling. Which I personally find unsatisfactory.

Try to rather merge your css files together to use only one big minified file so the browser only needs to load one file for css.

Upvotes: -2

Lajos Arpad
Lajos Arpad

Reputation: 77063

You can do that and it will load faster, but while it is being loaded, it will be unstyled. If this is ok for you, then go ahead and do it. However, if you ask me you can categorize your CSS styles/files to urgent and not so urgent. If your page loads for like 5 seconds and meanwhile everything is unstyled, then you might think that the result is not very good in terms of UX. So, pick up the styles you absolutely want to load at the start and put the rest at the end.

Upvotes: 0

Nitish Phanse
Nitish Phanse

Reputation: 562

Doing what you suggested will load a site which is not styled and then after the css has been loaded the site will get styling which will give a jerky / bad UX. Instead you can inline (or add inside head tag) the first fold content, i.e the CSS that is required to style the first part of the website you see without scrolling. Then in production mode merge all your css files into a single file with a dns-prefetch if your source is a trusted source. Also if your are using a react app bundled via webpack you can try implementing code splitting to load bundles pertaining to the route. Split your vendor css/js files and your app files so that browser cache can be leveraged.

Udacity has this free course here which can give you a better idea of how to optimise your page speed time.

Upvotes: 0

yasarui
yasarui

Reputation: 6573

Above the fold content means, what you presently seeing on the screen without scrolling down.the styles for the above the fold content is necessary for the initial load, other styles can be download later.so what you can do, have two style sheets one contain the styles for the initial page load and the other style sheet will have the rest of the styles.the second style sheet you can include through javascript

How to optimize you css files for better performance

  1. instead of having so many external files ,combine those in to a single file.this will reduce the number of request to the server

  2. Minify your css files (This will remove the unwanted space)

  3. Remove unused css. you might have used a front end framework like twitter bootstrap and foundation.there are lot of addons to identify the list of unused css.

Upvotes: 3

Related Questions