6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

How to speed up page loading?

by DavidO
5 replies
  • WEB DESIGN
    • |
I've heard that Google has increased the weight of page loading time in their algorithm. I've got a very long sales page with a lot features, javascript, images and multi-media and I'm looking for techniques to minimize loading time.

For example, I've transplanted a couple sections which use flash and video onto separate pages and then I use them in IFRAME's on the sales page. Will this decrease or increase page loading time?

Are there any tricks I can use? I'm wondering if it's possible to split the page into 2 or 3 sections, or even pages, that load sequentially. The visitor could be reading the first section while the later sections are still loading. Of course it still needs to look and read like a continuous page. Is something like this practical?

How much should I worry about this? I've run a number of tests but I don't have much confidence in these because they're all over the place.

The page html is 87 KB plus lots of large images. I'll work on compressing my images (many of them are high-quality PNG) but what else can I do?

Thanks for any tips on this.
#loading #page #speed
  • Profile picture of the author BizWebMan
    Hi David

    For compressing images on your site this is probably one of the best optimizers out there and its free.

    What sets it apart is the fact that it show you several images at different stages of compression whilst maintaining image dimensions.

    Online Image Optimizer: Optimize your GIFS, JPGS, and PNGS online.

    Grahame
    {{ DiscussionBoard.errors[2078056].message }}
  • Profile picture of the author shafiqamiami
    that's call accessibility option, the easyness to browse a site without fuss of javascript.
    and i think you can use external css for this purpose too, because in internet css the whole code is written in header. where if you create a separate file of css and just link it in header and use it as a external style sheet, it also lightens the page.
    Signature
    Fresh Articles on Forex
    Live Cricket Matches
    {{ DiscussionBoard.errors[2078392].message }}
    • Profile picture of the author prasath
      Step 1: You should make sure you always use the right image format for every image. The JPEG format will work best for large images with lots of colors. PNG-8 (8-bit PNG) works best for most other images. The GIF format works best for tiny images, animated images, and images that require transparency. PNG-24 (24-bit PNG) are needed if you want to add translucency.
      Step 2: Reducing the number of images to download is always a good idea. Being a Mac guy I have a tough time doing this because when I look at my web pages on Windows, the fonts look absolutely terrible to me. I've innovated a workaround I call image stacking, in which you can combine multiple images into one and then splice them out using CSS.
      Step 3: By including the source of external resources such as CSS and JavaScript inline in your HTML you prevent them from requiring an extra http request. While this prevent these documents from being cached, it is almost always an effective way to reduce web page load time.
      Step 4: HTTP compression is a feature of the HTTP protocol that allows properly configured web servers to compress data to browsers that also support it. Typically html,css, and JavaScript will compress to %75 and %90 of it's original size. This can save a ton of bandwidth for high volume sites, and would also seem to promote a faster loading page.
      Step 5: Another feature of the HTTP protocol is the ability to control caching. Properly configured web servers can instruct web browsers to keep copies of content on their local machine. The next time a request needs to be made for the same piece of content, the browser will load the local copy instead of downloading a fresh version. This can substantially reduce the page load time of users when browsing a site with only minor overhead on the first page view.
      Signature
      Myspace Layouts
      {{ DiscussionBoard.errors[2080207].message }}
  • Profile picture of the author ninal
    One of the best initial approaches would be using completely table-less layouts (except of course for tabular data). Make sure all styling will be contained in an external stylesheet. Then optimize your images. I usually just use the 'save for web' function of photoshop and pick the best quality with the least image size.

    The use of online image optimizers is also an option as stated by gonzo.
    Signature
    Hello
    {{ DiscussionBoard.errors[2080483].message }}
    • Profile picture of the author DavidO
      Thanks for all of your suggestions. I'll work on my images today. I already use external style sheets.

      Prasath, your tips sound interesting but I"m afraid I wouldn't know how to implement them. Can you suggest any resources that will explain things like image stacking?
      {{ DiscussionBoard.errors[2080603].message }}

Trending Topics