Harmonic theme: why so slow to render!? Help me understand image sizes…

• 

  joebelfiore · Member · Jan 21, 2016 at 8:37 am

  • Copy link
  • Add topic to favorites

  ,kjsaI get blog-visitors asking me “why is your blog so slow!?”

  Sometimes I notice this myself as well… I go to http://belfiore.land (in an inprivate browser so it’s not cached) and I watch the little ‘wait’ animation go FOREVER before the page loads.

  alksadI am *guessing* this has to do with image sizes– but I’d love for someone technical at WordPress to give me some exact info if possible. :)

  When I created the blog, I put my first images as backgrounds– and they are pretty darned big. I plan to fix this in hopes it’ll improve perf, but before I do I’m wondering…
  – does the wordpress server compress the image on the SERVER SIDE (hopefully!) before sending it to the client? If so.. shouldn’t it ALREADY be done with that for each size and have them cached? in which case it shouldn’t be slow any more? -OR-
  – does the wordpress server send the ORIGINAL UN-SCALED image to the browser client and the BROWSER resizes it? (this would be bad for bandwidth and terrible for perf)

  Thanks for any help and advice!
  –

  The blog I need help with is: (visible only to logged in users)

• 

  joebelfiore · Member · Jan 21, 2016 at 8:38 am

  • Copy link

  PS – while I’m at it… is there any documentation on the IMAGE SIZES that the service will send down for different responsive browser sizes? If so, I’m going to try to create images that have a nice “break” at those sizes. Thanks again!

• 

  kathrynwp · Staff · Jan 21, 2016 at 4:35 pm

  • Copy link

  Your background images are very, very, large – larger than needed for even very wide screens.

  For example, this image is 4433 by 2995.

  I’m using a large Apple Cinema Display monitor with a browser window size of 1980 by 1179 – so your images are over twice as large as needed even for my very wide screen.

  I’d suggest you try scaling down your images substantially in a graphics program and re-upload them. There is no set formula for what size is optimal, since Harmonic will scale the images to fill each user’s browser window, which may vary.

  But based on my own large screen size, I’d say you could definitely reduce the pixel dimensions by at least half.

  Now looking at file weight, that one file alone is 4.1 MB. In addition to changing the dimensions of the image, try using some JPEG compression in your graphics program too.

  We do have server-side compression on WordPress.com, but when you start with an image that’s that big in both weight and dimensions, there’s only so much we can do. And you have four of those background images on the homepage, so the effect is multiplied.