×

10 Design Methods to Reduce page load time exponentially

Design Ideas

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

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

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

Why?

This is one such reason that differentiates them from the other wannabe pro bloggers or the bloggers achieving success in leaps and bounds. Yes, I am right, check out the design of any pro blogger 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

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 too much quality. If you’re 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 losing the image quality.

2.Using Table the Right Way

If you don’t use tables in your website then you should be. They are a very light HTML code that the search engine has 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 number of Images

We all know that making a website with more image then the 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 to 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 overboard 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 your 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 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 to 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 add-ons.

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 aa lotof factors like webhost, coding, size of images,f lash, audio and video, so you should check your load time often.

Tools.pingdom.com, gtmetix.com and google page speed 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.

rakesh

The Whole concept was developed by the man you are watching here. I am rakesh Kumar Serial Niche Blogger and SEO Enthusiast. find me onfacebookandon twitter.. Developed popular WordPress theme for Wallpapers and funny Image WordPress theme. Love SEO optimized WordPress theme Designing and Customization.
Related Posts

25 thoughts on “10 Design Methods to Reduce page load time exponentially”

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

    1. 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

  2. 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.

    1. 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

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

  3. Hi Rakesh,
    Thank’s for the tips. I suggest for wordpress user to use wp-supercache to help create static page.

    1. if i am not wrong, you just missed the point my dear Dave, this article is not “how to speed up your website, but how to speed up your site through your design.” Your point is quite valid and it is a very good plugin but still i will recommend you w3 total cache. Thank for this wonderful feedback ;)

  4. Hello Rakesh
    its very interesting post for newly blogger really and loading time is always create your image in online marketing short loading time is important for your site and your first point Reducing The Size Of Your Images On Your Site is must in fact your all points are necessary, so thanks for sharing me

  5. Hi,
    These tips are just great and definitely helpful. I truly appreciate that. Especially the point suggesting to use simple icons and avoiding animated GIF’s are just true. This is because these are the reasons which truly makes your site to load at a longer pace. Thanks for the share!! Good work..

    1. Do not forget to update us “How did yo use this information to enhance your website’s page load speed”. Thanks aditi for this wonderful comment.

  6. Hi Rakesh,
    These days, even with the availability of high speed internet to many of us, the issue of slow loading pages or websites often pisses us as it wastes several seconds of our lives. The truth is it is not the wasted seconds the usually pisses us, but it is the point of making us wait. Yes, animated gifs, image sizes, image numbers, background theme, and flash slows down loading time significantly. I particularly hate it when I have to view the websites of some popular restaurants just to get a heads-up on what I will order during dates, but their mostly flash-based website is often too slow to load because they even try to load some of their theme music. I am not really fond of background music on website.

    1. Background music is just a very good point you have raisaed here. It also increase the page load time of your webpage, missed it in my article. Thanks Emily for this reminder, will add this point in next update. ;)

  7. Hey,

    Background,images and themes help a lot to increase the traffic of the site,page or blog.

    Thanks,
    Jannie Taylor

    1. It can increase the traffic but if not used wisely, it is the major reason for traffic lose.

    1. Behind that there is a reason. Cache we can not define at design time, thus did not included in this article. Thanks Mobila for your concerned query.

    1. Experience designer already aware with these and some advance tricks they does not need. These are basic tips, i knew that but they are the real hero in the actual world. Thanks for pointing me, next time onwards i would be more careful and will provide some advance tricks to woo you. ;)

    1. Dear Neeraj, to create a home page in html, you have to write the following line at the top of page template

      Now according to the header or footer or your requirement you can define tags. Since, in this example i have created one home page template. Assign this page as your home page from admin->settings->reading->frontpage display.

      But before that you have to create a single page and its template must be your defined page template. ;)

Leave a Reply

Your email address will not be published.

+-