Another Noobly Question [CSS3 and HTML5]

Thor

Thor

Honorary Master
Joined
Jun 5, 2014
Messages
44,413
Reaction score
7,522
Location
Bellville
Hey, I have a site looks and performs pretty neat imo, but according to google's page test they suggest I but some CSS in the HTML itself.

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 3 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
http://mysite.co.za/css/bootstrap.min.css
http://maxcdn.bootstrapcdn.com/…t-awesome/4.2.0/css/font-awesome.min.css
http://mysite.co.za/css/styles.min.css
Click to expand...

Now my question the styles.css sheet is around 300 lines of code, can I include that straight into the index.html file?

As follows:

HTML: 
 <head>
    <style>
      .blue{color:blue;}
      ...
      ...
      ...
      ...
      etc
    </style>
 </head>

Is there a drawback for inserting CSS directly into the HTML instead of using the link to the external .css file?
 
Beachless said:
They actually said you should ,

So try the first two first.
Click to expand...

I know I should, I just want to know if there is a drawback to add your css directly into the the html pages?

That css file is no small feat it's a lot of lines.

And I am still noob and just followed the put your css in a external file because that's how all the websites in view are and thought that is the only correct way to do it?
 
Thor187 said:
I know I should, I just want to know if there is a drawback to add your css directly into the the html pages?

That css file is no small feat it's a lot of lines.

And I am still noob and just followed the put your css in a external file because that's how all the websites in view are and thought that is the only correct way to do it?
Click to expand...

Rule of thumb, you want to put anything that you use in multiple (even if it's two pages) into an external file sheet. Things that are only for that page you can embed.

You can actually do it any way you want to, but that's usually the best.

To performance differences, there shouldn't be any At the end. As in it will take ethe same amount of time to render the page.

The difference is that you will have less of a wait right at the beginning when the page loads as it doesn't have to read as long a css file. This really doesn't matter unless your page has a huge load of customization.
So I would leave it external.
 
Last edited:
Thank you so much for the reply just another thing, does the browser render line by line all all at once?

Example

Let's say I have two html pages, one has three lines of inline CSS between
HTML: 
<style>
      .blue{color:blue;}
      ...
      ...
      ...
      ...
      etc
 </style>

and the other one as 400 lines between
HTML: 
<style></style>

Would they both render equally fast or would the 3 line be quicker than the 400 line
 
Thor187 said:
Thank you so much for the reply just another thing, does the browser render line by line all all at once?

Example

Let's say I have two html pages, one has three lines of inline CSS between
HTML: 
<style>
      .blue{color:blue;}
      ...
      ...
      ...
      ...
      etc
 </style>

and the other one as 400 lines between
HTML: 
<style></style>

Would they both render equally fast or would the 3 line be quicker than the 400 line
Click to expand...
No difference. The spacing is only for humans to be able to read it more easily. This applies to all programming languages.
 
Wait no, surely the browser doesn't render everything at once, why else would you put .js files at the bottom of your code and not in the header with all the rel .css links?
 
Thor187 said:
Wait no, surely the browser doesn't render everything at once, why else would you put .js files at the bottom of your code and not in the header with all the rel .css links?
Click to expand...

It renders it from top to bottom according to your code.
It knows all the styling immediately of you put it in an external file sheet and link that in the head as the first item.
You don't want to run the js immediately as that could mess with the styling.
Also you would get a performance inprovement, it would only have to load them at the end as the JavaScript is not critical for the site (everything else should be able to load first).
 
Thor187 said:
Wait no, surely the browser doesn't render everything at once, why else would you put .js files at the bottom of your code and not in the header with all the rel .css links?
Click to expand...

Putting your Javascript at the bottom improves your page load time if the Javascript is not executed first.

Also, for CSS I use a utility called Web Essentials. It works with Visual Studio. If anything in your CSS can be improved the utility will make the necessary recommendations. Saves lots of time :)

PS you still need geat knowledge on CSS. It's just a simple helper :p
 
Lawrence777 said:
Putting your Javascript at the bottom improves your page load time if the Javascript is not executed first.

Also, for CSS I use a utility called Web Essentials. It works with Visual Studio. If anything in your CSS can be improved the utility will make the necessary recommendations. Saves lots of time :)

PS you still need geat knowledge on CSS. It's just a simple helper :p
Click to expand...


+1 for Web Essentials
 
Is this http://vswebessentials.com/ only available for Visual studio?

Reason why, I use brackets and I am not tooo big a fan of pirating software and I am definitely not going to buy Visual studio at "Visual Studio Enterprise with MSDN (Retail) - $6,119.00"
 
Thor187 said:
Is this http://vswebessentials.com/ only available for Visual studio?

Reason why, I use brackets and I am not tooo big a fan of pirating software and I am definitely not going to buy Visual studio at "Visual Studio Enterprise with MSDN (Retail) - $6,119.00"
Click to expand...

There is a free community version if you are either not in a company or less than 6 people.
Also you can get the professional one for free if you are a student.

https://www.visualstudio.com/downloads/download-visual-studio-vs Left option
 
Thor187 said:
thank you so much.

Is the features the same across the board?
Click to expand...

Not in the debugging department, but it shouldn't matter at all in your case. I don't think you'd notice the difference, especially not for designing web pages.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X