Dark mode, light mode or minimised? Just make sure they help with the vitals.

This is my fourth weekly post since July, a bit of a slow week here and I thought why not have only three items instead of five this time, but expand on them ever so slightly more. It's still a short one with more breadth than depth, with a tiny rebalancing. Without further ado, let's dive shallowly into CSS, Webpack, and Core Web Vitals.

• CSS: use prefers-color-scheme in your media queries to automatically have your page switch between dark mode and light mode for users according to their system settings. Note that light can also mean a user has no preference.
• Webpack: optimization.minimize is set to true by default, which might lead you to think that TerserWebpackPlugin will be used with its default options (with extractComments set to true) when optimization.minimizer is not specified. However, comments with @license, @preserve, and /*! will not be extracted to separate files by default.
• Core Web Vitals: Google Search has started to take page experience signals into consideration, thus the current Core Web Vitals metrics will affect the ranking of a page, they are: Largest Content Paint (LCP) for loading performance, First Input Delay (FID) for interactivity, and Cumulative Layout Shift (CLS) for visual stability.

Thank you for reading and do let me know your thoughts about this post. If you want more content like this to be delivered to you, consider subscribing via Substack: smallpotatodev.substack.com

Related Links

• MDN documentation on prefers-color-scheme: developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• Webpack author's comment on GitHub: github.com/webpack/webpack/issues/324
• TerserWebpackPlugin on GitHub: github.com/webpack-contrib/terser-webpack-plugin
• Google Search Central Blog on page experience update: developers.google.com/search/blog/2021/04/more-details-page-experience