dedup_inlined_images fails if you switch away from the tab mid-load

[GoogleCodeExporter]

Running the latest beta version of ModPagespeed, I noticed that (at least in 
Firefox), if you click to another tab whilst a page is loading, whilst the 
first inline image is rendered by ModPagespeed, the second + occurance on the 
page does not get drawn.

I realise that this is linked to the way javascript works on a tab which does 
not have focus

Try www.sellmyretro.com and after entering the URL click on a second tab.  The 
second RSS feed icon (by Next Ending) does not always get drawn (especially if 
it is the first time you have visited the page since starting Firefox) - I 
assume this is using some sort of javascript cache as clearing the cache on the 
page does not cause the problem a second time..

Original issue reported on code.google.com by rwap.services on 17 Oct 2014 at 10:15

[GoogleCodeExporter]

After a handful of refreshes, I saw this happen. The img tag when it didn't 
load:
<img alt="Subscribe to Auctions ending soon" class="rss" 
pagespeed_url_hash="2010000504" 
onload="pagespeed.CriticalImages.checkImageForCriticality(this);" 
id="pagespeed_img_N_JwqHZ5zS">

And when it did load:
<img 
src="data:image/webp;base64,UklGRjoCAABXRUJQVlA4TC0CAAAvDUADEE8E1batZdU534e7uyd3
T+7yqH9lkNwS0UmMP+Fyb4X/NRi0jeTIuW/8+T2Q/g/H2rZjzjO2bdtTuZ0NzJnKdtqkc2dzAy5TaQOp
7Q3YThhFkqQol/G3R/4VnMTo7vgAAvz4uR8FB3AvDoSGAQQAgXsRuA8VJ8AAgu+BQDeE34Ogf/TbMTkc
p1MIJAj0vThFF2SzbJuWkQbVX1/szM5dU1P6doKHjviHCOSk2B4RoMXHdkPkn5eVkB0Flw78d0EsirhA
iFEMMn8OHZF6JmEHOBS+Sbis2xKUgj6w7dGLU2GZtULnj1fSoU0hXabNE6Dj947vh4wcEEMSj/blqqDo
5i1D92R8pPjUvLSYBo1DIEeH0RX06DcEPeIjUbJ7dyqvH0FAMfXqRr0ToDEIkpHzSmEqEeL49YL6BKiq
TRvWS4CiaRJTXkaVWYgYH1MaIJLgCcpS01FQ61URVbNqSVobRbZsGKJCBAQBIgJEcTUeCbJZAhBt2zbd
xH4xT2zbrG3bbmrb2n9df0NE/5PF4UsEQtG3+JPH5ljVlYZCtmNme//8jCfTa/C9N3/w9PJISrutVG3b
xOftzeszMT5LOl9Ltlzj4e2OGL8Jnycb3eFTXBwRU44NTOPzuDWDyy2SD05NNhcPse4ZwwTJ+oZWd7q8
uHI1YpikzkW8r7mXEYiilxSGD3zuxvuRimCUVLkl3Nc7e0ZCjoSOuLNzC/WV8famoFlr5LF59A+PDQA=
" alt="Subscribe to Auctions ending soon" class="rss" 
pagespeed_url_hash="2010000504" 
onload="pagespeed.CriticalImages.checkImageForCriticality(this);">

So when it doesn't work, there is no src attribute. I'm also not sure where 
that id="pagespeed_img_N_JwqHZ5zS" attribute is coming from in the non-working 
case.

As a hunch, can you try disabling critical image beaconing 
(ModPagespeedCriticalImagesBeaconEnabled false) and seeing if there is any 
change in behavior?

Original comment by j...@google.com on 20 Oct 2014 at 3:06

• Changed state: RequestClarification

[GoogleCodeExporter]

Just for clarification, the modpagespeed settings are:

    ModPagespeedEnableFilters collapse_whitespace,trim_urls
    ModPagespeedEnableFilters make_google_analytics_async
    ModPagespeedEnableFilters move_css_above_scripts,remove_comments,outline_css
    ModPagespeedEnableFilters resize_mobile_images,convert_jpeg_to_webp
    ModPagespeedEnableFilters inline_images,sprite_images,convert_to_webp_lossless
    ModPagespeedEnableFilters dedup_inlined_images
    ModPagespeedEnableFilters canonicalize_javascript_libraries,outline_javascript
    ModPagespeedEnableFilters move_css_above_scripts,trim_urls,prioritize_critical_css
    ModPagespeedEnableFilters insert_dns_prefetch,include_js_source_maps

I have disabled the critical image beaconing, but alas I can still get this to 
happen (it is easier on a page where lots of the same image are repeated)....

Original comment by rwap.services on 20 Oct 2014 at 3:29

[GoogleCodeExporter]

Original comment by jefftk@google.com on 6 Nov 2014 at 3:42

• Changed state: Accepted

[GoogleCodeExporter]

I have disabled dedup_inlined_images for now, as this is causing the issue - 
perhaps the javascript times out before completing where there are lots of 
repeated inline images ?

Certainly if the page being loaded is not in the currently active tab (eg. you 
switch to another tab before the page finishes loading), the repeated images 
never get shown.

Original comment by rwap.services on 2 Apr 2015 at 6:02

[GoogleCodeExporter]

Good catch.  If you temporarily reenable it, can you see any errors in the 
console log when the images fail to load?

I don't think the JavaScript should time out though. If a user switches tabs 
before all the JS runs, it makes sense for the browser to pause the tab's JS 
thread, but it should resume and finish up when the user switches back.  Is 
this Chrome we are talking about?

Original comment by jmara...@google.com on 2 Apr 2015 at 12:34

[GoogleCodeExporter]

It is in Firefox (although I am sure it was also happening in Chrome and 
Internet Explorer) - there are no errors shown in the console log, which seems 
odd...

I know a countdown timer I used had a similar issue in that it was paused when 
the tab was not active - but that was overcome by code to check the time 
elapsed on the PC clock against the time elapsed in the countdown timer, so the 
mps javascript should definitely pick up when the tab gets focus again....

Original comment by rwap.services on 2 Apr 2015 at 12:39

[GoogleCodeExporter]

I have temporarily re-enabled the filter - Firefox is the worst with this (as 
you get the ALT text showing instead of the image).

IE 11 has a blank space where the image should be but it works if you click 
onto another tab before the page starts displaying (ie whilst IE is 
communicating with the server).  If you naviagate away once the page has 
started drawing (I think) then the repeated images are not shown.

I have been unable to replicate it in Chrome and Opera.....

Original comment by rwap.services on 2 Apr 2015 at 12:58