"Today, most software exists, not to solve a problem, but to interface with other software." — IO Angell

Optimizing Your Website For Speed

Optimizing Your Website For Speed

Making Your Website Fast

Recently, Google, made the announcement that the speed your website loads is now calculated into their page ranking. To that I say….good for Google! Think about it, what do you do when a website is slow or doesn’t load…you LEAVE! In the world of the Internet, you have mere seconds to capture a visitor’s interest before they leave and find your competitors. Can you afford to have them leave just because of your websites speed? In fact, I think Google says it best…

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. — Quote From: Google Blog

So, what can you do to make your website faster? Well, that’s what I’m going to be covering in this article. Lately, I’ve been extremely focused on making The Web Squeeze faster. This isn’t just because Google is taking website speed into account in it’s ranking — it’s because we want our website to be fast for our readers. We want happy readers! Since we just did a redesign, I thought this was the perfect time to work on speed, so that’s what I did.
I knew the basics of optimizing a website for speed, so that’s where I started. But, I didn’t want to stop at the basics. I wanted to do as much as I could and expand my knowledge past the basics. With some research, and of course, some discussion and help from our web design forum, I was able to do just that! Without further ado, here’s what I did, and how it impacted our website’s speed. (I should mention that I’m not done, and probably won’t ever be done, so hopefully you’ll see more articles just like this one!)

Website Speed Checklist

The Basics
  • Put your inline JavaScript and CSS into external documents!
  • Reduce HTTP Requests
    • CSS Sprites
    • Consolidate JavaScript and CSS
  • Move JavaScript to your footer!
  • Minify JavaScript
  • Minify CSS
  • Minify HTML
  • GZIP all static content
  • Compress and optimize images
  • Caching using mod_cache
  • Reduce the overall download size
Beyond The Basics
  • Domain Sharding
  • CDN (Content Delivery Network)
  • Intelligent Caching
  • Progressive Page Rendering
  • Speed up the backend application
  • Database Caching
  • File Caching
For Your Consideration (Advanced)
  • Use a distributed application object cache (memcache)
  • Use Squid or another caching reverse proxy
  • Use a load balancer

Now, let’s get down and dirty and go over this checklist!

Website Speed 101

The Basics Explained
Put your inline JavaScript and CSS into external documents!

What do you mean by inline code, Jacob? Well, glad you asked! What I mean by “inline” is any on-page styling and any on-page JavaScript! Here are a few examples…
Inline CSS Examples…

                                        <!--
                                        #header {
                                        background: url(../i/header-bg.png) no-repeat top center;
                                        height: 235px;
                                        overflow: hidden;
                                        }

-->
                                        

I am RED!

                                                                                    

Inline JavaScript Examples…

                                        <script type="text/javascript"><!--mce:0--></script>
                                        

By moving your inline CSS and JavaScript to external documents you’ll be able to improve your website speed, but that’s not all!
You’ll also…

  • Reduce Code Bloat
  • Decrease your code to content ratio
  • Make your website more maintainable
  • Get that warm, fuzzy feeling and know your code is near perfect!

One of my questions was how would moving inline code improve my website’s load time? The answer was found at Yahoo’s Developer Network!

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.
The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. This factor, although difficult to quantify, can be gauged using various metrics. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files. — Quote From: Yahoo Developer Network

Great, so now you don’t have any inline JavaScript or CSS, what’s next?

Reduce HTTP Requests

Reducing HTTP requests is an imperative part of improving your website’s response time. The fewer requests you make, the faster your website loads. Think about it — if your website has 20 images on the homepage and you find a way to combine the images using CSS sprites to a mere 10 images, then your site will load much faster.

CSS Sprites

This is a little tricky to explain. The idea is for you to take multiple smaller images and combine them into one large image. Then, using CSS you can shift around and display the part of the image that is needed, instead of having to get multiple small images multiple times. This technique is normally used in navigation menus, but it can be used virtually anywhere. Sprites are very cool and you should check them out.
There’s no need to re-invent the wheel. Here are a few excellent resources to help you learn more about CSS Sprites!

Consolidate JavaScript and CSS

According to Yahoo, a staggering 80% of the end-user response time is spent on the front-end downloading all the components in the page!

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times. — Quote From: Yahoo Developer Network

Move JavaScript to your footer!

Keep in mind JavaScript is used to enhance the visual effects in your website. So, by moving this into the footer it will be loaded last because the browser loads sequentially top to bottom. The most important part of your design is your CSS styles which should be in the header, followed by your content and finally the JavaScript (which is your effects). Moving JavaScript to the footer does not necessarily improve your site’s load time — but it improves the “perceived” load time. Having this in the footer fools the eye. To the user, it looks like everything is loaded…but in reality the JavaScript could still be downloading. That is how I think of it. But, it actually has to do with parallel downloads.

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames. — Quote From: Yahoo Developer Network

  • Minify JavaScript
  • Minify CSS
  • Minify HTML

Minifying is taking out all new lines and comments and putting everything on one line. Since new lines and comments all add to your document’s size, by minifying your JavaScript and CSS and removing all that, you are reducing the document’s overall file size thereby reducing the amount that needs to be downloaded by the end user.
There are a few tools available that will minify your JavaScript for you, and I’ll link to those in the tools section below.
Minifying your HTML and CSS is not as easy as minifying your JavaScript. When it comes to these, you want them in a readable format so that later on you will be able to locate the parts you want to edit. You CAN minify — but you have to keep future edits in mind. My solution to this was to write a PHP function that loops through all your HTML code and removes any new lines or comments; thereby minifying your code on the fly. In other words, I use PHP to go through the code before it is sent to the user and remove all new lines or comments. My original copy never changes, so my comments and formatting are there, but they are never downloaded to the user. In a future article, I’ll write more on my coding for this.

GZIP all static content

The goal here is the same as above, with minifying your HTML, CSS and JavaScript. You want to reduce the document size, which in return reduces the amount the end user has to download. GZipping is the same as the computer term “zip.” You are compressing all the static components, which is the same as making a zip file on your computer. GZip uses a slightly better compression algorithm for this so it makes the files even smaller.
There are multiple ways you can apply a GZip, but most tend to use .htaccess.


                                                                                    mod_gzip_on Yes
                                        mod_gzip_dechunk Yes
                                        mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
                                        mod_gzip_item_include handler ^cgi-script$
                                        mod_gzip_item_include mime ^text/.*
                                        mod_gzip_item_include mime ^application/x-javascript.*
                                        mod_gzip_item_exclude mime ^image/.*
                                        mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

                                                                                    
Compress images

Again, the goal here is to reduce what the end user has to download so that load time is faster. Keep in mind, when you save an image in your image editor, if you are saving it for your website the smaller you can make the image the faster it will load for the user. Can you save it at 80% quality and not really notice any difference? Most of the time you can! This is step one. Your next step is to take the image and “smushit.” The team at Yahoo has developed a handy tool that allows you to smush or compress your images even smaller without noticing any change in quality. So — why not “smushit?”

  • Configure ETags
  • Add an Expires or a Cache-Control Header

ETags explained by Yahoo Developer Network….

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component’s ETag using the ETag response header. — Quote From: Yahoo Developer Network

Add an Expires or a Cache-Control Header explained by Yahoo Developer Network….

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components. — Quote From: Yahoo Developer Network

There are many ways you can go about adding an ETag and controlling how your files and documents are cached, however, most of the time this is done through your .htaccess file. Here’s an example….

                                        # ETAG CACHING #
                                        Header unset ETag
                                        FileETag None
                                        # HEADER CACHING #

                                                                                    Header set Cache-Control "max-age=2592000"

                                                                                    Header set Cache-Control "max-age=604800"

                                                                                    Header set Cache-Control "max-age=600"

                                                                                    Header unset Cache-Control

                                                                                    # ALTERNATE EXPIRES CACHING #
                                        ExpiresActive On
                                        ExpiresDefault A604800
                                        ExpiresByType image/x-icon A2592000
                                        ExpiresByType application/x-javascript A2592000
                                        ExpiresByType text/css A2592000
                                        ExpiresByType text/html A300

                                                                                    ExpiresActive Off

                                                                                    
Reduce the overall download size

This should all start to be second nature to you now. Make your files as small as you can so that the user doesn’t have to download as much. In review, here are the basics we have covered so far.

  1. Reduce code bloat
  2. Make images smaller
  3. Use CSS Sprites
  4. Take advantage of minifying, caching, and ETags
  5. GZip static elements
  6. Put JavaScript and CSS in external documents
  7. Put JavaScript in the footer

The Tool List

There were loads of articles, tutorials, books, tools, and websites that I found helpful along my way. I’ll include a list of a few of my favorites below. Hopefully, in the coming articles I’ll compile a more comprehensive list of great articles, tutorials, tools, and websites!

Speed Optimization Tools

Speed Optimization Resources

Your website needs to be fast! And now that Google is taking this into account in its rankings, speed is an even greater consideration. Here, we have just touched on the basics. In my next article we will continue on…”Beyond the Basics.”

* Note: Special thanks to Mike Hopley from our forum for his insight and support in the writing of this article.

Comments are closed.