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 betweendark
mode andlight
mode for users according to their system settings. Note thatlight
can also mean a user has no preference. - Webpack:
optimization.minimize
is set totrue
by default, which might lead you to think that TerserWebpackPlugin will be used with its default options (withextractComments
set totrue
) whenoptimization.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