Skip to content

🎨 Palette: Lazy load video iframes for improved page performance #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kastnerp merged 1 commit into from
Apr 26, 2026
Merged

🎨 Palette: Lazy load video iframes for improved page performance #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,7 @@
## 2026-05-28 - Visible action verbs in links
**Learning:** Found a pattern where links were placed within sentences, but the action verb (e.g., 'Install' or 'Download') was kept outside the link text, while an `aria-label` was added to the link to provide the missing verb to screen readers. This creates a mismatch for speech dictation users and slightly degrades the experience for sighted users navigating via links.
**Action:** Include the action verb within the visible link text to make it fully self-descriptive and match the `aria-label` perfectly (WCAG 2.4.4 and 2.5.3).

## 2026-06-15 - Lazy Load Iframes
**Learning:** Found that pages with multiple embedded video iframes (like Loom or Vimeo) load all video players simultaneously on initial page load. This causes severe page jank, slows down time-to-interactive, and downloads unnecessary data for users who might not scroll down.
**Action:** Always add `loading="lazy"` to `<iframe>` elements to defer their loading until they are close to the viewport, improving initial page load performance and UX for all users.
2 changes: 1 addition & 1 deletion docs/indoor/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
### Indoor Wind & COVID-19 Analysis


<iframe title="Video tutorial: Indoor Wind & COVID-19 Analysis" src="https://player.vimeo.com/video/646509775?h=d290a944ab" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Video tutorial: Indoor Wind & COVID-19 Analysis" src="https://player.vimeo.com/video/646509775?h=d290a944ab" width="640" height="360" frameborder="0" allowfullscreen></iframe>
8 changes: 4 additions & 4 deletions docs/outdoor/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,17 @@ We value efficient workflows! See below for a one-directional urban CFD setup.

### Simple wind analysis

<iframe title="Video tutorial: Simple wind analysis" src="https://player.vimeo.com/video/375687568" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Video tutorial: Simple wind analysis" src="https://player.vimeo.com/video/375687568" width="640" height="360" frameborder="0" allowfullscreen></iframe>

### Multi-directional / annual wind analysis

<iframe title="Video tutorial: Multi-directional / annual wind analysis" src="https://player.vimeo.com/video/375755947" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Video tutorial: Multi-directional / annual wind analysis" src="https://player.vimeo.com/video/375755947" width="640" height="360" frameborder="0" allowfullscreen></iframe>

### Pressure coefficients on building façade

<iframe title="Video tutorial: Pressure coefficients on building façade" src="https://player.vimeo.com/video/375755963" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Video tutorial: Pressure coefficients on building façade" src="https://player.vimeo.com/video/375755963" width="640" height="360" frameborder="0" allowfullscreen></iframe>

### Eddy3D & Paraview Workshop

<iframe title="Video tutorial: Eddy3D & Paraview Workshop" src="https://player.vimeo.com/video/1136117320" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Video tutorial: Eddy3D & Paraview Workshop" src="https://player.vimeo.com/video/1136117320" width="640" height="360" frameborder="0" allowfullscreen></iframe>

22 changes: 11 additions & 11 deletions docs/outdoorplus/first_steps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
- Enable **"Include pre-releases"**
- Click **Install** and restart Rhino

<iframe title="Loom video: Install UMCF Plugin" src="https://www.loom.com/embed/aa80604bdf55468e89e213adfe3dfc03" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Install UMCF Plugin" src="https://www.loom.com/embed/aa80604bdf55468e89e213adfe3dfc03" width="640" height="360" frameborder="0" allowfullscreen></iframe>

## Verify Installation

Expand All @@ -44,7 +44,7 @@ Use the **`Check Installation`** component in Grasshopper:

The console will automatically install the necessary files.

<iframe title="Loom video: Verify Installation" src="https://www.loom.com/embed/f0de87f9dd5b417fbe9cb7dde28e5926" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Verify Installation" src="https://www.loom.com/embed/f0de87f9dd5b417fbe9cb7dde28e5926" width="640" height="360" frameborder="0" allowfullscreen></iframe>

## Run a Template Simulation

Expand All @@ -53,14 +53,14 @@ The console will automatically install the necessary files.
- Use the **`Templates`** component
- Right-click > select `UMCF.Templates.MicroclimateSimulation.gh`

<iframe title="Loom video: Load Template" src="https://www.loom.com/embed/3813d676223e4bf78790a688a9e64cf1" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Load Template" src="https://www.loom.com/embed/3813d676223e4bf78790a688a9e64cf1" width="640" height="360" frameborder="0" allowfullscreen></iframe>

### 2. Add Weather File

- Connect an **EPW file** to the **`Weather`** component
- This enables time settings in the **`Timing`** component

<iframe title="Loom video: Add Weather File" src="https://www.loom.com/embed/5180a478450b476b825caf4a2712717b" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Add Weather File" src="https://www.loom.com/embed/5180a478450b476b825caf4a2712717b" width="640" height="360" frameborder="0" allowfullscreen></iframe>

## Define the Simulation Domain

Expand All @@ -74,7 +74,7 @@ Use the **`Air Region`** component to set:
- `Front Add`, `Back Add`, `Sides Add`, `Top Add`
- `Refinement Box Add`

<iframe title="Loom video: Air Region" src="https://www.loom.com/embed/44d4138231ae4fd78759858ecb6c78a1" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Air Region" src="https://www.loom.com/embed/44d4138231ae4fd78759858ecb6c78a1" width="640" height="360" frameborder="0" allowfullscreen></iframe>

### Solid Region (Buildings)

Expand All @@ -85,7 +85,7 @@ Inputs:
- Mesh refinement (optional)
- Indoor temperature (°C)

<iframe title="Loom video: Solid Region (Buildings)" src="https://www.loom.com/embed/c70e729726534ec9bc90065693b7d77e" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Solid Region (Buildings)" src="https://www.loom.com/embed/c70e729726534ec9bc90065693b7d77e" width="640" height="360" frameborder="0" allowfullscreen></iframe>

### Vegetation Region

Expand All @@ -98,7 +98,7 @@ Inputs:

Default vegetation values are found in `constant/air/vegetationProperties`.

<iframe title="Loom video: Vegetation Region" src="https://www.loom.com/embed/fdcfff3c303847e7a05a756ea4196ec8" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Vegetation Region" src="https://www.loom.com/embed/fdcfff3c303847e7a05a756ea4196ec8" width="640" height="360" frameborder="0" allowfullscreen></iframe>

## Simulation Settings

Expand All @@ -107,7 +107,7 @@ Configure with the **`Simulation Settings`** component:
- **Number of CPUs** (e.g., 10 recommended)
- **maxFluidIteration** (higher = better resolution)

<iframe title="Loom video: Simulation Settings" src="https://www.loom.com/embed/5eb25cafae004029b975992cf66af3ec" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Simulation Settings" src="https://www.loom.com/embed/5eb25cafae004029b975992cf66af3ec" width="640" height="360" frameborder="0" allowfullscreen></iframe>

## Write and Run the Case

Expand All @@ -124,7 +124,7 @@ After simulation:
- Output folders based on `controlDict`:
- `startTime = 0`, `endTime = 43200`, `deltaT = 3600` (i.e., 12 hours)

<iframe title="Loom video: Write and Run the Case" src="https://www.loom.com/embed/49ab3679676e4f728cd483f7fe2ddaaa" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Write and Run the Case" src="https://www.loom.com/embed/49ab3679676e4f728cd483f7fe2ddaaa" width="640" height="360" frameborder="0" allowfullscreen></iframe>

## Visualize Results (in Rhino/Grasshopper)

Expand All @@ -142,9 +142,9 @@ Steps:
3. Enable **`Probing`** to load results
4. Use **Hour Slider** to view time-based results

<iframe title="Loom video: Visualize Results Part 1" src="https://www.loom.com/embed/a896f09c862440ce8b9c247cd95ae838" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Visualize Results Part 1" src="https://www.loom.com/embed/a896f09c862440ce8b9c247cd95ae838" width="640" height="360" frameborder="0" allowfullscreen></iframe>

<iframe title="Loom video: Visualize Results Part 2" src="https://www.loom.com/embed/3499df4c8a544cb59e2681c71ebca3c3" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<iframe loading="lazy" title="Loom video: Visualize Results Part 2" src="https://www.loom.com/embed/3499df4c8a544cb59e2681c71ebca3c3" width="640" height="360" frameborder="0" allowfullscreen></iframe>

## Output Types

Expand Down
Loading