performance/plugins/image-prioritizer/tests/test-cases/only-mobile-and-desktop-groups-are-populated/expected.html at 87b251224904d5d4be4a97ff816c54863af2cb34 · WordPress/performance · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>...</title>
		<meta data-od-replaced-content="optimization-detective 0.0.0" name="generator" content="optimization-detective 0.0.0; url_metric_groups={0:complete, 480:empty, 600:empty, 782:complete}">
		<meta name="generator" content="image-prioritizer 0.0.0">
	<style>
@media (scripting:enabled){.od-lazy-bg-image{background-image:none!important}}
</style>
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/featured-image.jpg" imagesrcset="https://example.com/featured-image-1200.jpg 1200w, https://example.com/featured-image-600.jpg 600w, https://example.com/featured-image-300.jpg 300w" imagesizes="(width &lt;= 480px) 360px, (782px &lt; width) 720px, (max-width: 1200px) 100vw, 1200px" media="screen and (782px &lt; width)">
</head>
	<body>
		<div id="page">
			<h1>Example</h1>
			<main>
				<article id="post-2">
					<h2 class="entry-title">Last Post</h2>
					<div class="entry-content">
						<p>This post has no featured image!</p>
						<p>This paragraph adds vertical height.</p>
						<p>So does this one.</p>
						<p>And this one too.</p>
					</div>
				</article>
				<article id="post-1">
					<h2 class="entry-title">First Post</h2>
					<figure class="featured-media">
						<img data-od-removed-fetchpriority="high" data-od-replaced-sizes="(max-width: 1200px) 100vw, 1200px" data-od-xpath="/HTML/BODY/DIV[@id=&#039;page&#039;]/*[2][self::MAIN]/*[2][self::ARTICLE]/*[2][self::FIGURE]/*[1][self::IMG]" src="https://example.com/featured-image.jpg"  width="1200" height="600" alt="Featured Image" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" srcset="https://example.com/featured-image-1200.jpg 1200w, https://example.com/featured-image-600.jpg 600w, https://example.com/featured-image-300.jpg 300w" sizes="(width &lt;= 480px) 360px, (782px &lt; width) 720px, (max-width: 1200px) 100vw, 1200px">
					</figure>
					<div class="entry-content">
						<p>This post does have a featured image, and the server-side heuristics in WordPress cause it to get fetchpriority=high, but it should not have this since it is out of the viewport on mobile.</p>
					</div>
				</article>
				<p>Pretend this is a super long paragraph that pushes the next div out of the initial viewport.</p>
				<div class="od-lazy-bg-image" data-od-added-class data-od-xpath="/HTML/BODY/DIV[@id=&#039;page&#039;]/*[2][self::MAIN]/*[4][self::DIV]" style="background-image:url(https://example.com/foo-bg.jpg); width:100%; height: 200px;">This is so background!</div>
			</main>
		</div>
	<script type="module">/* const lazyBgImageObserver ... */</script>
<script type="module">/* detect loader */</script>
</body>
</html>