It was recently pointed out to me that site load speed factors into search status. So, I thought I would do some research and experimentation with my site to see if I can improve performance. And, I thought that I could keep my notes out in public in case it might help someone else.
Since, I am possibly making some significant changes, I need to double check my backup situation. My host has a Backup Wizard that I can use…
Now, I could put my email address in for notification when it is done. And, I pick a directory:
Now, you need to check your backup to make sure that it has everything. Make sure that you have any and all of your databases included in the backup. Web Hosting Hub put them in there for me. On Lunar pages, I had to write my own tool to include them. Also, make sure that you have any files outside of the normal web pages. For example, I have a version of git that doesn’t live in the public HTML folder.
My research ran across these couple of tools for testing performance and getting suggestions. All three sound like good suggestions each with it’s own specialty. So, I am going to test with all three:
I want to create a before and after so that I can see that my changes are making a difference. This section lists the current status of my pages before I made any changes.
Page Speed
Score: 74 out of 100
High Priority, Leverage browser caching, Serve scaled images, Enable compression
Medium Priority, Combine images into CSS sprites, Optimize images
Low Priority, Minimize redirects, Defer parsing of JavaScript, Prefer asynchronous resources, Specify a cache validator, Minify HTML, Minify JavaScript, Minify CSS, Put CSS in the document head, Specify a character set, Remove query strings from static resources, Specify a Vary: Accept-Encoding header
YSlow
Make Fewer HTTP Requests: F
Use a Content Delivery Network: F
Add Expires Headers: F
Compress Components with gzip: F
Put Javascript at Bottom: B
Avoid CSS Expressions: B
Reduce DNS Lookups: C
Configure Entity Tags: E
Reduce the Number of DOM Elements: B
Use Cookie free domains: F
Do not scale images in HTML: F
Web Page Test
Before move: 8.940s
After move: 5.594s
Now: 5.945s / 3.654s
First Byte Time: D
Keep Alive Enabled: A
Compress Text: D
Compress Images: A
Cache Static Content: F
CDN Detected: X
Page Speed
Score: 83 out of 100
High Priority: Enable compression
Medium Priority: Leverage browser caching, Combine images into CSS sprites
Low Priority: Defer parsing of JavaScript, Minimize redirects, Prefer asynchronous resources, Specify a cache validator, Minify JavaScript, Optimize images, Minify HTML, Minify CSS, Put CSS in the document head, Specify a character set, Remove query strings from static resources, Specify a Vary: Accept-Encoding header
Experimental Rules: Reduce request serialization, Eliminate unnecessary reflows
YSlow
Make fewer HTTP requests: F
Use a Content Delivery Network: F
Add Expires Headers: F
Compress Components with gzip: F
Put Javascript at Bottom: B
Avoid CSS Expressions: B
Reduce DNS lookups: C
Configure Entity Tags: E
Reduce the number of DOM elements: D
Use cookie-free domains: F
Web Page Test
Before move: 7.589s
After move: 3.804s
Now: 4.761s / 2.852s
First Byte Time: F
Keep Alive Enabled: A
Compress Text: D
Compress Images: A
Cache Static Content: F
CDN Detected: X
Page Speed
Score: 83 out of 100
YSlow
Make Fewer HTTP requests: F
Use a Content Delivery Network: F
Add Expires Headers: F
Compress components with gzip: F
Avoid CSS Expressions: B
Reduce DNS Lookups: D
Configure Entity Tags: D
Reduce the number of DOM elements: B
Use cookie-free Domains: F
Do not scale images in HTML: B
Web Page Test
Now: 7.691s / 5.663s
First Byte Time: F
Keep Alive Enabled: A
Compress Text: D
Compress Images: A
Cache Static Content: F
CDN Detected: X
Page Speed
Score 53 out of 100
High Priority: Serve scaled images, Leverage browser caching, Enable compression, Optimize images
Medium Priority: Combine images into CSS sprites
Low Priority: Minimize redirects, Defer parsing of JavaScript, Optimize the order of styles and scripts, Prefer asynchronous resources, Specify a cache validator, Minify JavaScript, Minify CSS, Minify HTML, Put CSS in the document head, Specify a character set, Remove query strings from static resources, Specify a Vary: Accept-Encoding header
Experimental: Reduce request serialization, Eliminate unnecessary reflows
YSlow
Make fewer HTTP requests: F
Use a Content Delivery Network: F
Add Expires Headers: F
Compress components with gzip: F
Avoid CSS Expressions: B
Reduce DNS Lookups: C
Configure Entity Tags: D
Reduce the number of DOM elements: F
Use cookie-free domains: F
Do not scale images in HTML: F
Web Page Test
Now: 18.321s / 4.565s
First Byte Time: C
Keep Alive Enabled: A
Compress Text: F
Compress Images: A
Cache Static Content: F
CDN Detected: X
Caching Plugins
My first thing to try was install a caching plugin. I had hopes that it would help fix some of the suggestions from the tools. For example, all of the tools suggested enabling compression, and I saw that the plugins fix that.
Here’s the two plugins that I came across:
I found a number of reviews of the two. It is hard to tell which is better. I decided to try W3 Total Cache.
First, I use Ad Injection for my AdSense ads. So, I had to enable the mfunc option in the settings:
Once installed, I found that “Disk mode” was set to advanced. I changed it to Basic as it suggested. It is located on the Performance > General.
I also enabled the Minify feature and the CDN feature. Those were mentioned by the performance tools.
Enabling Compression
One of the suggestions on pretty much all of the pages was to enable compression. W3 Total Cache can enable this for the WordPress sites. The setting is located at Performance > Browser Cache > General > Enable HTTP (gzip) compression.
For my home page outside of WordPress, I looked to my hosting CPanel. According to their help, Web Hosting Hub has a tool on the control panel that enables mod_deflate.
And, I enabled it like this:
Images
One of the issues that I have with blogging is that I like to include screenshots. The way I want them to work is that it I can place a smaller version in the post, but if the reader wants a larger version, he can click on the image to open the full size.
The problem is that WordPress doesn’t have an easy way to set this up. You can shrink the images in the post, but they are still the full size for the browser to load.
Please let me know if you know an easier, more optimal way to do it.
Mobilizing
This topic isn’t so much performance, but since I am changing the home page, I am going to fix it up to adjust for mobile. So, here it goes…
I added PHP Mobile Detect, and at the top, I put:
<?php
include("Mobile_Detect.php");
$detect = new Mobile_Detect();
?>
I found a tutorial with some suggestions on how to adjust stylesheets and such. I didn’t take all of the suggestions, but they did help. This is what I ended up with:
<?php
if ($detect->isMobile() || $_GET["version"] == "mobile") {
?>
<link rel="stylesheet" href="mobile.css" media="screen"/>
<?php
} else {
?>
<link rel="stylesheet" href="standard.css" media="screen"/>
<?php
}
?>
I found a few tips with some tools that were helpful:
One thing that was pointed out was that I change the doc type. I found this “Fix It” page helpful. So, I put this at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
Another point was the content type. Again, I found this “Fix It” page helpful. I added this line at the top in the PHP tags:
header("Content-Type: application/xhtml+xml");
And, I changed the meta tag in the HTML to this:
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
MobiReady mentioned adding access keys, which I thought was weird. How many people will use access keys on a mobile device? But, the “Fix It” page was helpful, so I went ahead and added the “accesskey” attribute like this:
<a accesskey='p' href='http://psst0101.digitaleagle.net'>PSST0101</a>
“Leveraging Caching”
MobiReady has a nice Fix It page for caching. I applied both the client side and the server side to my home page. Here’s the meta tag for the client side that goes in the heading:
<meta http-equiv="Cache-Control" content="max-age=200" />
In a PHP tag, at the very top, I put this line:
header ("Cache-Control: max-age=200 ");
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', strtotime('+11 months')));
Finally, I found that these tweaks cached only the page and not the css and images on the page. For everything else, I had to change the .htaccess file. I followed
this post, and set my .htaccess to this:
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>
Now, my cache score is better both on the mobile tests and the regular web tests for the home page.
Removing Images
One of my images was to create a gradient behind my links. I found this CSS gradient creator that worked pretty good: the Ultimate CSS Gradient Generator. So, I was able to use this tool to create a gradient and get rid of an image.
After Results
I probably could do more, but I have been sitting on this post for a while. So, let me wrap up with some after scores.
First up is my home page, digitaleagle.net:
Page Speed
Score: 94 out of 100
Low Priority: Optimize images, Leverage browser caching, Enable compression, Minify CSS, Specify a character set, Specify a Vary: Accept-Encoding header
YSlow
Use Content Delivery Network: B
Add Expires Headers: E
Compress Components with gzip: B
Web Page Test
Before move: 2.174s
After move: 1.229s
Now: 0.410s / 0.030s
First Byte Time: C
Keep Alive Enabled: A
Compress Text: n/a
Compress Images: n/a
Cache Static Content: A
CDN Detected: X
Page Speed
Score: 86 out of 100
High Priority: Serve scaled images
Medium Priority: Combine images into CSS sprites, Optimize images, Minimize redirects
Low Priority: Leverage browser caching, Defer parsing of JavaScript, Inline Small CSS, Prefer asynchronous resources, Specify a cache validator, Minify JavaScript, Minify HTML, Put CSS in the document head, Specify a character set, Remove query strings from static resources, Specify a Vary: Accept-Encoding header
YSlow
Make Fewer HTTP Requests: D
Use a Content Delivery Network: F
Add Expires Headers: A
Compress Components with gzip: A
Put Javascript at Bottom: A
Avoid CSS Expressions: B
Reduce DNS Lookups: C
Configure Entity Tags: E
Reduce the Number of DOM Elements: B
Use Cookie free domains: F
Do not scale images in HTML: F
Web Page Test
Before move: 8.940s
After move: 5.594s
Now: 5.269s / 3.310s
First Byte Time: B
Keep Alive Enabled: A
Compress Text: A
Compress Images: A
Cache Static Content: C
CDN Detected: X
Page Speed
Score: 91 out of 100
High Priority: None!
Medium Priority: Combine images into CSS sprites
Low Priority: Minimize redirects, Leverage browser caching, Defer parsing of JavaScript, Inline Small CSS, Prefer asynchronous resources, Specify a cache validator, Optimize images, Minify JavaScript, Minify HTML, Put CSS in the document head, Specify a character set, Remove query strings from static resources, Specify a Vary: Accept-Encoding header
Experimental Rules: Reduce request serialization, Eliminate unnecessary reflows
YSlow
Make fewer HTTP requests: E
Use a Content Delivery Network: F
Add Expires Headers: F
Compress Components with gzip: C
Put Javascript at Bottom: A
Avoid CSS Expressions: B
Reduce DNS lookups: C
Configure Entity Tags: E
Reduce the number of DOM elements: A
Use cookie-free domains: F
Web Page Test
Before move: 7.589s
After move: 3.804s
Now: 3.399s / 2.800s
First Byte Time: A
Keep Alive Enabled: A
Compress Text: A
Compress Images: A
Cache Static Content: D
CDN Detected: X
Page Speed
Score: 92 out of 100
High Priority: None
Medium Priority: Leverage browser caching
Low Priority: Defer parsing of JavaScript, Prefer asynchronous resources, Specify a cache validator, Minify HTML, Specify a character set, Specify a Vary: Accept-Encoding header
YSlow
Make Fewer HTTP requests: E
Use a Content Delivery Network: F
Add Expires Headers: F
Compress components with gzip: B
Avoid CSS Expressions: C
Reduce DNS Lookups: D
Configure Entity Tags: D
Reduce the number of DOM elements: B
Use cookie-free Domains: F
Do not scale images in HTML: B
Web Page Test
Now: 5.755s / 4.045s
First Byte Time: B
Keep Alive Enabled: A
Compress Text: A
Compress Images: A
Cache Static Content: F
CDN Detected: X
Page Speed
Score 61 out of 100
High Priority: Serve scaled images, Optimize images
Medium Priority: Combine images into CSS sprites
Low Priority: Defer parsing of JavaScript, Leverage browser caching, Minimize redirects, Prefer asynchronous resources, Specify a cache validator, Minify JavaScript, Minify HTML, Put CSS in the document head, Specify a character set, Remove query strings from static resources, Specify a Vary: Accept-Encoding header
Experimental: Reduce request serialization, Eliminate unnecessary reflows
YSlow
Make fewer HTTP requests: E
Use a Content Delivery Network: F
Add Expires Headers: F
Compress components with gzip: C
Avoid CSS Expressions: B
Reduce DNS Lookups: C
Configure Entity Tags: D
Reduce the number of DOM elements: C
Use cookie-free domains: F
Do not scale images in HTML: F
Web Page Test
Now: 17.842s / 3.733s
First Byte Time: F
Keep Alive Enabled: A
Compress Text: A
Compress Images: A
Cache Static Content: B
CDN Detected: X
Resources
