Breaking image for faster loading of website

[Luis Segovia]

Hello Bill, I want to use a high quality image on my website, but is taking too much time to load (when it actually loads), so I thought of breaking the hero image into 4 or 6 pieces and post them on the home block content area as media content, but the problem Im finding now is that there is a gap in between the pieces, is there a way to put together the pieces without the gap?? Is there a better way to do it? Thank you very much! 🙂

[Bill Robbins]

Luis,

Interesting idea. If you’d like to send over a link to your site (you can mark the reply as private if you’d like to keep the URL secret) I’d be glad to take a look for you. Often times the images can be optimized quite a bit and a few things done to the WordPress installation to greatly speed things up. When I take a look, I’ll have a better idea of what’s possible.

Thanks,
Bill

[Luis Segovia]

This reply has been marked as private.

[Bill Robbins]

Thanks Luis,

I took a look and you’re doing pretty well time wise so far. I’ve attached a screenshot of the loading time that I recorded from Pingdom which was 1.16 seconds.

What I would do to speed things up instead of splitting the images is this. Create your images. Once you have them as you like them, run them through http://www.smushit.com/ysmush.it/ to make them as small as possible.

Then when you have that finished, install the WP Super Cache plugin. This plugin will reduce the load on your database by remembering what information was pulled so that every visit doesn’t make a trip to the database for the same information. That speeds up the page generation.

It also has the ability to compress your content which will speed up the loading of your images and other content too by making the size smaller.

Give those things a try and that should speed up your site, especially as you add in more content.

Let me know if you have trouble,
Bill

Attachments:

1. 

   Screen-shot-2014-07-15-at-9.44.37-AM-641-x-238.png
   

[Luis Segovia]

Thanks Bill, I definitely will try that, but also I would like to know if I could do it the other way, braking the image and putting it together. I want to try both and see which works better, because 1.16 sec for the first image worries me. thank you

[Bill Robbins]

Luis,

Good question. What you’ll want to do is look a web tutorial on converting a PSD to a website. Essentially what you’ll be doing is creating a series of div elements in the content of your page and then setting the background of each one as a portion of that image. I’m not sure that will work responsively very well or even at all.

You can look at the “waterfall” of how the elements on your page are loaded at http://tools.pingdom.com/fpt/#!/cyMOpJ/http://www.luis-segovia.com/solutions/ . That leads me to believe that splitting the image up would not speed up the site, especially in getting the first image out there.

Let me know if I can help,
Bill

[Author]

Posts