| When your visitors browse a webpage, their | | | | when calculating the contribution of HTTP request |
| browsing experience depends on many things that | | | | delays: |
| you already know - connection speed, computer | | | | HTTP Time Loss = (4 kilobits) * Elements / |
| hardware and software, internet provider are just a | | | | Bandwidth in kilobits per second |
| few. However, the role that good web design plays | | | | In essence this means that on a regular website, |
| in browsing speed is often under-recognized. Pictures | | | | where the number of page elements is between 10 |
| and graphics as a navigation aid are often a powerful | | | | and 30, HTTP overheads will add significantly to your |
| 'hook' for customers, and can easily enhance a | | | | load time. For example, in a page with 50 elements, |
| browsing session. When incorrectly used, they can | | | | and a 56kbps connection speed, 3.57 seconds of |
| create bottlenecks that hamper the message your | | | | page load time is wasted. Let's say the page size is |
| site needs to send. | | | | 100KB. It means that the 'expected load time' is 14.28 |
| Basically, if you are making an image mosaic, you | | | | seconds but actual time is 25% greater. |
| need to remember a pair of important rules: | | | | Internet latency time involves how the packet |
| Rule 1: The page load time increases together with | | | | (request) gets to the server and back (steps 2 and |
| the number of page elements, even if their total size | | | | 4). The amount of time this journey takes is known |
| remains the same. | | | | as "ping time". The shortest possible ping time to the |
| Rule 2: However, merging page elements will lead to | | | | other side of the world is 85 milliseconds. That is |
| a longer wait until you visitor sees the first portion of | | | | because 85ms is the time the electrical signal needs |
| your webpage. You need to keep a balance. | | | | to travel to the other side and back in a straight line |
| In designing a webpage, you have to set priorities. Is | | | | through the Earth. Of course, the shortest possible |
| your goal a fast browsing experience or maximum | | | | ping across the world is 133ms, as we cannot cut |
| visual impact? Will your customers wait for long | | | | through the Earth. In practice on overseas websites, |
| enough or will they go elsewhere? | | | | the actual ping is often higher, over 300ms not being |
| Web designers using graphical navigation have many | | | | unusual. To local sites inside the USA and Europe, |
| choices - to include graphics and text, to just work | | | | typical ping time can be 100ms or lower (Source: |
| from one large image with several navigation | | | | Internet latency time loss = Elements * (PING in |
| elements, or to load many small ones. The latter is a | | | | milliseconds / 1000) / 2 |
| popular method today, but can lead to slow access | | | | In the above formula, "2" is the necessary correction |
| times. This slowdown is particularly noticeable on | | | | factor given that browsers usually make more than |
| dialup connections, but because server requests are | | | | one connection to the server. |
| less affected by download speed, if you have a | | | | It is possible to incorporate ping delay time and HTTP |
| bottleneck in this area it can affect all of your users. | | | | header request delays, described above, into a final |
| Let us examine the server request process: | | | | formula: |
| Step 1: User clicks a link, and the browser sends an | | | | Total loss of time = Elements * (4 kilobits / |
| HTTP request to the server; | | | | Bandwidth + PING / 2000) |
| Step 2: The request goes through Internet hosts and | | | | Despite the growing penetration of broadband in the |
| routers, and then reaches the server; | | | | world - according to Nielsen NetRatings, over 60% of |
| Step 3: The server processes the request and sends | | | | US households and 85% of US work users are now |
| the HTTP response and data back; | | | | broadband equipped - many users still suffer from |
| Step 4: The response goes through the Internet, | | | | slow page load time. This can drive users away and |
| usually on a different route, and then reaches the | | | | does not encourage return visits. |
| browser and the element rendered by your browser, | | | | Remember that just decreasing the size of the |
| and displayed on your screen. | | | | smaller images on your site doesn't help significantly if |
| How can you calculate the effect of this complex | | | | they are already less than 500 bytes. Try to |
| process on the customer experience? There are two | | | | decrease the number of images by combining them |
| main factors involved: the "Internet latency time" and | | | | into one or more large images. You can use image |
| the "HTTP request". | | | | maps for this purpose, which work from the position |
| The typical minimum size of an HTTP request is 256 | | | | of the mouse on the image, and are a good way of |
| bytes. This means that when browsers request an | | | | cutting down on the problems caused by fragmented |
| image of one byte in size, the browser needs to | | | | images. |
| send a 256 byte HTTP request on both of its server | | | | The quickest way in grasping the "Mosaic Layouts" |
| connections, and the server has to send back an | | | | concept is that every ten elements you add to your |
| HTTP response of the same size, along with the one | | | | site - no matter what their size - will commonly add |
| byte of content. You can use the following formula | | | | an extra second to your load time. |