Have a look at the initial test results of www.abcinnovations.com here.
1. Removing redirects
It turns out that, after transitioning from .html files to .php files, we left in an "index.html" that used a 301 redirect to point people to the "index.php" file which actually had the content. Unfortunately, that index.html was the default page being served up, so that was adding in a significant amount of unnecessary time. 0.971s to be exact.
Here's the line in the .htaccess file that lets our server know that we want it to serve index.php (and only to serve index.html if for some odd reason index.php isn't found):
DirectoryIndex index.php index.htm
You can see the improved test results here.
2. Consolidating JavaScript and using a CDN.
The next tweak I made was to incorporate a short bit of javascript from an external file into head tag of the page. Also, rather than serving the jQuery.js file from our own domain, I switched to a copy from Google's CDN (content distribution network) instead. There's a decent chance the jQuery file will already be cached on the user's computer, since ~30% of all sites use Google's CDN in some form. Even if the caching doesn't come into play, it's still faster to let Google serve it, because Google has a lot more bandwidth than our basic hosting plan. Also, our content comes from exactly one server. Google serves its content from one of its many datacenters, and it will pick the one that will have the fastest connection to that particular user. The resulting change was from ~563ms to ~19ms to download the file. (Note: there's a confounding variable here: we were serving an uncompressed version of the library, and Google serves a compressed version. Taking that difference into account, Google still serves the file 10.16x as fast as we were.)
You can see the results after applying the above two optimizations here.
And here is a quick visual comparison of those 3 tests.
Those two were the biggest changes in terms of % improvement, but while each of the following changes alone didn't have a significant impact, together they still noticeably improved performance.
3. Compression with zlib
Have a look at this line in the .htaccess file:
AddType x-mapp-php5 .php .shtml .html .htm .txt .js .css .woff .ttf .svg
as well as this line from the php.ini file:
zlib.output_compression=1
The important part here is the 'zlib.output_compression=1'. Most browsers will prefer to download a compressed version of all files over uncompressed. This setting allows the file types specified in the .htaccess to be compressed by PHP + gzip. It's a reduction in filesize of roughly 75%.
4. Image compression
I changed the following four images:
keyboard
keyboard-over
whiteboard
whiteboard-over
from .png format to .jpg format. JPG is the preferred format for photographic content. 85.3% reduction in filesize: 785kB to 115.3kB.
5. Reordering
Deferring the loading of any script file until after the html/image content has loaded makes it seem like the page loaded sooner, but has no effect on the actual amount of data transferred. Also, depending on where you make the references to external js/css files, the browser may or may not download css files in parallel. This isn't really an issue as there's only one css file for this page.
6. Progressive JPG's
I also transitioned to using only progressive JPG's. Think png interlacing, but for jpg's. There is no change in the bytes transferred (technically not true, it actually makes the files ~1kB smaller!), but it makes the user experience better.
7. Enable caching
I added these lines to the .htaccess file:
ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 1 month"
The site doesn't change much, so I allow the expirations to be fairly long.
Summary:
Total bytes transferred in loading the page
Previously: 995kBNow: 286kB
Difference: 71.2%
Note: All differences were calculated as follows: (1-(286/995))*100 = %, aka a percent decrease.
Previously: 10kB
Now: .38kB (caching at work!)
Difference: 96.2%
Previously: 2.296s
Now: .709s
Difference: 69.0%
Previously: .504s
Now: .260s
Difference: 48.4%
Speed Index:
Previously: 1600
Now: 602
Difference: 62.4%
Note: See here for why you should care about the Speed Index. Source: http://httparchive.org/
Median complete page load time (visually complete + all js/css/rollover images/everything else)
Previously: 3.584s
Now: .868s
Difference: 78.8%
Note: It was taking 3.5 seconds for the rollover images to become functional, or roughly 1 second after the page appeared to have loaded completely. Now it's 100ms afterwards.
Here is the final test, after all these optimizations were completed.
And, as a special treat, guess which of the four major browsers loads the site the fastest!
If you have any questions, feel free to comment. I'd be more than happy to answer.
