Performance issues when using rwd_attachment_background

[therajumandapati]

The function rwd_attachment_background takes more than 2s to load for some images and it's faster for some images.

We're using a timing function to calculate the performance, the setup looks like this:

function rwd_attachment_background( $selector, $attachment = null, $size = 'thumbnail' ) {
    $jri_time_start = microtime(true);
    $rwd_image = new RwdImage( $attachment );
    $jri_time_end = microtime(true);

    $class_exec_time = $jri_time_end - $jri_time_start;

    //execution time of the script
    $jri_time_start_2 = microtime(true);
    echo $rwd_image->background( $selector, $size );
    $jri_time_end_2 = microtime(true);
    $bg_exec_time = $jri_time_end_2 - $jri_time_start_2;
    echo '<b>'.$selector.' Class Time:</b> '.$class_exec_time.' Secs, <b>Bg Time:</b> '.$bg_exec_time.' Secs';
}

The responses are over 2s for some images. Following are some examples:

• .hero-banner-7 Class Time: 0.00051212310791016 Secs, Bg Time: 2.0852770805359 Secs
• .hero-banner-9 Class Time: 0.00041794776916504 Secs, Bg Time: 2.2101640701294 Secs
• .hero-banner-11 Class Time: 1.0967254638672E-5 Secs, Bg Time: 0.39931702613831 Secs
• .services-388 Class Time: 0.00033903121948242 Secs, Bg Time: 0.31205105781555 Secs

Can you help us figure out why some images are taking a long time to load while some load faster even when using the same image size?

[therajumandapati]

@aprokopenko Any help here would be greatly appreciated 😃

[aprokopenko]

Hi,

Please post your configuration array for the size you get 2 seconds delay. Also, do you have it on each page load? or only on the first time (on the first time it's normal actually)?

[therajumandapati]

@aprokopenko Here you go.

'hero-banner 2x' => array(
        'desktop' => array(
            array(2304, 1116, true),
            'picture' => '<source srcset="{src}"  media="(min-width: 1441px)">',
            'bg' => '@media (min-width:1441px)',
            'bg_retina' => '@media (min-width:1441px) and {dpr}, (min-width:1441px) and {min_res}',
            'srcset' => '{w}w',
            'sizes' => '(min-width: 1441px) {w}px',
        ),
        'laptop' => array(
            array(1728, 936, true),
            'picture' => '<source srcset="{src}" media="(min-width: 769px)">',
            'bg' => '@media (min-width: 769px)',
            'bg_retina' => '@media (min-width: 769px) and {dpr}, (min-width: 769px) and {min_res}',
            'srcset' => '{w}w',
            'sizes' => '(min-width: 769px) {w}px',
        ),
        'tablet' => array(
            array(922, 936, true),
            'picture' => '<source srcset="{src}" media="(min-width: 361px)">',
            'bg' => '@media (min-width: 361px)',
            'bg_retina' => '@media (min-width: 361px) and {dpr}, (min-width: 361px) and {min_res}',
            'srcset' => '{w}w',
            'sizes' => '(min-width: 361px) {w}px',
        ),
        'mobile' => array(
            array(432, 432, true),
            'picture' => '<img src="{single-src}" srcset="{src}" alt="{alt}">',
            'bg' => '',
            'bg_retina' => '@media {dpr}, {min_res}',
            'srcset' => '{w}w',
            'sizes' => '{w}px',
        )
    )

It happens on each page load.

[aprokopenko]

It's really weird, it should take a cropped image and do not generate it again, so it should be pretty fast. How big is your postmeta table? (how many rows)

[therajumandapati]

wp_postmeta has 965 rows

[aprokopenko]

Then need to debug RwdImage class itself (background() ) method to find out what's wrong. It's hard to guess.

[therajumandapati]

How can I help you debug?

[aprokopenko]

If it's okay - write me an email with credentials to your server, url and admin credentials and I will take a look next week. (Tomorrow I will be to busy)

[aprokopenko]

With access to your server, I found an issue - for retina sizes it always runs a resize again, if the original image was smaller than the required retina size.

This is fixed in 1.6.4!

[therajumandapati]

Thank you @aprokopenko