|Slow/Fast Loading Of Pages|
How to speed up the loading of web pages.
Hi! I'm fairly new to web design but would like to be as efficient as possible already. I know for a fact that web pages need to load quickly to avoid user frustration. Lots of surfers are still using dial-up connections. One way to do this is by limiting graphics but if you must, keep the graphics file sizes at a minimum. I also heard that there is a technique wherein, when surfers visit the different pages of your website, the whole page doesn't have to load 100% each time. Like the header or logo part of the web page doesn't move, only the content below or something like that. What do you call this technique and how do you go about implementing it? Thank you very much in advance.
You might be thinking about frames.
My advice: don't.
A well-coded CSS page can be small and do everything you want. Most of the time it's code-bloat that makes pages too large, not visible content.
Hello efjay1018, Welcome to WebmasterWorld!
Is your content wrapped in one encompassing <table> or <div>?
Also, how "fat" are your pages? These days, most would not need to worry about the artifacts of a slow loading page. If the page is loading slowly, then there are problems with the page and/or server. Most of the time, I find that people have wrapped their entire page inside a <table></table>. When you do this, the browser has to render everything within the <table></table> before the user gets to see it. That's where page architecture (structuring) comes into play. You have to break it up into logical sections, that way the user gets content on first visit while the rest of the <table>s and/or <div>s are being process by the browser.
Welcome to WebmasterWorld! [WebmasterWorld.com]
While there are lots of pros and cons about using frames (mainly cons for the normal implementation) there are quite a few other things you can do to reduce the loading time: use CSS to control the style and layout of your site
if possible, switch to a 100% CSS based layout; otherwise, decrease the amount of nested tables to no more than 2 levels
consider the ability for browsers to cache content (such as external JS/CSS and images) by reusing these objects throughout the site
go through your code to remove code bloat
ok, pageone ... I'm going to pick on you now ;)
|most would not need to worry about the artifacts of a slow loading page |
That is very dangerous way of thinking. Dial-up is still very much a reality. The availability of free dial-up (or at least much cheaper than broadband) makes it the most logical choice for many. In fact, it is the most logical choice for anyone who does not have use email/internet as a core of their business, or who only uses email occasionally to stay in touch with family and friends.
I would venture to say that dial-up is still used by a very large portion of users. Not being concerned about load time is not a viable solution until DSL of speeds reach at least 1.5Mbit for 85% of our visitors.
There is no reason for most graphics to be larger than 30K in size. There is also little reason for most pages to be larger than 100-150K in total size. Homepages and other likely landing pages should be the leanest.
So, I would like you counter the statement and say that unfortunately most still need to worry about whether pages are slow or not.
|Most would not need to worry about the artifacts of a slow loading page. |
Okay, I'll retract that statement. :)
Man, did I misinterpret this topic from the start. I'm going out to play!
|Like the header or logo part of the web page doesn't move, only the content below or something like that. What do you call this technique and how do you go about implementing it? Thank you very much in advance. |
As webdoctor points out above, it sounds like you are describing a frameset. This is where the web page is divided into multiple windows (sometimes visible, sometimes invisible). You click something in one window, and the content of another window changes. You can usually tell when you are in a frameset by watching the web address in your browser. If it doesn't change as you click on links, there is a good chance you are within a frameset.
After you have done other optimizations.
If possible send html as gzip compressed.
I often see misconfigured Cache-Control headers also.
One useful tool which is not mentioned yet is
LiveHTTPHeaders Firefox extension [livehttpheaders.mozdev.org...]
Shows charset headers, MIME-types, cache related headers etc.
If those are wrong, accessibility and usability suffers.
100-150k total page size is quite a lot. That takes about half a minute with a 56k-modem. Recall that Brett recons to stick to less than 20k in total if ever possible, even less.
But now "something completely different," maybe silly to ask:
What's the alternative to using tables for giving at least a minor structure to html pages? I'm very much a beginner to css. Does anyone have a relevant URL at hand?
I use tables from the very beginning of writing my html-pages and always thought, I was sort of a purist. Quite surprised, that among all these accessibility issues now gaining more and more importance, I found that tables without headings don't conform. The loading issue is also a nice side-effect. So what's the alternative?
CSS based layouts, using <div> elements to group content :)