├── tag_security_privacy.md
└── README.md


/tag_security_privacy.md:
--------------------------------------------------------------------------------
 1 | # TAG Security & Privacy Review Document
 2 | Answering the questions from [the questionnaire doc here](https://w3ctag.github.io/security-questionnaire/).
 3 | 
 4 | ## 2. Questions to Consider
 5 | ### 2.1. What information might this feature expose to Web sites or other parties, and for what purposes is that exposure necessary?
 6 | 
 7 | LazyLoad won't expose any new information to first party sites, since they could already gather all that information by using [intersection observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) in JavaScript.
 8 | 
 9 | Pages that have cross-origin images could expose some information about the user's scroll position to that third party - for example, if "a.com" has an image from "b.com" far down the page and out-of-view, and that "b.com" image was deferred, then "b.com" would know if the user scrolled down near that image since the "b.com" origin would receive the request for the image. For cross-origin frames, the frame could just install an intersection observer itself to get most of that information already though.
10 | 
11 | ### 2.2. Is this specification exposing the minimum amount of information necessary to power the feature?
12 | 
13 | LazyLoad isn't exposing any new information to first parties. The small amount of information about scroll position exposed when deferring and lazily loading cross-origin images on a page is necessary to help users a lot more, since many sites use strategies like serving images off of cross-origin CDNs.
14 | 
15 | ### 2.3. How does this specification deal with personal information or personally-identifiable information or information derived thereof?
16 | 
17 | LazyLoad doesn't directly deal with any PII, although it's possible that content being lazily loaded contains PII.
18 | 
19 | ### 2.4. How does this specification deal with sensitive information?
20 | 
21 | LazyLoad doesn't deal with any sensitive information directly, although it's possible that content being lazily loaded contains sensitive information.
22 | 
23 | ### 2.5. Does this specification introduce new state for an origin that persists across browsing sessions?
24 | 
25 | No new persistent state is introduced here.
26 | 
27 | ### 2.6. What information from the underlying platform, e.g. configuration data, is exposed by this specification to an origin?
28 | 
29 | LazyLoad doesn't expose any new information from the underlying platform.
30 | 
31 | ### 2.7. Does this specification allow an origin access to sensors on a user’s device?
32 | 
33 | No.
34 | 
35 | ### 2.8. What data does this specification expose to an origin? Please also document what data is identical to data exposed by other features, in the same or different contexts.
36 | 
37 | See the answers to Question 2.1 and Question 2.2 above.
38 | 
39 | ### 2.9. Does this specification enable new script execution/loading mechanisms?
40 | 
41 | No.
42 | 
43 | ### 2.10. Does this specification allow an origin to access other devices?
44 | 
45 | No.
46 | 
47 | ### 2.11. Does this specification allow an origin some measure of control over a user agent’s native UI?
48 | 
49 | No.
50 | 
51 | ### 2.13. How does this specification distinguish between behavior in first-party and third-party contexts?
52 | 
53 | See the answers to Question 2.1 and 2.2 above.
54 | 
55 | ### 2.14. How does this specification work in the context of a user agent’s Private \ Browsing or "incognito" mode?
56 | 
57 | There's no difference in behavior.
58 | 
59 | ### 2.15. Does this specification have a "Security Considerations" and "Privacy Considerations" section?
60 | 
61 | The [design doc](https://docs.google.com/document/d/1e8ZbVyUwgIkQMvJma3kKUDg8UUkLRRdANStqKuOIvHg/edit?ts=5b841123#heading=h.k389oryrnj5o) for the Chrome implementation has these sections.
62 | 
63 | ### 2.16. Does this specification allow downgrading default security characteristics?
64 | 
65 | No.
66 | 
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # LazyLoad Explainer
 2 | ## Introduction
 3 | Web pages often have images or embedded content like ads out of view near the bottom of the page, and users don't always end up scrolling all the way down. This means that if a web browser can avoid loading this content that the user never sees, then it could help speed up more important content near the top of the page, reduce network data usage, and reduce memory usage.
 4 | 
 5 | LazyLoad is one such solution, which works by waiting to load images and iframes that are out of view until the user scrolls near them. Some JavaScript libraries exist that let pages lazily load images or other kinds of content in various ways, but by having native support for lazy loading in the browser itself, this will make it easier for websites to take advantage of lazy loading. This also opens up the possibility for browsers to automatically find and lazily load content that's well suited to being lazily loaded, without requiring the web page's developers to do anything, which could help a very large number of users.
 6 | 
 7 | Web pages will be able to use a `loading` attribute on `<img>` and `<iframe>` elements to control and interact with the browser's lazy loading behavior.
 8 | ## Goals
 9 | 
10 | - Allow browsers to defer the loading of out-of-view images and iframes until the user scrolls near it.
11 | - Provide a way for web pages to determine if the browser supports LazyLoad natively from JavaScript.
12 | - Provide a way for web pages to communicate to the browser that individual elements on the page are good or bad candidates for being lazily loaded.
13 | 
14 | ## Non-goals
15 | 
16 | - There's no aim to expose the parameters for how near the user would have to scroll to lazily loaded content before it would start loading in.
17 | - There's no aim to add or trigger any new event that fires at the time that an image or iframe is deferred for lazy loading, although the individual element's load event will wait until it fully loads in.
18 | 
19 | ## When do the images and iframes start loading in?
20 | Deferred content should start loading in once the user scrolls near it. Exactly how close "near" means is left up to the browser itself, but the idea is that the browser should typically start loading deferred content some distance before it comes into view, such that there's a good chance the image or iframe will be finished loading by the time it's scrolled into view.
21 | ## Detecting LazyLoad support
22 | In JavaScript, this can be done in the [same way](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) that many other features can be detected from JS, by checking to see if the `loading` property is defined on image or iframe elements, e.g.:
23 | 
24 | ```
25 | if ('loading' in HTMLImageElement.prototype) alert("yes"); else alert("no");
26 | ```
27 | 
28 | ## Ways the `loading` attribute can be used:
29 | ### Set `loading="lazy"` on an image/iframe
30 | E.g. `<img src="cat.jpg" loading="lazy" />`
31 | 
32 | Signals to the browser that the image/iframe is a good candidate for lazy loading.
33 | ### Set `loading="eager"` on an image/iframe
34 | E.g. `<img src="cat.jpg" loading="eager" />`
35 | 
36 | Signals to the browser that the image/iframe is not a good candidate for lazy loading, and should be loaded right away instead of being lazily loaded. If an element was already deferred, and the attribute is then later set to `loading="eager"`, then the element should start loading.
37 | ### Set `loading="auto"` or leave the attribute unset on an image/iframe
38 | E.g. `<img src="cat.jpg" loading="auto" />` or just `<img src="cat.jpg" />`
39 | 
40 | The browser will determine on its own whether or not to lazily load the image/iframe. Leaving the `loading` attribute unset is the same as setting `loading="auto"`. If the browser decides to lazily load this content, it should be careful to avoid breaking pages or negatively impact user experience.
41 | ## Onload events
42 | Lazily loaded out-of-view images and iframes won't block the document's onload event. Since these images and iframes might never end up being loaded unless the user scrolls near them, it doesn't make sense to block the document's onload event on these elements since that could block the event endlessly.
43 | 
44 | Also, the onload event of a lazily loaded element will wait for the element to fully load, which would typically happen after the user scrolls near the element and the element starts loading. If there are multiple lazily loaded elements near each other, then there's no guarantees about what order they'll start loading in or finish loading in.
45 | 
46 | For example, suppose there's a simple webpage:
47 | 
48 | ```
49 | <body onload='console.log("Body has loaded!");'>
50 | <img src='visible-cat.jpg' onload='console.log("visible cat");' />
51 | <div style='height:10000px;'></div>
52 | <img loading='lazy' src='lazy-cat.jpg' onload='console.log("lazy cat");' />
53 | <img loading='eager' src='eager-cat.jpg' onload='console.log("eager cat");' />
54 | </body>
55 | ```
56 | 
57 | First, both the `visible-cat.jpg` and `eager-cat.jpg` image elements will load; the `visible-cat.jpg` element will start loading immediately because it's in view, and would be loaded regardless of the value of the `loading` attribute on it. The `eager-cat.jpg` element would be loaded immediately because it's marked `loading="eager"`. Both of those elements' onload events would fire as well, causing the strings "visible cat" and "eager cat" to be logged to the console once they load.
58 | 
59 | The `lazy-cat.jpg` image element has been deferred and so doesn't block the document's load event. Next, the body's onload event would fire, causing "Body has loaded!" to be logged to the console.
60 | 
61 | Then, suppose the user scrolls down the page all the way to the `lazy-cat.jpg` image element, which starts loading once the user scrolls near it. Once the `lazy-cat.jpg` element finishes loading, that `lazy-cat.jpg` element's onload event fires and causes the string "lazy cat" to be logged to the console.
62 | ## Further reading
63 | 
64 | - The [specifications draft](https://github.com/whatwg/html/pull/3752/files)
65 | - The [Chrome Platform Status entry](https://www.chromestatus.com/feature/5645767347798016)
66 | - The [TAG Design Review](https://github.com/w3ctag/design-reviews/issues/361)
67 | - The [design doc](https://docs.google.com/document/d/1e8ZbVyUwgIkQMvJma3kKUDg8UUkLRRdANStqKuOIvHg/edit) for LazyLoad in Chrome
68 | 
69 | 


--------------------------------------------------------------------------------