SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make web page load smoothly ?

    Hi,

    I see gmail and facebook are loading incredibly fast and smooth, I rarely,actually not, see image rendering and broken assembling layout. How could i do that ?

  2. #2
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that google and facebook and all the great sites use diferent threads in you page load. You're receiving data from a server and images from another one.

    Then you load images from images.yoursite.com and code from www.yoursite.com

    This is a way to boost page loading.

    Apart they have loads and loads of servers.

    I hope it helps a little.


    <snip />
    Last edited by DaveMaxwell; Nov 14, 2008 at 11:28. Reason: Personal Links should be in your sig, not in a post...
    Play quiniela is the best.
    Find Los mejores regalos in Internet.
    Find your best gifts in Internet.

  3. #3
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Always set a height and width on your img tags, this will enable the browser to give it the right amount of space while the image itself is loading, so the layout isn't jumping around everywhere on load.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    Always set a height and width on your img tags, this will enable the browser to give it the right amount of space while the image itself is loading, so the layout isn't jumping around everywhere on load.
    My site isn't breaking at all, but I can see the image latency, its loaded at last, which creating flashing effect, which not nice. And i see 98&#37; internet web pages have the same symptom except some pages i mentioned

    microsoft.com is a big site, they must have good infrastructure and application, their site, though, still loading like baby comparing to gmail.com and facebook.com

    After many effort to compare loading quality among big sites, I see, fast loading sites have a visual trick. That is nothing shown up until everything is loaded. Thats probably why gmail takes quite a time just showing white page with a loading bar before showing you the gmail homepage.

    In gmail's other pages, when u click in on a link or something, if your internet connection is lagging, gmail will not load piece by piece or image by image they give you a white page moment, then show all at a time.

    The same matter apply for facebook. I think. So after all it could be a visual trick that designer wanted to create to make page look fast. Though can't deny server speed.

  5. #5
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    microsoft.com is a big site, they must have good infrastructure and application
    Actually the output code is horrific, and there's alot of needless stuff downloaded along with the page.

    Runrunforrest, these are some tips:
    • Don't put PNG or PSD graphics on your site. They are larger in size than JPEGs and the transparency which is available in PNG but not PSD isn't compatible with IE6.
      Keep images a few kilobytes maximum.
    • Use CSS as much as possible. Table-based layouts (unlike <DIV> elements) don't load until all the data is within the cells, and alot of people use images where CSS would do.
      If an element has an image background, also use a background-color and height/widths for images.
    • For images which change on roll-over, preload the images
    • Break large images into smaller images to increase download speed.
    • Keep CSS and JS files as small as possible
    • If the output file has alot of newlines and tabs, remove them. Output source code is nice to keep ordered but not at the expense of speed.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  6. #6
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There are fixes for PNGs in IE6 available, PNGs are very useful on the web for certain types of transparency.

  7. #7
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There are fixes for PNGs in IE6 available
    And none of them work consistently.

    If you have a site for an average IT-dumb company, alpha transparency should just be avoided.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  8. #8
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've got some of them to work pretty well.

    Hopefully it won't be a concern before too long anyway

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    There are several techniques that you can use to deal with broken transparency in IE6. Plus, it's about time we stopped worrying about IE6 as much.

    Also, even if you don't use transparency, some types of images are smaller as PNG then JPG or GIF (especially if you use PNG-8 or PNG-24). It's better to check each image in a variety of formats and see which one creates the smallest file size with the least amount of loss.

    And, what emborrollats said will help reduce the flashing that you are talking about. Put images on a separate server from your other stuff. Basically, browsers will only download so much data from any one server at any one time. However, if your images are on a different server, it can download from both servers at the same time, meaning that your images don't have to wait until the end.

    Take a look at the image sources and you'll see that is the case on Facebook and Gmail.

  10. #10
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips, guys.

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2008
    Posts
    1,149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, indexed color PNGs are smaller than JPGs in about every case where the image does not have many colors. Logos, icons, etc. Use JPEG when the image has many colors, and use (indexed color) PNG when it doesn't. The people saying that all PNGs are bad don't know anything on the matter. Also, you can't use PSD on the web, so I'm not sure why arkinstall even mentioned it.

    Secondly, if you want to use a full spectrum of transparency, the various alpha transparency fixes for PNG for IE 6 do work consistently. They're designed for one and only one browser. (I personally like the fix that uses Internet Explorer's HTML Components.) However, these images tend to be large, so it may be better to avoid them outright.

    For icons, combine smaller images into one large image and use CSS's background-position property to align the image correctly. There's less overhead to load one image rather than to load 20 images.

    There are more things you can do, but Yahoo!'s YSlow suggests all of this, so there's no point for me to blab on. Check it out here:
    http://developer.yahoo.com/yslow/

    By the way, Facebook's site is one of the worst sites I've ever encountered. It loads two dozen different external (JS and CSS) files. Visiting Facebook for the first time (before the files are cached) is a horrible experience, especially if you're stuck on a slow connection. It's not really a good site to set your bar at. It doesn't even degrade at all when JavaScript is off.

    P.S. The problem with tables not loading entirely right away only really affects IE, and there's a way to fix that. There was/is a MSDN article I read many years ago about it. I think you can find it in one of my posts here at SitePoint.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •