Thiết kế web với joomla 1.6(5).x part 73 pot

Chapter 26: Managing Performance and Accessibility 709 To purge the expired cache files, follow these steps: 1. Log in to the admin system of your site. 2. Click on the Purge Expired Cache option under the Tools menu. The Cache Manager - Purge Cache Admin screen loads in your browser. 3. Click the Purge Expired icon. The system immediately deletes the cache files. Note Using the Purge Expired Cache option has the advantage of not causing a dip in the front-end site performance. If your site sees heavy traffic, using the Clean Cache option can cause a performance dip because the system must rebuild the cache after you force it dump the files. Purge Expired Cache only kills off the expired files, leaving the current cache files untouched. Typically this is only an issue if your site has numerous users active at the time you decide to clean the cache. Improving Content Performance Everything that is on the pages of your web site has an impact on the site’s performance. If you build large pages with large files, the page loads 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 and also reduce the bur- den on your server. Never forget, it all adds up. If you have multiple visitors on your site simulta- neously, the page each is viewing contributes to the load. Saving a few kilobytes in file size here and there can add up quickly. The following sections explain the issues you should consider when creating content for your site. Avoid large files Large file size is most commonly an issue 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 byprod- uct 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 large images 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. Part V: Site Maintenance and Management 710 Tip If you are using the Firefox web browser, two free add-ons can help you diagnose and solve performance prob- lems. The YSlow and Firebug add-ons include tools that help you identify the sizes of all the files on any partic- ular 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 avoiding large files is this issue: Use the correct 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, I prefer .png as it produces a smaller file and is copy- right-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. Also, note that there are two types of .png: 8-bit and 24-bit. The 24-bit offers full transparency whereas the 8-bit .png offers the same type of transparency as a transparent .gif. Don’t resize images Upload your image in the actual size that it will be displayed. Do not, in particular, upload files larger than what is needed and then force them to resize 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 resize 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. Although the Joomla! system does its best to eliminate unneeded tags and redundant code, 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 for producing redundant code 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. Cross-Reference The clean-up code option is detailed further in the discussion of WYSIWYG editors in Chapter 6. Chapter 26: Managing Performance and Accessibility 711 Avoid tables To the extent practicable, use cascading style sheets (CSS) instead of tables 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. Note If you are not familiar with CSS, a good starting point is the W3C site. www.w3.org/MarkUp/Guide/Style. 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 web sites 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. Therefore, 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 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 (iframes) reluctantly Wrappers are used to display a web page inside of your web page. This means that the wrapper contents have to be fetched and displayed inside your page. By definition, this increases the num- ber 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 depends 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. Cross-Reference Working with Wrappers is discussed in Chapter 7. Limit use of animation Animation files tend to be larger in size and must load in their entirety before they function prop- erly. Accordingly, limit the use of animation on your page to keep page file size down. Part V: Site Maintenance and Management 712 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 using 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 want 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. Tuning Joomla! Performance This section looks at various techniques you can use to tweak the performance of your Joomla! site. Not all of these suggestions are suitable for your site, but certainly some of them are applicable. Use server-side compression Joomla! supports 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. Cross-Reference See Chapter 4 for more information on using 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 display- ing the output on the page, the system is likely doing at least some of the processing associated with the feature. Cross-Reference As discussed in Chapter 25, unneeded components, modules, templates, and plugins can also have site security implications! Minify your CSS and JavaScript Minification is the process of reducing the size of CSS selectors and JavaScript by reducing unneces- sary spaces and characters. Although minifying a single selector saves only a small amount, it all adds up, and minifying the entire CSS can result in a meaningful savings. This is a tedious manual Chapter 26: Managing Performance and Accessibility 713 process, so if you want to employ this technique I suggest that you use one of the many tools designed to make this easier. Run a Google search for “minify CSS” and “minify JavaScript” for lists of options. Tip The Joomla! Extensions Directory also lists several extensions that can compress your CSS and JavaScript. Tip If you use javascripts like mootools or jquery, consider linking to Google’s hosting of those files. They then become cached once you have loaded it once. Be careful with Google Analytics Google Analytics, though a wonderful and useful service, can slow down your site. Every page that includes the Google Analytics code increases your load time as the Google 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 Jomla! 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 your template carefully. 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 tem- plates 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 compo- nents, 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. Part V: Site Maintenance and Management 714 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 web site: http://dev.mysql.com/doc/refman/5.0/en/optimize-table.html. Enhancing Accessibility Accessibility refers to the extent to which the largest number of users with different physcial capa- bilities are able to gain access to the contents and functionalities of your web site. The topic is often a point of focus in discussions concerning persons with disabilities and their rights to access. The right to access has been the subject of legislation in North America and in other jurisdictions and is widely considered to be an issue of best practices in web design. In the U.S., the right is codified in Section 508 of the Federal law. In web design circles, the standards are outlined by the World Wide Web Consortium’s Web Content Accessibility Guidelines, also known as WCAG. Note The Section 508 guidelines can be found at http://www.section508.gov. The WCAG guidelines can be found at http://www.w3.org/TR/WCAG10/. Creating an accessible web site can be a challenge. Although basic levels of compliance can be achieved with a modicum of work, the more stringent requirements impose many limitations upon the way that content can be displayed and on the way the functionality behaves. Before you begin work on a site, determine what level of compliance is necessary, because the limitations imposed by the standard will impact template and extension selection. Going forward, awareness of the required standard will inform your content management decisions and the ways in which your content creators work. Tip One of the best resources for information on web site accessibility is the Web Accessibility Initiative from the W3C. The site includes a lot of information about how to build accessible sites as well as links to tools that can help you test your site’s compliance with various standards. Visit WAI at http://www.w3.org/WAI. Joomla! and accessibility The default Joomla! system comes with three templates. All three produce valid CSS and XHTML, but the degree of their compliance with various accessibility standards is less clear. Chapter 26: Managing Performance and Accessibility 715 I set out to test all three of the Joomla! 1.5.x default templates for compliance with entry level accessibility standards. Because accessibility testing tools tend to give conflicting results, I employed three different testing tools: EvalAccess, Fujitsu’s Web Accessibility Inspector, and worldspace. All three tools support testing for WCAG 1.0, so I focused on this standard, rather than the U.S specific Section 508 standard. For this test, I installed the sample data and tested the home page only. See Table 26.1, Table 26. 2, and Table 26.3 for the results for the tests. TABLE 26.1 Testing the Default Templates for Accessibility with EvalAccess Template WCAG 1.0 Priority 1 Beez 0 violations, 114 minor problems JA_Purity 0 violations, 135 minor problems rhuk_milkyway 0 violations, 126 minor problems TABLE 26.2 Testing the Default Templates for Accessibility with Fujitsu’s Web Accessibility Inspector Template WCAG 1.0 Priority 1 Beez 0 violations, 7 minor problems JA_Purity 0 violations, 22 minor problems rhuk_milkyway 0 violations, 19 minor problems TABLE 26.3 Testing the Default Templates for Accessibility with worldspace Template WCAG 1.0 Priority 1 Beez 0 violations, 10 minor problems JA_Purity 0 violations, 5 minor problems rhuk_milkyway 0 violations, 5 minor problems Although they vary, the results consistently show that all three templates pass the entry level WCAG standard for creating accessible web sites. Taking these tests a littler further, I disabled the JavaScript in the browser and retested all three. The sites remain navigable with JavaScript disabled. Both Beez and JA_Purity provide a font size Part V: Site Maintenance and Management 716 switcher to improve readability. The switcher allows users to increase, or decrease the font size by clicking the icons on the header of each page. The switcher functionality relies on JavaScript and as a result these tools are lost when the JavaScript is disabled. Interestingly, the Beez Template detects whether JavaScript is active and if it is not, it hides the font resizer icons. JA_Purity unfortunately does not, leaving the icons visible even though they have no function. Note The Joomla! admin system requires JavaScript to function properly. Next, I checked all three templates for usability with a text-only browser emulator. Beez performed best, with a logical structure, jump links appropriately placed, and an aesthetically useful layout. JA_Purity also performed fairly well, though the page organization was less logical. The laggard in this test was the rhuk_milkyway template, which suffered from bad layout, poor content structure, and a lack of jump links to help users jump to the key spots on the page. For one final test, I disabled the colors on the screen. All three templates remained quite usable, though Beez remained visually more consistent. In conclusion, on the whole the Beez template performs better in accessibility measures. The worldspace testing tool was the only one that indicated poorer performance by the Beez template. Looking at the potential errors reported by worldspace, the issues related to the use of color to highlight URL links, a minor point in light of the fact that Beez uses both color and text style (underline) to indicate the presence of a hyperlink. This analysis shows that the basic Joomla! system is capable of performing well in basic accessibil- ity scenarios. The errors displayed during the testing process also emphasized the vital role of tem- plates and the importance of creating accessible content as the content items themselves were the source of many of the minor problems reported. Note also that the impact of extensions on accessibility can be substantial. If you are concerned with creating and maintaining a compliant site, then you can retest the site after installing each of the extensions. Tip Several extensions are designed to improve Joomla’s accessibility. The Joomla! Extensions Directory provides a specific category for these extensions: http://extensions.joomla.org/extensions/style-&- design/accessibility . Improving template accessibility The results of the testing in the previous section demonstrates the key role that templates play in Joomla! accessibility. The performance in text-only mode also demonstrates the importance of cre- ating logical template structures with appropriate HTML tags. The creation of accessible templates is a broad topic, but certain basic principles need to be followed. I cover these in the next sections. Chapter 26: Managing Performance and Accessibility 717 Support semantic structure The H tags in HTML were intended to allow the people who create content to impose hierarchical ordering on that content. The proper use of these tags makes it easy for users — and search engines — to determine the information structure and the relationship between the various parts of the document. When designing the site’s CSS selectors, make sure that you provide for the use of H tags in proper sequence by your content managers. Avoid tables By now, avoiding tables should be well established. Tables are not optimal and should be avoided. The exception to this general rule is complex tabular data. If you must use tables, use the TH ele- ment to make the table headings separate from the data. Don’t rely on JavaScript A number of users are working on browsers that have the JavaScript disabled. If you build your template so that it relies on JavaScript for functionality, you need to make sure that the template degrades gracefully and that alternatives are provided. Always test to make sure that the page is navigable with only a keyboard. Use system fonts for your nav menus Use of image files for your navigation can cause accessibility problems unless you consistently pro- vide for text alternatives. Note that use of images is also disadvantageous because they decrease the search engine friendliness of the site while increasing the page file size. Use a suitable color scheme Make sure that your color selection maintains an appropriate level of contrast for viewers with visual acuity problems. Also remember to test your system in black and white to make sure that it remains navigable with the colors turned off. Order elements on the screen logically Place the page elements in a logical order inside your code. If the visitor views the site without the benefit of the CSS, the logical structure you have created in the code helps to maintain the integrity of the page. The use of skip to or jump links can also help make the page more navigable and enable users to jump to interim points on the page. Make sure your text resizes Use proper CSS coding to assure that text can be resized by the user’s browser; typically this means using ems or percentages for font size in the CSS. Use jump links Jump links should be placed at the top of the page to allow visitors to jump directly to key content or functionality. Part V: Site Maintenance and Management 718 Make forms accessible Forms need to be usable by all visitors. If necessary, use assistive technologies. Provide alternatives to applets and plugins If the page requires the use of an applet or plugin, provide a text link to the download of the applet or plugin, or provide an alternative for the display of the content. Avoid requiring timed responses Avoid forms or other functions that require timed responses. If this is unavoidable, make sure that it is clear that there is a time limit, make the limit generous, and make sure that the time markers are clearly communicated to the user. Creating accessible content If the developer has done a good job of creating an accessible template and you have assembled accessi- ble components, you have half of the problem solved. Unfortunately, if your content creators aren’t mindful of what accessibility means and how to create accessible content, the entire previous effort may have been wasted! Creating accessible content items is a key success factor. Following these tips in the next sections can help keep your content items accessible by the widest audience of users. Use headings correctly Just as the developer should make sure that the CSS provides the formatting to support the cre- ation of semantic content, the content manager must make sure that headings are used properly to convey the structure of the content. Do not use strong, bold, or italic tags to make headings stand out, rather use the proper H tags. Use lists correctly Do not use the ordered list and unordered list tags for purposes other than the creation of lists inside content items. Use alt image attributes The alt attribute for images allows you to provide text equivalents for images. If a visitor has the images turned off in their browser, proper use of the image alt attribute can help the user better understand the role the images play on the page and help improve understanding of the content. Summarize graphs and charts Provide a summary of graphical and chart data along with the chart or use the longdesc attribute to link to a separate description and data set. Summarize multimedia Provide summaries or transcripts of multimedia or use the longdesc attribute to link to a separate description and data set. [...]... http://sipt07.si.ehu.es/evalaccess2/index.html Web Accessibility Inspector http://www.fujitsu.com/global/accessibility/assistance/wi/ worldspace http://worldspace.deque.com/wsservice/eval/checkCompliance.jsp wave http://wave.webaim.org For a complete and maintained list of accessibility testing tools, visit www.w3.org/WAI/ER/tools/ complete Summary In this chapter, we looked at Joomla! performance and accessibility...Chapter 26: Managing Performance and Accessibility Testing accessibility As a web developer or a site owner, you need to be able to test your site to identify accessibility issues Table 26.4lists several free tools that can be used online or downloaded and run locally In addition to the tools listed here, the Web Developer Toolbar add-on for the Firefox browser also provides a number of useful... accessibility testing tools, visit www.w3.org/WAI/ER/tools/ complete Summary In this chapter, we looked at Joomla! performance and accessibility issues You learned the following: l How to manage your Joomla! site’s various caching options l How to improve performance of your site l The role of templates and content items in accessibility l How to improve accessibility of templates l How to improve . extensions. Tip Several extensions are designed to improve Joomla s accessibility. The Joomla! Extensions Directory provides a specific category for these extensions: http://extensions .joomla. org/extensions/style-&- design/accessibility . Improving. 26 .1, Table 26. 2, and Table 26.3 for the results for the tests. TABLE 26 .1 Testing the Default Templates for Accessibility with EvalAccess Template WCAG 1. 0 Priority 1 Beez 0 violations, 11 4. practices in web design. In the U.S., the right is codified in Section 508 of the Federal law. In web design circles, the standards are outlined by the World Wide Web Consortium’s Web Content