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-schemein your media queries to automatically have your page switch between
lightmode for users according to their system settings. Note that
lightcan also mean a user has no preference.
optimization.minimizeis set to
trueby default, which might lead you to think that TerserWebpackPlugin will be used with its default options (with
optimization.minimizeris not specified. However, comments with
/*!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
- 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