- URL: https://wheretheleavesfall.com/
- Date: 09/06/24 09:35:38
Webpage Performance Test Result
- Settings: Desktop
v128
Cable
Frankfurt, GermanyMore
- Test runs: 1
- Connectivity: 5000/1000 Kbps, 28ms Latency
- Custom Metrics
View:
Core Web Vitals
This page details results from metrics that Google has deemed Core Web Vitals 
. For more information about these metrics and their significance, check out our Core Web Vitals Guide.
Observed Web Vitals Metrics (Collected in this WPT test run)
Largest Contentful Paint (1075ms)
View as Filmstrip - View Video - About Largest Contentful Paint (LCP)
LCP Event Summary
| Time | 1075ms |
|---|---|
| Size | 5088px² |
| Type | text |
| Element Type | UL |
| Outer HTML | <ul x-data="{
centered: (window.innerWidth / 4) - ($el.offsetWidth /2) - $refs.logo.offsetWidth,
calcPos() {
return this.centered - (clamp(scrollDist / 350, 0, 1) * ($el.offsetWidth - $refs.logo.offsetWidth)) + 'px 0px'
}
}" :style="{
// 'translate': calcPos()
}">
<li class="header_li show" :class="menusection == 'Magazine' ? 'show' : ''">
<button @focus="backdrop = true; menusection = 'Magazine'" @mouseenter="backdrop = true; menusection = 'Magazine'">
Magazine </button>
<div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;">
<ul class="header_issues" x-init="setTimeout(function(){ menuHeight = $el.parentNode.clientHeight + 100; }, 500)">
<li>
<a @click="backdrop = false" @focus="backdrop = true; menusection = 'Magazine'" href="https://wheretheleavesfall.com/magazine/issue-16">
<img loading="lazy" src="https://wheretheleavesfall.com/media/pages/magazine/issue-16/53b4adf963-1707133388/wtlf_issue16-170x-q80.webp" alt="Cover of Issue #16">
<span class="t-micro">
Issue #16 </span>
<p>Pluriverse Confluence Alliance</p>
</a>
</li>
<li>
<a @click="backdrop = false" @focus="backdrop = true; menusection = 'Magazine'" href="https://wheretheleavesfall.com/magazine/issue-15">
<img loading="lazy" src="https://wheretheleavesfall.com/media/pages/magazine/issue-15/87d833cdaf-1702602834/wtlf-issue15-cover-170x-q80.webp" alt="Cover of Issue #15">
<span class="t-micro">
Issue #15 </span>
<p>Healing Rootedness Community</p>
</a>
</li>
<li>
<a @click="backdrop = false" @focus="backdrop = true; menusection = 'Magazine'" href="https://wheretheleavesfall.com/magazine/issue-14">
<img loading="lazy" src="https://wheretheleavesfall.com/media/pages/magazine/issue-14/6af910fd6a-1709719063/issue-14-cover-170x-q80.webp" alt="Cover of Issue #14">
<span class="t-micro">
Issue #14 </span>
<p>Landscape Kinship Connection</p>
</a>
</li>
</ul>
<div class="header_issueslink">
<a @click="backdrop = false" class="btn btn-outline" @focus="backdrop = true; menusection = 'Magazine'" href="/magazine">See All Magazine Issues</a>
</div>
</div>
</li>
<li class="header_li" :class="menusection == 'Stories' ? 'show' : ''">
<button @focus="backdrop = true; menusection = 'Stories'" @mouseenter="backdrop = true; menusection = 'Stories'">
Stories </button>
<div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;">
<p><a @click="backdrop = false" @focus="backdrop = true;" href="/stories">Explore stories from the magazine.</a></p> </div>
</li>
<li class="header_li" :class="menusection == 'Community' ? 'show' : ''">
<button @focus="backdrop = true; menusection = 'Community'" @mouseenter="backdrop = true; menusection = 'Community'">
Community </button>
<div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;">
<ul><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/contributors">Contributors</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/thenaturekind">TheNatureKind</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/stories/category:confluences">Confluences</a></p></li></ul> </div>
</li>
<li class="header_li" :class="menusection == 'About' ? 'show' : ''">
<button @focus="backdrop = true; menusection = 'About'" @mouseenter="backdrop = true; menusection = 'About'">
About </button>
<div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;">
<ul><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/about">Our Story</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/@/page/nPJPKrfJKdtPPvmI">OmVed Gardens</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/production">Production</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/stockists">Stockists</a></p></li></ul> </div>
</li>
</ul>... |
LCP: 1075 ms
| Start Render | First Contentful Paint | Largest Contentful Paint | Layout Shift | DOM Interactive | DOM Content Loaded | On Load | Document Complete |
 Render Blocking Resource |
 Insecure Request |
3xx response | 4xx+ response | Doesn't Belong to Main Doc |
Full LCP Event Information
- time: 1075
- size: 5088
- element:
- nodeName: UL
- boundingRect:
- x: 303.4375
- y: 28
- width: 356.8125
- height: 33.59375
- top: 28
- right: 660.25
- bottom: 61.59375
- left: 303.4375
- outerHTML: <ul x-data="{ centered: (window.innerWidth / 4) - ($el.offsetWidth /2) - $refs.logo.offsetWidth, calcPos() { return this.centered - (clamp(scrollDist / 350, 0, 1) * ($el.offsetWidth - $refs.logo.offsetWidth)) + 'px 0px' } }" :style="{ // 'translate': calcPos() }"> <li class="header_li show" :class="menusection == 'Magazine' ? 'show' : ''"> <button @focus="backdrop = true; menusection = 'Magazine'" @mouseenter="backdrop = true; menusection = 'Magazine'"> Magazine </button> <div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;"> <ul class="header_issues" x-init="setTimeout(function(){ menuHeight = $el.parentNode.clientHeight + 100; }, 500)"> <li> <a @click="backdrop = false" @focus="backdrop = true; menusection = 'Magazine'" href="https://wheretheleavesfall.com/magazine/issue-16"> <img loading="lazy" src="https://wheretheleavesfall.com/media/pages/magazine/issue-16/53b4adf963-1707133388/wtlf_issue16-170x-q80.webp" alt="Cover of Issue #16"> <span class="t-micro"> Issue #16 </span> <p>Pluriverse Confluence Alliance</p> </a> </li> <li> <a @click="backdrop = false" @focus="backdrop = true; menusection = 'Magazine'" href="https://wheretheleavesfall.com/magazine/issue-15"> <img loading="lazy" src="https://wheretheleavesfall.com/media/pages/magazine/issue-15/87d833cdaf-1702602834/wtlf-issue15-cover-170x-q80.webp" alt="Cover of Issue #15"> <span class="t-micro"> Issue #15 </span> <p>Healing Rootedness Community</p> </a> </li> <li> <a @click="backdrop = false" @focus="backdrop = true; menusection = 'Magazine'" href="https://wheretheleavesfall.com/magazine/issue-14"> <img loading="lazy" src="https://wheretheleavesfall.com/media/pages/magazine/issue-14/6af910fd6a-1709719063/issue-14-cover-170x-q80.webp" alt="Cover of Issue #14"> <span class="t-micro"> Issue #14 </span> <p>Landscape Kinship Connection</p> </a> </li> </ul> <div class="header_issueslink"> <a @click="backdrop = false" class="btn btn-outline" @focus="backdrop = true; menusection = 'Magazine'" href="/magazine">See All Magazine Issues</a> </div> </div> </li> <li class="header_li" :class="menusection == 'Stories' ? 'show' : ''"> <button @focus="backdrop = true; menusection = 'Stories'" @mouseenter="backdrop = true; menusection = 'Stories'"> Stories </button> <div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;"> <p><a @click="backdrop = false" @focus="backdrop = true;" href="/stories">Explore stories from the magazine.</a></p> </div> </li> <li class="header_li" :class="menusection == 'Community' ? 'show' : ''"> <button @focus="backdrop = true; menusection = 'Community'" @mouseenter="backdrop = true; menusection = 'Community'"> Community </button> <div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;"> <ul><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/contributors">Contributors</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/thenaturekind">TheNatureKind</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/stories/category:confluences">Confluences</a></p></li></ul> </div> </li> <li class="header_li" :class="menusection == 'About' ? 'show' : ''"> <button @focus="backdrop = true; menusection = 'About'" @mouseenter="backdrop = true; menusection = 'About'"> About </button> <div class="header_dropdown" :style="{ height: menuHeight + 'px'}" style="height: 500px;"> <ul><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/about">Our Story</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/@/page/nPJPKrfJKdtPPvmI">OmVed Gardens</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/production">Production</a></p></li><li><p><a @click="backdrop = false" @focus="backdrop = true;" href="/stockists">Stockists</a></p></li></ul> </div> </li> </ul>
- content: normal
- type: text
Cumulative Layout Shift (0)
View as Filmstrip - View Video - About Cumulative Layout Shift (CLS)
Window 1 (0)
Hover over any image to see the previous frame and the effect of the layout shift.
1187ms (0.00001)
Total Blocking Time (0 ms)
About Total Blocking Time (TBT)
View in Chrome Dev Tools Performance Panel
Main Thread Blocking Time by Script Origin
| Script Origin | Blocking Time (ms) |
|---|---|
| wheretheleavesfall.com | 271 |