The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
Every web designer knows that speed is an issue. People want their pages to load fast, if they don't, they click the next link and leave your site.
To make a page faster, it needs to be smaller in terms of filesizes. So, you trim your images, and export them at the lowest size you can get away with before you start to lose quality. But it's not just the images that have to be downloaded, it's the code too. HTML can easily become chubby by tags that arent needed. Take these out, and your page will be faster.
Firstly, spacer gifs. 1x1 pixel transparent gifs that can be resized to stretch table cells and the like. Rename it to a.gif, or at least shm.gif (shim). thisll save 3 characters every time you use it. Take off its border="0" tag (unless its part of a link) and take off the alt tag too. This'll save a lot of space if you use them as much as I do. If the table cell is already size-set, then use a , its less code.
Comment tags. Its good to use these, but keep them simple and to the point. Dont waste space.
Character entities: If youwant to do a ", do shift-2 instead of ". This may seem obvious, but it's worth checking if any of your other entities work before you resort to the code.
There are tags in HTML that do exactly the same as others, so you might as well use the one that has the less characters, as every character is adding to your file size.
Use instead of
Use instead of
Use instead of
Use instead of
Use instead of
Dont forget, that the font tag can be nested. You can specify changes to a font tag without having to type the entire font tag again. eg:
Instead of :
This bit is
red
Have this:
this bit is
Default tags: HTML tags that can have attributes have a default setting for when there is no attributes set. Knowing these can save your code from having unnecessary tags. All of the below are the defaults.
![]()
To make a page faster, it needs to be smaller in terms of filesizes. So, you trim your images, and export them at the lowest size you can get away with before you start to lose quality. But it's not just the images that have to be downloaded, it's the code too. HTML can easily become chubby by tags that arent needed. Take these out, and your page will be faster.
Firstly, spacer gifs. 1x1 pixel transparent gifs that can be resized to stretch table cells and the like. Rename it to a.gif, or at least shm.gif (shim). thisll save 3 characters every time you use it. Take off its border="0" tag (unless its part of a link) and take off the alt tag too. This'll save a lot of space if you use them as much as I do. If the table cell is already size-set, then use a , its less code.
Comment tags. Its good to use these, but keep them simple and to the point. Dont waste space.
Character entities: If youwant to do a ", do shift-2 instead of ". This may seem obvious, but it's worth checking if any of your other entities work before you resort to the code.
There are tags in HTML that do exactly the same as others, so you might as well use the one that has the less characters, as every character is adding to your file size.
Use instead of
Use instead of
Use
Use instead of
Use instead of
Dont forget, that the font tag can be nested. You can specify changes to a font tag without having to type the entire font tag again. eg:
Instead of :
This bit is
red
Have this:
this bit is
Default tags: HTML tags that can have attributes have a default setting for when there is no attributes set. Knowing these can save your code from having unnecessary tags. All of the below are the defaults.
Any other tips? well, heres a few more for you. Images that are not links do not need border="0" You only need to set the width of a table column once. If every td in your tr is align="top", set align="top" in the tr tag, instead of repeating it for every td tag. Don't specify a td color if its the same as your table bgcolor. Most of this is commom sense. Any HTMLer will probably know most of this, but hopefully there will be a tag or two you diddnt know, and you'll say "aaah, thats a good idea". One last tip, If you use a HTML etiting suite, like Homesite, under Tools there is a button called Document Weight. Write down the filesizes of the HTML document and then do the above. You then get to see the fruits of your tidying labour. If anyone else has any other speed-increasing tips, stick them here, and we will make the Internet faster still. Thanks for reading, Slave. Page:
Slaveunit wrote:
> Arent stylesheets only > compatible with Netscape 3 and higher, and ie2 and higher? Yes, it's best to aim for that minimum. If you start aiming or below that you run into trouble because a lot of tags were introduced in Netscape 3,
Turbonutter wrote:
But, the HTML size really doesn't matter. The largest HTML > page I have ever created is 20kb and that thing is massive. Even > that's only 4 seconds through HTTP. Yeah, but you have to remember that there are still people in the world that have 28.8k modems (like there are still people with 640x480 screens), and a 20kb file would be 8 secs, and on a 14.4k modem it would be 14 secs. Its worth tidying your code not just for download time, but also for later editing, and code efficiency. We had this debate in prime not so long ago, with the worry that because console specification was going up, coders might be not optimising their code, because they wouldnt have to. That could well be the case because the console spec is standard, but in the internet you have to accomodate for that 1% that are poor/computer illiterate/not interested and do not have the latest kit. I do (via my company) a lot of websites for the Falkland Islands. (Yeah, I know, how much is there to do about the Falkland Islands?) but there are clients there that are running 486s, the Government buildings still have 640 screens, Broadband is a word for belts, etc. The best way to cut space is to trim and generally sort your images, balancing quality with size and all that, but every byte counts. People wont sit there and wait for a page to fully load, and its the HTML file that loads first. Its worth making it a good one.
Turbonutter wrote:
> The best way to keep filesizes down is to use a universal > stylesheet. The browser caches the css so you don't heep downloading > it. Arent stylesheets only compatible with Netscape 3 and higher, and ie2 and higher?
cjh wrote:
> .. Little tip I picked up if your good with JavaScript... .. for > al lthe image on your page, first create a 1x1pix size image, and > set it as being transparent, calling it, for example, > blank.gif Use this as the base for all the images on your site, > so the SRC="Blank.gif" is in every image you have, > no-matter the size, width or Hight. ...Then, using JavaScript, > using the OnLoad Funtion in the , makea function to > replace all the images with the ones you want. Sounds like quite a > task to do, but if you have a lot of text on yuor page to, it's > good. People get the page v.quick, then the images appear while they > are reading. > Hope that helps someone. You can do this much easier by using a different tag which downloads the images after displaying page content. I can't remember what it is but you use it instead of
The best way to keep filesizes down is to use a universal stylesheet. The browser caches the css so you don't heep downloading it.
But, the HTML size really doesn't matter. The largest HTML page I have ever created is 20kb and that thing is massive. Even that's only 4 seconds through HTTP. It's not really worth going through all this bother for HTML, what you should be looking at is images. Here's a tip: Reducing JPEG compression from 100 to 80 makes a MASSIVE difference in filesize but the image is virtually identical. Also, re-use images where possible, and when making background spacers make them 1 pixel thick. Also, to save time when updating sites use headers and footers with PHP. Your page should be in at least 3 parts. The first "static" bit which is consistent up to your unique content, the unique content and the stuff after the unque content. Split the static bits into headers and footers then just use an include() function to "paste" the whole lot together. If you decide to make a change to your site this is a great help.
.. Little tip I picked up if your good with JavaScript...
.. for al lthe image on your page, first create a 1x1pix size image, and set it as being transparent, calling it, for example, blank.gif Use this as the base for all the images on your site, so the SRC="Blank.gif" is in every image you have, no-matter the size, width or Hight. ...Then, using JavaScript, using the OnLoad Funtion in the , makea function to replace all the images with the ones you want. Sounds like quite a task to do, but if you have a lot of text on yuor page to, it's good. People get the page v.quick, then the images appear while they are reading. Hope that helps someone.
Some good ideas there.
Although the average download time for the site I maintain is 3-5 seconds. I never build a page that is more than twice the size of the browser window in 6x800 resolution. I also don't use any needless code or javascript all adds to download time. OK the site is basic but it is for information only. And it is getting an average 900 hits a month which isn't to bad considering it's for a minority interest.
Every web designer knows that speed is an issue. People want their pages to load fast, if they don't, they click the next link and leave your site. To make a page faster, it needs to be smaller in terms of filesizes. So, you trim your images, and export them at the lowest size you can get away with before you start to lose quality. But it's not just the images that have to be downloaded, it's the code too. HTML can easily become chubby by tags that arent needed. Take these out, and your page will be faster. Firstly, spacer gifs. 1x1 pixel transparent gifs that can be resized to stretch table cells and the like. Rename it to a.gif, or at least shm.gif (shim). thisll save 3 characters every time you use it. Take off its border="0" tag (unless its part of a link) and take off the alt tag too. This'll save a lot of space if you use them as much as I do. If the table cell is already size-set, then use a , its less code. Comment tags. Its good to use these, but keep them simple and to the point. Dont waste space. Character entities: If youwant to do a ", do shift-2 instead of ". This may seem obvious, but it's worth checking if any of your other entities work before you resort to the code. There are tags in HTML that do exactly the same as others, so you might as well use the one that has the less characters, as every character is adding to your file size. Use instead of Use instead of Use Use instead of Use instead of Dont forget, that the font tag can be nested. You can specify changes to a font tag without having to type the entire font tag again. eg: Instead of : This bit is red Have this: this bit is Default tags: HTML tags that can have attributes have a default setting for when there is no attributes set. Knowing these can save your code from having unnecessary tags. All of the below are the defaults.
|