Performance Tips for Background Video

From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files.  Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this.  How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020.  webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode.  The real hash of the content - previously only the hash of the internal structure was used in webpack.  Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file.  Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together.  See here for the complete changelog.  While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections.  Please note that these updates are subject to change based on the ever-changing world of web developers.  Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications.  To improve ESM support, the webpack team is planning to make some important updates.  Self-executing snippets One of the most interesting features of webpack is code splitting.  This feature allows you to split your code into multiple packages that you can download on demand or in parallel.  At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly.  For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module.  This can result in less code generated.  ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing.  This is very useful when using external services that offer their APIs as EcmaScript modules.  Here's an example: JavaScript import {event} from "" // Changes to: import ("" ) 12345 import {event} from "" // Changes to: import ("") Such the function will help to gracefully handle errors with external dependencies.  ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports.  This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created.  Instead, each module in the modules graph will be released as a separate file.  Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created.  While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them.  SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file.  In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version.  This utility helps you debug applications even after resources have been compressed / optimized.  Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021.  They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json.  This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.).  In a later release, private imports were also supported in Node.js (similar to the export field in package.json).  For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development.  Import fields for private imports are another feature to look out for in 2021.  HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot.  This can significantly speed up development by preserving application state that would have been lost on a hard reboot.  Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools.  Webpack 5 ships with a new feature called “Module Federation”.  This feature allows you to integrate multiple assemblies together at runtime.  HMR currently only supports one assembly at a time and updates cannot move between assemblies.  The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps.  Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint.  Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him.  However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems.  An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?";  or "Easy to encode the space with the space function."  WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine."  This means that you can build your software with programming languages ​​like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance.  In the current version of webpack, WebAssembly is experimental and not enabled by default.  The default support is what the webpack team will hopefully add this year.  Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient.  Author: Elijah Asaolu Source: Editorial: The webformyself team.  JavaScript.  Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack.  The Basics Watch the Webpack Video!  Look

Performance Tips for Background Video

From the author: video on the net can be a double-edged sword. Autoplay video sites are reporting growing popularity (who hasn’t stopped on social media to see what the video is about?), Resulting in longer website visits. However, if the video doesn’t play quickly or smoothly, visitors can get frustrated and you run the risk of alienating the very customers who should have been more deeply involved.

There are many different use cases for online video delivery. In this post, I want to talk about the use of background videos on the web and how we can improve their delivery and playback.

Background video is a great way to improve the delivery of content on your website. In addition to words and images, there is some movement in the background that can help your customers better understand your services and why they should use them. But things can go wrong. The two biggest problems I’ve seen are:

Users scroll through the video before it starts. If they never see the video being played, the purpose of the video is lost.

The background video keeps starting and stopping. Every time the video stops, it initiates a context change, distracting the visitor.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

So what can you do to make the video added to your site play quickly and efficiently? Here are some tips that can help speed up video delivery.

Alternative formats

By using the video and source tag, you can provide various video formats. The webm format usually results in smaller file sizes, so browsers that support this format can deliver the video to the end user faster:

Remove audio track

Since the background video and (looped GIF video) generally do not play audio, removing the audio track from a video can reduce its size by 5-10%. For example, this is ffprobe’s output from a background video:

This is an audio track, and it plays at 192 kbps, no one can hear it. Removing this would drastically reduce the file size and improve playback. (If you want to use ffprobe for video, it is part of FFMPEG, I created an API – you can find it at // )

Tip: A quiet audio track still takes up “space” in the video file. While it is true that empty data is compressed very well, completely removing the audio track from a video file saves even more space. With FFMPEG and other video editing tools, this can be done easily.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more

Poster tag: delete the poster

In the video tag, you can specify a poster image that appears before the video is played. This file will be loaded before (or at the same time) with the video, which will delay the video playback. He can also add a poster flash before the start of the video, which can be confusing.

In the example below, a bunny flash appears in the poster image before the start of the video.

Mobile Downloads

If a background video doesn’t appear on a mobile site, it’s important to remember that the display: none CSS property doesn’t mean download: none either. Your servers are still delivering several MB of video content to each of your mobile users. Decision. Use JavaScript to display the video attribute only for a specific screen size. When I load this page on a smaller screen, the video does not play, but I have 4.0 MB of video loaded. When the screen width is> 768 pixels, the video starts playing in the background. In other words, mobile users will NEVER SEE 41% of the content loaded on this page.

While you are working on it, you can create a smaller version of the video for mobile devices and use the same JavaScript to deliver the smaller video to mobile devices, which will improve the experience for your mobile users. It’s worth checking that the video still looks good in portrait mode – you might want to consider another mobile video option.

Estimate the length

The length of the video does not actually affect the start of playback or the number of loops. But it’s important to remember that short videos work best for background videos, and probably 3-4 minute videos about your products are not suitable for this. (But post this video on your page for anyone interested!)

Lower your bitrate

Video bitrate is measured in megabytes per second – this is the amount of video that is used during each second of playback. To decrease the bitrate – you can either decrease the video size or increase the compression (which affects the quality). Another important point to keep in mind is that US cellular operators are increasing video playback speeds on their networks to 1.5MB / s (for example, T-Mobile’s BingeOn and AT&T’s StreamSaver). Having a video that can play at less than 1.3 MB / s (leaving room for other files) is critical to successful streaming on US mobile devices.

Test video playback

Finally, you should always check the video playback. I created StreamOrNot, a free tool that measures the start time and latency characteristics of any video on the Internet. You can use your favorite network throttling mechanism to see how fast your video will play under different conditions. If you find that the video takes too long to start playing, you can re-encode it at a lower resolution or slightly increase the compression – reducing the file size and ensuring faster video transfer to the browser.

Video on the Internet is not that hard, but there are a few simple steps you can take to ensure your videos can be played quickly by users. By ensuring that the video bit rate is high enough (by removing the audio track, downsizing and compressing the video), you can ensure that the background video plays quickly and without interruption. Testing with tools like StreamOrNot can help you determine if a video will run fast enough for your end users.

Author: Doug sillars

A source: //

Editorial staff: Webformyself team.

JavaScript. Fast start

Learn JavaScript basics with a hands-on example of building a web application

Learn more


Layout of the site in HTML5 and CSS3 from scratch


Leave a Reply

Your email address will not be published.