The struggle for optimal site performance is a battle all web designers & site owners face from time to time. You see a lot of sites on the web that load slowly or perform poorly. While some sites have hosting issues, most are simply built without performance in mind. Joomla!, in and of itself, is neutral in terms of site performance; it’s how you configure it and what you do with it that creates — or prevents — solid site performance.
This article is excerpted from the upcoming Joomla! Bible, from Wiley & Sons. That book is due for publication in early November and can be pre-ordered directly from the publisher at www.wiley.com. Watch this site across the coming months as we preview more from this new title.
This article is an excerpt from the chapter on Site Performance, and it includes information about content and technical issues that impact site performance. As performance factors are not purely Joomla! issues, many of the tips (particularly in the content section) are applicable to any website. Note that Joomla’s caching controls are not discussed in this text below, as the first portion of the chapter (not shown here) deals with Joomla! caching in some detail.
Content Issues Affecting Performance
Everything that is on the pages of your website has an impact on the site’s performance. If you build large pages with large files, the page will load more slowly than a smaller, lighter page. While the pages your Joomla! site generates from Components are largely beyond your control, you can have a significant impact on your Articles pages. If you work smart and keep in mind the need to build lean pages, you can serve web pages to your visitors more quickly as well as reduce the burden on your server. Never forget, it all adds up. If you have multiple visitors on your site simultaneously, the page each is viewing contributes to the load. Saving a few kilobyte in file size here and there can add up quickly.
Here is a list of issues and tips you should consider when creating content for your site:
Avoid large files
This is most commonly an issues with graphical files inserted into Articles. Optimize your images to keep file sizes down to reasonable levels. As image file size is at least partially a by-product of the physical dimensions of the image files (width and height), it is hard to say what is right for your site, however a reasonable goal is to keep your images under 50K in size. If your images are too large to achieve that goal without a loss in quality, you may want to consider whether you need to display images that large on the page, or perhaps you should consider whether a better course would be to display a smaller image, a thumbnail, that is clickable to open a larger image. Note also that for the web, image resolution of 72 dpi is sufficient; anything higher is overkill and unlikely to be reflected in the user’s monitor. If you are using the Firefox web browser, there are two free add-ons that can help you diagnose and solve performance problems. The YSlow and Firebug add-ons include tools that help you identify the sizes of all the files on any particular web page. This is a great way to identify problem areas and bottlenecks. YSlow also provides suggestions for improving performance. Get both extensions from https://addons.mozilla.org
Save images in the right format
Closely related to the point above is this issue: use the right image format for the content you need to display. The most common formats for web use are .jpg (or .jpeg), .gif and .png. Use .jpg for photos and anything that requires smooth transition from color to color or large amounts of detail. Use .gif or .png for anything that is primarily large blocks of color or black and white. For example, photos are best saved as .jpgs. A chart or a graphical illustration is best served as a .gif or .png. Given a choice between .png and .gif, prefer .png as it produces a smaller file and is copyright-free. Choose .gifs if you need animation, as .png does not support this, or if the file is very small, in which case .gif often produces a smaller file. Tip: .png files can be created either interlaced or non-interlaced. Interlaced files provide progressive rendering, that is, they render little by little on the screen, starting out fuzzy and getting clearer. Avoid interlaced .pngs. They are larger in size and they confuse some users.
Don’t re-size images
Upload your image in the actual size that it will be displayed. Do not, in particular, upload files larger than what is needed then force them to re-size into a smaller display. Forcing the images to a new size not only fails to save file size, as the file size remains constant, but it also forces the system to do additional work to re-size the image dimensions.
Keep your code clean
If you are copying and pasting text into your WYSIWYG editor, pay careful attention to the code that results. While the system will do its best to eliminate unneeded tags and redundant code, it is always best to look at it yourself and make sure that no redundant tags and inline style definitions have found their way into your page formatting. One of the worst culprits in this area is text copied from older versions of Microsoft Word. The clean up option on the default WYSIWYG browser can help, but a manual check is always the best solution. Note also that valid code renders faster, so it is always a good idea to validate your HTML and CSS.
To the extent practicable, use CSS to format your page layouts. Tables slow things down as the whole table needs to be assembled before the contents are rendered. Tables also have implications for accessibility. Complex tabular data may require the use of tables, but as a general rule, CSS is the better way to go.
Use image rotators conservatively
Image rotators are Modules that provide a rotating image inside a Module position on your page. A popular technique you see on many websites today is the use of a rotating image on the header of the page. The rotator works like a slideshow, displaying a series of images as the visitor is looking at the page. The problem is that many of the Extensions that provide this functionality require all the images to load before the rotation occurs. This means that a large amount of data is loaded for the page, some of which may be completely pointless as the user has already clicked and moved on before the image displays. If you have to use an image rotator, keep the image sizes small and do not load too many images into the sequence; three images in rotation will perform much better than four, five or six images. If front page performance is a key concern, keep image rotators off the front page.
Use Wrappers reluctantly
Wrappers are used to display a web page inside of your web page. This means that the Wrapper contents have to fetched and displayed inside your page. By definition this increases the number of HTTP requests that have to be made to complete the page, thereby increasing the loading time of the page. Where the web page you are wrapping is located on another server, the display of the Wrapper content will depend upon the performance of the remote system and upon the quality of your connection to that server. All of these factors add up to a greater risk of disruption and to increases in page loading time. If, on the other hand, the wrapped content is kept on your server, the risk decreases dramatically, but the delay factor remains. If front page performance is a key concern, keep wrappers off the front page.
Limit use of animation
Animation files tend to be larger in size and must load in their entirety before they function properly. Accordingly, limit the use of animation on your page to keep page file size down.
Limit use of Flash
Flash files can be quite large in size and they keep your visitors waiting as they spool in to play. If you must use Flash on your pages, use only Flash elements inside the page, rather than use Flash for the entire page content area. Also plan your Flash so that there are not long delays for your viewers.
Don’t stream video until requested
If you wish to give users access to video files, do not stream the video until requested by the user. While this does mean that users who want to view the video have to wait for it, it does not force all the users to endure slow page loading while a file they may never view eats up their bandwidth.
This section looks at various techniques you can use to tweak the performance of your Joomla! site. Not all of these suggestions will be suitable for your site, but certainly some of them will be applicable.
Use server side compression
Joomla! support the server side compression protocol GZIP. If your server supports GZIP, enable this option in the Global Configuration Manager as it can result in some significant performance improvements. The GZIP Page Compression options are located on the Server tab in the Global Configuration Manager.
If you don’t use it, disable it
Disable all Components, Modules and Plugins that you are not using. Even if you are not displaying the output on the page, the system is likely doing at least some of the processing associated with the feature.
Be careful with Google Analytics
Google Analytics, though a wonderful and useful service, can slow down your site. Every page that includes the Analytics code increases your load time as the Analytics script causes the system to wait while it contacts the Google servers. The impact of this varies greatly depending on the time of day, the traffic on your site and the location of your servers.
Be selective about your Template
Your Template developer can have a significant impact on your site performance. Many of the lovely Templates I see in circulation rely heavily upon images to achieve their look and feel. The size of the Templates and the number of HTTP requests they generate are not optimal. Select carefully your Template. Look at the file size, and the quality of the code. You want to select Templates that use CSS, not tables, and those that prefer system text to image usage. Be particularly careful of Templates that use images for the menus, rather than system text and CSS. Not only do these Templates have a negative impact on site performance, but they also tend to be less than optimal from the perspective of both SEO and accessibility.
Be selective about Extensions
Some third party Extensions are incredibly resource-intensive. When you are comparing Components, Modules or Plugins, use YSlow to compare the impact on your page performance and check resource usage on your server. Don’t forget that small differences in performance can balloon into big differences when the site experiences spikes in traffic.
Skip live stat reporting
Components or Modules that produce live real-time statistics on your site can be significant drains on site performance. If you don’t have a compelling need for real-time statistics, skip them.
Disable SEF URLs
Though this may not be an option for many of you, if your goal is performance above all else, disable the SEF URLs option. The conversion of your native URLs into Aliases causes a performance hit.
Optimize your database
One of the main performance bottlenecks for any content management system is the database server. To improve performance, you should periodically optimize the database tables. Optimization is performed from within phpMyAdmin. To learn more about this process, visit the MySQL website.