The nature of the Internet makes fast-loading web pages very important as NOT everyone has a high-speed connection such as T1, cable modem, DSL, or ISDN. This cannot be an issue in some Far East Asian countries where the majority of web users are connected via high-speed connections. But there are still a very large number of users with modems less then 56k in such a country as the United States.
If it takes too long to download a web page (your lesson), the user (your student) will get impatient and even leave your site. So, fast presentation of your lesson page both at the start of loading and during the lesson should be an important consideration in authoring and designing your Digital Teacher web lesson.
Statistics show that visitors are willing to wait for about 15 seconds for a page to load. According to a recent survey (December 2001), the average page on the Web is 60K. But in order to load a page within 15 seconds over a typical low-speed modem connection, a page's total "acceptable" size - a sum of HTML, text, and graphics - should be around (less is better) 30-40 K.
However, the "acceptable" speed is measured in terms of visual accessibility rather than the physical file size. As far as the user is concerned, visually accessing a page (perceived speed) is more important than the total downloading and rendering time for the entire page. So a page should be designed to display "something" in this time frame as quickly as possible while the file size may be bigger than 30-40K.
To make your page load (or appears to be) faster, we have listed some basic guidelines.
As stated in Chapter 1: Understanding Lesson Elements, multiple chapters with multiple questions can be presented in a single Digital Teacher web lesson page. It means that, once the page is loaded, the student can move forward and backward through chapters and questions very fast since he or she no longer needs to go back to your server. The server gets less requests and use less bandwidth.
However, there is a downside. The initial loading time can be longer. In general, one of the major guidelines in designing a web page or site is to create multiple, small size pages and links them together. While this can increase the server traffic (and increase the response time), each page is supposed to load faster. So, whenever possible, you might want to create relatively small lessons, and incorporate them into a large course.
If you need to format text, use styles. The next option should be using plain HTML tags for inline formatting. Using the [Display Text with Original Formatting Preserved] option should be the last resort. Generating a lesson with this option increases the resulting file size.
File size after removing comments and white spaces can be reduced as much as 20%-25%.
Defining many chapters in a lesson and adding questions to each chapter increase the time for the browser to read your page. This is because Javascript needs to process more loops. Here is a simple example.
(slower) (faster)
Chapter 1 Chapter 1
Question 1 Question 1
Question 2 Question 2
Chapter 2 Question 3
Question 1 Question 4
Question 2 Question 5
Chapter 3 Question 6
Question 1
Question 2
Nesting questions in many chapters can also confuse your students when they move through chapters and questions. For more information, please read the Digital Teacher authoring program's user guide - Chapter 4: Authoring and editing lessons, Moving through pages and questions.
One picture may be worth a thousand words. On the Web, however, you might want to use the words instead of the picture since a big chunk of the download time comes from image files.
For example, consider using text instead of image buttons on the Digital Teacher lesson Menu Bar.
Whenever possible, use font face, size, and color to create a design effect. Define color with a Hex value (such as #FF0000 for red). Using specifications in HTML rather than embedding images takes advantage of the resources of the user's own computer - thus, faster processing time.
If you need to include graphics,
Specifying dimensions allows the browser to allocate the space for the image immediately, and render the rest of the page while the image is still downloading - so users have something to read while they wait.
This is especially important when you put images in tables. Images without dimensions (and are larger than the table's cells) force the browser to clear and re-render the Web page to accommodate the images. So, if you plan to use images for the menu bar on the lesson page, make sure that each image size is smaller than the size of each table cell.
Unless you need fine resolution, use GIF since GIF usually loads faster than JPEG. GIF is perfect for smaller graphics that should look crisp and clean, but don't need more than 256 colors.
GIF formatted images use a maximum of 256 colors. By reducing the number of colors, file size can be significantly reduced. Also, reduce the physical image size by cropping out all the extra space.
Replace animated GIFs with static images. If you must use animated GIFs, try to reduce the number of frames that the animation takes.
Use the images from the front page (such as the login page) on your other pages (such as lesson pages). When the front page is loaded, the images on the page will be on the browser's cache, and the lesson pages will load much faster. For example, include a nearly invisible image at the bottom of the front page.
<IMG SRC="submit.gif" border=0 width=1 height=1>
This will save the image in the browser's cache. And the image from the cache is reused on your lesson pages without being downloaded from your server.
Tables are bread and butter in designing Web pages. They define layout and can contain elements of a page. Unfortunately, tables increase the time it takes to display a Web page. The Digital Teacher Web Application is a DHML application, which lays out and positions your page using style sheet elements. Unless it is absolutely necessary, do not add tables to your lesson contents.
If you need to use tables,
Because the browser needs to fully understand a table's structure before it can draw the table's contents, nothing can be rendered until most of the table's content is downloaded to the browser. And as tables get bigger, the amount of information that needs processing increases.
Specifying the width of all your tables and each of their cells helps the browser render the tables more quickly. Defining this attribute allows the browser to calculate and process the layout much faster without having to rely on logical interpretation.
Creating tables manually can be a pain. To make it easy, many authors use HTML editors and insert the resulting codes on the page. However, HTML editors can create very inefficient, bloated codes. To make tables slim, always clean up the code.
Putting tables inside the cell of another table slows down Web page loading. This is because the browser must work from the inside out - assessing how large the inner table will be before the structure of the outer table is calculated.
In general, it is a good idea to stay away from the Web-browsing gadgetry, such as RealMedia, Flash, and Java applets. Also, unless it is absolutely necessary, do not use embedded multimedia such as background song and videos.
Initializing and loading these gizmos are not worth the time to wait.
As stated in the beginning of this chapter, the "perceived" speed is more important than the actual "download" speed. This pseudo speed is to satisfy the need to show the user (student) something rather than a blank screen before a page is completely downloaded.
By default, the Digital Teacher lesson content is wrapped inside several tables to support content formatting for Netscape 4.x browser. However, when tables are used in a page, the browser must calculate the layout of each table before loading its content - thus, increasing the loading time and leaving the user on the blank page.
To go around this problem and show something to the user immediately, Digital Teacher Web Application displays a "pseudo" content on the lesson page as follows.
Loading Digital Teacher web-based lesson ... Digital Teacher is your solution to create powerful online test.
This text can be found in the line that follows the <BODY> tag. You can modify it to suit your need.
Copyright 2001-2002 Francis Software, Sunnyvale, California