How to increase site loading speed?

13 replies
  • WEB DESIGN
  • |
Anyone has any idea to increase the speed of website loading especially for website that have lots of images.

I have try to pre-load these images, but I need to keep doing this when the images in the home page changes.
#increase #loading #site #speed
  • Profile picture of the author harrisunderwork
    Convert them to gif format. You will see great results.
    Signature
    {{ DiscussionBoard.errors[589253].message }}
  • Profile picture of the author d3sign3r
    Try .png.. you'll notice a great difference.
    If you're using photoshop for your graphics, make sure you adjust your output quality.

    Cheers
    aLee
    Signature
    ---------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------
    {{ DiscussionBoard.errors[589285].message }}
  • Profile picture of the author robie
    Reduce the file size of your images
    as small as possible but pay attention to the quality of the image itself
    {{ DiscussionBoard.errors[597339].message }}
  • Profile picture of the author Ken Shorey
    Include the width and height attributes for all the images.

    That way browsers will know how much space to allow for the image and carry on rendering the rest of the page rather than waitng for each image to load.
    {{ DiscussionBoard.errors[598086].message }}
    • Profile picture of the author reynald2790
      My idea is that you click follow this Tools>Option>Content>Block pop-up windows>Load Images Automatically. Just directly paste your URL in the block pop-up windows and in load images automatically. Just try to follow that. That is one my idea to load your site faster.
      Signature

      Hi! I am Reynald Laque Logan | Reynald Logan Dreams, 22 years old. Living in Dumaguete City “The City of Gentle People.” I am a pure Filipino Citizen. I am a Freelance Provider preferably working at oDesk.

      {{ DiscussionBoard.errors[598100].message }}
  • Profile picture of the author n7 Studios
    To the OP: it depends on a lot of factors:
    - Do you absolutely need images where you have them presently e.g. for titles and navigation / menus, text is generally better for accessibility.
    - If you're loading images, compress them in your editing software. Don't compress / lower the quality too much, though, otherwise they won't look as clear.
    - You mention when images on the home page change - if you've got some sort of dynamic script that's loading in images on an interval, it's worth looking at that script to see if it can be more efficient, as well as again checking your images are optimised for the web.

    Along with the advice above, you should be well on your way to solving the issue.
    {{ DiscussionBoard.errors[598201].message }}
  • Profile picture of the author kdavies
    You're probably already doing this but are you setting the width and height attributes on the image tags?
    {{ DiscussionBoard.errors[607135].message }}
  • Profile picture of the author Minisite Frog
    Hey,

    The first step is reducing the file size of your images... You can do this in photoshop. Instead of just 'Saving As..', you want to 'Save For Web & Devices' and from there you should be able to find a decent balance between image quality and file size.

    For images that use a lot of gradients and shadow effects you should save them as .jpg. For images with mainly solid colours, I'd suggest .gif or .png

    Hope this helps.
    {{ DiscussionBoard.errors[609766].message }}
  • Profile picture of the author netrider7880
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[610719].message }}
    • Profile picture of the author Kevin AKA Hubcap
      If you have large images it might help to slice them with a graphics editor like Photoshop.

      Kevin
      {{ DiscussionBoard.errors[612316].message }}
  • Profile picture of the author jumbopanda
    If ou need the graphic to be 150x150, make the actual images 150x150, and dont take a 250x250 image and force it to be 150x150. Making the images the actual size you want them to be displayed will significantly cut away excess data loading. Resolution can also be lowered.
    {{ DiscussionBoard.errors[629803].message }}
  • Profile picture of the author robertstr
    If you want to increase site loading speed, there are some suggestions:

    (1) --> Use CSS templates.

    (2) --> Avoid using heavy background graphics or textures.

    (3) --> Use "Free Online Image Optimizer" to optimize image size.

    (4) --> Free check your website loading speed details on "Webpage Analyzer"

    (5) --> Avoid using widgets with many images or which you really don't need.

    (6) --> Don't use flags for translation, you can use "Google Translate Tool" instead.

    (7) --> Reduce Java Scripts in your template and maximize the use of CSS.

    (8) --> Make sure that all images have height and width tags.

    (9) --> Consider hosting your images on an external site like flickr that has huge servers and can handle the load.

    (10) --> Do not host videos on your server. Upload them to YouTube, Google Video, or any other video sharing site and let them handle the server load.

    (11) --> Compress your Javascript, using a tool or by removing formatting (and potentially by shortening function and variable names). This can reduce file size by 60%. Add gzip compression to that as well and you're looking at a serious size reduction.

    (12) --> Compress HTML and CSS by removing HTML formatting, white space (where you divide code among separate lines for easier readability), trimming class names, omitting unambiguous quotes around attributes, etc.

    (13) --> Use external scripts - Instead of placing tons of code in your header.php file, use external scripts. This allows the browser to cache the script so it won't have to read it for every other page.

    (14) --> Allow progressive rendering: Load CSS files at the top of the page, from within the head section; load JavaScript files at the bottom of the HTML.
    Can you find anymore ways?
    {{ DiscussionBoard.errors[640746].message }}
  • Profile picture of the author GB2008
    I got one more... Make sure your PHP is nice and efficient! Especially if you are running multiple mySQL queries - combine those into one wherever possible and keep loops as short and efficient as possible.

    Robert addresses issues as the page loads into the browser - slow PHP affects your page as it is assembled at the server - just fyi.

    If you have a heavy traffic load - consider creating cache pages on the server, such that your PHP is then only really working every few page loads, instead of recreating the page for each new visitor.
    Signature
    {{ DiscussionBoard.errors[642492].message }}
  • Profile picture of the author Plinko
    One more still.

    If you have your hands on a server (as root), the big sites recommend serving static content (images, CSS files, javascript) with another process.

    The common solution is to use a small and efficient web server like lighttpd instead of Apache. Don't compile in PHP to lighttpd because it isn't needed for stati files. You keep the Apache with PHP around to server your dynamic content. This way your machine will serve images and html and do processing of PHP files in parallel and a bit more efficiently.

    I realize this may be a bit overkill for a small site, but if you have optimized your image file sizes and didn't get relief, this would be the next step to consider. There's no point having a 40M Apache process (80M with shared) serving a 50K image. Likewise there is no point having it serve 20 images each to 10 people per second. A small web server process serving static content speeds up wites with lots of images.
    {{ DiscussionBoard.errors[644303].message }}

Trending Topics