One of the most common questions the web master of today has is: "How do I improve my website's performance?". Indeed, even if your servers have the fastest data connection in the world with the lowest ping, a website may still appear to load slower than it should from the visitor's perspective. This is because the page's markup is not optimized, so it takes longer for the visitor's browser to render the page. Optimizing a website is much easier than most think, and can be done with very little coding experience.

  1. Minimizing HTTP Requests

    A browser doesn't download all objects on a page at once (stylesheets, JavaScript, images, etc). It downloads them in parallel, 2 at a time per host. So in order for every object on the page to load, the browser must connect to the server, wait on the server, receive the response, and then parse the response. This all happens very quickly, but if it happens dozens of times, it will become noticable. Consider consolidating resources so that fewer requests are made. Combining stylesheets, and JavaScript files will do wonders, as will combining multiple icon images into a single image, and then using CSS to display only a small part of that image (These are called sprites). As a rule of thumb, the target is to have a single CSS file that loads, no more than 2 Javascript files, and about 20 image requests tops.

  2. Caching Resources

    Perhaps one of the easiest things as a web master to do, is to have visitor's browsers cache content, so that it does not need to be requested each time the page loads. Many content applications have this functionality built in (or it can be configured at the server level in some environments, such as cPanel), but for custom platforms it may be be possible to create your own .htaccess file and cache content by adding expiration headers and by using the Apache DEFLATE module:

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    ExpiresActive On
    ExpiresByType image/png "now plus 365 days"
    ExpiresByType image/jpeg "now plus 365 days"
    ExpiresByType image/gif "now plus 365 days"
    ExpiresByType application/javascript "now plus 1 week"
    ExpiresByType application/x-javascript "now plus 1 week"
    ExpiresByType text/javascript "now plus 1 week"
    ExpiresByType text/css "now plus 1 week"

  3. Optimizing Images

    Image optimization can play a huge role in decreasing image sizes, thus reducing transfer times. Most of the time, it's possible to save the same optimized image without losing any image quality. Using the correct image formats for different types of images also helps quite a bit. Dynamc drive offers a great image optimizer here:

  4. Minimize CSS / JavaScript Files

    A fact that constantly seems to elude many developers is that minizizing CSS / JavaScript files will greatly reduce a file's size. By minimize, we mean removing whitespace, extra line breaks, etc. In a perfect world, a great minimized file will have no  spaces, and all appear on one line of code. This may not always be practical for some developers due to them wanting the ability to make "on the fly" changes to CSS, but JavaScript files are not changed much so they should always be minimized. There are many minimizers out there, which will take your existing file and give you the minimized file. A good rule of thumb for mimimizing CSS is to remove all tabs and extra spaces, and put each CSS class on its own line, with all the rules for that class on the same line. In most cases, doing this will reduce your JavaScript and CSS file sizes by as much as 70%.

  5. Defer JavaScript

    Not all JavaScript is needed at load time, so if your page makes multiple JavaScript requests, it may be a good idea to place those requests at the bottom of the page, just before the closing tag. This way, the browser can render the rest of the page before it makes those miscellaneous JavaScript calls, giving the appearance that the page has already loaded when it still has a bit to go. This may shave just milliseconds off load times, but if you shave every millisecond you can where ever you can, it will quickly add up.

Tuesday, January 24, 2012

« Back