Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 10-29-2010, 05:41 AM
Contributing Member
Latest Blog:
None

 
Join Date: 10-29-10
Posts: 539
iTrader: 0 / 0%
Question How to make faster pages?

Hello,

I am working on a new site and my biggest problem is that the .htm files are too large and that the pages load very slowly...

I believe you have better experience than I do, so I am here to ask some advice

I am having trouble with codes and also in placing images on my pages:

1) does a page load faster if I put background buttons instead of "inserting" the buttons in it?

2) does the page extension count in loading speed? .cfm, .htm, .php? (I am using old .htm, by the way!)

3) I am using multiple tables per page and I know that is making it slow down... how much better is it with DIV tags?
(I still think tables are more comprehensive, because I am building in Dreamweaver)

4) would it count if I'd put my .jpg image files on another domain? I could theoretically put external sources for photos, but would that make it faster?

5) I am using CSS... some say I should put the CSS "<link rel="stylesheet" type="text/css" href="style.css"/>" at the end of the HTML code, adter the </BODY> tag
Would that help?

Any other ideas, tips on making pages load faster, but still look good graphically?

Thank you in advance, my friends!
 
Reply With Quote

Advertisement

Advertisement

  #2 (permalink)  
Old 10-29-2010, 09:25 AM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
None

 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
1. maybe
2. page extension doesn't count, or at least it shouldn't be. what it counts though is the content of that file. if there's a lot of code to be processed then it might slow down your website
3. tables can do better than divs in some cases, the problem with tables is that if there are more tables inside another one then it might not be properly displayed in those screen readers some people with disabilities might use for browsing the web
4. not necessarily...
5. you're using css, that's very good. some say that you should put your css filea at the end of your body tag...really?? you might got that wrong...maybe..the css file should be loaded in the head tag, before any js files are included. The js file should be loaded at the and of your body tag, if they're big, otherwise leave them in the header.

In your case, I'd recommend you to use a template engine, if you aren't already and use the cache methods. Caching is the one that will help your website gain speed, nothing else that much.

hth
 
Reply With Quote
  #3 (permalink)  
Old 10-30-2010, 12:59 AM
Junior Member
 
Join Date: 10-23-10
Posts: 5
iTrader: 0 / 0%
I suggest to install the Pagespeed plugin for Firefox and follow his tips
 
Reply With Quote
  #4 (permalink)  
Old 10-30-2010, 01:09 AM
trentz's Avatar
Banned
Latest Blog:
None

 
Join Date: 10-06-10
Posts: 226
iTrader: 0 / 0%
file size of those images matter too.
 
Reply With Quote
  #5 (permalink)  
Old 11-01-2010, 10:37 AM
Contributing Member
Latest Blog:
None

 
Join Date: 10-29-10
Posts: 539
iTrader: 0 / 0%
Sure, I pretty much knew that the file size counts

But, from those of you who have more experience with DIVs (I am trying to learn them now): how much faster are DIVs when compared to TABLE?

I will be building a large structure for a complex site: about 16 "cells"/sections (DIVs now, whatever)... this time with DIV, not TABLE. Of course, CSS too

How much faster can this get? In percent... like 200%, 50%, 30 %?
 
Reply With Quote
  #6 (permalink)  
Old 11-01-2010, 11:04 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 25,575
iTrader: 5 / 100%
Each table you create makes the browser "stop and think" before rendering. It has to figure out the table layout before rendering it in the page.

In Learn to Design HTML Tables with Less Code I demonstrated that just moving presentation attributes from your table coding could reduce the file size by 10% in the demonstration simple table.

If you went with divs, you could reduce this further if you plan your divs and CSS properly.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #7 (permalink)  
Old 11-02-2010, 01:12 AM
Contributing Member
Latest Blog:
None

 
Join Date: 10-29-10
Posts: 539
iTrader: 0 / 0%
OK, thank you for the advice, I really appreciate that!
 
Reply With Quote
  #8 (permalink)  
Old 11-02-2010, 02:55 AM
Junior Member
 
Join Date: 10-10-10
Posts: 12
iTrader: 0 / 0%
At gtmetrix.com you can scan your website and see what you could do to make your website faster. I got mine down to about 0.7 seconds this way.

Allso a good hosting is a must.
 
Reply With Quote
  #9 (permalink)  
Old 11-02-2010, 11:56 AM
Contributing Member
Latest Blog:
None

 
Join Date: 10-29-10
Posts: 539
iTrader: 0 / 0%
Thank you, that site seems to be very interesting!

Please, tell me your opinion regarding loading time:

1) Use many small fractions to load an image or use 1 single file to display it?

2) I would like to use table and DIVs as well. I need to put a table, which contains an internal searcher.
Is it a big deal if I have the table above the main content?

3) External source code for AdSense and other ads... would this speed it and reduce file size?

4) Any ideas on approx. how much place (kb) and time (sec) does a text link take? I would have about 50-60 on this big page... Mainly internal.

5) Repeating pattern background (I used them to make nice frames for some of my tables... )... I would like to use another technique, but so far the background-repeat of the .jpg in the CSS was the best idea I had so far...

6) Have you ever tried the new WebP image format over .jpg, .png? Any ideas on how to make even small... 200x133 px images load faster?
How come WordPress shows .jpg so fast and on my site they load like on "Atari"

 
Reply With Quote
  #10 (permalink)  
Old 11-02-2010, 02:19 PM
Junior Member
 
Join Date: 10-10-10
Posts: 12
iTrader: 0 / 0%
Maybe you did not safe them for the web ???
 
Reply With Quote
  #11 (permalink)  
Old 11-03-2010, 01:37 AM
Contributing Member
Latest Blog:
None

 
Join Date: 10-29-10
Posts: 539
iTrader: 0 / 0%
What do you mean?
 
Reply With Quote
  #12 (permalink)  
Old 11-03-2010, 09:37 AM
dmvictoria's Avatar
v7n Mentor
Latest Blog:
None

 
Join Date: 10-28-10
Location: Victoria BC, Canada
Posts: 689
iTrader: 0 / 0%
I have one website here were I draw large amounts of scripts and images. I drastically increased my load speed by placing scripts on sub-domains. Browsers are limited to 2-4 http request per domain at a time, you can trick the browser by using sub-domains, ever wonder what that "ww1".crazyfnsite.com was all about? Now you know.

Also image spriting merges several images into one file and using css you can call and differentiate the images.

Another note about the css. If you keep all css info on the page, not in a seperate file, that can increase speed as well, and not in the footer, you need that stuff to load first.

Finally compression, you GZip your site and increase your load time by another %10 or more.

Except for the first method, the others require some serious explaining, if you Google it you can find multiple tutorials.
 
Reply With Quote
  #13 (permalink)  
Old 11-03-2010, 10:38 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 25,575
iTrader: 5 / 100%
Quote:
Originally Posted by dmvictoria View Post
Another note about the css. If you keep all css info on the page, not in a seperate file, that can increase speed as well, and not in the footer, you need that stuff to load first.
Disagree with this point. Using an internal stylesheet or inline styles creates a larger web page file and a maintenance problem. However, if you use an external stylesheet (sep file refered to in the head of your pages) this reduces web page file size, makes things easier to maintain as you only have to update in one spot and the external stylesheet is kept in memory while the visitor is on the site instead of the browser having to read and parse your internal and inline styles over and over again.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #14 (permalink)  
Old 11-03-2010, 08:57 PM
dmvictoria's Avatar
v7n Mentor
Latest Blog:
None

 
Join Date: 10-28-10
Location: Victoria BC, Canada
Posts: 689
iTrader: 0 / 0%
Quote:
Originally Posted by HTMLBasicTutor View Post
Using an internal stylesheet or inline styles creates a larger web page file and a maintenance problem.
I completely agree. Thank you for pointing that out, but if you have 1 big page and unique styles just for it, you can reap benefits of putting the style in the same page. %1 - %5 speed increase, especially if you are using those table <div>'s.
 
Reply With Quote
  #15 (permalink)  
Old 11-04-2010, 05:17 AM
Contributing Member
Latest Blog:
None

 
Join Date: 10-29-10
Posts: 539
iTrader: 0 / 0%
Another dilemma, idea... About making pages faster.

When coding my site's main button field DIV, this occurred to me (you tell me what you think!):

Instead of inserting the .jpg buttons directly into the .HTM file, I was wondering if it were faster if I'd use multiple background images (with no repeat) for those buttons, but in CSS.

The idea would be: there would be less requests from the browser opening the page if all the instructions were in the CSS...

So the CSS would place those buttons one by one into the DIV cell as backgrounds!

You think this would be faster than conventional inserting? Or is this idea jsut a waste of time?
 
Reply With Quote
  #16 (permalink)  
Old 11-04-2010, 07:55 AM
dmvictoria's Avatar
v7n Mentor
Latest Blog:
None

 
Join Date: 10-28-10
Location: Victoria BC, Canada
Posts: 689
iTrader: 0 / 0%
Quote:
Originally Posted by davelev View Post
Instead of inserting the .jpg buttons directly into the .HTM file, I was wondering if it were faster if I'd use multiple background images (with no repeat) for those buttons, but in CSS.
You are basically talking about image spriting.
 
Reply With Quote
  #17 (permalink)  
Old 11-04-2010, 10:24 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 25,575
iTrader: 5 / 100%
davelev, yes that would be a better idea on many levels.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How will i Make my site faster ? jacks smith Web Design Lobby 18 10-06-2010 10:21 PM
How do you get Google to crawl your site faster to add new pages? kingofoverkill Google Forum 16 04-21-2009 02:16 PM
How do you get NEW web pages indexed faster? Johan007 Google Forum 34 11-08-2007 11:24 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 12:30 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.