Rollout of lazy loaded images on fa.m.wikipedia.org and uk.m.wikipedia.org suggests a nontrivial speed improvement in page fully loaded time (initial lag excluded) and 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.
Changes introduced to support lazy loaded images required modified (increased) JavaScript/CSS/HTML.
ukwiki
Based on back-to-back weeks just before and just after lazy loaded image implementation, pages with lazy loaded images loaded faster at the 10th, 50th (median), and 90th percentiles on both HTTP1 and HTTP2.
Percentile | HTTP1 w/o lazy | HTTP1 LAZY | HTTP2 w/o lazy | HTTP2 LAZY | H1 LAZY Improvement | H2 LAZY Improvement |
---|---|---|---|---|---|---|
10% | 1363.6 | 1067.8 | 913 | 813.6 | 21.69% | 10.89% |
50% | 3663 | 2768 | 2330 | 2176 | 24.43% | 6.61% |
90% | 25140 | 12236.2 | 11497.6 | 7312.8 | 51.33% | 36.40% |
Based on examination of two 3-day periods (3-5 May 2016 vs 28-30 May 2016), image bytes per pageview were reduced by about 44.82%. This contributed to a decrease of about 16.05% in bytes shipped for the modified JavaScript/CSS/HTML plus images as compared to the baseline JavaScript/CSS/HTML and images.
fawiki
Based on back-to-back weeks just before and just after lazy loaded image implementation, pages with lazy loaded images loaded faster at the 10th, 50th (median), and 90th percentiles on both HTTP1 and HTTP2.
Percentile | HTTP1 w/o lazy | HTTP1 LAZY | HTTP2 w/o lazy | HTTP2 LAZY | H1 LAZY Improvement | H2 LAZY Improvement |
---|---|---|---|---|---|---|
10% | 1294.2 | 1254.4 | 904.2 | 851.5 | 3.08% | 5.83% |
50% | 3593 | 3494 | 2513.5 | 2265 | 2.76% | 9.89% |
90% | 13657.2 | 11962.8 | 8360.6 | 7355 | 12.41% | 14.78% |
Based on examination of two 3-day periods (3-5 May 2016 vs 28-30 May 2016), image bytes per pageview were reduced by about 39.55%. This contributed to a decrease of about 16.79% in bytes shipped for the modified JavaScript/CSS/HTML plus images as compared to the baseline JavaScript/CSS/HTML and images.
Data Transfer
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 |
---|---|---|---|---|---|---|---|---|---|---|
5 | 3 | fa.m.wikipedia.org | 25510357976 | 29942997370 | 1308953 | |||||
5 | 4 | fa.m.wikipedia.org | 24115284582 | 28472368544 | 1246904 | |||||
5 | 5 | fa.m.wikipedia.org | 27267566863 | 32394660359 | 1419181 | 19344.0187039721 | 22845.0712352938 | 42189.089939266 | ||
6 | 28 | fa.m.wikipedia.org | 31630381463 | 20520208225 | 1492149 | |||||
6 | 29 | fa.m.wikipedia.org | 31082719125 | 20309386390 | 1459244 | |||||
6 | 30 | fa.m.wikipedia.org | 31852934478 | 20497607259 | 1489397 | 21294.8675947298 | 13809.9756741481 | 35104.8432688778 | 0.167916555692157 | 0.395494304573989 |
5 | 3 | uk.m.wikipedia.org | 10841189176 | 12179570910 | 400598 | |||||
5 | 4 | uk.m.wikipedia.org | 14113462369 | 16249108153 | 557125 | |||||
5 | 5 | uk.m.wikipedia.org | 14287897826 | 16625942125 | 561363 | 25833.000482527 | 29659.0325945996 | 55492.0330771266 | ||
6 | 28 | uk.m.wikipedia.org | 8827165805 | 4991530453 | 293109 | |||||
6 | 29 | uk.m.wikipedia.org | 8598608509 | 4567136094 | 288522 | |||||
6 | 30 | uk.m.wikipedia.org | 8304006013 | 4373181283 | 269711 | 30222.6136229623 | 16364.5724397481 | 46587.1860627104 | 0.160470729231342 | 0.44824321604044 |
Queries
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', 'fawiki', 'ukwiki')
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|fa|uk).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)
;
The following query was used to derive page and JavaScript/CSS bytes (pre- and post-modification for lazy loading) transferred using the constraints described above.
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/([^:])+$'))
)
or
(
uri_host = 'fa.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://fa.m.wikipedia.org/wiki/([^:])+$'))
)
or
(
uri_host = 'uk.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://uk.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/([^:])+$'
)
or
(
uri_host = 'fa.m.wikipedia.org'
and uri_path rlike '^/wiki/([^:])+$'
)
or
(
uri_host = 'uk.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.