Call me!
cell: 612-730-9540

CSS Optimization Technique

Project Winter 2014:

Utilize CSS optimization to speed up page load and satify Google PageSpeed Insight requirements

Google's PageSpeed Insights tool says I have three elements in the head of my document that are causing a delay in the page loading quicker. Two are CSS files and one is the CDN file for jQuery API. Google Developers rule on Optimize CSS Delivery suggests the technique I use is to embed "only" the necessary CSS the page needs during loading in the head of the page. And we should only do this if the necessary CSS wasn't a large amount to embed. It didn't state what they thought was too many lines - perhaps 50 or maybe 100 would be the maximun. The embeded CSS in this page is just a hair under 75 lines. It also suggests including only the above-the-fold CSS. This means the footer CSS would be left in the external stylesheet which I would link at the bottom of the page - after my last div but before the final closing <body> tag. The final result is satifying Google rule, "Eliminate render-blocking JavaScript and CSS in above-the-fold content".

On a side note, this page scored 100/100 Mobile/Desktop in Google PageSpeed Insights tool.

The Code Reveal:

First: The HTML


<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<title>My CSS Optimization</title>
<head>
<style>
html { overflow-y: scroll; }
body { margin: 0 auto; padding: 0; font: 11px/16px Verdana, Geneva, sans-serif; color: #000; background: #F5F5F5 url(bg-body.jpg) repeat-x; }
#content section ul, aside section ul { margin: 0 0 0 15px; padding: 0 0 15px 15px; }
#content section ol, aside section ol { margin: 0 0 0 20px; padding: 0 0 15px 15px; }
#content section ul ul ul, aside section ul ul ul { margin: 0 0 0 15px; padding: 0 0 0 15px; }
#content section ol ol ol, aside section ol ol ol { margin: 0 0 0 20px; padding: 0 0 0 15px; }
#content section dl, #content section blockquote, aside section dl, aside section blockquote { margin: 0 0 0 15px; padding: 0 0 15px 15px; }
h1, h2, h3, h4, h5, h6, p { clear: both; margin: 0; padding: 0 0 15px; }
h1 { font: 700 1.81em/1.27em 'Tinos', Georgia, "Times New Roman", Times, serif; text-transform: uppercase; }
h2 { font: bold 1.27em/1.27em Verdana, Geneva, sans-serif; color: #036; }
h3 { font: bold 1.1em/1.27em Verdana, Geneva, sans-serif; }
h4 { font: bold 1em/1.27em Verdana, Geneva, sans-serif; }
h5 { font: bold 1em/1.27em Verdana, Geneva, sans-serif; }
h6 { font: bold 1em/1.27em Verdana, Geneva, sans-serif; }
a img { border: none; }
a, a:visited { color: #2361A1; text-decoration: underline; }
a:hover, a:active { color: #082a4d; text-decoration: none; }
.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
/* rest of embedded CSS left out to reduce page scrolling */
</style>
</head>
<body>
<div>
<h1>CSS Optimization Technique</h1>
<h2>Project Winter 2014:</h2> 
<h3>Utilize CSS optimization to speed up page load and satify Google PageSpeed Insight requirements</h3>
<p>Google's PageSpeed Insights tool says I have three elements in the head of my document that are causing a delay in the page loading quicker. Two are CSS files and one is the CDN file for jQuery API. Google Developers rule on Optimize CSS Delivery suggests the technique I use is to embed <em>"only"</em> the necessary CSS the page needs during loading in the head of the page. And we should only do this if the necessary CSS wasn't a large amount to embed. It didn't state what they thought was too many lines - perhaps 50 or maybe 100 would be the maximun. The embeded CSS in this page is just a hair under 75 lines. It also suggests including only the above-the-fold CSS. This means the footer CSS would be left in the external stylesheet which I would link at the bottom of the page - after my last div but before the final closing <body> tag.</p>
<footer>
</footer>
<link href='http://fonts.googleapis.com/css?family=Tinos:700' rel='stylesheet' type='text/css' />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="favicon.ico" rel="shortcut icon" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</div>
</body>
</html>

I have included the Google Font, a favicon and a jQuery API CDN link at the end of the page. These files are not crucial to the page load so therefore can be deferred to after the page has loaded.

The problems

  1. My problem with leaving the footer CSS out of the embedded CSS is what happens on a short page, or, what happens if a person has their monitor set up portrait instead of landscape. I know many developers who develop websites with their monitors set portrait. Same problem thing goes for viewing websites in portrait view on tablet devices.
  2. I have my <h1> elements set to use Google Web Fonts. If you didn't already catch it, when this page loaded, the page headline briefly switches from a back-up serifed font I use in case the Google Web Font "Tinos" can't be found. Because the link to the Tinos font is in the bottom of the page - the page can't find it for the brief milliseconds the page is being loaded - and then it finds it, and rebuilds the <h1> element as Tinos.
  3. Page won't validate properly and gives a "Element link is missing required attribute property" error. Google PageSpeed Insight rule says we should move it to below the very end of the document, below the closing </html> tag but this other causes a different validation error "Stray start tag link" and "Cannot recover after last error. Any further errors will be ignored.".

The solutions

The final solution was to embed the footer/below-the-fold CSS in the <style> element in the <head> of the page but leave the link for Tinos Google Web Font in the bottom of the page. I'll accept the validation errors and take the speed improvement.

Final thoughts

There is a way to defer the CSS file utitlizing a JavaScript deferring script but browsers can sometimes be buggy with JavaScript and older browsers may not recognize newer idioms used to make the script which may cause the CSS to not load at all. My philosophy is to make sure all crucial elements load up and then to add extra functionality that, if for some reason it didn't work - whether the browser doesn't support it or some other unforseen issue arrises - wouldn't be missed. This process is also known as progressive enhancement - build it so it works in everything first, then add enhancements.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.