Home arrow Web Authoring arrow Website Optimization Tips

Website Optimization Tips

Your websiteís overall speed is essential to providing a positive user experience for your visitors and can have an effect on your rankings in the search engines. The slower your site, the more frustrated your visitors will become, which could lead them to try a competitorís site instead. There are tons of steps you can take to optimize your websiteís performance, and this list will present a sampling of them.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
August 02, 2011

print this article

Your websiteís overall speed is essential to providing a positive user experience for your visitors and can have an effect on your rankings in the search engines. The slower your site, the more frustrated your visitors will become, which could lead them to try a competitorís site instead. There are tons of steps you can take to optimize your websiteís performance, and this list will present a sampling of them.

Simplify Your Design to Reduce HTTP Requests

If you have a page that is loaded with Flash, scripts, images, and the like, it will probably take a lot more time to render properly than it should.  Itís even truer for first time visitors who are accessing your site with an empty cache.  The more components you have, the more HTTP requests there will be.  To make your web page faster, youíll need to make its design as simple as possible and keep the HTTP requests at a minimum.

Now, you are probably thinking that simplifying your page means removing all the great content that attracts your visitors in the first place.  Luckily, thatís not the case at all, because there are ways to clean up your design without sacrificing the content. 

A great way to minimize the amount of HTTP requests on your page is to actually combine components.  If you have a site that is plagued by a lot of image requests, CSS sprites are a great way to simplify the design.  For example, you can use them to combine your background images into one.  Then, to display a specific image segment, use CSSí background-image and background-position properties.

There are a couple of other ways to reduce your HTTP requests when it comes to images, but they are not as ideal as CSS sprites.  The first is to use image maps which take multiple images and combine them into a single one.  You wonít see much of a change in terms of size, but the fact that you reduce the number of HTTP requests is the key. The second method involves the use of inline images which embed image data in the page itself.  You may run into some compatibility issues with certain browsers when it comes to inline images, so keep that in mind.

Move Your Stylesheets to the Documentís HEAD

Letís say you have a page that is pretty heavy on content and could take some effort to load.  If you have visitors that suffer from slow connections, their user experience could be somewhat negative if your stylesheets are not situated at the document HEAD.  Placing stylesheets at the document HEAD allows your page to render in a progressive manner.  In other words, it lets the browser display any content that is readily available.

Why is this important?  Think of it as peace of mind to the visitor.  As your page loads progressively, the available content that appears during the loading process acts as an indicator of progress.  It lets your visitor know that the site is working, and it just needs a bit more time to be completely ready for use.  If a visitor sees that nothing is appearing, they may leave your site altogether.  Such a condition exists from having your stylesheets towards the bottom of your document.  Having components such as your header, brand logo, and more appear is much better than a blank page.  Even HTML specifications recommend that you include stylesheets in the HEAD, so itís a good rule to follow to enhance your siteís efficiency and its appeal to visitors.

Keep Your Iframes to a Minimum

The HTML <iframe> tag helps to define an inline frame containing another document.  When used properly, the <iframe> tag can offer several advantages.  First of all, it offers a sandbox for security.  It also helps when it comes to downloading scripts in parallel as well as dealing with advertisements or other third-party content that is typically slow. 

While those advantages may be nice, there are also some disadvantages to using the <iframe> tag.  To start, itís non-semantic.  Second, it blocks page onload.  Last, but not least, a blank iframe can be a drain on performance even if it itís empty.  Therefore, if you do use iframes, make sure to do so sparingly.

Eliminate Duplicate JavaScript Files

Having the same JavaScript file twice in a page will negatively impact your speed and overall performance.  You may think that having such a problem would be rare, but it really isnít.  Even some of the top websites around have duplicate scripts, which can happen if several people work collectively on a site or if the sheer number of scripts use is large. 

Duplicate scripts can cause two problems.  First, they create redundant JavaScript execution, as the script must be evaluated more than once.  Second, they increase the number of HTTP requests that can effectively bog your site down. 

How can you combat the problem of JavaScript file duplicity?  Try placing the SCRIPT tag in your HTML page.  Hereís an example:

<script type="text/javascript" src="sample.js"></script>

You can achieve a similar effect in PHP using the insertScript function:

<?php insertScript("sample.js") ?>

Either way should prevent the same script from appearing twice in your page.

Make the Most Out of Your CSS Sprites

As mentioned earlier, CSS sprites are a great way to minimize HTTP requests, as they can combine several images into one.  While the use of CSS sprites is advantageous within itself, you want to make sure that your sprites are optimized.  You can achieve a more compact file size by arranging the spriteís images in a horizontal manner rather than a vertical one.  You should also try to keep your color count below 256 colors.  To do this, simply combine any similar colors in the sprite.  Finally, eliminate any large gaps between the images in the sprite.  Doing so is helpful when dealing with a mobile platform, as the user agent wonít need as much memory to decompress the image.

Minimize the Size of Your Cookies

While itís hard to deny the value of cookies when it comes to helping with authentication, providing a personalized experience, and more, they can affect a visitorís response time in a negative manner.  To prevent this from happening, you should try to minimize cookie size.  Another good practice to follow is to observe a cookieís Expires date.  You can boost a visitorís response time by setting the Expires date to none or a date thatís not so far in the future, as the cookie will be removed more quickly.  Lastly, you can simply eliminate any cookies that are deemed to be unnecessary.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Web Authoring Tutorials
More By wubayou

blog comments powered by Disqus

- Top WordPress Plugins for Social Media
- How to Install WordPress on WAMPP
- More of the Best Wordpress Plugins for Comme...
- Top Wordpress Plugins to Fight Spam
- More of the top Drupal modules for SEO
- Top Drupal Modules for SEO
- More Top Wordpress Plugins for SEO
- Website Optimization Tips
- Backup and Restore a Drupal Website and Data...
- 5 Best Web Font Services
- Web Font Embedding Services
- Joomla Site Administration
- Create PHP Pages that Use WordPress Templates
- Top Joomla Extensions for Social Networking
- Drupal Modules for Site Navigation

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials