Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Lazy Loading iframes in SvelteKit: Ace Core Web Vitals # Lazy Loading iframes in SvelteKit: Ace Core Web Vitals #

blurry low resolution placeholder image Loading iframes in SvelteKit
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. SvelteKit SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Lazy Loading iframes in SvelteKit: Ace Core Web Vitals #

Updated 3 months ago
4 minute read
Gunning Fog Index: 5.5
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🔥 Why Speed Matters #

Lazy loading iframes in SvelteKit does not have to give you a headache. If you have tried this kind of optimization on another framework, invested hours and only got marginal improvements, you should still read on. We use a lightweight package to add lazy loading, so you don't end up with a bloated bundle. What’s more, we see you only need to make minimal changes to your code to implement lazy loading in SvelteKit. We implement the feature using a simple-to-use package and keep your SvelteKit sites on the right side of Google's new Core Web Vitals metrics.

Core Web Vitals are the metrics used by the Google algorithm to rank your site. Fall foul of the rules and risk seeing your ranking plummet! Not implementing features like lazy loading can negate all the gains from your SEO strategy.

Lazy loading is where the browser does not load all content on the page initially. As a user experience (UX) focussed developer, you delay loading of large media, which is out of view, until it is about to come into view. We see in the video that this allows the page to load faster.

📹 Lazy Loading iframes in SvelteKit: Video #

Please enable JavaScript to watch the video 📼

Loading iframes in SvelteKit

🖥 Code #

Package #

Install the vanilla-lazyload package.
shell
    
pnpm add -D vanilla-lazyload

Lazy Loading iframes in SvelteKit Code #

src/routes/lazyload.svelte — click to expand code.
src/routes/lazyload.svelte
html
    
1 <script>
2 import { browser } from '$app/env';
3 import lazyload from 'vanilla-lazyload';
4
5 let lazyloadInstance;
6 if (browser) {
7 lazyloadInstance = new lazyload();
8 }
9 </script>
10
11 <div class="container">
12 <div class="content">
13 <h1>Tokyo 2021 Highlights: Lazy Plugin</h1>
14
15 <h2>Day One</h2>
16 <div class="video-container">
17 <iframe
18 class="video-iframe"
19 loading="eager"
20 src="https://www.youtube-nocookie.com/embed/Hr_1VTJ6JLU"
21 title="Tokyo 2021 Highlights: Day One"
22 frameborder="0"
23 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
24 allowfullscreen
25 ></frame>
26 </div>
27
28 <h2>Day Two</h2>
29 <div class="video-container">
30 <iframe
31 class="lazy video-iframe"
32 loading="lazy"
33 width="560"
34 height="315"
35 src=""
36 data-src="https://www.youtube-nocookie.com/embed/EQ8x3xy3-Ew"
37 title="Tokyo 2021 Highlights: Day Two"
38 frameborder="0"
39 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
40 allowfullscreen
41 ></frame>
42 </div>
43
44 <h2>Day Three</h2>
45 <div class="video-container">
46 <iframe
47 class="lazy video-iframe"
48 loading="lazy"
49 width="560"
50 height="315"
51 src=""
52 data-src="https://www.youtube-nocookie.com/embed/Zd8T3Ng3DXI"
53 title="Tokyo 2021 Highlights: Day Three"
54 frameborder="0"
55 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
56 allowfullscreen
57 ></frame>
58 </div>
59 <!-- TRUNCATED... -->
60 </div>
61 </div>
62
63 <style lang="scss">
64 .container {
65 display: flex;
66 flex-direction: column;
67 background-color: rgb(187, 25, 25);
68 color: #fff;
69 margin: 0;
70 padding: $spacing-4 0 $spacing-12;
71 }
72 .content {
73 display: flex;
74 flex-direction: column;
75 max-width: $max-width-container-md;
76 width: 100%;
77 margin: 0 auto;
78
79 h1 {
80 text-align: center;
81 }
82 }
83 .video-container {
84 position: relative;
85 overflow: hidden;
86 width: 100%;
87 margin: $spacing-4 auto;
88 padding-top: 56.25%; /* 16:9 aspect ratio */
89 }
90
91 .video-iframe {
92 position: absolute;
93 inset: 0;
94 width: 100%;
95 height: 100%;
96 }
97
98 @media (max-width: $max-width-container-md) {
99 .container {
100 padding: 0 $spacing-4;
101 }
102 }
103 </style>
Responsive, lazy loading iframes in SvelteKit.

You can see the full code for lazy loading iframes in SvelteKit on the Rodney Lab Git Hub repo .

🗳 Poll #

How familiar are you with Core Web Vitals?
Voting reveals latest results.

🔗 Lazy Loading iframes in SvelteKit: Links #

  • Core Web Vitals 
  • MDN iframe docs  
  • MDN Intersection Observer API ,
  • vanilla-lazyload package 

🙏🏽 SvelteKit Favicon: Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
SVELTEKITOPTIMIZATIONSEO

Reposts:

Reposts

  • Massimo Lusetti profile avatar
  • Svelte Society 🧡 profile avatar

Likes:

Likes

  • Nguyễn Tuấn Anh profile avatar
  • Ryan Arpe profile avatar
  • opensas profile avatar
  • zer👀finding profile avatar
  • patrick bateman profile avatar
  • Benjamín Salas Sadler profile avatar
  • Svelte Society 🧡 profile avatar
  • Rahul Singh profile avatar
  • Massimo Lusetti profile avatar
  • {{Joshua Ciaralli}} profile avatar
  • Scott Spence 🌮 profile avatar
Reposts & likes provided by Mastodon & X via Webmentions.

Related Posts

blurry low resolution placeholder image Tracking Page Views in SvelteKit: Intersection Observer

Tracking Page Views in SvelteKit: Intersection Observer

sveltekit
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.