10 Design Methods to Reduce page load time exponentially


There are numerous guide on the internet to reduce page load time ? But how many of them had ever explained you how you can reduce page load time through the design of your website?

Strange ?  No there is no strange at all!!,

All the experience bloggers and designers already knew that but will never reveal to new bloggers.

Why ?

This is one such reason that differentiate them from the other wanna be probloggers or the bloggers achieving success in leaps and bounds. Yes i am right , check out the design of any problogger or your favorite blogger. I am sure you can not say i am wrong anywhere.

So, If there’s any one thing you need to focus on when designing your website, it’s that your pages load fast. If you have a fantastic design but it loads really slow people will hit the back button and go elsewhere.

These are the best 10 tips for ensuring that your website loads fast

Design Ideas-reduce page load time

photo credit: kaneda99

1. Reducing the Size of your Images on your site

Make sure where you can that your web images stay as small as they can be without losing to much quality. If your looking to improve your image load time and in hand your website load time, convert your images to .jpg or .gif images.

You can reduce the size of the images by lowering the number of colors in the image. There are many software tools that will let you optimize your images maximizing the load of those images.

Tinypng.org is the best online tool to reduce the size of any png image file by 70% without loosing the image quality.

2.Using Table the Right Way

If you don’t use tables in your website they you should be. They are a very light html code that the search engine have been and always will be able to read quickly and easily. You can use tables on any of your pages and once you learn how to work with them you’ll wonder why you weren’t using them sooner.

3. Reducing the amount of Images

We all know that making a website with more image then text will result in a page loading slower, so the key is to only use the images you have to, to convey a message.

Here are  some simple ideas to choose a better image for your blog/site

  • The Simple is often better.
  • Choose pretty girls face to convey your message
  • Bright contrast colored images attract more visitors than black and white images.

So when picking images make sure you apply the first rule and never go over board with images, stay around 1-3 images per page.

4. Avoid Animated GIF’s

Animated GIFs are great but you can often distract your visitor and can take a while to load you other page elements are suffering from not being optimized yet. When it comes to animated gifs just remember less is better.

5. Backgrounds

Make sure you use images as background and not as a standalone image. If you are using large images to help with the flow of the website make sure you have them as background images, because otherwise they will take too much space and time, Loading them in the background you can reduce page load time.

Lazy Load jquery  can also help you to load all the images on the page as user scroll the webpage.  Advance Lazy Load wordpress plugin is for wordpress users.

6. Fast Loading Flash

If you want to have a flash element on your site then you need to make sure that you keep it to only 1 per page maximum of 2 because normally you have a good amount of visual or informational content in these and visitors will not wait around for them to load. If you can get the rest of your site to load fast then the visitor might be a little bit more willing to stay around to view your flash.

7. Create Icons that are simple

Don’t use images for your icons that are big. Remember simple is better. Keep the size down and just use them to add a little color thereby grabbing the visitor’s attention.

Multiple images that appear on the same page can be combined and distributed through CSS sprites.  Chris Coyier of CSS-Tricks  has already written a beautiful article on this topic

If you are not very comfortable with CSS sprite then you can take the advantage of this handy css sprite website.

8. Use HTML to build your website

HTML loads really fast and you can create all kinds of great designs with HTML so build your site. if you are developing a site for a small business that does not run an e-commerce website or blog along with their signature site then it is always better to design their home page with html.

9. Use CSS styles

CSS styles can be a lot of fun. You can get some really neat effects and yet they are made from HTML code so they load really fast.

To check the CSS style on your webpage , you can validate your CSS from w3 school link or you can use web developer firefox addons.

A valid markup and CSS can really enhance the loading time of your webpage otherwise your browser will fallback from that error mistakes and thus will take extra time to adjust all the settings, well known as quirk mode.

10. Check your page load times often

Though your website page load time depends upon a lots of factors like webhost, coding, size of images,flash, audio and video, so you should check your load time often.

Tools.pingdom.com, gtmetix.com and google pagespeed are some very good resources to check the actual page loading time. Continuously check your page load time until you optimize the load time. Anytime you make changes you should repeat this process, and once in a while you should do it just to make sure your pages are still loading quickly.

Conclusion

So the message here is “Make your website as fast as possible” How much you are successful in this, do not hesitate to share with us.




25 Brilliant Comments - Join Discussion Now!

  1. Ansh says:

    Do you think the site speed differs for website built on XHTML vs. HTML5??

    • rakesh says:

      right now there is no such proof exist. but if you have wrong markup in your website then definately it impact the site speed. ;)

  2. vipin says:

    my home page takes a lot of time to load. i am a blogger user. what could i do to improve this.

    • rakesh says:

      first of all check the image size of your home page. second thing is serve scaled images in that are. these two methods will surely help you to load your home page faster. ~rakesh

  3. alex says:

    i might look into this product,i do blogging with out any good results,i need to look for many ways were i can improve my blog,maybe i need to read a lot more articles first.

  4. adil says:

    thanks for sharing helpful and very informative article but i have a question how i improve my blog loading speed to fix CSS coding.

    • rakesh says:

      Besides all the valid tips. If you are able to serve right size of image all the time, You can also save a lots of data to be transferred. Thanks adil for this wonderful feedback. Keep in touch

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>