1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Site loading time

Discussion in 'HTML & Website Design' started by bharathiseo88, Aug 30, 2013.

0
Page 1 of 2
  1. #1
    Hello friends,

    How to reduce the website loading time? Please share some ideas.

    Thanks.
     
    bharathiseo88, Aug 30, 2013 IP
  2. amber.long83

    amber.long83 Active Member

    Messages:
    144
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    78
    #2
    1. Optimize Your Images

    Know when to use the appropriate file format for your images. Changing to a different file format can dramatically decrease the file size of an image.

    GIF is ideal for images with few colors like logos.
    JPEG is great for images with lots of colors and details like photographs.
    PNG is the choice when you need high quality transparent images.
    Check out these resources to learn more about optimizing images:


    2. Don’t Scale Down Images

    Avoid using a larger image than you need just because you can set the width and height attributes of <img> elements in HTML.

    If you need a 100x100px image and you have a 700x700px image, use an image editor like Photoshop or one of these web-based image editors to resize the image to the needed dimensions. This lowers the file size of the image, thus helping to decrease page loading times.

    3. Compress and Optimize Your Content

    The task of compressing your website content can have a huge impact on reducing load times. When using HTTP compression, all of your web page data is sent in a single smaller file instead of a request that is full of many different files. For more information, see this Wikipedia article on HTTP Compression.



    4. Put Stylesheet References at the Top

    Moving your stylesheet references to the <head> of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively. In addition, it doesn’t hurt that it’s the W3C standard.

    5. Put Script References at the Bottom

    Browsers can only download two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page. This makes it feel like the page is loading slower.

    To avoid this situation, place script references as far down the HTML document as possible, preferably right before the closing <body> tag.

    6. Place JavaScript and CSS in External Files
    If your JavaScript and CSS are directly in your HTML document, they are downloaded every time an HTML document is requested. This, then, doesn’t take advantage of browser caching and increases the size of the HTML document.

    Always place your CSS and JavaScript in external files; it’s a best practice and makes your site easier to maintain and update.
     
    amber.long83, Aug 30, 2013 IP
  3. bharathiseo88

    bharathiseo88 Member

    Messages:
    135
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #3
    bharathiseo88, Aug 30, 2013 IP
  4. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,095
    Likes Received:
    103
    Best Answers:
    5
    Trophy Points:
    240
    #4
    My website loads in 0.7 seconds - how can I make it faster ?

    :D
     
    ApocalypseXL, Aug 30, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    It's hard to dial in exactly what would need to be done without seeing the sites in question, but some general guidelines I follow:

    1) Do not use 'javascript for nothing' -- which is to say fat bloated pointless libraries and 'gee ain't it neat' scripted garbage like 'image sliders' or 'scripted tabs' that do absolutely NOTHING of use to help visitors use the page.

    2) keep the number of HTML elements to a minimum, as they can increase render time and slow down scripts. Generally speaking if the HTML being served outnumbers the plaintext on the page by 3:1 or more, the site is poorly written trash.

    3) use separation of presentation from content and pre-caching of sub-page appearances. Since CSS can be cached across pages, putting sub-page appearances in your first loaded page makes sub-pages load faster. This is particularly important on things like forums or CMS where the odds of people bouncing 'single visit' are low. In other words, keep presentational markup (saying what things look like in your code) the *** out of your code!

    4) keep the number of separate files on the page to a minimum. Every time a file is requested there's a process run called 'handshaking' -- the user agent (Abbr: UA, aka browser) asks "do you have the file?", the server says "Yeah, I have that", then the UA says "fine, send it to me" -- that's three 'back and forth' before you even start transferring the file, each taking the equivalent of the ping time to the server -- That could total anywhere from 90ms if you're sitting on top of the server, to three seconds or more on a choked/limited connection PER FILE!

    A great way to see an exaggerated example of this is to log into a server via FTP, and compare uploading one-hundred separate 10k files, and a single 1 megabyte file. The single file will upload way, WAY faster because there's less 'handshaking'.

    Since browsers can request more than one file at a time you rarely see it 'really' take that long, with the 'real world guesstimate' used by most to be 200ms for each file past the first 8 in overhead as the average, and 1 second for each past the first 8 as worst case scenario.

    ... so if you have a page bloated to the gills calling 60 separate files, the real world handshaking 'estimate' is 10.4 seconds regardless of how fast the connection is on EITHER end -- as average, and 52 seconds worst case scenario!

    Methods for avoiding this problem involve using less scripting or combining all your scripts to single files, re-combining presentational images into single files, and limiting the number of separate CSS files you use. The last of those is typically used with the incorrectly named "CSS Sprites" technique -- a VERY powerful way to make things like icons and image borders load quickly.

    Using CSS3 instead of images for simple effects can also load far, far faster. BUT:

    5) Don't waste time on idiotic nonsense like shiv or polyfills -- if you can't use the fat bloated idiotic nonsense known as HTML 5, OH WELL... Older browsers don't get your CSS3 effects, OH WELL. The latter in particular is stupid shortsighted nonsense as usability and speed should be more important than how pretty it is.

    6) don't use "Not viable for web deployment" images as part of the layout/template. These include 'screen sized' background-images, screen or layout width images taller than 8px, or in general any image that exceeds 32K pixels -- regardless of encoding. You want to show a image that large, load it as a separate page (or use JS stuff like lightbox)...

    7) Pageloads are NOT evil -- there's this noodle-doodle BS of trying to stuff everything onto a single page, using idiotic inaccessible garbage like CSS driven tabs or worse, scripted tabs. It's just bloat and if you're bounce rate is high, wasting time sending data the user never sees.

    8) Avoid "link overload" and massive menus. Too many links on a page, even when broken into cascading drop-down menus can be too hard to navigate for simply overwhelming the visitors SA. (situational awareness). Information overload is far more pronounced on things like navigation than it is content, so if you have a massive cascading menu to damned near every page on a hundred+ page site, you're wasting bandwidth AND confusing visitors all at the same time.

    But again, without seeing the pages in question it's hard to weight in more... but keep this in mind -- all those graphics and pretty bits that are image based, how many truly successful websites do you see loaded with that crap? Take a look at Google, Amazon, E-Bay, Craigslist, Facebook, slashdot -- not exactly a visual tour-de-force. There's a REASON for that!
     
    deathshadow, Aug 30, 2013 IP
  6. badhim

    badhim Member

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #6
    1. Try to use a static pages were it is possible. Most CMS have an option to create a static copy of your pages.
    2. Find a faster hosting provider.
     
    badhim, Aug 30, 2013 IP
  7. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #7
    May this help you.

    - Use sementic coding style
    - use less java scripts
    - remove unncessory HTML and CSS code
    - optimized images
    - use HTML5/CSS3 coding style
     
    creativewebmaster, Aug 31, 2013 IP
  8. bellcom

    bellcom Well-Known Member

    Messages:
    218
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    120
    #8
    If you use wordpress this may help:
    http://gtmetrix.com/wordpress-optimization-guide.html
    Worked great on a few of my wordpress sites. Some of my sites have too many plugins and I am still trying to get them to speed up where this didn't help much.
     
    bellcom, Aug 31, 2013 IP
  9. vimalaranjan

    vimalaranjan Active Member

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    66
    #9
    Simply split your site contents and host some important files on Amazon S3
    such as your large images, js and CSS.
     
    vimalaranjan, Aug 31, 2013 IP
  10. Simon Wellander

    Simon Wellander Member

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #10
    Everyone else have already posted some great tips here. Focus on them.

    But I just wanted to add that you can also, on top of everything else that should be considered more important, use a service like Cloudflare(.com). They have a free plan that helps optimize your website a bit. It does not hurt anyway. It's worth checking out.
     
    Simon Wellander, Sep 2, 2013 IP
  11. ultimatesouvik

    ultimatesouvik Active Member

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #11
    Use best hosting site
    put all css in an external file
    put all js in an external file
    validate with validator.w3.org
    use gzip for compress images
     
    ultimatesouvik, Sep 2, 2013 IP
  12. actmedia

    actmedia Member

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #12
    Juts run through Google Page Speed and see the suggestions, implement those suggestion
     
    actmedia, Sep 3, 2013 IP
  13. 123addme

    123addme Active Member

    Messages:
    171
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #13
    123addme, Sep 5, 2013 IP
  14. Shailesh555

    Shailesh555 Greenhorn

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #14
    Use low size images in your website
    Do not use Frame tag in your website
    Use less programming to create your website
    This things helps you to reduce your webpage's loading time.
     
    Shailesh555, Sep 13, 2013 IP
  15. ankittlasto

    ankittlasto Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #15
    Follow these simple tips

    1. Compress images before using them if u have are using wordpress you can do it automatically by using a plugin called wp smush it
    2. Avoid using many images
    3. Compress Java scripts and style sheets
    4. Use external scripts and style sheet
    5. Take a look at your page and see if you have added some unnecessary code
    Hope above tips will help..
     
    ankittlasto, Sep 14, 2013 IP
  16. Cone Man

    Cone Man Active Member

    Messages:
    46
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    90
    #16
    Is it Wordpress? Use W3C Total Cache. It works.
     
    Cone Man, Sep 22, 2013 IP
  17. webmaster3388

    webmaster3388 Greenhorn

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #17
    optimize your image with alt tags
    Add gzip code in htaccess file
    check all the HTML and CSS validation errors
     
    webmaster3388, Sep 23, 2013 IP
  18. chuckgs

    chuckgs Member

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    28
    #18
    Get rid of the unnecessary stuff on sidebar and footer if you have a WP website. I agree with Cone Man, W3C total cache is good if you are using Wordpress
     
    chuckgs, Sep 23, 2013 IP
  19. Cool Dude

    Cool Dude Member

    Messages:
    128
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    33
    #19
    Can any one suggest why my page is loading too slow and what makes the problem with slider distracting the view while opening page...
    champs(dot)net .
    Your valuable suggestion please...
     
    Cool Dude, Sep 24, 2013 IP
  20. george saviola

    george saviola Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #20
     
    george saviola, Sep 25, 2013 IP
Page 1 of 2