I went to Google's PageSpeed Insights page. My home page earned a 64 out of 100 points for speed. Hmmm. Doesn't sound good. Google had a series of recommendations.
1. First to fix was JavaScript files blocking the page download. I had JavaScript files blocking the download. After careful examination, two of those were deemed obsolete. To the others, the "async" keyword was added so the modern browsers wouldn't block on downloading those.
<script async src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
But, sometimes the bootstrap would load first and whine about needing the jquery library. So I concatenated both libraries into a single javascript source file, with jQuery first, and called the combined file with "async".
2. I combined all custom css files into a minified file. This is a no-brainer.
<!-- link local stylesheets -->
<link id="csslink" href="http://www.fincher.org/style/Menus.css" rel="stylesheet" type="text/css" />
<link id="csslink" href="http://www.fincher.org/style/Basic.css" rel="stylesheet" type="text/css" />
<link id="csslink" href="http://www.fincher.org/style/BeachCore.css" rel="stylesheet" type="text/css" />With a small linux shell script using the YUI compressor utility:
cat www/style/Menus.css www/style/Basic.css www/style/BeachCore.css > www/style/All.css
java -jar lib/yuicompressor-2.4.8.jar --line-break 80 www/style/All.css -o www/style/All-min.css Then replaced the three html lines above with
<link id="csslink" href="http://www.fincher.org/style/All-min.css" rel="stylesheet" type="text/css" />3. I then replaced the ancient Google Analytics script "urchin.js" with "analytics.js" which does not block.
Doing these three simple things raised my score from a 64 to an 79.
I started using YSlow from yahoo to get some more ideas, but those will have to wait...
No comments:
Post a Comment