Why try to optimize your website for faster loading times if it already loads fairly quickly? Well, first of all, Google uses site loading speed as a factor in its PageRank (PR) algorithm. The faster your website responds to requests, the better this is for your SEO. Secondly, we live in a world that is obsessed with speed. Millions of homes have high-speed internet connections, and cell phone networks have began to embrace 4G technology.
Also, with the explosion of wireless internet technology for mobile devices, a statistically significant portion of traffic to your site can come from mobile users. These people are on the go, and they expect web pages to load quickly. Luckily, decreasing your web site’s load time doesn’t have to be overly complicated.
1. Optimize Images
Reducing image size is one of the easiest methods for decreasing page load time. Many tools exist that will optimize images for you, such as Smush.It from Yahoo, ImageOptimizer.net, the ImageOptimizer from DynamicDrive and the ImageReducer from SiteReportCard.
At the Velocity 2008 conference, YSlow developer Stoyan Stefanov pointed out some mistakes to avoid when optimizing images for the web:
- Mistake #1: Using animated GIF images instead of PNGs. GIFs are larger than PNGs and take longer to load. Since the goal is faster load times, choose the PNG format over animated GIF. Stefanov’s measurements concluded that if the top ten most visited websites converted all their GIF files to PNG, the average space savings would be 20.42%. The more images a page has, the more it benefits from using PNGs in place of GIFs.
- Mistake #2: Not crushing PNG files. According to the PNG specifications, a PNG image stores information in what are called chunks. These chunks can be deleted without altering the image. Several programs can be used to do this, such as pngcrush, pngrewrite, OptiPNG and PNGOut. Stoyan found that “crushing” PNG files for the top 10 websites would yield an average savings (in size) of 16.05%.
- Mistake #3: Not stripping metadata from JPEG files. JPEGs contain metadata that includes comments, a record of which programs modified the image (e.g., Photoshop), and EXIF data such as camera make and model, photo date and time, exposure time, lens focus, a thumbnail preview, and even EXIF audio information (RIFF or WAV headers) from certain cameras, such as the HP R607. Stefanov estimated that removing this data from JPEGs across the top 10 sites with the tool jpegtran would result in an average of 11.85% in saved space.
- Mistake #4: Choosing Truecolor PNGs instead of Palette PNGs. Truecolor PNGs can display millions of colors, while Palette PNGs (aka, PNG8) have only 256. Most PNG files never use more than 1,000 colors – those that do are photographs and should be saved in JPEG format. Converting Truecolor PNGs to Palette reduces image size by as much as 50%. The human eye can almost never tell a Truecolor PNG has been converted to Palette because our vision is not that sensitive. Programs such as pngnq and pngquant are used for this kind of conversion.
- Mistake #5: Serving dynamically generated images as-is. Images such as charts and graphs use very few colors, so PNG8 (256 colors) is the best format choice. When an original PNG image that allows 707 colors is crushed and converted to PNG8 format, this yields about a 38% smaller file size.
- Mistake #6: Keeping images separate. Using CSS Sprites to combine images will reduce the number of HTTP requests that a browser must make to load your page.
2. Link to Internal Pages with a Trailing Slash
Let’s say your website is www.mysite.com, and a user wants to go to a specific, internal page on your site named “internal.” The final slash tells the web server that “internal” is a directory. When the trailing slash is left off, the web server searches for a file named “internal,” and when it doesn’t find the file, it issues a 301 redirect and searches for a directory named “internal.” Using a trailing slash for internal links will stop the web server from using those extra milliseconds to search for a file when it should be pointing to a directory.
3. Identify Bottlenecks
If you want to get an idea of how fast (or slow) your website loads, use a free tool such as Pingdom. This is a bit technical, but your coder or designer will be able to easily interpret this information. Pingdom and similar tools show how long it takes for each element of a web page to load. This gives you a clear view of which elements can be tweaked or optimized to load faster. Using this data to make many tiny changes to your site can add up to create noticeable speed gains.
4. Get Rid of the Clutter
Are there any elements on your website that could be considered “distractions” for a reader? Widgets for current weather, a stat counter, etc.? Give your visitors what they want with as few distractions as possible. If you run a site via WordPress, look for any unnecessary plugins and remove them. Does your site really need animated GIFs? What about guest chat boxes, popup ads, and popup e-mail opt-ins? Some of those elements can be removed completely, while a newsletter e-mail opt-in can be placed in-page.
5. Use a Content Delivery Network
If your site reaches an audience that’s dispersed geographically, keep in mind that visitor distance from your server affects loading time for them. Regardless of how fast a server can handle requests, the speed of the network determines how fast content gets delivered. A Content Delivery Network (CDN) improves loading times for geographically dispersed audiences at far faster rates than a single server can achieve. This is because CDNs have servers that are physically closer than your web server to many visitors. According to developers at Yahoo, using a CDN for high-traffic sites “improved end-user response times” by over 20%. EdgeCast, level3 and Akamai Technologies are examples of CDN service providers.