🔥 Why Speed Matters
Lazy loading iframes in SvelteKit does not have to give you a headache. If you have tried this kind of optimisation 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
Lazy Loading iframes in SvelteKit Code
src/routes/lazyload.svelte — click to expand code.
🔗 Lazy Loading iframes in SvelteKit: Links
🙏🏽 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 Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.