3

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?

Intern
  • 51
  • 1
  • 4
  • [hypocrites](https://developers.google.com/speed/pagespeed/insights/?url=www.google.com&tab=mobile) – I haz kode Jul 14 '17 at 06:13
  • Put the contents of the different stylesheets in one single file? – Cyclonecode Jul 14 '17 at 06:13
  • If you put your css at the of the file it would load a bit faster, but while it's loading all content would be unstyled. – fen1x Jul 14 '17 at 06:16
  • @Cyclonecode putting all the contents in the same file will make the file much larger and the wait time will also increase. – Intern Jul 14 '17 at 06:23
  • @Intern - Resolving multiple adresses and handling multiple connections to download the files I believe would be even worse. Of course you should also minify the merged stylesheet file. – Cyclonecode Jul 14 '17 at 06:25
  • @Cyclonecode Ok Sir Thank You for the help. I'll try your solution. Hope it does some good. – Intern Jul 14 '17 at 06:26
  • The wait time for CSS files is not due to the size - *in most cases* - it's just the *connection* part of the `http` request that takes most of the time. 14 different connections to download **14** `10kb` size files might take longer to process than **1** connection to download a `200kb` file. You can only make a limited number of concurrent `http` requests at any given time. – I haz kode Jul 14 '17 at 06:27

4 Answers4

3

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.

yasarui
  • 6,209
  • 8
  • 41
  • 75
  • 1
    +1 Make sure you're also sending g-zipped content. Real life performance - which **includes maintainability** - takes precedence over some scoring system that google themselves [don't seem to care about in their products.](https://developers.google.com/speed/pagespeed/insights/?url=youtube.com&tab=mobile) – I haz kode Jul 14 '17 at 06:34
  • @Ihazkode yes I am sending g-zipped content – Intern Jul 14 '17 at 06:36
  • @Intem ,we can do lot of things to optimize the site, there very good article in the this site https://varvy.com/pagespeed/ – yasarui Jul 14 '17 at 06:39
0

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.

Nitish Phanse
  • 552
  • 1
  • 9
  • 16
0

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.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
-2

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.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
SVARTBERG
  • 435
  • 1
  • 7
  • 16