SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Location
    London UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tips to speed up website loading time. pls help

    Ive just completed a website and it take along time to load a page after i publish it .i sliced and converted most of the images from Adobe Fireworks

    and save them and png, the file size for the home page is over 800mb is this too high . pls can some one help as im new to the site and sort of new to webdesign
    thank u Nicky

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi nicky. Welcome to the forums.

    Quote Originally Posted by nicky8694 View Post
    the file size for the home page is over 800mb


    Yes, that's about 10000 times bigger than it should be—seriously.

    One thing you need to do with images is use the Save for Web feature, which strips out all of the unnecessary data. You should be able to get the images to well under 100kb each. Also, be careful not to use more images than necessary. The word "slice" is kind of out of date, in my opinion, as you mostly shouldn't need to slice images at all with modern CSS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Location
    London UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ralph .m .is there a way on fireworks I can convert.the images.and also shall I convert to jpg?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I don't use Fireworks, but yes, it does have a Save for Web option, and you can choose any format—jpg, gif, png etc. I usually choose whicherver version turns out smaller.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,806
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't use Fireworks, but yes, it does have a Save for Web option, and you can choose any format—jpg, gif, png etc. I usually choose whicherver version turns out smaller.
    I used to do that but now make a special point of saving all web images as JPGs. The reason is that the PHP thumbnail software I use reduces the dimensions of a PNG but the file size is huge compared to an equivalent JPG formatted imagel.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by John_Betong View Post
    the PHP thumbnail software I use reduces the dimensions of a PNG but the file size is huge compared to an equivalent JPG formatted imagel.
    Yeah, usually pngs are bigger, but only by a little bit in Ps/Fw. So I tend to use them only if I need a crisper image or transparancy. I alwasy like to check the versions, just to see what's available.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast SDGSteve's Avatar
    Join Date
    Nov 2012
    Location
    Chatham, UK
    Posts
    32
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Biggest web page ever!

    It might sound obvious but are you sizing the images to be the right size? Usually when I come across vast pages they have images 3000px wide for 100px thumbnails, all they need to do is size the images properly and the file size comes right down.

  8. #8
    SitePoint Member jonasmarsh621's Avatar
    Join Date
    Oct 2012
    Location
    San Diego, CA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Talk about big. That is one big image. I usually go for smaller types but are easy on the eyes. Sometimes average sizes are best for a website.

  9. #9
    SitePoint Member reSabi's Avatar
    Join Date
    Nov 2012
    Location
    Belgrade, Serbia
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Greetings, here's a few tips:

    If you have linear gradients in your background, try slicing an image 1px wide (if vertical) or high (if horizontal), and use with CSS background repeat property. This can dramatically reduce the size of images for the background. There's another way to do it without images in CSS3, but some old browsers won't support it.

    Put as much text as possible in the HTML as text instead of image. This would probably save you lots of megabytes. You can format it with CSS also.

    If you have a large image that really has to be left as an image, try saving it as JPG (lower the quality if possible to get an optimal file size) and turn Progressive on. If it's still too large, slice it into smaller images so they could load separately, but in most cases this is unnecessary.

    Hope this helps.
    Cheers!

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    Cape Town, South Africa
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used PunyPNG website - it's quite good for this task

  11. #11
    SitePoint Enthusiast PromptSpace's Avatar
    Join Date
    Jun 2012
    Posts
    96
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am still guessing that most of your content has not been sliced and coded properly and you are using large PNG slices. Quite difficult to get a page size that huge upon slicing.
    Host4Geeks | Hosting powered by geeks, enhanced with a scoop of
    love and awesomeness!!

    The goal as a company is to have customer service that's not
    just great, but legendary -Henry Ford

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by reSabi View Post
    There's another way to do it without images in CSS3, but some old browsers won't support it.
    But the only older browsers that are still in use are all versions of Internet Explorer which have their own proprietary way of creating linear gradients and so if you use IE conditional comments you can create linear gradients in all modern browser without needing any images at all.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Enthusiast vincewicks's Avatar
    Join Date
    Jan 2012
    Location
    Brooklyn, NYC
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to turn on gzip compression on your webserver. Also nginx with LAMP most likely will improve speed of website loading.
    This site is the go-to place for web designs.

  14. #14
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Malaysia
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vincewicks View Post
    Try to turn on gzip compression on your webserver. Also nginx with LAMP most likely will improve speed of website loading.
    yes used gzip compression, the use page cache for your website..I've write in brief on this here if you want to read.

    Next thing is, separate image file with high size in different location. I always use 3rd party storage provider to store images, then place the link to the images on your website. This means you will have just a lines of code to refer to the image instead of store the image with you main website.

    Next, use css, separate widget or javascript content

    You can test your website performance here, I always test using this site SEO site Checkup
    Last edited by TechnoBear; Dec 3, 2012 at 10:04. Reason: Self-promo link removed

  15. #15
    SitePoint Enthusiast seanuk's Avatar
    Join Date
    Dec 2012
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's great to use gzip, etc for compressing a site down, but before any of that ensure the site is optimised as much as possible first.

    for images follow this general rule of thumb:

    JPG: photos or images containing gradients
    GIF: images of flat colour
    PNG images of flat colour or image containing transparency

    using PNGs throughout isn't recommended - they are great for images containing only flat colour but as soon as you have a gradient or blend of colours the file size goes through the roof.

    if you post a link to the site, it will help people see specifically where you're going wrong to offer better advice.

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    After you've fixed your image problem - put all JS in one file at the bottom of your website - and cache and gzip your site via htaccess http://www.visibilityinherit.com/cod...ur-website.php

    My site doesn't even load. It just pops open all at once

  17. #17
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nicky8694 View Post
    Ive just completed a website and it take along time to load a page after i publish it .i sliced and converted most of the images from Adobe Fireworks

    and save them and png, the file size for the home page is over 800mb is this too high . pls can some one help as im new to the site and sort of new to webdesign
    thank u Nicky
    if you want to make your website quickly accessible try not much showing on the home page, try setting it on the homepage only a few are displayed.


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
  •