Pages load time is very slow - images seem to be the main cause of trouble

I am afraid WP Smush Pro is creating problems here. I see several image files with strange file name endings which I can not explain and many images are missing width and heights attributes. Long service time as well. I have attached two screenshots I created after analyzing with GTmetrix. Please help.

  • Sajid

    Hi @zitzmre_wpmu,
    Hope you are doing good today :slight_smile:

    I made a performance test of your website on Gtmetrix and can see that all images listed in "Specify image dimensions" are coming from external websites. Two are from http://infacilitation.com/ and others are from googleapis.com.

    To confirm I made a performance test of my own website on gtmetrix after smushing images with WP Smush Pro and did not get any issues with image dimensions.

    So that means the issue is not because of WP Smush Pro. Please check your other website and also check the resources being loaded from googleapis.com.

    Also, your website is loading just fine for me in browser however in Gtmetrix its page load time is 15.2 Seconds.

    Take care and have a nice day :slight_smile:
    Cheers, Sajid

  • Reinhard

    Well, simplelivingcamps is hosted on infacilitation.com. That explains why you see infacilitation.com. simplelivingcamps is built using upfront. Something must be the cause for the image dimension issues to happen. I only see three possibilities: upfront or wordpress library or WP Smush Pro. Is it possible that upfront or WP Smush Pro manipulates the file name ending by renaming the file and adding dimesion and an extra number to it?

  • Reinhard

    Hello Sajid, I agree and it is not WP Smush Pro , it is upfront!!!!

    I did some test and here is what I found:

    My WP Media settings

    1. deactivated WP Smush
    2. analyzed using GTmetrix

    The following image(s) are missing width and/or height attributes

    3. deleted image in upfront gallery
    4. deleted image in wp media library
    5. verified wp media directory is empty

    6. uploaded new version of image into wp media library

    7. assigned new image to gallery

    8. picked 768x1024 and assigned to gallery
    [image pos="5"]

    9. Checked wp media directory after pick in gallery
    [image pos="6"]

    10. analyzed with GTmetrix to see new results
    [image pos="7"]

    To me it is obvious that upfront creates a new thumbnail 140x140 and does not assign proper attributes. Please let me know whether my finding is correct.

  • Panos

    Hello @zitzmre_wpmu,
    Hope you had a great weekend!

    When using the gallery widget, the images displayed should have the same dimensions in order to look good. By default it is set to 140x140. You can change these dimensions by clicking on the settings button of the gallery. From it's settings you can set the "Thumbnails Shape Ratio" and the "Thumbnail Size" among others.

    In order to load the thumbs in a proper manner for smaller page load, Upfront will create these new images with the appropriate dimensions which will be the thumbs' source, and link them to the full-sized image.

    Please let me know if this was of any help or if you need further explanation.

    Kind regards,
    Panos

  • Reinhard

    Thank you for your explanation. It does not answer my concerns though.

    Why are image(s) missing width and/or height attributes? That fact leads to server waiting time when the pages are loading and I don't like that!

    Although I picked the 768x1024 file size when I selected the image in the gallery then upfront assigned the full image size. Why is upfront giving me a choice to select a certain dimension and then not delivering what I selected?

    Kind regards
    Reinhard

  • Panos

    Hello Reinhard,
    Thank you for this question, as it is quite interesting :slight_smile:

    First I would like to make clear that the GTmetrix notice about the image attributes doesn't have to do with server waiting. It slightly affects the browser's performance only, but this is inevitable due to the responsive nature of modern themes.

    A few words of how this works, and how this affects the performance. Let's check both cases, when browser knows these dimension attributes and when it doesn't:

    a) When the browser knows about the image attributes, it will preserve this empty space when loading the document's text and fill it up when the images load. It does not require to change anything else after loading the image. The user sees a block of text and next to it (depending of the image position) a white space which will be replaced by the image.

    b) When the browser doesn't know about these dimensions, it doesn't preserve any space, but it requires to do some text rebuild after the image loads.

    This is the difference, that the browser has to reposition the text. But that isn't noticeable most times and can't be considered as a measurable delay, since this original built of the document (before images load) takes less time.

    Now lets see why this is inevitable. Every website owner wants a website which will look nice in any screen dimension. By using these dimension attributes will not allow an image to resize in different screens, which will affect the presentation of the website by adding scrollbars. Any technique to change these image dimension attributes in different screen sizes (with js for example) will consume the same time or more. So, theme developers tend to not use these attributes on images and prefer to style it with CSS rules. The most popular modern technique for reducing page loads, is by compressing images (read more about our WP Smush Pro plugin) and minifying/compressing files ( what our Hummingbird plugin does )

    As for the option for selecting the image, that is the default WP media manager behaviour, it is not provided by the theme. The gallery element does not use that info at the moment and relies on its own size settings for thumbnails as mentioned in my previous reply.

    I hope this was not tiring to read and also solved some your questions! Please feel free to post back for further explanation!

    Kind regards,
    Panos

  • Reinhard

    Hello Panos, not tiring at all. I appreciate the effort you put into it.

    So, I learned that missing width and/or height attributes isn't relevant for the browser. Is it relevant for the pick up at the server ?

    It seems that your explanation does not answer my second question. Here it is again: Although I picked the 768x1024 file size when I selected the image in the gallery then upfront assigned the full image size. Why is upfront giving me a choice to select a certain dimension and then not delivering what I selected?

    Back to the posts subject: pages load time very slow. GTMetrix shows me a specific number of connecting time for all images, which takes a large percentage of the overall loading time. I am trying to find out about the reason for it. Any ideas?

    Your support is very valuable to me. Keep on with your good work.

    Reinhard

  • Panos

    Hello Reinhard,
    Good to know you didn't find it tiring :slight_smile: . I think though I wasn't very clear.

    So, I learned that missing width and/or height attributes isn't relevant for the browser. Is it relevant for the pick up at the server ?

    In fact what I was trying to explain is that the image attributes do not affect the server. The server has nothing to do with html content in general, only the amount of it.

    About the gallery element, the dropdown where you select the dimensions '768x1024', it is not produced by Upfront, this is provided by WordPress' default media window. Upfront uses the media window of Wordress, which amongst others, contains the dimensions option you mention. This dimensions option is not being used by Upfront's gallery element, at least for now even if you choose specific dimensions. Currently Upfront uses it's own gallery settings for selecting the dimensions as shown in the attached image.

    As for the GTMetrix results, images have bigger file size than js and css files, so it is expected to consume more time to fetch. The bigger the size the slower it will load, I have the feeling you agree with me here :slight_smile:. The best chance to reduce the time an image requires to load is to select appropriate file format (jpeg is smaller than png, but png looks better and support transparent backgrounds) and the appropriate image dimensions, and finally use some compression technique.

    As I have already mentioned, Upfront has it's own way for displaying a gallery, it only links to the full-width image. For the time being I would suggest to upload images specifically for your gallery which their full width would be '768x1024'. So before you upload them, you need to edit them in an image editor like Photoshop or GIMP (GIMP is free!!) and give them the dimensions you desire. That way the gallery thumb (140x140) will link to the 768x1024.

    Please keep in mind that Upfront is in it's early stages and has many features to include as it matures!

    Thanks!
    Panos

  • Reinhard

    Hello Panos,

    now we are on the same page. You have answered all of my questions and I am agreeing with you.

    Your recommendations are helpful, thank you. As a matter of fact I was always trying to upload images with performing dimensions. I thought I will safe some time by using the upfront features. Now that I know how it works I will fall back to my old habits. Yes, GIMP is known to me and I am using it in some cases.

    I am giving credit to Upfront and I encourage WPMU Dev to continue improving the theme.

    Thank you for your support.
    Reinhard