Svelte Video Blog: Vlog with Mux and SvelteKit

🤷🏽 Why Host your own Video Blog? #

Why create a Svelte video blog? It can be quite quick to get up and running, hosting a video blog on YouTube or another service. However, hosting the video content on your own site brings you added flexibility. For example, you can group several videos together on a page and splash in some code blocks with letting visitors copy code referenced in the video easily. Naturally, you can place all of that in a layout that makes sense for your content.

On top, you do not have to have ads and can have zero user tracking if you don’t want to have any. You might decide to embed video from YouTube or a similar service on your site. Issues here might be that videos (from other users on the platform) autoplay after yours, and these do not reflect your brand values. Another issue might be compliance with local privacy laws when embedding the video service.

What is Mux? #

Let’s look at how Mux can help here and what services they offer. Hosting video content is much more complicated than, for example, images. For example, you need to offer video in all the common formats which the users’ devices support and on top stream at a quality suitable for their internet connection. This can be tricky to get right. Fortunately, services like Mux can do the heavy lifting, giving you increased flexibility when compared to other video hosting options, while saving you from having to sweat the details.

Mux is designed for developers and as such is built around an API which you use whether you need to upload content, check it is ready to stream or access it from your site’s own code. As well as all that, Mux offer a data analysis service too, if you need it. If you don’t yet have a Mux account, we will see how you can set on up with enough free credit to follow the tutorial and give it a good try out.

What is SvelteKit? #

Svelte is a much-loved language for building web apps. It came second at 75% loved in the 2022 Stack Overflow Web frameworks and technologies vote. Svelte is probably so loved because it offers a gentle introduction to web apps as a next step from foundations in building out an HTML / JavaScript and CSS sites. However, it is also appreciated for its simplicity over something like React by experienced developers too. SvelteKit is the official Svelte framework for building Svelte apps (much like you use Next.js to build React apps). If this is your first SvelteKit app, you might also consider taking a look at the Starting out Svelte and SvelteKit tutorial. There we build out a Svelte web-app using TypeScript together with SvelteKit.

🤖 Svelte Video Blog: Why Core Web Vitals are Important for SEO #

Creating great content, though important, is only part of the story if you want that content to be discovered. Search Engine Optimization (SEO) is your friend here. This is all about making sure search engines like Google know about your content and also show it towards the top of search engine results pages. We can’t stress enough how important quality content is, but technical SEO also plays an significant role. This boils down to providing a great user experience.

One proxy Google use to measure user experience is Core Web Vitals. Two critical measures here are Largest Contentful Paint (LCP) and Cumulative Layout Shift. Focusing on images, LCP is about making sure the banner image loads quickly. This is significant because a slow load could make visitors lose patience and return to search results to get what they are looking for quicker. We see how to load a placeholder before the actual image in this tutorial. This gives users on slow connections that something better is on the way!

Cumulative Layout Shift is about images reserving space (especially height) in the DOM so that the whole layout does not shift when an image starts loading. Google focus on this because it can be annoying if a button shifts down the page as you press it, and you end up hitting the button above the one you wanted.

Optimizing Core Web Vitals #

In this tutorial, we not only look at how to optimize images for Web Vitals but also videos. Using lazy loading, we let the page load faster. On top, we follow best practices for minimizing Cumulative Layout Shift. The pages are quite light on content, so a 99 or 100 score is no surprise. On the contrary, zero Cumulative Layout Shift on a page with video and image elements is something to treasure! As well as all that, we learn about Schema.org for Videos, this is all about announcing your video content to search engines.

🧱 Svelte Video Blog: What We’re Building #

We build out a Video blog site for a travel vlog in this tutorial. Although we focus on travel here, it is easy to take what we build and apply it to whichever field you want your own Svelte video blog to cover. We will use Mux to host video and in setting up the site learn how to lazy load video in Svelte, reduce cumulative layout shift and make SEO considerations. As well as that, we see the Svelte side, not only of creating a markdown-based blog, but also modifying DOM elements using Svelte actions.

See the live version of the finished Svelte video blog which we will build in the tutorial.

👍🏽 Svelte Video Blog: What we will Cover #

What we cover:

• using Svelte actions to attach an HLS video source to an HTML5 video element,
• using the Mutation Observer API to assist lazy loading in Svelte,
• using SvelteKit Endpoints with TypeScript,
• Image and Video Schema.org for SEO,
• using low resolution image placeholders in Svelte,
• NextGen image formats like AVIF and WebP in Svelte,
• rendering blog posts using a template page in SvelteKit,
• authoring blog content in MDsveX (Svelte in Markdown),
• reducing Cumulative Layout Shift for video and image content,
• uploading video content to Mux.

⛔️ What we won’t Cover #

• Creating the video content — that’s down to you!
• SvelteKit basics,
• Mux analytics.

🌱 Svelte Video Blog: Let’s get Going! #

If all that sounds like what you came here for, then why don’t we get going? We will start by setting up our free Mux account.

🏁 Svelte Video Blog: Vlog with Mux and SvelteKit: Summary #

What are SvelteKit endpoints all about? #

Sometimes you need to load data just before a page loads. You might fetch data from a database, call an external API, or even source data from local files. These operations might not be instant and to provide a better user experience, you may decide to load this data before SvelteKit renders the page for you. Endpoints are designed to provide this function. Separating data logic from the page markup. Standalone endpoints are a special type of SvelteKit endpoints, which can be called externally. Typically, endpoints generate JSON data, but you might use a standalone endpoint to serve an XML sitemap. You can also call your standalone endpoints from your Svelte markup, for example in a load function.

How can you lazy load video in Svelte? #

Lazy loading in Svelte is not too difficult. In fact, if you are already lazy loading images, you might already have the vanilla-lazyload package in your project. It is a very lightweight and efficient plugin making use of the Intersection Observer API. vanilla-lazyload will wait until your images are just about to be scrolled into view before loading them, optimizing your page load. If your video is using a player like hls.js to load Mux hosted content, you might decide to add a Svelte action to lazy load the player. Using the Mutation Observer API with vanilla-lazyload, you can set hls.js to load video only when as it scrolls into view.

How can you add Mux a HLS video player to a Svelte site? #

Mux has a nice API making, simplifying uploading content for developers. It works with a number of player plugins or even using HTML components. Hls.js is a nice alternative offering widespread compatibility. It is also a mature project and offers stability. Using lazy loading, you can efficiently load Mux content in your SvelteKit project.

🙌🏽 Svelte Video Blog: Wrapping Up #

In this tutorial, we built out a complete SvelteKit video blog app:

• how to build a blog site with dynamic routes, authoring content in MDsveX (Svelte in Markdown),
• adding video to a SvelteKit site using the Mux video hosting service,
• how to lazy load components in SvelteKit, accessing the component lifecycle with Svelte actions.

I hope you found the tutorial useful and am keen to hear where your Svelte and SvelteKit journey takes you next!