Forums

Dev

Hi. I have a few questions concerning my CSS file.

I preformed a speed test on my website with the PageSpeed Insights in Google WebMaster Tools and the results was not good (I got an "F"...49%) and it was recommended (besides a few other things) that using CSS @import in an external stylesheet can add additional delays during the loading of the web page. The below is what is at the top of my CSS Stylesheet:

@charset "iso-8859-1"; @import url('layout00.css');

Google recommends that I use the tag instead of CSS @import.

Why is Google recommending this when already have the link tag in the html of my website:

view-source:http://www.headcoverings-by-devorah.com/

Is Google meaning for me to put a link tag to the "layout00.css" file also?

Also, what is the @import url('layout00.css'); needed for anyway since when you view it there is only "0" in the values. Can I remove this from the stylesheet and my website still render properly in browsers and for Google?

http://www.headcoverings-by-devorah.com/styles/layout00.css

I did not originally do the template of my site so I am not sure what Google is recommending that I do and would appreciate any help.

Dev

jurotek

@Dev, add to your style200.css this

html, body {margin:0; padding:0;

and eliminate this from your style200.css

@import url('layout00.css');

you don't need it, other suggestion: move your style sheet as far up in head section as you can.

jurotek

I would consider rewriting doctype and head section in your dynamic web template to something like this:

<!DOCTYPE HTML>

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="styles/style200.css" rel="stylesheet" type="text/css" />

<title>Title of the page</title>
<meta name="description" content="Page Description" />

<meta name="y_key" content="fab0f11a564d45ee" />
<meta name="author" content="Devorah Channah - Artist / Designer" />
<meta name="copyright" content="Copyright © 2010 Headcoverings by Devorah All Rights Reserved" />
<meta http-equiv="imagetoolbar" content="no" />
<link href="http://www.headcoverings-by-devorah.com/favicon2.ico" rel="shortcut icon" />

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-4589040-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); })();

</head>

Don't forget to add editable regions, cause they got striped when I posted it.

chrisburton

Isn't it proper to put your stylesheet after the meta tags and title but before your scripts?

jurotek

Come to think of it, you could also replace you existing analytics script with this optimized version:

var _gaq=[['_setAccount','UA-4589040-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))

jurotek

@chrisburton, I always put my style sheet first right after the opening head tag. My lang and charset is set in .htaccess so I don't put it in my pages at all.

Dev

Thank you so much for your help!

Btw, do I put the "optimized version" of the analytics script just like this:

var _gaq=[['_setAccount','UA-4589040-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))

chrisburton

@Dev

  <script>
      var _gaq=[['_setAccount','UA-4589040-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))
  </script>

treehouse : what would you like to learn today?

Forums

Question about "Avoid CSS @import" by Google's PageSpeed Insights