Speed! How Long to Download a page?

With the ever increasing use of Content Management Systems, we need to consider how well do they perform when it comes to usability and download times. With the majority of the ‘page’ being constructed on-the-fly by multiple server requests, is it faster or slower than a standard HTML page?

“Fast sites increase user satisfaction and improve the overall quality of the web (especially for those users with slow Internet connections)..” –Google Webmaster Tools

Page load time also affect Search Engine rankings. Google favors sites with clean code and fast download times, so it’s critical a website is optimized for speed, not only for the viewer’s convenience, but the SERPS rankings. Most browsers make 2-4 connections to the server simultaneously, so if there are many elements/graphics on a page, they can slow down things.

How can we diagnose problems, and what can be done to improve performance? Start by testing  your web pages and see how they stack-up against other sites. Tools can identify where bottlenecks may be occurring.

Tools on this site deliver extensive information: http://tools.pingdom.com/fpt/
Enter a web address and see what goes on behind the scenes.
A plugin for Firefox: http://developer.yahoo.com/yslow/

“40% of consumers will not wait more than 3 seconds for a page to load before abandoning a site”
–Forrester

Graphics:
Optimize all graphics to be the lowest possible file size. Choose the correct file format for the graphic, and make it the actual pixel size as used on the page. Also consider options to use CSS for graphic elements such as boxes with rounded corners, drop shadows etc. (Browser support still varies.)  Online tools to optimize and resize images:

http://tools.dynamicdrive.com/imageoptimizer http://www.imageoptimizer.net/Pages/Home.aspx
http://www.webresizer.com/resizer/
http://www.smushit.com/ysmush.it/

Caching:
On a CMS installation it is recommended to save uploaded images in a location other than the default. The location can be a sub-domain, or even a different host entirely.  Installing and activating such techniques requires careful planning, and tweaking default behavior of a CMS system. Only do this when a web site is fully finished.

WordPress offers caching plugins that will serve the viewer a static HTML version of the page. Only to be done after a site if fully finished.

Minify:
Code files can be quite large. CSS files can run into 1000’s of lines and contribute to loading time. To reduce the file size, run a Minify process – this will remove any unnecessary empty lines, spaces, and comments etc. However – ONLY run these your finished code files, and make sure to keep the original copy in its un-minified version for later updates or changes!  (A minified CSS file is not user-friendly!)http://www.cssdrive.com/index.php/main/csscompressor

Using plugins to minify files is another option, however doing it manually may be preferable.

CMS Plugins:
Consider whether you can replace plugins with a little one-time hand-coded changes to the .php files. The less plugins in use the better.

This web page describes how to set up image redirect  in a WordPress installation: http://www.techtipsgeek.com/host-images-wordpress-blog-subdomain-better-speed/6897/

Some contact plugins increase load times. This is a suggested hard-coded solution for a WordPress site. (But modifyable for other CMS’s?)
http://www.techtipsgeek.com/install-contact-page-in-wordpress-blog-without-plugin/6664/

More links to help diagnose problems and suggest fixes: https://developers.google.com/speed/pagespeed/ https://developers.google.com/speed/pagespeed/insights
http://www.techtipsgeek.com/host-images-wordpress-blog-subdomain-better-speed/6897/
http://spritegen.website-performance.org/
http://www.smushit.com/ysmush.it/