 |
| image by moovinonup.com |
When you write Web pages, you need to remember that someone on the other end of the 'net is going to download and read them. Because of this, you want to make sure that they load as quickly as possible.
Some good rules of thumb for keeping the download time short:
- 30K — maximum size for your Web page, including all images
Thus, if you have two 10K images on your page, you should not have more than 10K of HTML and text. - 12K — maximum size for each image, sound file, or applet
This includes animated images and anything downloaded with the page - Use multiple pages
Instead of one long page - Use special effects sparingly
Make sure that the site needs the effect you want. Whenever you add Java or JavaScript or other effects, that impacts the download time of your site. - Keep JavaScript and CSS External
By reducing the amount of code on each page of your site you can improve the load time. But instead of stripping your site of content and features, just keep as much functionality and design features external as possible. Loading JavaScript and CSS from external sources only requires one line of code in the header of the page. This is as opposed to bits and pieces of inline code across each page eating up precious milliseconds for each image they format or chunk of text they tailor. - Progressive Rendering
Progressive rendering is a vital part of speeding up your site and making it more appealing for user experience. If you went to a restaurant, you would expect your starter to be served up before your main and not have to wait longer for it all to come at once. Progressive rendering works the same way in that it serves up what is currently available to you while waiting for the rest of the page to bake (sorry, load).
There are several ways in which you can apply better progressive rendering:
By putting stylesheets at the top of the document, i.e. in the page header, you can force the server to load these sections first allowing the page to return several page elements while it waits for the other.
Remember to Flush! No seriously, a content flush can play a major part in progressively rendering your page by allowing you to tell the page when to output a section during the load. Multiple flushes can be used on a page, but one ideal use is to get the page to flush immediately after the section of the page. This way the browser gets ahead by starting to download the CSS, JavaScript, etc while waiting for the full HTML response. Below is an example of a PHP flush being performed:
<html>
<head>
<title>page name</title>
<link rel=”” href=”style.css” />
<script src=”new.js”></script>
</head>
<?php flush(); ?>
<body>
0 komentar:
Post a Comment