The best problem a website can have is too much success. Visitors flocking to your site in record numbers, orders coming in faster than you can process them, and advertising revenue is soaring. So why is this a problem?
With increased traffic comes greater resource usage and higher hosting costs. In most dynamic applications, each requested page goes through a series of actions before the content is returned to the browser. Without getting into too much detail here are the steps of a basic request.
- A URL is entered into the web browser. (www.cnn.com)
- A DNS lookup is performed to locate the IP address of the server and the HTTP request is made
- The web server sees the request and begins processing the request.
- If it is a static page the HTML content is returned to the browser
- If the page is dynamic, processed at the time of request, the server calls the appropriate processor to generate the HTML to return to the browser.
- Once the browser has the HTML for the page it begins to render the content. More requests are made to the server to download the required page assets such as images, style sheets, Javascript, XML, videos, etc.
So what can be done to make sure your site is as lean as possible?
There are at least a hundred steps to planning, designing and developing a great looking, fully functional website and none of them should be overlooked. Unfortunately , this article is only going cover some of the best practices for development, but if you have questions about your site feel free to contact us.
HTML/CSS
HTML and CSS design are the building blocks of your website, they should be well planned before coding begins. The site should be well structured and allow for simple changes. Make sure to follow web standards, use a valid doctype, XHTML valid code is preferred (lowercase tags and attributes, close tags, etc.) and don’t forget about accessibility guidelines for disabled users. These options don’t do much for page weight, but a well formatted (X)HTML document will render better and faster in the browser than an invalid one will.
CSS should be used as much as possible and should be in an external file included in the <head> tag of your HTML. This allows the browser to cache the .css file and you can reuse the rules across the entire site without having them hard-coded in every page.
For example <p><strong><u>this text is bold and underlined</u></strong></p> should be re-written as <p class=”bold underline”> this text is bold and underlined </p> . This way if you want to change the color of the bold text to red you can update your .css rule in one place and it will update the entire site. .bold {font-weight:bold; color:#f00;}
CSS is not just used to control text size, color and decoration, it controls the look and feel of the entire site. (margins, padding, spacing, positioning, fonts, colors, sizes, backgrounds)
NOTE: Don’t forget to validate your HTML/CSS files. Failure to do so could lead to hours of wasted time debugging issues that could be nothing more than a typo.
Javascript
Javascript can be one of the simplest things to add to a site to increase user experience, it can also easily double the size of your document in a hurry.
If you are using a Javascript library (jQuery, YUI and MooTools come to mind) don’t just include it to look cool. If you are not going to use it, don’t include it. Also, if you are only going to use 1 feature of the entire library then maybe it is not your best option. All of the great functionality of a Javascript library and its associated plugins can come with a hefty download price, but the good news is javascript files are cached by the browser and should only need to be downloaded once.
Use external Javascript files – If you are not building your script on the fly, there is no reason to put the code directly in your page. Include it in the <head> and pay attention to load order. Again, combine files whenever possible. (Yes, there is debate over loading at the top of the page versus the bottom due to parallel download issues, but that also depends on what your script does and I’m a creature of habit)
Minify your files – The minification process removes comments and whitespace from Javascript files and can reduce the size by half.
NOTE: Don’t assume that everyone has Javascript enabled. Make use of the <noscript> tag.
Images
Watch your file sizes (Save for web is your friend) – I have seen many examples of users just hitting save on a file and including it in their code without ever looking at the size. Right click on an image and click properties. If the image is over 20KB it is too large.
File type is important – jpg, gif, png are not all the same, a 30KB jpg file might be a 5KB gif or vice-versa.
Use CSS whenever possible in place of images. Strategic use of Javascript and CSS can reduce the number of images your page uses.
Don’t use width and height to resize a large image. If you would like to display an 800×600 image as 80×60 create a new image. The thumbnail will download quicker and you are less likely to have image distortion.
Video
Video can be a real catch-22, you want your users to watch it, but when they do your bandwidth usage goes through the roof. Video codecs are getting better all the time so make sure you are using the right one. Finding the right with the right settings will give you high quality video at the best bit rate possible.
The other option is to use a Content Delivery Network (CDN). They will host your video and stream it using their bandwidth for a monthly fee.
Server/Application
Minimize HTTP requests – The fewer connections you need to make to the server the faster your page will load.
Cache settings – Use Expires or Cache-Control to keep objects in the local users cache. Not only does this reduce bandwidth usage, it will increase the users perceived speed of the site because it only needs to download new or changed items.
Use http compression on the server – it will decrease your HTML, CSS and Javascript files by up to 75%
Best Practices
Do your best to combine resources. You don’t need 5 different CSS files loaded into one page. You are only slowing down the page by creating more connections to the server.
Monitor files created and uploaded by 3rd party processes – there are usually settings to control image quality and that could mean the difference between 100K images and 300K files. Believe me, on a high demand website this makes a world of difference in bandwidth usage.
Monitor your site statistics. They provide valuable information that can be vital to the success of your business.
Review your site frequently, technology changes quickly and it is quite possible that there are now better ways to accomplish something that was done months ago.
And last but not least, test your site in all major browsers. (Internet Explorer, Firefox, Chrome, Safari)
Tools
Here are a few tools at your disposal to help evaluate your page validity and weight.
http://validator.w3.org/ – HTML Validation
http://jigsaw.w3.org/css-validator/ – CSS Validation
http://www.netmechanic.com – slightly outdated, but nice to see image sizes and load time
Firefox Plugins – FireBug, YSlow
Of course none of this makes any difference if your server side code and database isn’t optimized to handle the heavy traffic, but that is a post for another time.
