20 Tips for speeding up web sites and web applications

Related Topics

Share

On the web, when a site visitor is waiting for anything, seconds can seem like an eternity. Every site owner knows when their site is slow, because customers and prospects are very good (and vocal) about discerning the smallest latency issues on the websites that they need information from. Site owners are trying to avoid two important actions . First, visitors should not have the time to think 'this is taking a long time'. Second, visitors should not have the time to become distracted from their current task. Both of these actions take less than a couple of seconds on the web.

Below is a list of 20 simple/critical elements of minimizing latency in your website.

Make optimization a process: This sounds cliché. Very few organizations have defined processes/owners to test sites for performance and make improvements. In every web team, there should be someone who owns performance. During a web site project and during maintenance, someone needs to ask "OK, now how do we make this faster."

Dynamic is cool, but static is faster: If specific pieces of content or imagery don't change often then there is probably no need for a database or scripting to be involved in loading it on a page. Content Management Systems or Web Application Servers that force elements to be dynamic may be slowing the site down.

Optimize for perception: Adding racing flames to the hood of a car makes it faster right? Well, probably not. But there are many techniques for making web pages appear to be loading faster. Tactics such as loading the CSS first on a page, using CSS Sprites, parallel downloads of page elements, and loading videos or motion graphics first to capture the visitors attention all have positive effects on the visitors patience. When we run usability tests, it is always interesting to me how many visitors try to perform an action before a page is fully loaded. Make sure the most common tools on a page are fully loaded to satisfy these ambitious and hurried visitors.

Minify, minimize, and minify: Have you ever looked at the source code on Google.com or Bing.com. They have removed almost every unnecessary character from those pages. The primary objective here is to minimize the size of the HTML, JS, and CSS files being downloaded. As taboo as this may sound, you could even use some non-strict HTML to make the HTML file smaller. There are many great minification tools on the web. Try looking at your site with the Google Page Speed tool.

If we don't need it, don't load it: Many large sites use 1 common set of JS files and 1 common set of CSS files in every template and every page. Those files change over time and often contain elements that are no longer used on the page (or anywhere on the site). Take a look at what is being loaded on each page. If the page needs to speed up, try removing any JS or CSS styles that are not being used on the page. We've seen this speed up pages by 30%! Often times, the site owners will have to look at how this effects maintenance as you now need to keep track of what elements are being loaded on each page. A common problem that we see on the web is people using public JavaScript libraries that often contain massive amounts of functions when the site is only using a handful of those functions.

Optimize your graphics: The web is great at using high-resolution gratuitous imagery to make sites look cool. But there are few important rules for minimizing the download times for those smiling brand images and hero product photos. Never scale images in HTML. This sounds simple, but we are often surprised at the number of sites that try to scale a large photo into a small space. Use graphic optimization tools such as PhotoShop to use the right resolution that has enough detail, but not too much (i.e. ~72 DPI). If you can, reduce the amount of colors in your images and reduce the amount of space dedicated to background colors. Real pros sometimes use transparency to make tiny improvements in image sizes.

Get ready for the next page: Analytics tell us what page the visitor is most likely to view next. After the current page is loaded, load some of the critical elements in to the browser cache of the next page the visitor is likely to see.

No more redirects!: Marketers love redirects (i.e. www.bofa.com/rewards) and redirects won’t go away anytime soon. But our websites should not link to a redirect and make our visitors wait while the server finds the next page.

Help out your repeat visitors: Returning visitors should not have to reload the entire site with each visit. Use elements such as ETages, Cache Controls, and Expires to make sure you are not wasting your visitors (or the servers) time.

Minimize HTTP requests: Have you ever had a friend ask you 10 questions when they could have asked you 1 and gotten the same answer? How do you think your web server feels? Combining JS files, CSS files, and imagery files does not increase the page weight but can minimize the number of HTTP requests/ responses. Accessing a file on a hard drive is often the slowest action that a web application performs.

Database queries take time: As noted above, file requests are slow and database queries are often also slow. As sites become more and more dynamic, the size and quantity of queries are increasing. Database calls are resource intensive on the server. The developer should seek to consolidate the number of queries a page makes, minimize the about data/tables being requested/written, avoid loops, and use LIMIT for large data sets.

Configure GZip on the web server: This popular compression method is gaining acceptance and reduces downloads by enough time to make the decompression time worthwhile. This is an easy fix that your web site manager can put in place.

Use a CDN: The proximity of a website to the requesting visitors can make massive difference in page
load times. Interested in seeing this in action? Try looking up information on President Hamid Karzai on sites hosted in Afghanistan. A good CDN can reduce page load times by 50%+ for localized visitors.

Know your Bandwidth needs: Bandwidth is now one of the most common factors in pricing for hosting providers. Buying the most bandwidth you can for your budget may not be the right strategy. Be very deliberate in understanding the bandwidth needs of visitors based on historic page weights and page views and talk to your hosting provider about what happens when extra bandwidth is needed.

Black belt websites use Data Dependent Routing and intelligent Load Balancing: If you have the luxury of a hosting environment with multiple servers, remember that not all site data needs to be present on all servers. If 20% of the data is accessed 80% of the time, then give that 20% of the data more resources on the servers. I wonder if Google has an entire server farm dedicated to Lady Gaga?

Hardware matters: One of the most frustrating moments for web developers is when the software company blames the hardware for latency and the IT group’s blames the software. Websites and web applications take processing power, memory, and drive space to serve up data. New technologies such as SSD and onboard memory are making big improvements in making sure that hardware is never the bottleneck.

Optimizing Server Architecture for performance: I remember working on optimizing a site for a large laser manufacturer when I found that every page on the site was being served up dynamically from 3 web servers that were queering the page elements from 1 shared database server. In essence, it didn’t matter how impressive the hardware, bandwidth, coding, etc was on the site. The taxed database server simply couldn’t serve all of the page elements up quick enough. We spent a couple of days re-engineering the architecture to have 2 load-balanced web servers requesting page elements from 2 load-balanced database servers and reduced response times by 75% without adding any new servers. Site owners need to take into account all options with load balancing, fault tolerance, data dependent routing, etc when devising a high performance environment. After the architecture is defined, it should be reviewed by a new set of eyes to ensure there are no performance bottlenecks.

Efficient Software Platforms: For sites that rely heavily on products/platforms such as content management systems, web application servers, ecommerce software, and other systems installed on the web servers it is critical to understand what the systems do to process, render, and load web processes quickly. Applications that dynamically create database queries based on templates/functions built through an admin tool often create very inefficient SQL Queries. For sites that have concurrent database calls, complex equations, or dependencies on external systems it is important to understand what the vendor does to optimize performance and what flexibility they give site owners to optimize the platform. Each platform should minimize the amount of component installed on the actual web servers.

External Dependencies: Some sites are planned and built for speed and still have latency issues. You can do everything right, but if one external dependency is slow to respond, it can make everything slow.

Use HTML 5: This is wishful thinking and not practical for many sites. For sites with visitors with up-to-date browsers, HTML offers many elements such as small video loaders, HTML based motion graphics, and lightweight encoding and Document Type Definition that dramatically decrease file size and client side processing.

Of course, not all methods for optimization are equal. Taking a day to optimize client side rendering can yield the same results as spending months migrating to a new hardware and software architecture. If your site is experience latency issues and you have limited resources, start with the easy steps such as image optimization and cache configuration.

For more information, here are 5 very valuable resources for optimizing performance: