While more and more people are using faster Internet connections, there seems to be less emphasis by web developers on optimizing pages for faster load times. We’re seeing more and more widgets and javascript-heavy pages that take a long time to load, even on fast Internet connections. It’s a breath of fresh air when a website loads quickly and cleanly.
Web developers sometimes neglect some simple rules when it comes to developing a fast website, which really hurts the user’s experience. Fast page load times are crucial for keeping users happy. This is especially true for ecommerce websites. Here are a few reasons why quickly loading websites are critical to the web developer.
- Faster pages make a better user experience. The user notices page load times, either consciously or subconsciously. Load times are a lot like the kicker on the football team: they’re only noticed when they’re not good. There’s something refreshing about a snappy-loading web page.
- It’s possible that page load times are directly associated with search engine rankings. Google has made it clear that they’re paying attention to load times when they’re indexing Adwords pages, so it wouldn’t be too much of a stretch to assume that page load times might be a factor in how sites are ranked.
- Slow pages lose money – Sites lose money when users click away from a slow-loading website. It’s estimated that the ecommerce industry loses $1.1 to $1.3 billion yearly on slow load times.
Slow load times can be a killer to even the best web design. Here are some great methods and tools to ensure your site is running quickly and smoothly.
1. A basic site analyzer
There are a lot of these tools, but I’ve always used the Web Page Analyzer to check for general errors and seeing the “health” of my site in terms of load times. The analyzer shows tons of information about how many scripts you have, total file size, and many other things that factor into load time.
2. Pingdom
Pingdom is a nifty site that allows you to check for broken images and paths, as well as loading time for all of your images and scripts. Broken paths and images can be a major load time killer. For example, I ran my blog LifeDev through the pingdom checker, and found that I had 1 script and 2 images that weren’t loading because of bad paths. Once I fixed the errors, it split my load time in half
Another nifty feature of Pingdom is being able to see the lengths of the different stages of loading. Pingdom shows a different color for each stage of the loading process, like initial connection, first byte downloaded and last byte downloaded, so you can see where the image or script is taking the longest to load.
3. Host files locally
While this may take a bit more bandwidth for your servers, you’ll gain a lot of speed by not having to go out into the web to find the image. Instead of using services like Flickr to host your images, put them on your own server and save the time spent for the browser to travel to flickr.com and download the image. Local files almost always load faster than external files
4. Use image heights and widths
Adding width and height tags to images can make a huge difference when the web browser loads the page. If the browser knows the width and height, it can go right on past the image and let it load in the background while it renders the rest of the page. If an image doesn’t have these tags, the browser has to wait until the image loads before it can go on loading the rest of the page.
5. Reduce widgets
It’s easy to forget that even though widgets are cool and add some functionality to a website, the benefits of having a slew of them on a page hardly outweigh the slow load times. If the site is down that is serving the widgets, it could keep your site from loading properly as well.
6. Use static caching
Caching is a There are many different solutions for caching. Essentially, caching is this: Taking pages written in dynamic languages like php and turning the result into a static web page. Web servers are incredibly good at serving static files. By turning your dynamic pages into static pages, you’ll reduce load on your server and greatly improve page loading times. Here are some great primers on caching for a few popular languages:
- PHP
- Rails
- Perl
- Java
- ASP
7. Accelerators
Dynamic languages typically have scripts that can help accelerate how fast the language is run. If you develop in PHP these scripts might help: , APC, Zend cache, Xcache
8. Firebug
a Firefox extension that offers tons of reporting tools for a Web site, right inside the browser frame. One of the main features of Firebug is the ability to analyze all the aspects of a given web page. It’s especially helpful for figuring out slow load times and
9. CSS and JS Minify
scripts like javascript and CSS can make a big difference in load times. Try using online services like CSS clean to take your CSS source and strip things like
- white spaces
- line breaks
- remove unnecessary charachters
- and many more things, depending on the level of compression that you’ll want.
10. Server from multiple domains
If you’re serving a lot of web objects on a page, it might be a good idea to utilize multiple domains for serving the content, like server.example.com, server2.example.com, etc. You can only have a limited number of connections sent to the web browser at a time. By using multiple domains (even if they’re using the same IP address) you can download objects at the same time, where on a single server you’d have to load one at a time.
11. Cut back on cookies
Much like in our diets, cookies should be cut back from if the goal is to have healthy page load times for our websites. Extra cookies that are set on the user’s browser adds time to each page load. Make sure that you’re only using the smallest possible number of cookies, and also try optimizing cookie usage
12. Use a different domain for cookie-free resources
In an attempt to optimize cookie usage, try using a different domain for resources that don’t need to have cookies set. This is helpful when you’re using top-level cookies (yoursite.com). Everything downloaded from yoursite.com will have a cookie attached to it. Sites can get around this by using a completely different domain to store the resources that don’t need a cookie attached to them. For example, Yahoo! uses the domain yimg.com to store their resources that don’t need a cookie attached to them.
13. Combine javascript files
As a general rule, downloading lots of small scripts takes longer than downloading one large script. If you can combine your javascripts into one large file, you’ll see faster download times. The easiest way to do this (without using programming knowledge) is to physically open your javascript files and copy and paste all of the javascript into one file. However, this isn’t always the easiest option, so here are a few resources that show how you can merge javascript files dynamically.
- PHP
- Smarty (PHP templating language)
- Rails
- ASP
14. Use a content delivery network (CDN)
If you’re starting to get some serious international traffic to your website, it might be a good idea to start thinking about using a Content Delivery Network (CDN). CDNs allow you to use servers from around the world, depending on where the user is from. For example, it takes a lot longer for a user from Australia to download a webpage served from New York than it does a user from within the USA. Content delivery networks would recognize that the user was from Australia and would serve the page from a server within Australia, or close nearby. This results in much faster page load times.
