Images optimization to speed up page loading?

Hello,

I searched for the topic with no success, please pardon me if duplicating.

I run my Elgg site since now almost 5 years and finally, after a long one-to-one interview process with many of my users I got the final answer on why they weren't using so much the platform until few months ago: speed. The site was too slow. This is a pretty obvious thing I guess all of us know but I think most of us still underestimates the problem (I did) while focusing on functionalities, graphics,....

So, I did few optimizations, activated CDN and now the situation is very satisfactory but still, I see in GTMetrix Waterfall a major bottleneck (this also obvious but is there a solution?): images.

Is there a plugin/script (paid or not) doing what some online services such as http://optimizilla.com/ do with image files?

I'm not only talking about Tidypics which already does a great job but, since users load also profile images, images through files, etc. wouldn't be extremely useful to:

  1. In admin area define and set sitewide default images formats and sizes (avatar, main, zoom, thumb, tiny,..)
  2. detect image type on users' file upload
  3. resize/optimize (losslessly) upon uploading (ideally informing user that the image will be stored in an admin's optimized and declared way)
  4. serve scaled, previously optimized images

Wouldn't this be an extremely useful plugin/core feature to crowdfund? (I always try this way as well....sooner or later this community will help in helping devs to live better?)

Cheers

  • I believe Ismayil is doing some work on images to be included in core once, and I do believe that hypeApps, and previously hypeFilestore are doing this, but I can say that hypeGallery already handles the images and stores them to predefined formats in filestore and gets them where needed.

    Predefined images are easy to configure there by using:

    elgg_set_config('gallery_icon_sizes', array( 
      'taggable' => array( 
         'w' => yourpx, 
         'h' => yourpx, 
         'square' => false,
         'upscale' => false,
          )
    ));

    later, you can wherever you want get the image with the appropriate size.

  • This is off-topic from image optimization, but I want to clear up something:

    Images do not block loading of the page. They continue to be loaded after the rest of the page has already finished loading.

    I tested your site and I have 2-3 second average loading time that has nothing to do with loading of images. I would recommend using time and effort on optimizing the page load (the 2-3 seconds) instead of optimizing individual images.

    I would start by analyzing the amount and duration of database queries on each page.

  • Thanks to both!

    @juho I'm very possibly wrong but in loading this page for example (admin's profile) with many widgets and few images who sum up +5MB I guess optimizing images would help a lot, don't you think? I know images shouldn't block loading of the page but for users, if images are not there, visually the page is not nice/loaded so they get annoyed.

    What do you think?

    Cheers!

  • For me it takes 20 seconds to generate that page and 2-4 seconds to load the images. So if you manage to optimize the image loading, say to only 1 second, there is still the 20 seconds of waiting left!

    So no, I would not optimize the images but instead try to reduce the 20 seconds that it takes to generate the page itself! :)

  • Besides, most of the images get cached by the browser, so on the second page load, it takes no time at all to load them.

  • Takes me 41! seconds to load it, something is happening, or better, not happening and takes 37 seconds to finish, before the rest of the page starts to render. something if definitely wrong here, and it aren't images.

    I have the feeling it's the server, the first byte time is huge.

  • Ok, I was misled by "Pagespeed" tab in GTMetrix and in waterfall yeah, I see those 20+ secs to start rendering the page. It only happens (afaik) in profile pages with CDN active so there must be something wrong maybe in some plugin affecting that page only? It's strange because, again, only with CDN activated is so slow.

    As for images also considering possible disk space needs, don't you think an image optimizer would be useful?

    Cheers

  • It took me almost 36 seconds to load and you have errors. Also add 15-20 seconds to that since your server takes a long time to register in my browser, all I see is a blank page for that duration then your site loads.

  • @cim thanks for checking. I don't see those errors in my console but I think I have spotted a couple of plugins causing that huge delay, basically due to their widgets' functionalities. Hope to be able to find/use newer versions of those :)

    Cheers

  • @Michele Did you tried a backend (on server) optimization? The Nginx caching is cool for all our Elgg sites. Also, today we moved on MySQL 5.6 with some features and got good results ;) If you want I could share our script for images' storing on Amazon CDN too.

Performance and Scalability

Performance and Scalability

If you've got a need for speed, this group is for you.