Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

WordPress Images - The Logic Behind (Load Time)

Hi, I'm building this site: http://www.ajp.cool

Load time: 11 seconds Very bad!

I guess the reason is a huge amount of images.

FRONT PAGE:

  • The slider has 6 images, each one is 800px x 500 px (resolution 72 dpi)

SUBSIDES - like this one http://www.ajp.cool/illustration :

  • All the images you can see here are 500px x 700px (resolution 72 dpi)

What do you suggest?

  • To decrease image pixels? But for the slider I do not think I can do it? The max-width of the slider is 800px and for that case the images need to be 800px wide.

Or is something I do not know about WP ...

I've seen that for every image that I upload WP creates four new images. So if I upload map-500x700.png WP creates (and stores in the Uploads folder):

  • map-500x700-150x150.png
  • map-500x700-214x300.png
  • map-500x700-370x210.png
  • map-500x700-500x660.png

I guess the reason for this is that WP "prepares" this images in advance so that it can load them when the screen width is smaller. But in my case it does not. It always loads the original image.

So maybe the solution to my load problem is to tell WP to load one of the smaller images from the Uploads folder if the screen is small enough?

One important detail: All the images on this site are custom fields (made with Advanced Custom Field plugin). I did not use Featured images.

2 Answers

Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Hmmm... :/

Try using .jpg instead of .png.

The easiest way I know to do this is go to pixlr.com and open your image by the URL (e.g. http://www.ajp.cool/wp-content/uploads/2014/01/idrija-800x500.png). Save it to your computer as a jpg. The save screen will give you a quality slider, set it to 80. The image should still look very good, but it will be closer to 200-300kb. Then re-upload the jpg pictures to WordPress and put them in the slider. This should solve the problem.

Good Luck! I hope this helps.

Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Or, if they need to be png, you could use something like https://tinypng.com/. I've never used this service, but they claim to cut png image size by 70% with no quality loss.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

That's it!

.png images had around 700kB!!

I've changed them to .jpg (each around 170kB) and uploaded them to the site.

Load time has lowered significantly and is now 2.97s

Great! Thanks!!

Stephen Van Delinder
Stephen Van Delinder
21,457 Points
Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Hey Maja,

I don't know if you have found a solution to this issue already, but I took a look and I have some suggestions.

First, I am pulling the entire homepage down in under 3 seconds. I tested it from several locations using a speed tester at http://tools.pingdom.com/fpt/ and the worst I saw was about 4.5 seconds.

When load speed is an issue, it can be a helpful practice in a Chrome browser to go to the top navigation bar and click View -> Developer -> Developer Tools. This will bring up a window on the page, click on the "network" tab and reload the page to see each http request for individual items. On the right you can see how long each item is taking to load. When I load the page, I have 5 images (800*500) loading in less than 150 milliseconds. This is expected behavior and it does not lead me to believe that the source of the issue is image size.

I assume your wordpress site is on shared virtual hosting, so there's a lot of reasons that a server could have intermittent latency or bandwidth issues, but if the above techniques don't clarify the issue, I would encourage you to test your bandwidth with http://www.speedtest.net/.

Second, when you upload pictures through the wordpress back end, wp automatically makes a thumbnail, medium, and large image. I'm not positive about this, but I think that is so you have standardized sizes for featured images and the different sizes you can choose when you insert media through the Graphical Interface on the back end.

I hope this helps!

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Stephen,

So you think he load time is not such a big issue at www.ajp.cool ...

I've also tested it at http://tools.pingdom.com/fpt/ and it says 6.17s

I've also tested my brandwidth at http://www.speedtest.net/ My download time is 7.58 Mbps. I've searched the net to interpret this number and according to what I've found it's pretty okay.

As for the shared virtual hosting - I'm not that familiar with it - but www.ajp.cool is on regular web hosting (we've bought it for one year and it is private, only for us, not shared ...).

I'll have some more search ... if there is any other hint you can give me, don't hesitate.