Reading/Web/Lazy loading of images on Bengali Wikipedia
On May 9th 2016 (4pm PST) we rolled out lazy loading of images to all users of Bengali Wikipedia. The purpose of this action was to collect data around page views, global NavigationTiming results from a project to guide a future roll out.
This section is currently a draft.
Material may not yet be complete, information may presently be omitted, and certain parts of the content may be subject to radical, rapid alteration.
Rollout of lazy loaded images on bn.m.wikipedia.org suggests a nontrivial speed improvement in page fully loaded time (initial lag excluded) on HTTP1, likely no speed improvement on HTTP2, and again a significant reduction in image bytes shipped per pageview, leading to lighter weight pages.
Note well that the x-axis in the speed graphs is presented in log2n increments.
To reduce noise, navigation timing events are filtered to ensure key fields are present, with an emphasis on anonymous, non-redirected, plain article pageviews.
To simplify analysis for bytes shipped calculations, eligible source HTML pages are constrained as to a relative path
/wiki/ (on language variant wikis this path would be different, but that's out of scope here) for a given wiki without a colon ":" character in the remainder of the path, with a restriction that responses must be HTTP 200s, in order to avoid overcounting of 30x, 40x, or other such spurious responses. This aids in narrowing down the analysis to requests likely to be plain article pageviews. Image bytes are constrained to those served from upload.wikimedia.org with an eligible Referer for the same restriction as page paths.
Navigation timing data for bnwiki were sparse, making analysis difficult.
Based on data from 5-11 May 2016, slightly before the initial lazy loaded images went into force, and 23-29 June 2016, the week corresponding to the latest Thursday to Wednesday week with the most up-to-date loading technique 9 (the same week used for the latter week for ukwiki and fkwiki in above analysis), pages with lazy loaded images loaded faster at the 10th, 50th (median), and 90th percentiles on HTTP1. But pages with non-lazy loaded images loaded faster at the 10th, 50th (median), and 90th percentiles on HTTP2.
A certain level of chaos in the events is evident in the line chart.
Comparison of 14-May-2016 - 11-May-2016 (prior to lazy loaded images) versus 2-29 June 2016 (well after lazy loaded images implemented) paints a slightly more complete picture, at the expense of more general time based trends potentially complicating the data.
Taking the data at face value, it again appears that HTTP1 lazy loaded pages loaded faster at the 10th, 50th (median), and 90th percentiles. On HTTP2 lazy loaded pages loaded faster at the 90th percentile, but slower at the 10th and 50th (median) percentiles.
|Percentile||HTTP1 w/o lazy||HTTP1 LAZY||HTTP2 w/o lazy||HTTP2 LAZY||H1 LAZY Improvement||H2 LAZY Improvement|
Something interesting occurred with bnwiki. The relative amount of HTTP1 traffic was considerably greater (72.94% of share) on lazy loaded images than without them (61.13%) for the 4 week window comparison. This same trend was observed with comparison windows closer to the switchover of varying lengths. This suggests that perhaps lazy loaded images had a larger impact on the relatively slower connections for bnwiki (twice as slow at the median prior to the change), many originating from Bangladesh.
|month||day||uri_host||Page & scoped rl bytes||image bytes||scoped pageviews||Page & rl per pv||image per pv||total avg||total reduction||image reduction|
The following query was used to derive the lag-excluded load time, roughLoadTimeInitialLagExcluded.
select left(timestamp,8) as ts, event_lazyLoadImages, event_isHttp2, event_loadEventEnd-event_responseStart as roughLoadTimeInitialLagExcluded, event_responseEnd-event_responseStart as roughNetworkTimeInitialLagExcluded, event_requestStart, event_responseStart, event_responseEnd, event_firstPaint, event_domInteractive, event_domComplete, event_loadEventStart, event_loadEventEnd, webHost, event_originCountry, event_mediaWikiVersion from NavigationTiming_15485142 where timestamp > '20160412' and timestamp < '20160630' and event_action = 'view' and event_isAnon = true and event_mobileMode = 'stable' and event_namespaceId = 0 and event_redirectCount is null and event_loadEventEnd is not null and event_domComplete is not null and event_domInteractive is not null and event_responseStart is not null and wiki in ('bnwiki') order by wiki event_lazyLoadImages, event_isHttp2, ts ;
The following query was used to derive image bytes transferred using the constraints described above.
select month, day, substr(referer,1,26), sum(response_size) from webrequest where year = 2016 and ((month = 5 and day in (3, 4, 5)) or (month = 6 and day in (28, 29, 30))) and uri_host = 'upload.wikimedia.org' and referer rlike '^https://(bn).m.wikipedia.org/wiki/([^:])+$' and content_type rlike '^image' and agent_type = 'user' and http_status = '200' group by month, day, substr(referer,1,26) ;
fa select month, day, uri_host, sum(response_size) from webrequest where year = 2016 and ((month = 5 and day in (3, 4, 5)) or (month = 6 and day in (28, 29, 30))) and ( ( uri_host = 'bn.m.wikipedia.org' and ((uri_path rlike '^/wiki/([^:])+$') or (uri_path = '/w/load.php' and uri_query rlike 'skins\.minerva\.icons\.images\.scripts&skin=minerva' and referer rlike '^https://bn.m.wikipedia.org/wiki/([^:])+$')) ) ) and agent_type = 'user' and http_status = '200' group by month, day, uri_host ;
The following query was used to derive pageviews for the using the constraints above. Practically all matching records were qualified as pageviews, largely ruling out the possibility of image byte transfer counts with proper Referer values being derived from anything other than qualified pageviews.
select month, day, uri_host, content_type, is_pageview, count(1) from webrequest where year = 2016 and ((month = 5 and day in (3, 4, 5)) or (month = 6 and day in (28, 29, 30))) and ( ( uri_host = 'bn.m.wikipedia.org' and uri_path rlike '^/wiki/([^:])+$' ) ) and agent_type = 'user' and http_status = '200' group by month, day, uri_host, content_type, is_pageview ;
As with any data spanning time series and the myriad complexities involved with different devices and environments, data are subject to fluctuation. However, the data transfer savings are unambiguous, and the larger event sampling pool with ukwiki and fawiki lend a degree of confidence that pages are actually loading faster.