hello, so I got Google telling me two different things in which it does not like the Link CSS, it says it does not like it in the <head> or </body> so im not sure what it is indicating?
This is when I put in the </body>
This is when I put it in the <head>
I think you need to include some code or link to your site in your post as everything would be guess work with what you have posted.
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="main.Master.vb" Inherits="IOG.Site1" %>
<!doctype html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<meta name="google-site-verification" content="qPtIxE1wP3wO6nWgw1vcTf-MGb6TE1-9wDJNQLmivt0" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>IOG Products - Impact Indicators, Impact Recorders, Temperature Recorders, Tilt Indicators</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-41887506-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="outer_wrapper">
<div class="clearfix">
<div class="header_img">
<a href="/default.aspx"><img src="images/IOGLOGOFINAL.png" class="logo" width="193" height="72" alt=""/></a>
</div>
<div class="quality_img">
<img src="images/iog_quality.png" alt="IOG Quality" class="quality" width="175" height="43" />
</div>
<div class="nav">
<ul id="navigational_links">
<li><a href="/default.aspx">HOME</a></li>
<li><a href="/ABOUTUS.aspx">ABOUT US</a></li>
<li><a href="/Products.aspx">PRODUCTS</a>
<ul>
<li><a href="/ShockLabels.aspx">Shock Indicator Labels</a></li>
<li><a href="/Tilt_Indicator.aspx">Tilt Indicator Label</a></li>
<li><a href="/Protect_A_Pak.aspx">Protect-A-Pak</a></li>
<li><a href="/Omni_G.aspx">Omni-G</a></li>
<li><a href="/shock_fuse.aspx">Shock Fuse</a></li>
<li><a href="/transmonitor.aspx">Trans-Monitor</a></li>
<li><a href="/transmonitor_td.aspx">Trans-Monitor TD</a></li>
<li><a href="/Impact-O-Graph.aspx">Impact-O-Graph</a></li>
<li><a href="/DIGI-SHOCK.aspx">Digi-Shock</a></li>
</ul>
</li>
<li><a href="/CONTACT2.aspx">CONTACT US</a></li>
</ul>
</div>
</div>
<div class="main_content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<div id="socialmedia">
<table id="sociallinks">
<tr>
<td><p>Find Us</p></td>
<td>
<a href="https://www.linkedin.com/company/iog-products">
<img src="images/LINKEDIN.png" class="icons hvr-buzz-out" alt="IOG Linkedin" width="22" height="22"></a>
</td>
<td>
<a href="https://www.youtube.com/channel/UCyOKfWuCu0aYTFJdzh-4qmg">
<img src="images/YOUTUBE.png" class="icons hvr-buzz-out" alt="IOG YouTube" width="22" height="22"></a>
</td>
<td>
<a href="http://www.directindustry.com/prod/iog-products-85455.html">
<img src="images/DIRECTINDUSTRY.png" class="icons hvr-buzz-out" alt="IOG DirectIndustry" width="22" height="22"></a>
</td>
<td>
<a href="https://plus.google.com/u/0/113872692738514130034/about">
<img src="images/GOOGLE.png" class="icons hvr-buzz-out" alt="IOG Goggle+" width="22" height="22"></a>
</td>
</tr>
</table>
</div>
<div id="moreinfo">
<a class="bottomlinks" href="/CONTACT2.aspx">Contact Us</a> |
<a class="bottomlinks" href="/sitemap.aspx">Sitemap</a>
<p class="IOG">IOG Products, LLC. United States of America</p>
</div>
</div>
</div>
</form>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57297790-1', 'auto');
ga('send', 'pageview');
</script>
<link href="/Styles/style.css" rel="stylesheet" type="text/css">
<script type='text/javascript'>
var _glc =_glc || []; _glc.push('all_ag9zfmNsaWNrZGVza2NoYXRyDwsSBXVzZXJzGLSQ6bwKDA');
var glcpath = (('https:' == document.location.protocol) ? 'https://my.clickdesk.com/clickdesk-ui/browser/' :
'http://my.clickdesk.com/clickdesk-ui/browser/');
var glcp = (('https:' == document.location.protocol) ? 'https://' : 'http://');
var glcspt = document.createElement('script'); glcspt.type = 'text/javascript';
glcspt.async = true; glcspt.src = glcpath + 'livechat-new.js';
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(glcspt, s);
</script>
</body>
</html>
MY LINK IN THE CODE
I am afraid your code looks like gobbledegook to me as I do not use asp. Anyway I always put my style sheet link in the head section without any problem. Could it be something in your asp code causing a problem as the link itself looks OK?
RIght 
…I should ask ASP Forum too…
True it might be something in my ASP code that Google does not understand…or not understand ASP at all…
No - go to your webpage and hit view source. That is what google sees. You should be giving us your rendered HTML.
Don’t bother. This is an HTML question, not an ASP one.
Think we mentioend this before, but just ignore this error.
Here it is:
<!doctype html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="google-site-verification" content="qPtIxE1wP3wO6nWgw1vcTf-MGb6TE1-9wDJNQLmivt0" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>
IOG Products - Impact Indicators, Impact Recorders, Temperature Recorders, Tilt Indicators
</title><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="IOG products are used throughout the production process and during the journey to the ultimate end-user. By attaching our monitors to your shipment it enables you to take more control of your product during transit and helps to reduce your risk by keeping track of them every step of the way. " />
<meta name="keywords" content="IOG Products, transporation monitoring systems, omni-g, impact recorder m series, impact recorder, protect-a-pak, single use tilt indicator, tilt indicator, digital impact recorder, data recorder, single use shock recorder, impact-o-graph, IOG" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-41887506-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkCzupWSoymGstPgZ+bEc28bsfmRI=" />
</div>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
</div>
<div class="outer_wrapper">
<div class="clearfix">
<div class="header_img">
<a href="/default.aspx"><img src="images/IOGLOGOFINAL.png" class="logo" width="193" height="72" alt=""/></a>
</div>
<div class="quality_img">
<img src="images/iog_quality.png" alt="IOG Quality" class="quality" width="175" height="43" />
</div>
<div class="nav">
<ul id="navigational_links">
<li><a href="/default.aspx">HOME</a></li>
<li><a href="/ABOUTUS.aspx">ABOUT US</a></li>
<li><a href="/Products.aspx">PRODUCTS</a>
<ul>
<li><a href="/ShockLabels.aspx">Shock Indicator Labels</a></li>
<li><a href="/Tilt_Indicator.aspx">Tilt Indicator Label</a></li>
<li><a href="/Protect_A_Pak.aspx">Protect-A-Pak</a></li>
<li><a href="/Omni_G.aspx">Omni-G</a></li>
<li><a href="/shock_fuse.aspx">Shock Fuse</a></li>
<li><a href="/transmonitor.aspx">Trans-Monitor</a></li>
<li><a href="/transmonitor_td.aspx">Trans-Monitor TD</a></li>
<li><a href="/Impact-O-Graph.aspx">Impact-O-Graph</a></li>
<li><a href="/DIGI-SHOCK.aspx">Digi-Shock</a></li>
</ul>
</li>
<li><a href="/CONTACT2.aspx">CONTACT US</a></li>
</ul>
</div>
</div>
<div class="main_content">
<div id="flashContainer">
<img id="bannertransition" src="media/banner_transition.gif" alt="Banner" >
</div>
<div class="slide">
<div class="slide_left">
<a href="/DIGI-SHOCK.aspx"><img src="images/digi_front.png" alt="Impact Recorder" width="310" height="180" /></a>
</div>
<div class="slide_middle">
<a href="/ShockLabels.aspx"><img src="images/shocklabel_front.png" alt="Shock Label" width="310" height="180"/></a>
</div>
<div class="slide_right">
<a href="/transmonitor_td.aspx"><img src="images/td_front.png" alt="Transmonitor TD" width="310" height="180"/></a>
</div>
</div>
<div id="frontwrapper">
<div id="frontcontent">
<video id="video" poster="images/IOGWORDS.jpg" controls loop>
<source src="media/IOG_BENEFITS.mp4" type="video/mp4">
</video>
</div>
<div id="frontcontent2">
<div class="latest_news">
<p class="redbox">LATEST NEWS</p>
<ul id="LN" style="list-style-type: none;margin-left:-50px;">
<li><img class="download" alt="Paper Image" width="22" height="22" src="images/paper.png"> <a class="LN" href="pdf/RM.pdf">Risk Management</a></li>
<li><img class="download" alt="Paper Image" width="22" height="22" src="images/paper.png"> <a class="LN" href="pdf/PD.pdf">Reduce Damage</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="socialmedia">
<table id="sociallinks">
<tr>
<td><p>Find Us</p></td>
<td>
<a href="https://www.linkedin.com/company/iog-products">
<img src="images/LINKEDIN.png" class="icons hvr-buzz-out" alt="IOG Linkedin" width="22" height="22"></a>
</td>
<td>
<a href="https://www.youtube.com/channel/UCyOKfWuCu0aYTFJdzh-4qmg">
<img src="images/YOUTUBE.png" class="icons hvr-buzz-out" alt="IOG YouTube" width="22" height="22"></a>
</td>
<td>
<a href="http://www.directindustry.com/prod/iog-products-85455.html">
<img src="images/DIRECTINDUSTRY.png" class="icons hvr-buzz-out" alt="IOG DirectIndustry" width="22" height="22"></a>
</td>
<td>
<a href="https://plus.google.com/u/0/113872692738514130034/about">
<img src="images/GOOGLE.png" class="icons hvr-buzz-out" alt="IOG Goggle+" width="22" height="22"></a>
</td>
</tr>
</table>
</div>
<div id="moreinfo">
<a class="bottomlinks" href="/CONTACT2.aspx">Contact Us</a> |
<a class="bottomlinks" href="/sitemap.aspx">Sitemap</a>
<p class="IOG">IOG Products, LLC. United States of America</p>
</div>
</div>
</div>
</form>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57297790-1', 'auto');
ga('send', 'pageview');
</script>
<link href="/Styles/style.css" rel="stylesheet" type="text/css">
<script type='text/javascript'>
var _glc =_glc || []; _glc.push('all_ag9zfmNsaWNrZGVza2NoYXRyDwsSBXVzZXJzGLSQ6bwKDA');
var glcpath = (('https:' == document.location.protocol) ? 'https://my.clickdesk.com/clickdesk-ui/browser/' :
'http://my.clickdesk.com/clickdesk-ui/browser/');
var glcp = (('https:' == document.location.protocol) ? 'https://' : 'http://');
var glcspt = document.createElement('script'); glcspt.type = 'text/javascript';
glcspt.async = true; glcspt.src = glcpath + 'livechat-new.js';
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(glcspt, s);
</script>
</body>
</html>
ok. thats what I figured 
It could be - kind of - sort of.
Could you not have “runat” put the CSS into style tags into the head? (similar to PHP include)
The only time I might ever come close to doing that is only if there was extremely little CSS.
It would save waiting for the HTTP request to complete, BUT it would increase the page weight and there would be no caching benefit,
You could do CSS the last century way and apply the styles to individual tags in the mark-up.
(Please don’t, you will soon come to regret it)
So what is that message saying? If you reference external files in the head, the browser needs to wait for them to load (odd it doesn’t the first time the external file is loaded)
If you call in the CSS in the foot, the page will render a bit faster, BUT when styles are applied, the page will repaint and things are likely to “jump” or at best there will be a FOUC
There are two things to consider here. File weight and HTTP requests.
As long as you want to use CSS, it has to load sometime somwhere, no getting around that.
IMHO call it in the head, accept that there will be a slight delay the first time it’s called in, and let browser caching do it’s thing.
Its google developers saying it does not like it either in the <head> or </body> tag…so I am like huh?
Thats what I was thinking…
I did but than that lowers the Pageinsights score and it says:
Is there a problem on your style sheet? Is it to large - try a basic/simple stylesheet instead to see what happens?
It is a big stylesheet but I cant just remove the code in there…when you mean simple and basic less style?
The delay is the browser will load that before content. Your other option is to load it after all the HTML is loaded. Which will result in unstyled content. Even worse.
Ignore google here. Please.
okey dokey.
The only time I might give that message more importance is if you are calling in files from sites other than your own. (eg. google fonts, jquery) in which case I’d likely want to host a copy of the file at my site.
If there is a problem loading a file from your site (short of typo or permission problems) then it is also likely there would be a problem loading the HTML as well, making any problem loading the CSS file moot.
IMHO you would better spend your time minifying CSS and JavaScript files, gzipping where possible, look into caching and optimizing images.
You can remove whatever you want - the page will not render properly but it would prove if there was a problem with the style sheet being to large or some other problem with it. Just as a test and you would put the original style sheet back after the test.
Anyway that is something I would try.
I see that now, thanks. What does it mean to minify CSS? is it bad to have a large CSS file?
It depends. If you are editing a JavaScript or CSS file, then it being minified will make that nearly impossible to work with.
But once it is “set” then minifying it will reduce the overall file weight, (= less bandwidth).
I try to keep both. A “min” version on the host, and a non-min version on my computer in case I want to read it and possibly make changes.
Computers can read minified files a lot better than I can. eg.
.membername {
color: #444;
font-weight: bold;
}
vs.
.membername{color:#444;font-weight:700}
You can make use of a CDN which can have settings where it automatically minifies it when sending to the browser. Pretty sure cloudfare does this for you.
Right lll do that.
Google is suggesting ways you can improve on page load performance. It’s a whole science these days. One of the tricks now is to work out what CSS is needed to render the “above the fold” part of your page, and then to embed that CSS in the head of the document to get the quickest possible page render, while serving up the rest of your CSS in the usual way, via a linked style sheet. Some recommend linking to the style sheet at the bottom of the page, but I haven’t come to terms with that yet!